feat(SW-1509): simplified date of birth component to work with new select

added animated labels to new select

apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx

@@ -1,13 +1,13 @@
 "use client"
 import { parseDate } from "@internationalized/date"
 import { useEffect } from "react"
-import { DateInput, DatePicker, Group, type Key } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Select } from "@scandic-hotels/design-system/Select"
+
 import { dt } from "@/lib/dt"
 
-import Select from "@/components/TempDesignSystem/Select"
 import useLang from "@/hooks/useLang"
 import { getLocalizedMonthName } from "@/utils/dateFormatting"
 import { rangeArray } from "@/utils/rangeArray"
@@ -125,87 +125,45 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   }, [setValue, formState.isSubmitting, dateValue, day, month, year])
 
   return (
-    <DatePicker
-      aria-label={intl.formatMessage({
-        defaultMessage: "Select date of birth",
-      })}
-      isRequired={!!registerOptions.required}
-      isInvalid={!formState.isValid}
-      name={name}
-      ref={field.ref}
-      value={dateValue}
-      data-testid={name}
-    >
-      <Group>
-        <DateInput className={styles.container}>
-          {(segment) => {
-            switch (segment.type) {
-              case "day":
-                return (
-                  <div
-                    className={`${styles.day} ${fieldState.invalid ? styles.invalid : ""}`}
-                  >
-                    <Select
-                      aria-label={dayLabel}
-                      items={days}
-                      label={dayLabel}
-                      name={DateName.day}
-                      onSelect={(key: Key) =>
-                        setValue(DateName.day, Number(key))
-                      }
-                      required
-                      tabIndex={3}
-                      value={segment.isPlaceholder ? undefined : segment.value}
-                    />
-                  </div>
-                )
-              case "month":
-                return (
-                  <div
-                    className={`${styles.month} ${fieldState.invalid ? styles.invalid : ""}`}
-                  >
-                    <Select
-                      aria-label={monthLabel}
-                      items={months}
-                      label={monthLabel}
-                      name={DateName.month}
-                      onSelect={(key: Key) =>
-                        setValue(DateName.month, Number(key))
-                      }
-                      required
-                      tabIndex={2}
-                      value={segment.isPlaceholder ? undefined : segment.value}
-                    />
-                  </div>
-                )
-              case "year":
-                return (
-                  <div
-                    className={`${styles.year} ${fieldState.invalid ? styles.invalid : ""}`}
-                  >
-                    <Select
-                      aria-label={yearLabel}
-                      items={years}
-                      label={yearLabel}
-                      name={DateName.year}
-                      onSelect={(key: Key) =>
-                        setValue(DateName.year, Number(key))
-                      }
-                      required
-                      tabIndex={1}
-                      value={segment.isPlaceholder ? undefined : segment.value}
-                    />
-                  </div>
-                )
-              default:
-                /** DateInput forces return of ReactElement */
-                return <></>
-            }
-          }}
-        </DateInput>
-      </Group>
+    <>
+      <div className={styles.container}>
+        <div className={styles.segment}>
+          <Select
+            items={days}
+            label={dayLabel}
+            name={DateName.day}
+            onSelectionChange={(key) => setValue(DateName.day, Number(key))}
+            isInvalid={fieldState.invalid}
+            isRequired
+            enableFiltering
+            defaultSelectedKey={day}
+          />
+        </div>
+        <div className={styles.segment}>
+          <Select
+            items={months}
+            label={monthLabel}
+            name={DateName.month}
+            onSelectionChange={(key) => setValue(DateName.month, Number(key))}
+            isRequired
+            enableFiltering
+            defaultSelectedKey={month}
+          />
+        </div>
+        <div className={styles.segment}>
+          <Select
+            items={years}
+            label={yearLabel}
+            name={DateName.year}
+            onSelectionChange={(key) => setValue(DateName.year, Number(key))}
+            isRequired
+            enableFiltering
+            defaultSelectedKey={year}
+          />
+        </div>
+      </div>
       <ErrorMessage errors={formState.errors} name={field.name} />
-    </DatePicker>
+    </>
   )
 }