@navikt/ds-react 5.12.4 → 5.13.0

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"),
     );
   },
 };

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();
   });
 });

package/src/form/combobox/customOptionsContext.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, createContext, useContext } from "react";
+import React, { createContext, useCallback, useContext, useState } from "react";
 import { useInputContext } from "./Input/inputContext";
 
 type CustomOptionsContextType = {
@@ -9,7 +9,7 @@ type CustomOptionsContextType = {
 };
 
 const CustomOptionsContext = createContext<CustomOptionsContextType>(
-  {} as CustomOptionsContextType
+  {} as CustomOptionsContextType,
 );
 
 export const CustomOptionsProvider = ({
@@ -26,11 +26,11 @@ export const CustomOptionsProvider = ({
   const removeCustomOption = useCallback(
     (option: string) => {
       setCustomOptions((prevCustomOptions) =>
-        prevCustomOptions.filter((o) => o !== option)
+        prevCustomOptions.filter((o) => o !== option),
       );
       focusInput();
     },
-    [focusInput, setCustomOptions]
+    [focusInput, setCustomOptions],
   );
 
   const addCustomOption = useCallback(
@@ -42,7 +42,7 @@ export const CustomOptionsProvider = ({
       }
       focusInput();
     },
-    [focusInput, isMultiSelect, setCustomOptions]
+    [focusInput, isMultiSelect, setCustomOptions],
   );
 
   const customOptionsState = {
@@ -63,7 +63,7 @@ export const useCustomOptionsContext = () => {
   const context = useContext(CustomOptionsContext);
   if (!context) {
     throw new Error(
-      "useCustomOptionsContext must be used within a CustomOptionsProvider"
+      "useCustomOptionsContext must be used within a CustomOptionsProvider",
     );
   }
   return context;

package/src/form/combobox/types.ts

@@ -68,7 +68,7 @@ export interface ComboboxProps
    */
   onChange?: (
     event: ChangeEvent<HTMLInputElement> | null,
-    value?: string
+    value?: string,
   ) => void;
   /**
    * Callback function triggered whenever the input field is cleared
@@ -88,7 +88,7 @@ export interface ComboboxProps
   onToggleSelected?: (
     option: string,
     isSelected: boolean,
-    isCustomOption: boolean
+    isCustomOption: boolean,
   ) => void;
   /**
    * List of selected options.

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, HTMLAttributes, isValidElement } from "react";
 import cl from "clsx";
-import { Heading, BodyShort } from "../../typography";
-import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
+import React, { HTMLAttributes, forwardRef, isValidElement } from "react";
+import { BodyShort, Heading } from "../../typography";
 import { useId } from "../../util";
+import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -72,7 +72,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       heading,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const headingId = useId();
 
@@ -83,7 +83,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         className={cl(
           className,
           "navds-error-summary",
-          `navds-error-summary--${size}`
+          `navds-error-summary--${size}`,
         )}
         tabIndex={-1}
         aria-live="polite"
@@ -108,7 +108,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         </BodyShort>
       </section>
     );
-  }
+  },
 ) as ErrorSummaryComponent;
 
 ErrorSummary.Item = ErrorSummaryItem;

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util";
 
 export interface ErrorSummaryItemProps
@@ -30,7 +30,7 @@ export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
         {children}
       </Component>
     );
-  }
+  },
 );
 
 export default ErrorSummaryItem;

package/src/form/error-summary/error-summary.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
 import { Meta } from "@storybook/react";
+import React from "react";
 import { ErrorSummary } from "..";
+
 export default {
   title: "ds-react/Errorsummary",
   component: ErrorSummary,

package/src/form/radio/Radio.test.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import faker from "faker";
+import React from "react";
 import { Radio, RadioGroup } from ".";
 
 const value1 = faker.datatype.string();

package/src/form/radio/Radio.tsx

@@ -27,7 +27,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
           !!props["aria-labelledby"] && props["aria-labelledby"],
           {
             [descriptionId]: props.description,
-          }
+          },
         )}
         className="navds-radio__input"
         ref={ref}

package/src/form/radio/RadioGroup.tsx

@@ -68,7 +68,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
       readOnly,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const fieldset = useContext(FieldsetContext);
 
@@ -82,7 +82,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         className={cl(
           className,
           "navds-radio-group",
-          `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`
+          `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -99,7 +99,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         </RadioGroupContext.Provider>
       </Fieldset>
     );
-  }
+  },
 );
 
 export default RadioGroup;

package/src/form/radio/useRadio.ts

@@ -12,7 +12,7 @@ export const useRadio = (props: RadioProps) => {
 
   const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description"]),
-    "radio"
+    "radio",
   );
 
   if (!radioGroup) {

package/src/form/search/Search.tsx

@@ -1,4 +1,3 @@
-import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, {
   InputHTMLAttributes,
@@ -8,6 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { mergeRefs, omit } from "../../util";
 import { FormFieldProps, useFormField } from "../useFormField";
@@ -127,7 +127,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         value === undefined && setInternalValue(v);
         onChange?.(v);
       },
-      [onChange, value]
+      [onChange, value],
     );
 
     const handleClear = useCallback(
@@ -136,7 +136,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         handleChange("");
         searchRef.current && searchRef.current?.focus?.();
       },
-      [handleChange, onClear]
+      [handleChange, onClear],
     );
 
     const handleClick = () => {
@@ -166,7 +166,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
             "navds-search--with-size": !!htmlSize,
-          }
+          },
         )}
       >
         <Label
@@ -212,7 +212,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 `navds-search__input--${variant}`,
                 "navds-text-field__input",
                 "navds-body-short",
-                `navds-body-short--${size}`
+                `navds-body-short--${size}`,
               )}
               {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />
@@ -252,7 +252,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         </div>
       </div>
     );
-  }
+  },
 ) as SearchComponent;
 
 Search.Button = SearchButton;

package/src/form/search/SearchButton.tsx

@@ -1,6 +1,6 @@
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
 import { SearchContext } from "./context";
 
@@ -49,7 +49,7 @@ const SearchButton: SearchButtonType = forwardRef(
         {children}
       </Button>
     );
-  }
+  },
 );
 
 export default SearchButton;

package/src/form/search/search.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-
 import { Search } from "../index";
+
 export default {
   title: "ds-react/Search",
   component: Search,

package/src/form/stories/fieldset.stories.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import { Fieldset } from "../index";
 import { Meta } from "@storybook/react";
+import React from "react";
 import { TextField } from "../../index";
+import { Fieldset } from "../index";
+
 export default {
   title: "ds-react/Fieldset",
   component: Fieldset,

package/src/form/stories/select.stories.tsx

@@ -1,6 +1,7 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Select } from "../index";
-import { Meta } from "@storybook/react";
+
 export default {
   title: "ds-react/Select",
   component: Select,

package/src/form/stories/text-field.stories.tsx

@@ -1,6 +1,7 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { TextField } from "../index";
-import { Meta } from "@storybook/react";
+
 export default {
   title: "ds-react/TextField",
   component: TextField,

package/src/form/useFormField.ts

@@ -55,7 +55,7 @@ export interface FormFieldType {
  */
 export const useFormField = (
   props: FormFieldProps,
-  prefix: string
+  prefix: string,
 ): FormFieldType => {
   const { size, error, errorId: propErrorId } = props;
 
@@ -80,10 +80,10 @@ export const useFormField = (
 
   if ((props as any)?.required && process.env.NODE_ENV !== "production") {
     console.warn(
-      "Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:"
+      "Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:",
     );
     console.warn(
-      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471"
+      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471",
     );
   }
 

package/src/grid/Cell.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 
 type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface CellProps extends HTMLAttributes<HTMLDivElement> {
@@ -41,13 +41,13 @@ export const Cell = forwardRef<HTMLDivElement, CellProps>(
           sm && `navds-grid__cell--sm-${sm}`,
           md && `navds-grid__cell--md-${md}`,
           lg && `navds-grid__cell--lg-${lg}`,
-          className
+          className,
         )}
       >
         {children}
       </div>
     );
-  }
+  },
 );
 
 export default Cell;

package/src/grid/Grid.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -17,7 +17,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     <div ref={ref} className={cl("navds-grid", className)} {...rest}>
       {children}
     </div>
-  )
+  ),
 );
 
 export default Grid;

package/src/grid/grid.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { BodyLong, Grid, Cell, ContentContainer } from "../index";
+import { BodyLong, Cell, ContentContainer, Grid } from "../index";
 
 export default {
   title: "ds-react/Primitives/Grid",

package/src/guide-panel/GuidePanel.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { DefaultIllustration } from "./Illustration";
 
 export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
@@ -49,7 +49,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
       </div>
       <div className="navds-guide-panel__content">{children}</div>
     </div>
-  )
+  ),
 );
 
 export default GuidePanel;

package/src/guide-panel/guidepanel.stories.tsx

@@ -1,6 +1,6 @@
-import { InformationIcon } from "@navikt/aksel-icons";
 import { Meta } from "@storybook/react";
 import React from "react";
+import { InformationIcon } from "@navikt/aksel-icons";
 import { BodyLong, GuidePanel, VStack } from "../index";
 
 export default {

package/src/help-text/HelpText.tsx

@@ -61,7 +61,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       wrapperClassName,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
@@ -98,7 +98,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
         </Popover>
       </div>
     );
-  }
+  },
 );
 
 export default HelpText;

package/src/internal-header/InternalHeader.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,

package/src/internal-header/InternalHeaderButton.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface InternalHeaderButtonProps

package/src/internal-header/InternalHeaderTitle.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface InternalHeaderTitleProps