@vygruppen/spor-react 12.1.2 → 12.2.0

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: {

package/src/input/PhoneNumberInput.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useControllableState } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { createTexts, Input, InputProps, useTranslation } from "..";
 import { AttachedInputs } from "./AttachedInputs";
@@ -20,6 +20,7 @@ type PhoneNumberInputProps = InputProps & {
   value?: CountryCodeAndPhoneNumber;
   /** Returns an extra optional text when true */
   optional?: boolean;
+  allowedCountryCodes?: string[];
   invalid?: boolean;
   errorText?: string;
 };
@@ -51,6 +52,7 @@ export const PhoneNumberInput = forwardRef<
     onValueChange: externalOnChange,
     variant,
     optional,
+    allowedCountryCodes,
     invalid,
     errorText,
   } = props;
@@ -92,6 +94,7 @@ export const PhoneNumberInput = forwardRef<
           height="100%"
           width="6.25rem"
           variant={variant}
+          allowedCountryCodes={allowedCountryCodes}
           data-state="on"
         />
         <Input
@@ -103,7 +106,7 @@ export const PhoneNumberInput = forwardRef<
           onChange={(e) => {
             const target = e.target as HTMLInputElement;
             // Removes everything but numbers, spaces and dashes
-            const strippedValue = target.value.replace(/[^\d\s-]/g, "");
+            const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
             onChange({
               countryCode: value.countryCode,
               nationalNumber: strippedValue,
@@ -118,6 +121,7 @@ export const PhoneNumberInput = forwardRef<
     </AttachedInputs>
   );
 });
+PhoneNumberInput.displayName = "PhoneNumberInput";
 
 const texts = createTexts({
   phoneNumber: {

package/src/input/Popover.tsx

@@ -73,6 +73,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     ref,
   ) => {
     const internalRef = useRef<HTMLDivElement>(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const popoverRef = ref ?? (internalRef as any);
 
     const { popoverProps, underlayProps } = usePopover(
@@ -112,3 +113,4 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     );
   },
 );
+Popover.displayName = "Popover";

package/src/input/Radio.tsx

@@ -41,6 +41,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
     </ChakraRadioGroup.Item>
   );
 });
+Radio.displayName = "Radio";
 
 type RadioGroupProps = Omit<
   ChakraRadioGroup.RootProps,
@@ -52,3 +53,4 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
     return <ChakraRadioGroup.Root ref={ref} {...props} aria-labelledby="" />;
   },
 );
+RadioGroup.displayName = "RadioGroup";

package/src/input/SearchInput.tsx

@@ -4,7 +4,7 @@ import {
   CloseOutline24Icon,
   SearchOutline24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { createTexts, Input, InputProps, useTranslation } from "..";
 import { IconButton } from "../button/IconButton";
@@ -49,6 +49,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
     );
   },
 );
+SearchInput.displayName = "SearchInput";
 
 const texts = createTexts({
   label: {

package/src/input/Select.tsx

@@ -80,6 +80,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
     );
   },
 );
+Select.displayName = "Select";
 
 type SelectItemProps = ChakraSelect.ItemProps &
   React.PropsWithChildren<SelectVariantProps> & {
@@ -108,6 +109,7 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
     );
   },
 );
+SelectItem.displayName = "SelectItem";
 
 type SelectItemGroupProps = ChakraSelect.ItemGroupProps &
   React.PropsWithChildren<SelectVariantProps> & {
@@ -218,8 +220,12 @@ export const SelectValueText = React.forwardRef<
     >
       <ChakraSelect.Context>
         {(select: {
-          selectedItems: any;
-          collection: { stringifyItem: (arg0: any) => any };
+          selectedItems: CollectionItem[];
+
+          collection: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            stringifyItem: (arg0: any) => any;
+          } /* Find a way to not use any */;
         }) => {
           const items = select.selectedItems;
           if (items.length === 0) return placeholder;