@vygruppen/spor-react 12.3.0 → 12.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.3.0",
+  "version": "12.3.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -35,8 +35,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.0.6",
     "@vygruppen/spor-icon-react": "4.0.4",
+    "@vygruppen/spor-design-tokens": "4.0.6",
     "@vygruppen/spor-loader": "0.6.0"
   },
   "devDependencies": {
@@ -56,8 +56,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.0.1",
-    "@vygruppen/tsconfig": "0.1.0"
+    "@vygruppen/tsconfig": "0.1.0",
+    "@vygruppen/eslint-config": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/alert/AlertIcon.tsx

@@ -12,6 +12,7 @@ import {
   SuccessFill24Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
+import { forwardRef } from "react";
 
 import { createTexts, useTranslation } from "../i18n";
 import { AlertProps } from "./Alert";
@@ -24,19 +25,24 @@ type AlertIconProps = {
 /**
  * Internal component that shows the correct icon for the alert
  */
-export const AlertIcon = ({ variant, customIcon }: AlertIconProps) => {
-  const { t } = useTranslation();
+export const AlertIcon = forwardRef<SVGSVGElement, AlertIconProps>(
+  ({ variant, customIcon }, ref) => {
+    const { t } = useTranslation();
 
-  const icon = customIcon ?? getIcon(variant);
+    const Icon = customIcon ?? getIcon(variant);
 
-  return (
-    <Box
-      as={icon}
-      aria-label={t(texts[variant as keyof typeof texts])}
-      color={customIcon ? `alert.${variant}.icon` : undefined}
-    />
-  );
-};
+    return (
+      <Box
+        as={Icon}
+        ref={ref}
+        aria-label={t(texts[variant as keyof typeof texts])}
+        color={customIcon ? `alert.${variant}.icon` : undefined}
+      />
+    );
+  },
+);
+
+AlertIcon.displayName = "AlertIcon";
 
 const getIcon = (variant: AlertProps["variant"]) => {
   switch (variant) {

package/src/button/Button.tsx

@@ -86,7 +86,7 @@ const LoadingContent = ({
       {children}
     </Flex>
     <Center position="absolute" inset="1px 0">
-      <ColorInlineLoader width="80%" marginX={2} marginY={2} />
+      <ColorInlineLoader maxWidth="8" marginX={2} marginY={2} />
       {loadingText && <Box>{loadingText}</Box>}
     </Center>
   </>

package/src/button/CloseButton.tsx

@@ -32,19 +32,19 @@ export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
     const { t } = useTranslation();
     return (
       <IconButton
-        ref={ref}
         variant="ghost"
-        icon={getIcon(size)}
+        icon={<CloseIcon size={size} />}
         size={size}
         aria-label={props["aria-label"] || t(texts.close)}
         {...props}
+        ref={ref}
       />
     );
   },
 );
 CloseButton.displayName = "CloseButton";
 
-const getIcon = (size: CloseButtonProps["size"]) => {
+const CloseIcon = ({ size }: { size: CloseButtonProps["size"] }) => {
   switch (size) {
     case "xs":
     case "sm": {
@@ -56,6 +56,9 @@ const getIcon = (size: CloseButtonProps["size"]) => {
     case "lg": {
       return <CloseFill30Icon />;
     }
+    default: {
+      return <CloseFill18Icon />;
+    }
   }
 };
 

package/src/button/IconButton.tsx

@@ -63,9 +63,9 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       <ChakraIconButton
         aria-label={props["aria-label"]}
         size={size}
-        ref={ref}
         position={"relative"}
         {...rest}
+        ref={ref}
       >
         {loading ? <ColorSpinner width="2em" height="2em" margin={1} /> : icon}
       </ChakraIconButton>

package/src/datepicker/CalendarTriggerButton.tsx

@@ -24,7 +24,7 @@ type CalendarTriggerButtonProps = AriaButtonProps<"button"> &
 export const CalendarTriggerButton = forwardRef<
   HTMLDivElement,
   CalendarTriggerButtonProps
->(({ variant, disabled, ariaLabelledby, ...buttonProps }) => {
+>(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "datePicker",
@@ -33,7 +33,7 @@ export const CalendarTriggerButton = forwardRef<
   const styles = recipe({ variant });
 
   return (
-    <PopoverAnchor {...buttonProps}>
+    <PopoverAnchor {...buttonProps} ref={ref}>
       <IconButton
         icon={<CalendarOutline24Icon />}
         aria-label={t(texts.openCalendar)}

package/src/datepicker/DatePicker.tsx

@@ -4,6 +4,7 @@ import {
   BoxProps,
   Popover as ChakraPopover,
   PopoverAnchor,
+  PopoverRootProps,
   Portal,
   RecipeVariantProps,
   useFieldContext,
@@ -40,6 +41,7 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
     showYearNavigation?: boolean;
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
+    positioning?: PopoverRootProps["positioning"];
   } & FieldBaseProps;
 
 /**
@@ -63,6 +65,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       width = "auto",
       invalid = false,
       helperText,
+      positioning,
       ...props
     },
     externalRef,
@@ -75,6 +78,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       isRequired: props.isRequired ?? chakraFieldProps?.required,
       validationState: chakraFieldProps?.invalid ? "invalid" : "valid",
     });
+
     const internalRef = useRef<HTMLDivElement>(null);
     const ref = externalRef ?? internalRef;
     const { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } =
@@ -120,7 +124,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           flexDirection="column"
           width={width}
         >
-          <ChakraPopover.Root {...dialogProps}>
+          <ChakraPopover.Root {...dialogProps} positioning={positioning}>
             <Field
               display="inline-flex"
               id={inputGroupId}

package/src/datepicker/DateRangePicker.tsx

@@ -4,6 +4,7 @@ import {
   BoxProps,
   Popover as ChakraPopover,
   PopoverAnchor,
+  PopoverRootProps,
   Portal,
   useFieldContext,
   useSlotRecipe,
@@ -46,6 +47,7 @@ type DateRangePickerProps = Omit<
         end: DateValue | null;
       } | null,
     ) => void;
+    positioning?: PopoverRootProps["positioning"];
   } & FieldBaseProps;
 /**
  * A date range picker component.
@@ -64,6 +66,7 @@ type DateRangePickerProps = Omit<
   errorText,
   helperText,
   invalid,
+  positioning,
   ...props
 }: DateRangePickerProps) {
   const fieldContextPRops = useFieldContext();
@@ -118,7 +121,7 @@ type DateRangePickerProps = Omit<
             {props.label}
           </label>
         )}
-        <ChakraPopover.Root {...dialogProps}>
+        <ChakraPopover.Root {...dialogProps} positioning={positioning}>
           <Field
             width="auto"
             display="inline-flex"

package/src/input/Combobox.tsx

@@ -1,12 +1,5 @@
 "use client";
-import React, {
-  forwardRef,
-  ReactNode,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from "react";
+import React, { ReactNode, useEffect, useId, useRef, useState } from "react";
 import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
 import { useComboBoxState } from "react-stately";
 
@@ -57,163 +50,162 @@ export type ComboboxProps<T> = Exclude<
  * ```
  */
 
-export const Combobox = forwardRef<HTMLDivElement, ComboboxProps<object>>(
-  (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 } = useFilter({ sensitivity: "base" });
+export const Combobox = (props: ComboboxProps<object>) => {
+  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 } = useFilter({ sensitivity: "base" });
 
-    const fallbackInputRef = useRef<HTMLInputElement>(null);
-    const inputRef = externalInputRef ?? fallbackInputRef;
-    const listBoxRef = useRef<HTMLUListElement>(null);
-    const popoverRef = useRef(null);
+  const fallbackInputRef = useRef<HTMLInputElement>(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
+  const listBoxRef = useRef<HTMLUListElement>(null);
+  const popoverRef = useRef(null);
 
-    const listboxId = `${useId()}-listbox`;
+  const listboxId = `${useId()}-listbox`;
 
-    const inputWidth = useInputWidth(inputRef);
+  const inputWidth = useInputWidth(inputRef);
 
-    const state = useComboBoxState({
-      defaultFilter: contains,
-      shouldCloseOnBlur: true,
-      ...props,
-    });
+  const state = useComboBoxState({
+    defaultFilter: contains,
+    shouldCloseOnBlur: true,
+    ...props,
+  });
 
-    const comboBoxProps = {
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      marginBottom,
-      marginTop,
-      marginRight,
-      marginLeft,
-      marginX,
-      marginY,
-      paddingBottom,
-      paddingRight,
-      paddingTop,
-      paddingLeft,
-      paddingX,
-      paddingY,
-      lefticon,
-    };
+  const comboBoxProps = {
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    marginBottom,
+    marginTop,
+    marginRight,
+    marginLeft,
+    marginX,
+    marginY,
+    paddingBottom,
+    paddingRight,
+    paddingTop,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    lefticon,
+  };
 
-    const {
-      inputProps: { ...inputProps },
-      listBoxProps,
-    } = useComboBox(
-      {
-        ...props,
-        inputRef,
-        listBoxRef,
-        popoverRef,
-        label,
-      },
-      state,
-    );
-    return (
-      <>
-        <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={label}
-          variant={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 ? (
-              <ColorSpinner
-                width="1.5rem"
-                alignSelf="center"
-                paddingRight={paddingRight}
-                css={{
-                  div: {
-                    display: "flex",
-                    alignItems: "center",
-                  },
-                }}
-              />
-            ) : (
-              righticon
-            )
-          }
-          placeholder=""
-        />
-        <span aria-hidden="true" data-trigger="multiselect"></span>
-        {state.isOpen && !loading && (
-          <Popover
+  const {
+    inputProps: { ...inputProps },
+    listBoxProps,
+  } = useComboBox(
+    {
+      ...props,
+      inputRef,
+      listBoxRef,
+      popoverRef,
+      label,
+    },
+    state,
+  );
+  return (
+    <>
+      <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={label}
+        variant={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 ? (
+            <ColorSpinner
+              width="1.5rem"
+              alignSelf="center"
+              paddingRight={paddingRight}
+              css={{
+                div: {
+                  display: "flex",
+                  alignItems: "center",
+                },
+              }}
+            />
+          ) : (
+            righticon
+          )
+        }
+        placeholder=""
+      />
+      <span aria-hidden="true" data-trigger="multiselect"></span>
+      {state.isOpen && !loading && (
+        <Popover
+          state={state}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          triggerRef={inputRef as any} /* Find a way to not use type any */
+          ref={popoverRef}
+          isNonModal
+          placement="bottom start"
+          shouldFlip={false}
+          hasBackdrop={false}
+          // The minimum padding should be 0, because the popover always should be
+          // aligned with the input field regardless of the left padding in the container.
+          containerPadding={0}
+        >
+          <ListBox
+            {...{
+              autoFocus:
+                typeof listBoxProps.autoFocus === "boolean"
+                  ? listBoxProps.autoFocus
+                  : undefined,
+            }}
             state={state}
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            triggerRef={inputRef as any} /* Find a way to not use type any */
-            ref={popoverRef}
-            isNonModal
-            placement="bottom start"
-            shouldFlip={false}
-            hasBackdrop={false}
-            // The minimum padding should be 0, because the popover always should be
-            // aligned with the input field regardless of the left padding in the container.
-            containerPadding={0}
+            id={listboxId}
+            listBoxRef={listBoxRef}
+            emptyContent={emptyContent}
+            maxWidth={inputWidth}
+            variant={variant}
           >
-            <ListBox
-              {...{
-                autoFocus:
-                  typeof listBoxProps.autoFocus === "boolean"
-                    ? listBoxProps.autoFocus
-                    : undefined,
-              }}
-              state={state}
-              id={listboxId}
-              listBoxRef={listBoxRef}
-              emptyContent={emptyContent}
-              maxWidth={inputWidth}
-              variant={variant}
-            >
-              {children}
-            </ListBox>
-          </Popover>
-        )}
-      </>
-    );
-  },
-);
+            {children}
+          </ListBox>
+        </Popover>
+      )}
+    </>
+  );
+};
+
 Combobox.displayName = "Combobox";
 
 const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {

package/src/input/ListBox.tsx

@@ -8,13 +8,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import type { Node } from "@react-types/shared";
-import React, {
-  forwardRef,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-} from "react";
+import React, { PropsWithChildren, useContext, useEffect, useRef } from "react";
 import {
   AriaListBoxProps,
   useListBox,
@@ -84,33 +78,32 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
  * ```
  */
 
-export const ListBox = forwardRef<HTMLDivElement, ListBoxProps<object>>(
-  (props) => {
-    const { loading, listBoxRef, state, maxWidth, variant, children } = props;
-    const { listBoxProps } = useListBox(props, state, listBoxRef);
-    const recipe = useSlotRecipe({ key: "listBox" });
-    const styles = recipe({ variant });
-    return (
-      <List
-        {...listBoxProps}
-        ref={listBoxRef}
-        css={styles.root}
-        aria-busy={loading}
-        maxWidth={maxWidth}
-      >
-        {state.collection.size === 0 && props.emptyContent}
-        {[...state.collection].map((item) =>
-          item.type === "section" ? (
-            <ListBoxSection key={item.key} section={item} state={state} />
-          ) : (
-            <Option key={item.key} item={item} state={state} />
-          ),
-        )}
-        {children}
-      </List>
-    );
-  },
-);
+export const ListBox = (props: ListBoxProps<object>) => {
+  const { loading, listBoxRef, state, maxWidth, variant, children } = props;
+  const { listBoxProps } = useListBox(props, state, listBoxRef);
+  const recipe = useSlotRecipe({ key: "listBox" });
+  const styles = recipe({ variant });
+  return (
+    <List
+      {...listBoxProps}
+      ref={listBoxRef}
+      css={styles.root}
+      aria-busy={loading}
+      maxWidth={maxWidth}
+    >
+      {state.collection.size === 0 && props.emptyContent}
+      {[...state.collection].map((item) =>
+        item.type === "section" ? (
+          <ListBoxSection key={item.key} section={item} state={state} />
+        ) : (
+          <Option key={item.key} item={item} state={state} />
+        ),
+      )}
+      {children}
+    </List>
+  );
+};
+
 ListBox.displayName = "ListBox";
 
 /**

package/src/input/NumericStepper.tsx

@@ -69,7 +69,7 @@ export type NumericStepperProps = BoxProps &
 export const NumericStepper = React.forwardRef<
   HTMLDivElement,
   NumericStepperProps
->((props: NumericStepperProps) => {
+>((props: NumericStepperProps, ref) => {
   const {
     name: nameProp,
     id: idProp,
@@ -102,7 +102,7 @@ export const NumericStepper = React.forwardRef<
   };
 
   return (
-    <Field css={styles.root} width="auto" {...rest}>
+    <Field css={styles.root} width="auto" {...rest} ref={ref}>
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
         aria-label={t(