@vygruppen/spor-react 12.1.1 → 12.2.0

package/src/datepicker/DatePicker.tsx

@@ -52,7 +52,7 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
 /**
  * A date picker component.
  *
- * There are three different variants – `core`, `floating` and `ghost`.
+ * There are three different variants –`core`, `floating` and `ghost`.
  *
  * ```tsx
  * <DatePicker label="Dato" variant="core" />
@@ -171,3 +171,4 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
   },
 );
+DatePicker.displayName = "DatePicker";

package/src/datepicker/DateRangePicker.tsx

@@ -9,7 +9,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
-import React, { PropsWithChildren, useRef } from "react";
+import { PropsWithChildren, useRef } from "react";
 import {
   AriaDateRangePickerProps,
   I18nProvider,

package/src/datepicker/DateTimeSegment.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Box, useSlotRecipe } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
+import { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
 import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
 
@@ -63,6 +63,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
     );
   },
 );
+DateTimeSegment.displayName = "DateTimeSegment";
 
 const isPaddable = (segmentType: DateSegment["type"]) =>
   segmentType === "month" ||

package/src/datepicker/RangeCalendar.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Box, useSlotRecipe } from "@chakra-ui/react";
 import { createCalendar, DateValue } from "@internationalized/date";
-import React, { useRef } from "react";
+import { useRef } from "react";
 import {
   RangeCalendarProps as ReactAriaRangeCalendarProps,
   useRangeCalendar,

package/src/datepicker/StyledField.tsx

@@ -5,7 +5,7 @@ import {
   useFieldContext,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { DatePickerVariantProps } from "./DatePicker";

package/src/datepicker/TimeField.tsx

@@ -1,9 +1,9 @@
 "use client";
 import { Box, Flex } from "@chakra-ui/react";
 import { CalendarDateTime, Time } from "@internationalized/date";
-import { TimeFieldState } from "@react-stately/datepicker";
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { AriaTimeFieldProps, useTimeField } from "react-aria";
+import { DateSegment, TimeFieldState } from "react-stately";
 
 import { DateTimeSegment } from "./DateTimeSegment";
 import { getTimestampFromTime } from "./utils";
@@ -38,7 +38,7 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         {props.label}
       </label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
-        {state.segments.map((segment) => (
+        {state.segments.map((segment: DateSegment) => (
           <DateTimeSegment key={segment.type} segment={segment} state={state} />
         ))}
       </Flex>

package/src/datepicker/TimePicker.tsx

@@ -1,12 +1,11 @@
 "use client";
-import { BoxProps, useFieldContext } from "@chakra-ui/react";
+import { BoxProps } from "@chakra-ui/react";
 import { CalendarDateTime } from "@internationalized/date";
 import { TimeValue } from "@react-types/datepicker";
 import {
   DropdownLeftFill18Icon,
   DropdownRightFill18Icon,
 } from "@vygruppen/spor-icon-react";
-import React from "react";
 import { useTimeFieldState } from "react-stately";
 
 import { Field } from "@/input/Field";
@@ -202,3 +201,6 @@ const texts = createTexts({
     sv: "minuter",
   },
 });
+function useFieldContext(): { disabled: unknown; invalid: unknown } {
+  throw new Error("Function not implemented.");
+}

package/src/datepicker/utils.ts

@@ -9,16 +9,21 @@ import { useTranslation } from "..";
 export const useCurrentLocale = () => {
   const { language } = useTranslation();
   switch (language) {
-    case "nb":
+    case "nb": {
       return "nb-NO";
-    case "nn":
+    }
+    case "nn": {
       return "nb-NO";
-    case "sv":
+    }
+    case "sv": {
       return "sv-SE";
-    case "en":
+    }
+    case "en": {
       return "en-GB";
-    default:
+    }
+    default: {
       return "nb-NO";
+    }
   }
 };
 

package/src/dialog/Dialog.tsx

@@ -34,6 +34,7 @@ export const DialogContent = React.forwardRef<
     </Portal>
   );
 });
+DialogContent.displayName = "DialogContent";
 
 export const DialogCloseTrigger = React.forwardRef<
   HTMLButtonElement,

package/src/dialog/Drawer.tsx

@@ -12,7 +12,7 @@ import {
   ArrowLeftFill24Icon,
   CloseFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { Button, CloseButton } from "../button";
 import { createTexts, useTranslation } from "../i18n";
@@ -70,32 +70,32 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
     );
   },
 );
+DrawerContent.displayName = "DrawerContent";
 
-export const CloseDrawerLine = forwardRef<HTMLButtonElement, {}>(
-  (props, ref) => {
-    const { t } = useTranslation();
-    return (
-      <ChakraDrawer.CloseTrigger
-        {...props}
-        ref={ref}
-        position="relative"
-        insetEnd="unset"
-        aria-label={t(texts.close)}
-        cursor="pointer"
-        top={0}
-        paddingY={2}
-      >
-        <Box
-          width={7}
-          height={1}
-          backgroundColor="silver"
-          borderRadius="xs"
-          marginX="auto"
-        />
-      </ChakraDrawer.CloseTrigger>
-    );
-  },
-);
+export const CloseDrawerLine = forwardRef<HTMLButtonElement>((props, ref) => {
+  const { t } = useTranslation();
+  return (
+    <ChakraDrawer.CloseTrigger
+      {...props}
+      ref={ref}
+      position="relative"
+      insetEnd="unset"
+      aria-label={t(texts.close)}
+      cursor="pointer"
+      top={0}
+      paddingY={2}
+    >
+      <Box
+        width={7}
+        height={1}
+        backgroundColor="silver"
+        borderRadius="xs"
+        marginX="auto"
+      />
+    </ChakraDrawer.CloseTrigger>
+  );
+});
+CloseDrawerLine.displayName = "CloseDrawerLine";
 
 export const DrawerCloseTrigger = forwardRef<
   HTMLButtonElement,
@@ -129,6 +129,7 @@ export const DrawerBackTrigger = forwardRef<
     </ChakraDrawer.CloseTrigger>
   );
 });
+DrawerBackTrigger.displayName = "DrawerBackTrigger";
 
 export const DrawerFullScreenHeader = forwardRef<
   HTMLDivElement,
@@ -151,6 +152,7 @@ export const DrawerFullScreenHeader = forwardRef<
     </ChakraDrawer.Header>
   );
 });
+DrawerFullScreenHeader.displayName = "DrawerFullScreenHeader";
 
 export const Drawer = (props: DrawerProps) => {
   const { children, placement, size = "md", ...rest } = props;

package/src/i18n/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-irregular-whitespace */
 import React, { createContext, useContext } from "react";
 
 export enum Language {

package/src/input/AttachedInputs.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { chakra, Group, RecipeVariantProps, useRecipe } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { chakra, Group, RecipeVariantProps } from "@chakra-ui/react";
+import { forwardRef } from "react";
 
 import { attachedInputsRecipe } from "@/theme/recipes/attached-inputs";
 
@@ -28,5 +28,8 @@ export type AttachedInputsProps = RecipeVariantProps<
 const StyledGroup = chakra(Group, attachedInputsRecipe);
 
 export const AttachedInputs = forwardRef<HTMLDivElement, AttachedInputsProps>(
-  (props, ref) => <StyledGroup ref={ref} attached {...props} />,
+  (props, ref) => {
+    return <StyledGroup ref={ref} attached {...props} />;
+  },
 );
+AttachedInputs.displayName = "AttachedInputs";

package/src/input/CardSelect.tsx

@@ -9,7 +9,7 @@ import {
   DropdownDownFill18Icon,
   DropdownDownFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
 
 import { Button, ButtonProps, StaticCard, StaticCardProps } from "..";
 
@@ -40,6 +40,7 @@ export const CardSelectContent = forwardRef<HTMLDivElement, StaticCardProps>(
     );
   },
 );
