@vygruppen/spor-react 12.3.1 → 12.3.3

package/dist/index.js

@@ -417,7 +417,7 @@ var ProgressLoader = React28.forwardRef(
     "aria-label": ariaLabel,
     width,
     ...rest
-  }) => {
+  }, ref) => {
     const { t } = useTranslation();
     const currentLoadingText = useRotatingLabel({
       label,
@@ -445,6 +445,7 @@ var ProgressLoader = React28.forwardRef(
         "aria-valuemax": 100,
         "aria-label": ariaLabel ?? t(texts.fallbackLabel(value ?? "?")),
         ...rest,
+        ref,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(react.chakra.svg, { as: "svg", viewBox: "0 0 246 78", fill: "none", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -630,7 +631,7 @@ var LoadingContent = ({
 }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { gap: "1", visibility: "hidden", children }),
   /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { position: "absolute", inset: "1px 0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ColorInlineLoader, { width: "80%", marginX: 2, marginY: 2 }),
+    /* @__PURE__ */ jsxRuntime.jsx(ColorInlineLoader, { maxWidth: "8", marginX: 2, marginY: 2 }),
     loadingText && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: loadingText })
   ] })
 ] });
@@ -927,9 +928,9 @@ var IconButton = React28.forwardRef(
       {
         "aria-label": props["aria-label"],
         size,
-        ref,
         position: "relative",
         ...rest,
+        ref,
         children: loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "2em", height: "2em", margin: 1 }) : icon
       }
     );
@@ -942,18 +943,18 @@ var CloseButton = React28.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       IconButton,
       {
-        ref,
         variant: "ghost",
-        icon: getIcon(size),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size }),
         size,
         "aria-label": props["aria-label"] || t(texts4.close),
-        ...props
+        ...props,
+        ref
       }
     );
   }
 );
 CloseButton.displayName = "CloseButton";
