@navikt/ds-react 5.12.5 → 5.14.0

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 React, { forwardRef, useRef } from "react";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 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,
@@ -50,10 +50,7 @@ export const Combobox = forwardRef<
     size = "medium",
   } = useInputContext();
 
-  const mergedInputRef = useMemo(
-    () => mergeRefs([inputRef, ref]),
-    [inputRef, ref]
-  );
+  const mergedInputRef = useMergeRefs(inputRef, ref);
 
   return (
     <ComboboxWrapper
@@ -93,7 +90,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,18 @@
+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 { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
-import usePrevious from "../../../util/usePrevious";
-import { useClientLayoutEffect } from "../../../util";
+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 +45,7 @@ type FilteredOptionsContextType = {
   virtualFocus: VirtualFocusType;
 };
 const FilteredOptionsContext = createContext<FilteredOptionsContextType>(
-  {} as FilteredOptionsContextType
+  {} as FilteredOptionsContextType,
 );
 
 export const FilteredOptionsProvider = ({
@@ -99,9 +98,9 @@ export const FilteredOptionsProvider = ({
           [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
             ? value
             : undefined,
-        }
+        },
       ),
-    [allowNewValues, id, options, value]
+    [allowNewValues, id, options, value],
   );
 
   useClientLayoutEffect(() => {
@@ -112,7 +111,7 @@ export const FilteredOptionsProvider = ({
       filteredOptions.length > 0
     ) {
       setValue(
-        `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`
+        `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`,
       );
       setSearchTerm(searchTerm);
     }
@@ -134,14 +133,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 +168,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 +204,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

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useClientLayoutEffect } from "../../../util";
+import { useClientLayoutEffect } from "../../../util/hooks";
 import { FormFieldType, useFormField } from "../../useFormField";
 
 interface InputContextType extends FormFieldType {
@@ -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

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import usePrevious from "../../../util/usePrevious";
+import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { ComboboxProps } from "../types";
@@ -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,7 @@
 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 { expect, fn, userEvent, within } from "@storybook/test";
+import React, { useId, useMemo, useState } from "react";
+import { Chips, ComboboxProps, TextField, UNSAFE_Combobox } from "../../index";
 
 export default {
   title: "ds-react/Combobox",
@@ -207,11 +206,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) => {
@@ -427,14 +426,14 @@ export const AddWhenAddNewDisabledTest: StoryObject = {
 };
 
 export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
-  onChange: ReturnType<typeof jest.fn>;
-  onClear: ReturnType<typeof jest.fn>;
-  onToggleSelected: ReturnType<typeof jest.fn>;
+  onChange: ReturnType<typeof fn>;
+  onClear: ReturnType<typeof fn>;
+  onToggleSelected: ReturnType<typeof fn>;
 }> = {
   args: {
-    onChange: jest.fn(),
-    onClear: jest.fn(),
-    onToggleSelected: jest.fn(),
+    onChange: fn(),
+    onClear: fn(),
+    onToggleSelected: fn(),
   },
   render: (props) => {
     return (
@@ -469,9 +468,9 @@ export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
 
 export const TestCasingWhenAutoCompleting = {
   args: {
-    onChange: jest.fn(),
-    onClear: jest.fn(),
-    onToggleSelected: jest.fn(),
+    onChange: fn(),
+    onClear: fn(),
+    onToggleSelected: fn(),
   },
   render: (props) => {
     return (
@@ -536,20 +535,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"),
     );
   },
 };

package/src/form/combobox/combobox.test.tsx

@@ -2,8 +2,8 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
-import { UNSAFE_Combobox } from "..";
 import { act } from "react-dom/test-utils";
+import { UNSAFE_Combobox } from "..";
 
 const options = [
   "banana",
@@ -42,7 +42,9 @@ describe("Render combobox", () => {
 
       await act(async () => {
         await userEvent.click(
-          screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
         );
       });
       await act(async () => {
@@ -50,20 +52,20 @@ describe("Render combobox", () => {
           screen.getByRole("combobox", {
             name: "Hva er dine favorittfrukter?",
           }),
-          "apple"
+          "apple",
         );
       });
       await act(async () => {
         await userEvent.click(
-          await screen.findByRole("option", { name: "apple" })
+          await screen.findByRole("option", { name: "apple" }),
         );
       });
       expect(
-        await screen.findByRole("option", { name: "apple", selected: true })
+        await screen.findByRole("option", { name: "apple", selected: true }),
       ).toBeInTheDocument();
       await act(async () => {
         await userEvent.click(
-          await screen.findByRole("button", { name: "apple slett" })
+          await screen.findByRole("button", { name: "apple slett" }),
         );
       });
     });
@@ -73,7 +75,7 @@ describe("Render combobox", () => {
     render(<App options={[]} isListOpen isLoading />);
 
     expect(
-      await screen.findByRole("option", { name: "venter..." })
+      await screen.findByRole("option", { name: "venter..." }),
     ).toBeInTheDocument();
   });
 });
@@ -84,13 +86,13 @@ describe("Combobox state-handling", () => {
 
     await act(async () => {
       await userEvent.click(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
       );
     });
     await act(async () => {
       await userEvent.type(
         screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-        "ban"
+        "ban",
       );
       await userEvent.keyboard("{ArrowDown}");
       await userEvent.keyboard("{ArrowUp}");
@@ -105,13 +107,13 @@ describe("Combobox state-handling", () => {
 
     await act(async () => {
       await userEvent.click(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
       );
     });
     await act(async () => {
       await userEvent.type(
         screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-        "apple"
+        "apple",
       );
       await userEvent.keyboard("{ArrowDown}");
       await userEvent.keyboard("{Escape}");
@@ -119,7 +121,7 @@ describe("Combobox state-handling", () => {
     });
 
     expect(
-      await screen.findByRole("option", { name: "banana" })
+      await screen.findByRole("option", { name: "banana" }),
     ).toBeInTheDocument();
   });
 });