@navikt/ds-react 5.12.5 → 5.13.0

package/src/form/checkbox/Checkbox.test.tsx

@@ -16,7 +16,7 @@ test("checkbox group chains onChange calls", async () => {
       <Checkbox onChange={onChange} value={value}>
         {label}
       </Checkbox>
-    </CheckboxGroup>
+    </CheckboxGroup>,
   );
 
   fireEvent.click(screen.getByLabelText(label));
@@ -42,11 +42,11 @@ describe("Checkbox handles controlled-state correctly", () => {
     fireEvent.click(screen.getByLabelText("label2"));
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
 
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
   });
 
@@ -57,7 +57,7 @@ describe("Checkbox handles controlled-state correctly", () => {
       <CheckboxComponent
         onChange={onGroupChange}
         value={["value1", "value2"]}
-      />
+      />,
     );
 
     fireEvent.click(screen.getByLabelText("label1"));
@@ -71,19 +71,19 @@ describe("Checkbox handles controlled-state correctly", () => {
     const { rerender } = render(<CheckboxComponent value={[]} />);
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      false
+      false,
     );
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      false
+      false,
     );
 
     rerender(<CheckboxComponent value={["value1", "value2"]} />);
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
   });
 });

package/src/form/checkbox/Checkbox.tsx

@@ -23,7 +23,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
             "navds-checkbox--readonly": readOnly,
-          }
+          },
         )}
       >
         <input
@@ -57,7 +57,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             !!props["aria-labelledby"] && props["aria-labelledby"],
             {
               [descriptionId]: props.description,
-            }
+            },
           )}
         />
         <label htmlFor={inputProps.id} className="navds-checkbox__label">
@@ -110,7 +110,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         </label>
       </div>
     );
-  }
+  },
 );
 
 export default Checkbox;

package/src/form/checkbox/CheckboxGroup.tsx

@@ -9,7 +9,7 @@ export interface CheckboxGroupState {
 }
 
 export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
-  null
+  null,
 );
 
 export interface CheckboxGroupProps