-var getIcon = (size) => {
+var CloseIcon = ({ size }) => {
   switch (size) {
     case "xs":
     case "sm": {
@@ -965,6 +966,9 @@ var getIcon = (size) => {
     case "lg": {
       return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseFill30Icon, {});
     }
+    default: {
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseFill18Icon, {});
+    }
   }
 };
 var texts4 = createTexts({
@@ -1045,19 +1049,23 @@ var useScrollDirection = () => {
   }, [scrollDirection]);
   return scrollDirection;
 };
-var AlertIcon = ({ variant, customIcon }) => {
-  const { t } = useTranslation();
-  const icon = customIcon ?? getIcon2(variant);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.Box,
-    {
-      as: icon,
-      "aria-label": t(texts5[variant]),
-      color: customIcon ? `alert.${variant}.icon` : void 0
-    }
-  );
-};
-var getIcon2 = (variant) => {
+var AlertIcon = React28.forwardRef(
+  ({ variant, customIcon }, ref) => {
+    const { t } = useTranslation();
+    const Icon2 = customIcon ?? getIcon(variant);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.Box,
+      {
+        as: Icon2,
+        ref,
+        "aria-label": t(texts5[variant]),
+        color: customIcon ? `alert.${variant}.icon` : void 0
+      }
+    );
+  }
+);
+AlertIcon.displayName = "AlertIcon";
+var getIcon = (variant) => {
   switch (variant) {
     case "info": {
       return sporIconReact.InformationFill24Icon;
@@ -2254,14 +2262,14 @@ var texts8 = createTexts({
     en: "Calendar"
   }
 });
-var CalendarTriggerButton = React28.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }) => {
+var CalendarTriggerButton = React28.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "datePicker",
     recipe: datePickerSlotRecipe
   });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { ...buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { ...buttonProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
     IconButton,
     {
       icon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CalendarOutline24Icon, {}),
@@ -2458,6 +2466,7 @@ var DatePicker = React28.forwardRef(
     width = "auto",
     invalid = false,
     helperText,
+    positioning,
     ...props
   }, externalRef) => {
     const chakraFieldProps = react.useFieldContext();
@@ -2501,7 +2510,7 @@ var DatePicker = React28.forwardRef(
         display: "inline-flex",
         flexDirection: "column",
         width,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Root, { ...dialogProps, children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Root, { ...dialogProps, positioning, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Field3,
             {
@@ -2593,6 +2602,7 @@ function DateRangePicker({
   errorText,
   helperText,
   invalid,
+  positioning,
   ...props
 }) {
   const fieldContextPRops = react.useFieldContext();
@@ -2627,7 +2637,7 @@ function DateRangePicker({
   const popoverContent = /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { maxWidth: "60rem", children: /* @__PURE__ */ jsxRuntime.jsx(RangeCalendar, { variant: "core", ...calendarProps }) }) }) });
   return /* @__PURE__ */ jsxRuntime.jsx(reactAria.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column", children: [
     props.label && /* @__PURE__ */ jsxRuntime.jsx("label", { ...labelProps, htmlFor: datePickerId, children: props.label }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Root, { ...dialogProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Root, { ...dialogProps, positioning, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Field3,
         {
@@ -3165,147 +3175,145 @@ var Popover = React28.forwardRef(
   }
 );
 Popover.displayName = "Popover";
-var Combobox = React28.forwardRef(
-  (props) => {
-    const {
-      label,
-      loading,
-      lefticon,
-      righticon,
-      borderBottomLeftRadius = "sm",
-      borderBottomRightRadius = "sm",
-      borderTopLeftRadius = "sm",
-      borderTopRightRadius = "sm",
-      marginBottom,
-      marginTop,
-      marginX,
-      marginY,
-      marginRight,
-      marginLeft,
-      paddingBottom,
-      paddingRight,
-      paddingTop,
-      paddingLeft,
-      paddingX,
-      paddingY,
-      emptyContent,
-      inputRef: externalInputRef,
-      children,
-      variant
-    } = props;
-    const { contains } = reactAria.useFilter({ sensitivity: "base" });
-    const fallbackInputRef = React28.useRef(null);
-    const inputRef = externalInputRef ?? fallbackInputRef;
-    const listBoxRef = React28.useRef(null);
-    const popoverRef = React28.useRef(null);
-    const listboxId = `${React28.useId()}-listbox`;
-    const inputWidth = useInputWidth(inputRef);
-    const state = reactStately.useComboBoxState({
-      defaultFilter: contains,
-      shouldCloseOnBlur: true,
-      ...props
-    });
-    const comboBoxProps = {
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      marginBottom,
-      marginTop,
-      marginRight,
-      marginLeft,
-      marginX,
-      marginY,
-      paddingBottom,
-      paddingRight,
-      paddingTop,
-      paddingLeft,
-      paddingX,
-      paddingY,
-      lefticon
-    };
-    const {
-      inputProps: { ...inputProps },
-      listBoxProps
-    } = reactAria.useComboBox(
+var Combobox = (props) => {
+  const {
+    label,
+    loading,
+    lefticon,
+    righticon,
+    borderBottomLeftRadius = "sm",
+    borderBottomRightRadius = "sm",
+    borderTopLeftRadius = "sm",
+    borderTopRightRadius = "sm",
+    marginBottom,
+    marginTop,
+    marginX,
+    marginY,
+    marginRight,
+    marginLeft,
+    paddingBottom,
+    paddingRight,
+    paddingTop,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    emptyContent,
+    inputRef: externalInputRef,
+    children,
+    variant
+  } = props;
+  const { contains } = reactAria.useFilter({ sensitivity: "base" });
+  const fallbackInputRef = React28.useRef(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
+  const listBoxRef = React28.useRef(null);
+  const popoverRef = React28.useRef(null);
+  const listboxId = `${React28.useId()}-listbox`;
+  const inputWidth = useInputWidth(inputRef);
+  const state = reactStately.useComboBoxState({
+    defaultFilter: contains,
+    shouldCloseOnBlur: true,
+    ...props
+  });
+  const comboBoxProps = {
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    marginBottom,
+    marginTop,
+    marginRight,
+    marginLeft,
+    marginX,
+    marginY,
+    paddingBottom,
+    paddingRight,
+    paddingTop,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    lefticon
+  };
+  const {
+    inputProps: { ...inputProps },
+    listBoxProps
+  } = reactAria.useComboBox(
+    {
+      ...props,
+      inputRef,
+      listBoxRef,
+      popoverRef,
+      label
+    },
+    state
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
       {
-        ...props,
-        inputRef,
-        listBoxRef,
-        popoverRef,
-        label
-      },
-      state
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          ...styleProps(comboBoxProps),
-          "aria-haspopup": "listbox",
-          ref: inputRef,
-          role: "combobox",
-          errorText: props.errorText,
-          helperText: props.helperText,
-          required: props.required,
-          disabled: props.disabled,
-          invalid: props.invalid,
-          label,
-          variant,
-          "aria-expanded": state.isOpen,
-          "aria-autocomplete": "list",
-          "aria-controls": listboxId,
-          borderBottomLeftRadius: state.isOpen && !loading ? 0 : borderBottomLeftRadius,
-          borderBottomRightRadius: state.isOpen && !loading ? 0 : borderBottomRightRadius,
-          _active: { backgroundColor: "core.surface.active" },
-          ...inputProps,
-          endElement: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-            ColorSpinner,
-            {
-              width: "1.5rem",
-              alignSelf: "center",
-              paddingRight,
-              css: {
-                div: {
-                  display: "flex",
-                  alignItems: "center"
-                }
+        ...styleProps(comboBoxProps),
+        "aria-haspopup": "listbox",
+        ref: inputRef,
+        role: "combobox",
+        errorText: props.errorText,
+        helperText: props.helperText,
+        required: props.required,
+        disabled: props.disabled,
+        invalid: props.invalid,
+        label,
+        variant,
+        "aria-expanded": state.isOpen,
+        "aria-autocomplete": "list",
+        "aria-controls": listboxId,
+        borderBottomLeftRadius: state.isOpen && !loading ? 0 : borderBottomLeftRadius,
+        borderBottomRightRadius: state.isOpen && !loading ? 0 : borderBottomRightRadius,
+        _active: { backgroundColor: "core.surface.active" },
+        ...inputProps,
+        endElement: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          ColorSpinner,
+          {
+            width: "1.5rem",
+            alignSelf: "center",
+            paddingRight,
+            css: {
+              div: {
+                display: "flex",
+                alignItems: "center"
               }
             }
-          ) : righticon,
-          placeholder: ""
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
-      state.isOpen && !loading && /* @__PURE__ */ jsxRuntime.jsx(
-        Popover,
-        {
-          state,
-          triggerRef: inputRef,
-          ref: popoverRef,
-          isNonModal: true,
-          placement: "bottom start",
-          shouldFlip: false,
-          hasBackdrop: false,
-          containerPadding: 0,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            ListBox,
-            {
-              ...{
-                autoFocus: typeof listBoxProps.autoFocus === "boolean" ? listBoxProps.autoFocus : void 0
-              },
-              state,
-              id: listboxId,
-              listBoxRef,
-              emptyContent,
-              maxWidth: inputWidth,
-              variant,
-              children
-            }
-          )
-        }
-      )
-    ] });
-  }
-);
+          }
+        ) : righticon,
+        placeholder: ""
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
+    state.isOpen && !loading && /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        state,
+        triggerRef: inputRef,
+        ref: popoverRef,
+        isNonModal: true,
+        placement: "bottom start",
+        shouldFlip: false,
+        hasBackdrop: false,
+        containerPadding: 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ListBox,
+          {
+            ...{
+              autoFocus: typeof listBoxProps.autoFocus === "boolean" ? listBoxProps.autoFocus : void 0
+            },
+            state,
+            id: listboxId,
+            listBoxRef,
+            emptyContent,
+            maxWidth: inputWidth,
+            variant,
+            children
+          }
+        )
+      }
+    )
+  ] });
+};
 Combobox.displayName = "Combobox";
 var useInputWidth = (inputRef) => {
   const [inputWidth, setInputWidth] = React28.useState("auto");
@@ -3470,31 +3478,29 @@ var Input = React28.forwardRef(
   }
 );
 Input.displayName = "Input";
-var ListBox = React28.forwardRef(
-  (props) => {
-    const { loading, listBoxRef, state, maxWidth, variant, children } = props;
-    const { listBoxProps } = reactAria.useListBox(props, state, listBoxRef);
-    const recipe = react.useSlotRecipe({ key: "listBox" });
-    const styles = recipe({ variant });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      List,
-      {
-        ...listBoxProps,
-        ref: listBoxRef,
-        css: styles.root,
-        "aria-busy": loading,
-        maxWidth,
-        children: [
-          state.collection.size === 0 && props.emptyContent,
-          [...state.collection].map(
-            (item) => item.type === "section" ? /* @__PURE__ */ jsxRuntime.jsx(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
-          ),
-          children
-        ]
-      }
-    );
-  }
-);
+var ListBox = (props) => {
+  const { loading, listBoxRef, state, maxWidth, variant, children } = props;
+  const { listBoxProps } = reactAria.useListBox(props, state, listBoxRef);
+  const recipe = react.useSlotRecipe({ key: "listBox" });
+  const styles = recipe({ variant });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    List,
+    {
+      ...listBoxProps,
+      ref: listBoxRef,
+      css: styles.root,
+      "aria-busy": loading,
+      maxWidth,
+      children: [
+        state.collection.size === 0 && props.emptyContent,
+        [...state.collection].map(
+          (item) => item.type === "section" ? /* @__PURE__ */ jsxRuntime.jsx(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
+        ),
+        children
+      ]
+    }
+  );
+};
 ListBox.displayName = "ListBox";
 function ItemLabel({ children }) {
   const { labelProps } = useOptionContext();
@@ -3874,7 +3880,7 @@ var numericStepperRecipe = react.defineSlotRecipe({
     }
   }
 });
