@vygruppen/spor-react 12.8.3 → 12.8.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.3",
+  "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

package/src/input/Combobox.tsx

@@ -24,7 +24,6 @@ export type ComboboxProps<T> = Exclude<
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     variant?: "core" | "floating";
-    children?: React.ReactNode;
   };
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -76,6 +75,17 @@ export const Combobox = (props: ComboboxProps<object>) => {
     inputRef: externalInputRef,
     children,
     variant,
+    allowsEmptyCollection,
+    onSelectionChange,
+    inputValue,
+    onInputChange,
+    menuTrigger,
+    allowsCustomValue,
+    onFocusChange,
+    defaultInputValue,
+    defaultItems,
+    defaultSelectedKey,
+    onOpenChange,
     ...restProps
   } = props;
   const { contains } = useFilter({ sensitivity: "base" });
@@ -85,13 +95,24 @@ export const Combobox = (props: ComboboxProps<object>) => {
   const listBoxRef = useRef<HTMLUListElement>(null);
   const popoverRef = useRef(null);
 
-  const listboxId = `${useId()}-listbox`;
+  const listboxId = useId();
 
   const inputWidth = useInputWidth(inputRef);
 
   const state = useComboBoxState({
     defaultFilter: contains,
     shouldCloseOnBlur: true,
+    allowsEmptyCollection,
+    onSelectionChange,
+    inputValue,
+    onInputChange,
+    menuTrigger,
+    allowsCustomValue,
+    onFocusChange,
+    defaultInputValue,
+    defaultItems,
+    defaultSelectedKey,
+    onOpenChange,
     ...props,
   });
 
@@ -110,22 +131,34 @@ export const Combobox = (props: ComboboxProps<object>) => {
     paddingLeft,
     paddingX,
     paddingY,
-    leftIcon,
   };
 
-  const {
-    inputProps: { ...inputProps },
-    listBoxProps,
-  } = useComboBox(
+  const { inputProps, listBoxProps } = useComboBox(
     {
       ...props,
       inputRef,
       listBoxRef,
       popoverRef,
       label,
+      onSelectionChange,
+      inputValue,
+      onInputChange,
+      menuTrigger,
+      allowsCustomValue,
+      onFocusChange,
+      defaultInputValue,
+      defaultItems,
+      defaultSelectedKey,
+      onOpenChange,
     },
     state,
   );
+
+  // Remove aria-labelledby and id from inputProps, as these are handled by the Input component
+  // This prevents potential conflicts or duplication of accessibility attributes
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { "aria-labelledby": _, id: __, ...filteredInputProps } = inputProps;
+
   return (
     <>
       <Input
@@ -151,7 +184,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
           state.isOpen && !loading ? 0 : borderBottomRightRadius
         }
         _active={{ backgroundColor: "core.surface.active" }}
-        {...inputProps}
+        {...filteredInputProps}
         startElement={leftIcon}
         endElement={
           loading ? (
@@ -215,6 +248,7 @@ Combobox.displayName = "Combobox";
 
 const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {
   const [inputWidth, setInputWidth] = useState("auto");
+
   useEffect(() => {
     const onResize = debounce(() => {
       if (inputRef.current) {