@vygruppen/spor-react 12.8.5 → 12.8.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.5",
+  "version": "12.8.6",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/datepicker/CalendarTriggerButton.tsx

@@ -18,12 +18,13 @@ type CalendarTriggerButtonProps = AriaButtonProps<"button"> &
   BoxProps &
   CalendarVariants & {
     disabled?: boolean;
-    ariaLabelledby?: string;
   };
 export const CalendarTriggerButton = forwardRef<
   HTMLDivElement,
   CalendarTriggerButtonProps
->(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
+  // onPress is extracted because it is not supported by chakra.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({ variant, disabled, onPress: _, ...buttonProps }, ref) => {
   const { t } = useTranslation();
 
   const recipe = useSlotRecipe({
@@ -39,7 +40,6 @@ export const CalendarTriggerButton = forwardRef<
         css={styles.calendarTriggerButton}
         variant="ghost"
         disabled={disabled}
-        aria-labelledby={ariaLabelledby}
       />
     </PopoverAnchor>
   );

package/src/datepicker/DateField.tsx

@@ -27,10 +27,9 @@ type DateFieldProps = AriaDateFieldProps<DateValue> &
     label?: React.ReactNode;
     labelProps?: DOMAttributes<FocusableElement>;
     name?: string;
-    labelId?: string;
   };
 export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
-  ({ labelId, ...props }, externalRef) => {
+  (props, externalRef) => {
     const locale = useCurrentLocale();
 
     const recipe = useSlotRecipe({
@@ -57,13 +56,12 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
       <Box minWidth="6rem" width="100%">
         {props.label && (
           <Box
-            as="label"
+            asChild
             css={styles.inputLabel}
             position="absolute"
             paddingTop="2px"
-            id={labelId}
           >
-            {props.label}
+            <label {...props.labelProps}>{props.label}</label>
           </Box>
         )}
         <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
@@ -72,7 +70,6 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
               key={i}
               segment={segment}
               ariaDescription={t(getAriaLabel(segment.type))}
-              ariaLabel={labelId}
               state={state}
             />
           ))}
@@ -81,6 +78,7 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
           type="hidden"
           value={state.value?.toString() ?? ""}
           name={props.name}
+          id={props.id}
         />
       </Box>
     );

package/src/datepicker/DatePicker.tsx

@@ -88,7 +88,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         ref as React.MutableRefObject<HTMLDivElement>,
       );
 
-    const labelId = `label-${useId()}`;
     const inputGroupId = `input-group-${useId()}`;
 
     const recipe = useSlotRecipe({
@@ -128,7 +127,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             <Field
               display="inline-flex"
               id={inputGroupId}
-              aria-labelledby={labelId}
               errorText={errorText}
               invalid={invalid}
               helperText={helperText}
@@ -140,7 +138,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   paddingX={3}
                   minHeight={minHeight}
                   isDisabled={props.isDisabled}
-                  ariaLabelledby={labelId}
                 >
                   <ChakraPopover.Trigger asChild>
                     <CalendarTriggerButton
@@ -154,7 +151,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   <DateField
                     label={props.label}
                     labelProps={labelProps}
-                    labelId={labelId}
                     name={props.name}
                     {...fieldProps}
                   />

package/src/datepicker/StyledField.tsx

@@ -14,12 +14,10 @@ type StyledFieldProps = BoxProps &
   PropsWithChildren<DatePickerVariantProps> &
   CalendarVariants & {
     isDisabled?: boolean;
-    ariaLabelledby?: string;
   };
 export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
   function StyledField(props, ref) {
-    const { children, variant, isDisabled, ariaLabelledby, ...otherProps } =
-      props;
+    const { children, variant, isDisabled, ...otherProps } = props;
     const { invalid } = useFieldContext() ?? {
       isInvalid: false,
     };
@@ -36,7 +34,6 @@ export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
         ref={ref}
         aria-invalid={invalid}
         aria-disabled={isDisabled}
-        aria-labelledby={ariaLabelledby}
       >
         {children}
       </Box>

package/src/datepicker/TimeField.tsx

@@ -39,7 +39,11 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
       </label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
         {state.segments.map((segment: DateSegment) => (
-          <DateTimeSegment key={segment.type} segment={segment} state={state} />
+          <DateTimeSegment
+            key={JSON.stringify(segment)}
+            segment={segment}
+            state={state}
+          />
         ))}
       </Flex>
       <input