@@ -56,7 +56,7 @@ export const CheckboxGroup = forwardRef<
 >(
   (
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
-    ref
+    ref,
   ) => {
     const fieldset = useContext(FieldsetContext);
 
@@ -79,7 +79,7 @@ export const CheckboxGroup = forwardRef<
         className={cl(
           className,
           "navds-checkbox-group",
-          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`
+          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -94,7 +94,7 @@ export const CheckboxGroup = forwardRef<
         </CheckboxGroupContext.Provider>
       </Fieldset>
     );
-  }
+  },
 );
 
 export default CheckboxGroup;

package/src/form/checkbox/useCheckbox.ts

@@ -12,18 +12,18 @@ const useCheckbox = (props: CheckboxProps) => {
 
   const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description", "children"]),
-    "checkbox"
+    "checkbox",
   );
 
   if (checkboxGroup) {
     if (props.checked) {
       console.warn(
-        "`checked` is unsupported on <Checkbox> elements within a <CheckboxGroup>. Please set a `value` or `defaultValue` on <CheckboxGroup> instead."
+        "`checked` is unsupported on <Checkbox> elements within a <CheckboxGroup>. Please set a `value` or `defaultValue` on <CheckboxGroup> instead.",
       );
     }
     if (props.value === undefined) {
       console.warn(
-        "A <Checkbox> element within a <CheckboxGroup> requires a `value` property."
+        "A <Checkbox> element within a <CheckboxGroup> requires a `value` property.",
       );
     }
   }

package/src/form/combobox/Combobox.tsx

@@ -1,17 +1,17 @@
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef } from "react";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { mergeRefs } from "../../util";
 import ClearButton from "./ClearButton";
+import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
+import Input from "./Input/Input";
+import { useInputContext } from "./Input/inputContext";
 import SelectedOptions from "./SelectedOptions/SelectedOptions";
+import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
 import ToggleListButton from "./ToggleListButton";
 import { ComboboxProps } from "./types";
-import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
-import ComboboxWrapper from "./ComboboxWrapper";
-import { useInputContext } from "./Input/inputContext";
-import Input from "./Input/Input";
-import { mergeRefs } from "../../util";
-import { BodyShort, ErrorMessage, Label } from "../../typography";
 
 export const Combobox = forwardRef<
   HTMLInputElement,
@@ -52,7 +52,7 @@ export const Combobox = forwardRef<
 
   const mergedInputRef = useMemo(
     () => mergeRefs([inputRef, ref]),
-    [inputRef, ref]
+    [inputRef, ref],
   );
 
   return (
@@ -93,7 +93,7 @@ export const Combobox = forwardRef<
             {
               "navds-combobox__wrapper-inner--virtually-unfocused":
                 activeDecendantId !== null,
-            }
+            },
           )}
           onClick={focusInput}
         >

package/src/form/combobox/ComboboxProvider.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from "react";
 import Combobox from "./Combobox";
 import { FilteredOptionsProvider } from "./FilteredOptions/filteredOptionsContext";
-import { CustomOptionsProvider } from "./customOptionsContext";
-import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext";
 import { InputContextProvider } from "./Input/inputContext";
+import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext";
+import { CustomOptionsProvider } from "./customOptionsContext";
 import { ComboboxProps } from "./types";
 
 /**
@@ -92,7 +92,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
         </CustomOptionsProvider>
       </InputContextProvider>
     );
-  }
+  },
 );
 
 export default ComboboxProvider;

package/src/form/combobox/ComboboxWrapper.tsx

@@ -53,7 +53,7 @@ const ComboboxWrapper = ({
           "navds-combobox--error": hasError,
           "navds-combobox--disabled": !!inputProps.disabled,
           "navds-combobox--focused": hasFocusWithin,
-        }
+        },
       )}
       onFocus={onFocusInsideWrapper}
       onBlur={onBlurWrapper}

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -1,12 +1,12 @@
-import React from "react";
 import cl from "clsx";
+import React from "react";
 import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
-import { useFilteredOptionsContext } from "./filteredOptionsContext";
-import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
-import { useInputContext } from "../Input/inputContext";
 import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
+import { useInputContext } from "../Input/inputContext";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";
+import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
   const {
@@ -60,7 +60,7 @@ const FilteredOptions = () => {
               activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)
             ) {
               virtualFocus.moveFocusToElement(
-                filteredOptionsUtil.getAddNewOptionId(id)
+                filteredOptionsUtil.getAddNewOptionId(id),
               );
               setIsMouseLastUsedInputDevice(true);
             }
@@ -114,7 +114,7 @@ const FilteredOptions = () => {
               activeDecendantId !== filteredOptionsUtil.getOptionId(id, option)
             ) {
               virtualFocus.moveFocusToElement(
-                filteredOptionsUtil.getOptionId(id, option)
+                filteredOptionsUtil.getOptionId(id, option),
               );
               setIsMouseLastUsedInputDevice(true);
             }

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -1,19 +1,19 @@
+import cl from "clsx";
 import React, {
-  useState,
-  useMemo,
+  SetStateAction,
   createContext,
-  useContext,
   useCallback,
-  SetStateAction,
+  useContext,
+  useMemo,
+  useState,
 } from "react";
-import cl from "clsx";
-import { useCustomOptionsContext } from "../customOptionsContext";
-import { useInputContext } from "../Input/inputContext";
-import usePrevious from "../../../util/usePrevious";
 import { useClientLayoutEffect } from "../../../util";
+import usePrevious from "../../../util/usePrevious";
+import { useInputContext } from "../Input/inputContext";
+import { useCustomOptionsContext } from "../customOptionsContext";
+import { ComboboxProps } from "../types";
 import filteredOptionsUtils from "./filtered-options-util";
 import useVirtualFocus, { VirtualFocusType } from "./useVirtualFocus";
-import { ComboboxProps } from "../types";
 
 type FilteredOptionsProps = {
   children: any;
@@ -46,7 +46,7 @@ type FilteredOptionsContextType = {
   virtualFocus: VirtualFocusType;
 };
 const FilteredOptionsContext = createContext<FilteredOptionsContextType>(
-  {} as FilteredOptionsContextType
+  {} as FilteredOptionsContextType,
 );
 
 export const FilteredOptionsProvider = ({
@@ -99,9 +99,9 @@ export const FilteredOptionsProvider = ({
           [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
             ? value
             : undefined,
-        }
+        },
       ),
-    [allowNewValues, id, options, value]
+    [allowNewValues, id, options, value],
   );
 
   useClientLayoutEffect(() => {
@@ -112,7 +112,7 @@ export const FilteredOptionsProvider = ({
       filteredOptions.length > 0
     ) {
       setValue(
-        `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`
+        `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`,
       );
       setSearchTerm(searchTerm);
     }
@@ -134,14 +134,14 @@ export const FilteredOptionsProvider = ({
       virtualFocus.moveFocusToTop();
       setInternalListOpen((oldState) => newState ?? !oldState);
     },
-    [virtualFocus]
+    [virtualFocus],
   );
 
   const isValueNew = useMemo(
     () =>
       Boolean(value) &&
       !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)],
-    [filteredOptionsMap, id, value]
+    [filteredOptionsMap, id, value],
   );
 
   const ariaDescribedBy = useMemo(() => {
@@ -169,12 +169,12 @@ export const FilteredOptionsProvider = ({
   const currentOption = useMemo(
     () =>
       filteredOptionsMap[virtualFocus.activeElement?.getAttribute("id") || -1],
-    [filteredOptionsMap, virtualFocus]
+    [filteredOptionsMap, virtualFocus],
   );
 
   const activeDecendantId = useMemo(
     () => virtualFocus.activeElement?.getAttribute("id") || undefined,
-    [virtualFocus.activeElement]
+    [virtualFocus.activeElement],
   );
 
   const filteredOptionsState = {
@@ -205,7 +205,7 @@ export const useFilteredOptionsContext = () => {
   const context = useContext(FilteredOptionsContext);
   if (!context) {
     throw new Error(
-      "useFilteredOptionsContext must be used within a FilteredOptionsProvider"
+      "useFilteredOptionsContext must be used within a FilteredOptionsProvider",
     );
   }
   return context;

package/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -14,7 +14,7 @@ export type VirtualFocusType = {
 };
 
 const useVirtualFocus = (
-  containerRef: HTMLElement | null
+  containerRef: HTMLElement | null,
 ): VirtualFocusType => {
   const [index, setIndex] = useState(-1);
 
@@ -22,7 +22,7 @@ const useVirtualFocus = (
     ? Array.prototype.slice.call(containerRef?.children)
     : [];
   const elementsAbleToReceiveFocus = listOfAllChildren.filter(
-    (child) => child.getAttribute("data-no-focus") !== "true"
+    (child) => child.getAttribute("data-no-focus") !== "true",
   );
 
   const activeElement = elementsAbleToReceiveFocus[index];
@@ -34,7 +34,7 @@ const useVirtualFocus = (
   const scrollToOption = (newIndex: number) => {
     const indexOfElementToScrollTo = Math.min(
       Math.max(newIndex, 0),
-      containerRef?.children.length || 0
+      containerRef?.children.length || 0,
     );
     if (containerRef?.children[indexOfElementToScrollTo]) {
       const child = containerRef.children[indexOfElementToScrollTo];
@@ -53,14 +53,14 @@ const useVirtualFocus = (
   const moveFocusUp = () => _moveFocusAndScrollTo(Math.max(index - 1, -1));
   const moveFocusDown = () =>
     _moveFocusAndScrollTo(
-      Math.min(index + 1, elementsAbleToReceiveFocus.length - 1)
+      Math.min(index + 1, elementsAbleToReceiveFocus.length - 1),
     );
   const moveFocusToTop = () => _moveFocusAndScrollTo(-1);
   const moveFocusToBottom = () =>
     _moveFocusAndScrollTo(elementsAbleToReceiveFocus.length - 1);
   const moveFocusToElement = (id: string) => {
     const thisElement = elementsAbleToReceiveFocus.find(
-      (_element) => _element.getAttribute("id") === id
+      (_element) => _element.getAttribute("id") === id,
     );
     const indexOfElement = thisElement
       ? elementsAbleToReceiveFocus.indexOf(thisElement)

package/src/form/combobox/Input/Input.tsx

@@ -45,7 +45,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       (event: React.KeyboardEvent) => {
         const isTextInSelectedOptions = (text: string) => {
           return selectedOptions.find(
-            (item) => item.toLocaleLowerCase() === text.toLocaleLowerCase()
+            (item) => item.toLocaleLowerCase() === text.toLocaleLowerCase(),
           );
         };
 
@@ -86,7 +86,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         toggleIsListOpen,
         toggleOption,
         value,
-      ]
+      ],
     );
 
     const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -151,7 +151,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         setIsMouseLastUsedInputDevice,
         toggleIsListOpen,
         virtualFocus,
-      ]
+      ],
     );
 
     const onChangeHandler = useCallback(
@@ -165,7 +165,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         virtualFocus.moveFocusToTop();
         onChange(event);
       },
-      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]
+      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen],
     );
 
     return (
@@ -190,11 +190,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           inputClassName,
           "navds-combobox__input",
           "navds-body-short",
-          `navds-body-short--${size}`
+          `navds-body-short--${size}`,
         )}
       />
     );
-  }
+  },
 );
 
 export default Input;

package/src/form/combobox/Input/inputContext.tsx

@@ -49,14 +49,14 @@ export const InputContextProvider = ({ children, value: props }) => {
       id: externalId,
       size,
     },
-    "comboboxfield"
+    "comboboxfield",
   );
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [internalValue, setInternalValue] = useState<string>(defaultValue);
 
   const value = useMemo(
     () => String(externalValue ?? internalValue),
-    [externalValue, internalValue]
+    [externalValue, internalValue],
   );
 
   const [searchTerm, setSearchTerm] = useState(value);
@@ -68,14 +68,14 @@ export const InputContextProvider = ({ children, value: props }) => {
       externalOnChange?.(event);
       setSearchTerm(newValue);
     },
-    [externalValue, externalOnChange]
+    [externalValue, externalOnChange],
   );
 
   const setValue = useCallback(
     (text) => {
       setInternalValue(text);
     },
-    [setInternalValue]
+    [setInternalValue],
   );
 
   const clearInput = useCallback(
@@ -85,7 +85,7 @@ export const InputContextProvider = ({ children, value: props }) => {
       setValue("");
       setSearchTerm("");
     },
-    [externalOnChange, onClear, setValue]
+    [externalOnChange, onClear, setValue],
   );
 
   const focusInput = useCallback(() => {
@@ -123,7 +123,7 @@ export const useInputContext = () => {
   const context = useContext(InputContext);
   if (!context) {
     throw new Error(
-      "useInputContext must be used within an InputContextProvider"
+      "useInputContext must be used within an InputContextProvider",
     );
   }
   return context;

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Chips } from "../../../chips";
-import { useSelectedOptionsContext } from "./selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";
+import { useSelectedOptionsContext } from "./selectedOptionsContext";
 
 interface SelectedOptionsProps {
   selectedOptions?: string[];

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -19,12 +19,12 @@ type SelectedOptionsContextType = {
   setSelectedOptions: (any) => void;
   toggleOption: (
     option: string,
-    event: React.KeyboardEvent | React.PointerEvent
+    event: React.KeyboardEvent | React.PointerEvent,
   ) => void;
 };
 
 const SelectedOptionsContext = createContext<SelectedOptionsContextType>(
-  {} as SelectedOptionsContextType
+  {} as SelectedOptionsContextType,
 );
 
 export const SelectedOptionsProvider = ({
@@ -59,7 +59,7 @@ export const SelectedOptionsProvider = ({
   const selectedOptions = useMemo(
     () =>
       externalSelectedOptions ?? [...customOptions, ...internalSelectedOptions],
-    [customOptions, externalSelectedOptions, internalSelectedOptions]
+    [customOptions, externalSelectedOptions, internalSelectedOptions],
   );
 
   const addSelectedOption = useCallback(
@@ -88,7 +88,7 @@ export const SelectedOptionsProvider = ({
       onToggleSelected,
       options,
       setCustomOptions,
-    ]
+    ],
   );
 
   const removeSelectedOption = useCallback(
@@ -99,13 +99,13 @@ export const SelectedOptionsProvider = ({
       } else {
         setSelectedOptions((oldSelectedOptions) =>
           oldSelectedOptions.filter(
-            (selectedOption) => selectedOption !== option
-          )
+            (selectedOption) => selectedOption !== option,
+          ),
         );
       }
       onToggleSelected?.(option, false, isCustomOption);
     },
-    [customOptions, onToggleSelected, removeCustomOption]
+    [customOptions, onToggleSelected, removeCustomOption],
   );
 
   const toggleOption = useCallback(
@@ -124,7 +124,7 @@ export const SelectedOptionsProvider = ({
       focusInput,
       removeSelectedOption,
       selectedOptions,
-    ]
+    ],
   );
 
   const prevSelectedOptions = usePrevious<string[]>(selectedOptions);
@@ -150,7 +150,7 @@ export const useSelectedOptionsContext = () => {
   const context = useContext(SelectedOptionsContext);
   if (!context) {
     throw new Error(
-      "useSelectedOptionsContext must be used within a SelectedOptionsProvider"
+      "useSelectedOptionsContext must be used within a SelectedOptionsProvider",
     );
   }
   return context;

package/src/form/combobox/ToggleListButton.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef } from "react";
-import { ChevronUpIcon, ChevronDownIcon } from "@navikt/aksel-icons";
-
+import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
 
 interface ToggleListButtonProps {

package/src/form/combobox/combobox.stories.tsx

@@ -1,8 +1,8 @@
+import { expect, jest } from "@storybook/jest";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import React, { useState, useId, useMemo } from "react";
 import { userEvent, within } from "@storybook/testing-library";
-import { Chips, UNSAFE_Combobox, ComboboxProps, TextField } from "../../index";
-import { expect, jest } from "@storybook/jest";
+import React, { useId, useMemo, useState } from "react";
+import { Chips, ComboboxProps, TextField, UNSAFE_Combobox } from "../../index";
 
 export default {
   title: "ds-react/Combobox",
@@ -207,11 +207,11 @@ export const Controlled: StoryFn<{
   const id = useId();
   const [value, setValue] = useState(props.value);
   const [selectedOptions, setSelectedOptions] = useState(
-    props.initialSelectedOptions
+    props.initialSelectedOptions,
   );
   const filteredOptions = useMemo(
     () => props.options.filter((option) => option.includes(value)),
-    [props.options, value]
+    [props.options, value],
   );
 
   const onToggleSelected = (option: string, isSelected: boolean) => {
@@ -536,20 +536,20 @@ export const TestHoverAndFocusSwitching: StoryObject = {
     await sleep(250);
     const bananaOption = canvas.getByRole("option", { name: "banana" });
     expect(getInput().getAttribute("aria-activedescendant")).toBe(
-      bananaOption.getAttribute("id")
+      bananaOption.getAttribute("id"),
     );
 
     userEvent.keyboard("{ArrowDown}");
     await sleep(250);
     const appleOption = canvas.getByRole("option", { name: "apple" });
     expect(getInput().getAttribute("aria-activedescendant")).toBe(
-      appleOption.getAttribute("id")
+      appleOption.getAttribute("id"),
     );
 
     userEvent.hover(bananaOption);
     await sleep(250);
     expect(getInput().getAttribute("aria-activedescendant")).toBe(
-      bananaOption.getAttribute("id")
+      bananaOption.getAttribute("id"),
     );
   },
 };