feat(WEB-163): edit profile field validation

components/TempDesignSystem/Form/Date/index.tsx

@@ -1,11 +1,6 @@
 "use client"
 import { parseDate } from "@internationalized/date"
-import {
-  DateInput,
-  DatePicker,
-  DateSegment,
-  Group,
-} from "react-aria-components"
+import { DateInput, DatePicker, Group } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -23,7 +18,7 @@ import type { Key } from "react-aria-components"
 import type { DateProps } from "./date"
 
 /** TODO: Get selecting with Enter-key to work */
-export default function DateSelect({ name, registerOptions }: DateProps) {
+export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const { formatMessage } = useIntl()
   const d = useWatch({ name })
   const { control, setValue } = useFormContext()
@@ -84,7 +79,7 @@ export default function DateSelect({ name, registerOptions }: DateProps) {
                   )
                 }
                 return (
-                  <DateSegment className={styles.day} segment={segment}>
+                  <div className={styles.day}>
                     <Select
                       aria-label={dayLabel}
                       items={days}
@@ -92,13 +87,15 @@ export default function DateSelect({ name, registerOptions }: DateProps) {
                       name={DateName.date}
                       onSelect={createOnSelect(DateName.date)}
                       placeholder="DD"
+                      required
+                      tabIndex={3}
                       value={segment.value}
                     />
-                  </DateSegment>
+                  </div>
                 )
               case "month":
                 return (
-                  <DateSegment className={styles.month} segment={segment}>
+                  <div className={styles.month}>
                     <Select
                       aria-label={monthLabel}
                       items={months}
@@ -106,13 +103,15 @@ export default function DateSelect({ name, registerOptions }: DateProps) {
                       name={DateName.month}
                       onSelect={createOnSelect(DateName.month)}
                       placeholder="MM"
+                      required
+                      tabIndex={2}
                       value={segment.value}
                     />
-                  </DateSegment>
+                  </div>
                 )
               case "year":
                 return (
-                  <DateSegment className={styles.year} segment={segment}>
+                  <div className={styles.year}>
                     <Select
                       aria-label={yearLabel}
                       items={years}
@@ -120,9 +119,11 @@ export default function DateSelect({ name, registerOptions }: DateProps) {
                       name={DateName.year}
                       onSelect={createOnSelect(DateName.year)}
                       placeholder="YYYY"
+                      required
+                      tabIndex={1}
                       value={segment.value}
                     />
-                  </DateSegment>
+                  </div>
                 )
               default:
                 /** DateInput forces return of ReactElement */