@vygruppen/spor-react 12.8.3 → 12.8.6

package/dist/index.d.cts

@@ -1186,7 +1186,6 @@ type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size">
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     variant?: "core" | "floating";
-    children?: React__default.ReactNode;
 };
 /**
  * A combobox is a combination of an input and a list of suggestions.

package/dist/index.d.ts

@@ -1186,7 +1186,6 @@ type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size">
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     variant?: "core" | "floating";
-    children?: React__default.ReactNode;
 };
 /**
  * A combobox is a combination of an input and a list of suggestions.

package/dist/index.mjs

@@ -1705,7 +1705,7 @@ var texts8 = createTexts({
     en: "Calendar"
   }
 });
-var CalendarTriggerButton = forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
+var CalendarTriggerButton = forwardRef(({ variant, disabled, onPress: _, ...buttonProps }, ref) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "datePicker"
@@ -1718,8 +1718,7 @@ var CalendarTriggerButton = forwardRef(({ variant, disabled, ariaLabelledby, ...
       "aria-label": t(texts9.openCalendar),
       css: styles.calendarTriggerButton,
       variant: "ghost",
-      disabled,
-      "aria-labelledby": ariaLabelledby
+      disabled
     }
   ) });
 });
@@ -1782,7 +1781,7 @@ function createCalendar2(identifier) {
   }
 }
 var DateField = forwardRef(
-  ({ labelId, ...props }, externalRef) => {
+  (props, externalRef) => {
     var _a5;
     const locale = useCurrentLocale();
     const recipe = useSlotRecipe({
@@ -1806,12 +1805,11 @@ var DateField = forwardRef(
       props.label && /* @__PURE__ */ jsx(
         Box,
         {
-          as: "label",
+          asChild: true,
           css: styles.inputLabel,
           position: "absolute",
           paddingTop: "2px",
-          id: labelId,
-          children: props.label
+          children: /* @__PURE__ */ jsx("label", { ...props.labelProps, children: props.label })
         }
       ),
       /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
@@ -1819,7 +1817,6 @@ var DateField = forwardRef(
         {
           segment,
           ariaDescription: t(getAriaLabel(segment.type)),
-          ariaLabel: labelId,
           state
         },
         i
@@ -1829,7 +1826,8 @@ var DateField = forwardRef(
         {
           type: "hidden",
           value: ((_a5 = state.value) == null ? void 0 : _a5.toString()) ?? "",
-          name: props.name
+          name: props.name,
+          id: props.id
         }
       )
     ] });
@@ -1874,7 +1872,7 @@ var getAriaLabel = (segmentType) => {
 };
 var StyledField = forwardRef(
   function StyledField2(props, ref) {
-    const { children, variant, isDisabled, ariaLabelledby, ...otherProps } = props;
+    const { children, variant, isDisabled, ...otherProps } = props;
     const { invalid } = useFieldContext() ?? {
       };
     const recipe = useSlotRecipe({
@@ -1889,7 +1887,6 @@ var StyledField = forwardRef(
         ref,
         "aria-invalid": invalid,
         "aria-disabled": isDisabled,
-        "aria-labelledby": ariaLabelledby,
         children
       }
     );
@@ -1923,7 +1920,6 @@ var DatePicker = forwardRef(
       state,
       ref
     );
-    const labelId = `label-${useId()}`;
     const inputGroupId = `input-group-${useId()}`;
     const recipe = useSlotRecipe({
       key: "datePicker"
@@ -1954,7 +1950,6 @@ var DatePicker = forwardRef(
             {
               display: "inline-flex",
               id: inputGroupId,
-              "aria-labelledby": labelId,
               errorText,
               invalid,
               helperText,
@@ -1966,7 +1961,6 @@ var DatePicker = forwardRef(
                   paddingX: 3,
                   minHeight,
                   isDisabled: props.isDisabled,
-                  ariaLabelledby: labelId,
                   children: [
                     /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
                       CalendarTriggerButton,
@@ -1983,7 +1977,6 @@ var DatePicker = forwardRef(
                       {
                         label: props.label,
                         labelProps,
-                        labelId,
                         name: props.name,
                         ...fieldProps
                       }
@@ -2157,7 +2150,14 @@ var TimeField = ({ state, ...props }) => {
         children: props.label
       }
     ),
-    /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment) => /* @__PURE__ */ jsx(DateTimeSegment, { segment, state }, segment.type)) }),
+    /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment) => /* @__PURE__ */ jsx(
+      DateTimeSegment,
+      {
+        segment,
+        state
+      },
+      JSON.stringify(segment)
+    )) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -2596,6 +2596,17 @@ var Combobox = (props) => {
     inputRef: externalInputRef,
     children,
     variant,
+    allowsEmptyCollection,
+    onSelectionChange,
+    inputValue,
+    onInputChange,
+    menuTrigger,
+    allowsCustomValue,
+    onFocusChange,
+    defaultInputValue,
+    defaultItems,
+    defaultSelectedKey,
+    onOpenChange,
     ...restProps
   } = props;
   const { contains } = useFilter({ sensitivity: "base" });
@@ -2603,11 +2614,22 @@ var Combobox = (props) => {
   const inputRef = externalInputRef ?? fallbackInputRef;
   const listBoxRef = useRef(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
   });
   const comboBoxProps = {
@@ -2624,22 +2646,29 @@ var Combobox = (props) => {
     paddingTop,
     paddingLeft,
     paddingX,
-    paddingY,
-    leftIcon
+    paddingY
   };
-  const {
-    inputProps: { ...inputProps },
-    listBoxProps
-  } = useComboBox(
+  const { inputProps, listBoxProps } = useComboBox(
     {
       ...props,
       inputRef,
       listBoxRef,
       popoverRef,
-      label
+      label,
+      onSelectionChange,
+      inputValue,
+      onInputChange,
+      menuTrigger,
+      allowsCustomValue,
+      onFocusChange,
+      defaultInputValue,
+      defaultItems,
+      defaultSelectedKey,
+      onOpenChange
     },
     state
   );
+  const { "aria-labelledby": _, id: __, ...filteredInputProps } = inputProps;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Input,
@@ -2662,7 +2691,7 @@ var Combobox = (props) => {
         borderBottomLeftRadius: state.isOpen && !loading ? 0 : borderBottomLeftRadius,
         borderBottomRightRadius: state.isOpen && !loading ? 0 : borderBottomRightRadius,
         _active: { backgroundColor: "core.surface.active" },
-        ...inputProps,
+        ...filteredInputProps,
         startElement: leftIcon,
         endElement: loading ? /* @__PURE__ */ jsx(
           ColorSpinner,