+CardSelectContent.displayName = "CardSelectContent";
 
 export type CardSelectTriggerProps = {
   /** The design of the trigger button.
@@ -101,3 +102,4 @@ export const CardSelectTrigger = forwardRef<
     );
   },
 );
+CardSelectTrigger.displayName = "CardSelectTrigger";

package/src/input/Checkbox.tsx

@@ -45,3 +45,4 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     );
   },
 );
+Checkbox.displayName = "Checkbox";

package/src/input/CheckboxGroup.tsx

@@ -14,7 +14,8 @@ export type CheckboxGroupProps = Exclude<
   children: React.ReactNode;
   /* Defaults to 1 */
   gap?: number | string;
-  [key: string]: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any; //Find a way to not use type any
 };
 /**
  * Used to group several checkboxes together. You can pass the default value, as well as whether or not they're all disabled
@@ -50,3 +51,4 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
     );
   },
 );
+CheckboxGroup.displayName = "CheckboxGroup";

package/src/input/ChoiceChip.tsx

@@ -6,7 +6,7 @@ import {
   useCheckbox,
 } from "@chakra-ui/react";
 import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { ChangeEvent, PropsWithChildren, useId } from "react";
+import React, { ChangeEvent, PropsWithChildren } from "react";
 
 import { choiceChipRecipe } from "@/theme/recipes/choice-chip";
 

package/src/input/Combobox.tsx

@@ -82,7 +82,6 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps<object>>(
       paddingY,
       emptyContent,
       inputRef: externalInputRef,
-      allowsEmptyCollection /* Is this being used? */,
       children,
       variant,
     } = props;