-var NumericStepper = React28__namespace.default.forwardRef((props) => {
+var NumericStepper = React28__namespace.default.forwardRef((props, ref) => {
   const {
     name: nameProp,
     id: idProp,
@@ -3904,7 +3910,7 @@ var NumericStepper = React28__namespace.default.forwardRef((props) => {
     var _a5;
     (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, ref, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       VerySmallButton,
       {
@@ -4450,42 +4456,44 @@ var SelectValueText = React28__namespace.forwardRef(function SelectValueText2(pr
 var SelectLabel = react.Select.Label;
 var SelectItemText = react.Select.ItemText;
 var SelectRoot = react.Select.Root;
-var Switch = React28.forwardRef((props) => {
-  const {
-    rootRef,
-    size = "md",
-    label,
-    invalid,
-    errorText,
-    helperText,
-    ...rest
-  } = props;
-  const recipe = react.useSlotRecipe({ key: "switch" });
-  const styles = recipe({ size });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Field3,
-    {
-      style: { width: "auto" },
+var Switch = React28.forwardRef(
+  (props, ref) => {
+    const {
+      rootRef,
+      size = "md",
+      label,
       invalid,
       errorText,
       helperText,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        react.Switch.Root,
-        {
-          ref: rootRef,
-          ...rest,
-          checked: props.checked,
-          css: styles.root,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Switch.HiddenInput, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Control, { css: styles.control, children: /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}) })
-          ]
-        }
-      )
-    }
-  );
-});
+      ...rest
+    } = props;
+    const recipe = react.useSlotRecipe({ key: "switch" });
+    const styles = recipe({ size });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Field3,
+      {
+        style: { width: "auto" },
+        invalid,
+        errorText,
+        helperText,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          react.Switch.Root,
+          {
+            ref: rootRef,
+            ...rest,
+            checked: props.checked,
+            css: styles.root,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.Switch.HiddenInput, { ref }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Control, { css: styles.control, children: /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 Switch.displayName = "Switch";
 var useLabelHeight = (label) => {
   const labelRef = React28.useRef(null);
@@ -4866,7 +4874,7 @@ var LineIcon = React28.forwardRef(
     target = "lineIcon",
     label,
     ...rest
-  }) {
+  }, ref) {
     const recipe = react.useSlotRecipe({ key: "lineIcon" });
     const styles = recipe({ variant, size, ...rest });
     const targetPadding = () => {
@@ -4896,6 +4904,7 @@ var LineIcon = React28.forwardRef(
         borderWidth: borderContainer(),
         borderColor: variant === "walk" ? "core.outline" : "transparent",
         "aria-label": label,
+        ref,
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { css: styles.icon })
       }
     );
@@ -5989,7 +5998,7 @@ var ProgressDot = ({ isActive }) => {
     }
   );
 };
-var ProgressIndicator = React28.forwardRef(({ numberOfSteps, activeStep }) => {
+var ProgressIndicator = React28.forwardRef(({ numberOfSteps, activeStep }, ref) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "progressIndicator"
@@ -6004,6 +6013,7 @@ var ProgressIndicator = React28.forwardRef(({ numberOfSteps, activeStep }) => {
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
       "aria-valuetext": t(texts24.stepsOf(activeStep, numberOfSteps)),
+      ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles.container, children: Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
         ProgressDot,
         {