@@ -122,7 +121,7 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps<object>>(
     };
 
     const {
-      inputProps: { size, ...inputProps },
+      inputProps: { ...inputProps },
       listBoxProps,
     } = useComboBox(
       {
@@ -177,7 +176,8 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps<object>>(
         {state.isOpen && !loading && (
           <Popover
             state={state}
-            triggerRef={inputRef as any}
+            // 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"
@@ -209,6 +209,7 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps<object>>(
     );
   },
 );
+Combobox.displayName = "Combobox";
 
 const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {
   const [inputWidth, setInputWidth] = useState("auto");
@@ -220,7 +221,7 @@ const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {
     }, 67);
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
-  }, []);
+  }, [inputRef]);
   return inputWidth;
 };
 
@@ -231,6 +232,7 @@ function styleProps(obj: Record<string, unknown>): Record<string, unknown> {
 }
 
 const debounce = (fn: () => void, ms = 100) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let timer: any;
   return () => {
     clearTimeout(timer);

package/src/input/CountryCodeSelect.tsx

@@ -2,7 +2,7 @@
 
 import { createListCollection } from "@chakra-ui/react";
 import { getSupportedCallingCodes } from "awesome-phonenumber";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import {
   createTexts,
@@ -33,15 +33,20 @@ export const callingCodes = createListCollection({
   items: [...prioritizedCountryCodes, ...sortedCallingCodes],
 });
 
-type CountryCodeSelectProps = Omit<SelectProps, "label" | "collection">;
+type CountryCodeSelectProps = Omit<SelectProps, "label" | "collection"> & {
+  allowedCountryCodes?: string[];
+};
 
 export const CountryCodeSelect = forwardRef<
   HTMLDivElement,
   CountryCodeSelectProps
 >((props, ref) => {
   const { t } = useTranslation();
-  const invalid = props.invalid;
-
+  if (props.allowedCountryCodes) {
+    callingCodes.items = callingCodes.items.filter((callingCode) =>
+      props.allowedCountryCodes?.some((code) => code === callingCode.label),
+    );
+  }
   return (
     <Select
       {...props}
@@ -60,6 +65,7 @@ export const CountryCodeSelect = forwardRef<
     </Select>
   );
 });
+CountryCodeSelect.displayName = "CountryCodeSelect";
 
 const texts = createTexts({
   countryCode: {

package/src/input/Field.tsx

@@ -59,6 +59,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
     );
   },
 );
+Field.displayName = "Field";
 
 export const FieldErrorText = React.forwardRef<
   HTMLDivElement,
@@ -68,5 +69,6 @@ export const FieldErrorText = React.forwardRef<
     <ChakraField.ErrorText ref={ref}>{props.children}</ChakraField.ErrorText>
   );
 });
+FieldErrorText.displayName = "FieldErrorText";
 
 export const FieldLabel = ChakraField.Label;

package/src/input/Input.tsx

@@ -4,10 +4,8 @@ import {
   chakra,
   Input as ChakraInput,
   InputProps as ChakraInputProps,
-  type RecipeVariantProps,
-  useRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { forwardRef } from "react";
 
 import { inputRecipe } from "@/theme/recipes/input";
 
@@ -95,3 +93,4 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   },
 );
+Input.displayName = "Input";

package/src/input/InputGroup.tsx

@@ -32,7 +32,6 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       endElementProps,
       label,
       children,
-      attached,
       ...rest
     } = props;
 
@@ -65,3 +64,4 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
     );
   },
 );
+InputGroup.displayName = "InputGroup";

package/src/input/ListBox.tsx

@@ -40,7 +40,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
     /** Whether or not the listbox is waiting on new data, i.e. through a autosuggest search */
     loading?: boolean;
     /** The state of the listbox, provided externally somehow. */
-    state: ListState<T> | SelectState<T>;
+    state: ListState<T> | SelectState<unknown>;
     /** UI to render if the collection is empty */
     emptyContent?: React.ReactNode;
     maxWidth?: BoxProps["maxWidth"];
@@ -72,7 +72,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
  *
  * @example
  * ```jsx
- * const { data, isLoading } = useSWR('/api/options')
+ * const { data, isLoading } = useSWR('/api/options')
  * const state = useListState({ items: data });
  * const ref = useRef(null);
  *
@@ -99,7 +99,7 @@ export const ListBox = forwardRef<HTMLDivElement, ListBoxProps<object>>(
         maxWidth={maxWidth}
       >
         {state.collection.size === 0 && props.emptyContent}
-        {Array.from(state.collection).map((item) =>
+        {[...state.collection].map((item) =>
           item.type === "section" ? (
             <ListBoxSection key={item.key} section={item} state={state} />
           ) : (
@@ -111,6 +111,7 @@ export const ListBox = forwardRef<HTMLDivElement, ListBoxProps<object>>(
     );
   },
 );
+ListBox.displayName = "ListBox";
 
 /**
  * Renders a label for a listbox item.
@@ -140,7 +141,7 @@ export function ItemDescription({ children }: { children: React.ReactNode }) {
 
 type OptionProps = {
   item: Node<unknown>;
-  state: SelectState<any> | ListState<unknown>;
+  state: SelectState<unknown> | ListState<unknown>;
 };
 function Option({ item, state }: OptionProps) {
   const ref = useRef(null);
@@ -177,7 +178,7 @@ function Option({ item, state }: OptionProps) {
   TODO: Follow up with react-spectrum to see if they can solve it on their end
   */
   useEffect(() => {
-    (ref as any)?.current?.addEventListener(
+    (ref as React.RefObject<HTMLDivElement>)?.current?.addEventListener(
       "touchend",
       (event: TouchEvent) => {
         event.preventDefault();
@@ -210,7 +211,7 @@ const useOptionContext = () => {
 
 type ListBoxSectionProps = {
   section: Node<unknown>;
-  state: any;
+  state: ListState<unknown> | SelectState<unknown>;
 };
 function ListBoxSection({ section, state }: ListBoxSectionProps) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
@@ -239,8 +240,8 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
           </Box>
         )}
         <List {...groupProps} padding={0} listStyleType="none">
-          {Array.from(state.collection.getChildren(section.key)).map(
-            (item: any) => (
+          {[...(state.collection.getChildren?.(section.key) ?? [])].map(
+            (item: Node<unknown>) => (
               <Option key={item.key} item={item} state={state} />
             ),
           )}

package/src/input/NativeSelect.tsx

@@ -1,9 +1,9 @@
 "use client";
 import {
   NativeSelect as ChakraNativeSelect,
+  NativeSelectFieldProps as ChakraNativeSelectFieldProps,
   RecipeVariantProps,
   useSlotRecipe,
-  NativeSelectFieldProps as ChakraNativeSelectFieldProps,
 } from "@chakra-ui/react";
 import { DropdownDownFill18Icon } from "@vygruppen/spor-icon-react";
 import * as React from "react";
@@ -46,7 +46,6 @@ export const NativeSelect = React.forwardRef<
   NativeSelectdProps
 >(function NativeSelect(props, ref) {
   const {
-    icon,
     children,
     variant = "core",
     label,

package/src/input/NumericStepper.tsx

@@ -68,23 +68,20 @@ export const NumericStepper = React.forwardRef<
   HTMLDivElement,
   NumericStepperProps
 >(
-  (
-    {
-      name: nameProp,
-      id: idProp,
-      value: valueProp,
-      defaultValue = 1,
-      onChange: onChangeProp,
-      minValue = 0,
-      maxValue = 99,
-      disabled,
-      withInput = true,
-      stepSize = 1,
-      showZero = false,
-      ariaLabelContext = { singular: "", plural: "" },
-    }: NumericStepperProps,
-    ref,
-  ) => {
+  ({
+    name: nameProp,
+    id: idProp,
+    value: valueProp,
+    defaultValue = 1,
+    onChange: onChangeProp,
+    minValue = 0,
+    maxValue = 99,
+    disabled,
+    withInput = true,
+    stepSize = 1,
+    showZero = false,
+    ariaLabelContext = { singular: "", plural: "" },
+  }: NumericStepperProps) => {
     const addButtonRef = useRef<HTMLButtonElement>(null);
     const { t } = useTranslation();
     const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
@@ -135,9 +132,9 @@ export const NumericStepper = React.forwardRef<
             visibility={!showZero && value === 0 ? "hidden" : "visible"}
             aria-live="assertive"
             aria-label={
-              ariaLabelContext.plural !== ""
-                ? t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
-                : ""
+              ariaLabelContext.plural === ""
+                ? ""
+                : t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
             }
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               const numericInput = Number(e.target.value);
@@ -159,9 +156,9 @@ export const NumericStepper = React.forwardRef<
             visibility={!showZero && value === 0 ? "hidden" : "visible"}
             aria-live="assertive"
             aria-label={
-              ariaLabelContext.plural !== ""
-                ? t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
-                : ""
+              ariaLabelContext.plural === ""
+                ? ""
+                : t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
             }
           >
             {value}
@@ -187,6 +184,7 @@ export const NumericStepper = React.forwardRef<
     );
   },
 );
+NumericStepper.displayName = "NumericStepper";
 
 type VerySmallButtonProps = {
   /** The icon to render */
@@ -220,6 +218,7 @@ const VerySmallButton = React.forwardRef<
     />
   );
 });
+VerySmallButton.displayName = "VerySmallButton";
 
 type IconPropTypes = BoxProps & { stepLabel: number };
 

package/src/input/PasswordInput.tsx

@@ -47,7 +47,6 @@ export interface PasswordInputProps
 export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
   (props, ref) => {
     const {
-      rootProps,
       defaultVisible,
       visible: visibleProp,
       onVisibleChange,
@@ -89,6 +88,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     );
   },
 );
+PasswordInput.displayName = "PasswordInput";
 
 const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
@@ -107,6 +107,7 @@ const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
+VisibilityTrigger.displayName = "VisibilityTrigger";
 
 const texts = createTexts({
   showPassword: {