@navikt/ds-react 6.1.1 → 6.3.0

package/src/form/combobox/combobox-utils.test.ts

@@ -0,0 +1,67 @@
+import {
+  isInList,
+  mapToComboboxOptionArray,
+  toComboboxOption,
+} from "./combobox-utils";
+
+const list = [
+  { label: "Hjelpemidler", value: "HJE" },
+  { label: "Oppfølging", value: "OPP" },
+  { label: "Sykepenger", value: "SYK" },
+  { label: "Sykemelding", value: "SYM" },
+];
+
+describe("isInList", () => {
+  test("finds a string value in a list of ComboboxOptions", () => {
+    expect(isInList("Oppfølging", list)).toBe(true);
+    expect(isInList("SYM", list)).toBe(true);
+    expect(isInList("Arbeidsavklaringspenger", list)).toBe(false);
+    expect(isInList("AAP", list)).toBe(false);
+  });
+
+  test("finds a ComboboxOption in a list of ComboboxOptions", () => {
+    expect(isInList({ label: "Oppfølging", value: "OPP" }, list)).toBe(true);
+    expect(isInList({ label: "Sykemelding", value: "SYM" }, list)).toBe(true);
+    expect(
+      isInList({ label: "Arbeidsavklaringspenger", value: "AAP" }, list),
+    ).toBe(false);
+    expect(
+      isInList({ label: "Arbeidsavklaringspenger", value: "AAP" }, list),
+    ).toBe(false);
+  });
+
+  test("returns false for ComboboxOptions which do not match both label and value", () => {
+    expect(isInList({ label: "Oppfølging", value: "SYM" }, list)).toBe(false);
+    expect(isInList({ label: "Sykemelding", value: "OPP" }, list)).toBe(false);
+  });
+});
+
+describe("mapToComboboxOptionArray", () => {
+  test("maps an array of strings to an array of ComboboxOptions", () => {
+    const stringArray = ["Hjelpemidler", "Oppfølging", "Sykepenger"];
+    const comboboxOptions = [
+      { label: "Hjelpemidler", value: "Hjelpemidler" },
+      { label: "Oppfølging", value: "Oppfølging" },
+      { label: "Sykepenger", value: "Sykepenger" },
+    ];
+    expect(mapToComboboxOptionArray(stringArray)).toEqual(comboboxOptions);
+  });
+
+  test("does not change an array of ComboboxOptions", () => {
+    const comboboxOptions = [
+      { label: "Hjelpemidler", value: "Hjelpemidler" },
+      { label: "Oppfølging", value: "Oppfølging" },
+      { label: "Sykepenger", value: "Sykepenger" },
+    ];
+    expect(mapToComboboxOptionArray(comboboxOptions)).toEqual(comboboxOptions);
+  });
+});
+
+describe("toComboboxOption", () => {
+  test("creates a ComboboxOption from a string", () => {
+    expect(toComboboxOption("Hjelpemidler")).toEqual({
+      label: "Hjelpemidler",
+      value: "Hjelpemidler",
+    });
+  });
+});

package/src/form/combobox/combobox-utils.ts

@@ -0,0 +1,32 @@
+import { ComboboxOption } from "./types";
+
+/**
+ *
+ * @param option ComboboxOption will be compared by both label and value, while a string option is checked if it matches either the label or value in the list.
+ * @param list
+ */
+const isInList = (option: ComboboxOption | string, list: ComboboxOption[]) => {
+  if (typeof option === "string") {
+    return list.some(
+      (listItem) => listItem.label === option || listItem.value === option,
+    );
+  } else {
+    return list.some(
+      (listItem) =>
+        listItem.label === option.label && listItem.value === option.value,
+    );
+  }
+};
+
+const toComboboxOption = (value: string): ComboboxOption => ({
+  label: value,
+  value,
+});
+
+const mapToComboboxOptionArray = (options?: string[] | ComboboxOption[]) => {
+  return options?.map((option: string | ComboboxOption) =>
+    typeof option === "string" ? toComboboxOption(option) : option,
+  );
+};
+
+export { isInList, mapToComboboxOptionArray, toComboboxOption };

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

@@ -1,6 +1,6 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
-import React, { useId, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { Chips } from "../../chips";
 import { TextField } from "../textfield";
 import { ComboboxProps, UNSAFE_Combobox } from "./index";
@@ -30,10 +30,10 @@ const options = [
   "grape fruit",
 ];
 
-export const Default: StoryFunction = (props) => {
-  const id = useId();
-  return <UNSAFE_Combobox {...props} id={id} />;
-};
+export const Default: StoryFunction = (props) => (
+  <UNSAFE_Combobox {...props} id="combobox" />
+);
+
 Default.args = {
   options,
   label: "Hva er dine favorittfrukter?",
@@ -57,10 +57,9 @@ Default.argTypes = {
 };
 
 export const MultiSelect: StoryFunction = (props) => {
-  const id = useId();
   return (
     <UNSAFE_Combobox
-      id={id}
+      id="combobox-with-multiselect"
       label="Komboboks - velg flere"
       options={props.options}
       isMultiSelect={props.isMultiSelect}
@@ -75,11 +74,55 @@ MultiSelect.args = {
   size: "medium",
 };
 
+export const MultiSelectWithComplexOptions: StoryFunction = (props) => {
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  return (
+    <>
+      <UNSAFE_Combobox
+        {...props}
+        options={props.options.map((option) => ({
+          ...option,
+          label: `${option.label} [${option.value}]`,
+        }))}
+        id="combobox-with-complex-options"
+        label="Velg temakoder"
+        allowNewValues
+        onToggleSelected={(value, isSelected) =>
+          isSelected
+            ? setSelectedOptions([...selectedOptions, value])
+            : setSelectedOptions(selectedOptions.filter((o) => o !== value))
+        }
+        selectedOptions={selectedOptions}
+      />
+    </>
+  );
+};
+
+MultiSelectWithComplexOptions.args = {
+  options: [
+    { label: "Hjelpemidler", value: "HJE" },
+    { label: "Oppfølging", value: "OPP" },
+    { label: "Sykepenger", value: "SYK" },
+    { label: "Sykemelding", value: "SYM" },
+    { label: "Foreldre- og svangerskapspenger", value: "FOR" },
+    { label: "Arbeidsavklaringspenger", value: "AAP" },
+    { label: "Uføretrygd", value: "UFO" },
+    { label: "Pensjon", value: "PEN" },
+    { label: "Barnetrygd", value: "BAR" },
+    { label: "Kontantstøtte", value: "KON" },
+    { label: "Bostøtte", value: "BOS" },
+    { label: "Barnebidrag", value: "BBI" },
+    { label: "Bidragsforskudd", value: "BIF" },
+    { label: "Grunn- og hjelpestønad", value: "GRU" },
+  ],
+  isMultiSelect: true,
+  size: "medium",
+};
+
 export const WithAddNewOptions: StoryFunction = (props) => {
-  const id = useId();
   return (
     <UNSAFE_Combobox
-      id={id}
+      id="combobox-with-add-new-options"
       label="Komboboks med mulighet for å legge til nye verdier"
       options={props.options}
       allowNewValues={props.allowNewValues}
@@ -95,10 +138,9 @@ WithAddNewOptions.args = {
 };
 
 export const MultiSelectWithAddNewOptions: StoryFunction = (props) => {
-  const id = useId();
   return (
     <UNSAFE_Combobox
-      id={id}
+      id="combobox-with-multiselect-and-add-new-options"
       isMultiSelect={props.isMultiSelect}
       label="Multiselect komboboks med mulighet for å legge til nye verdier"
       options={props.options}
@@ -120,7 +162,6 @@ export const MultiSelectWithExternalChips: StoryFn<{
 }> = (props) => {
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const [value, setValue] = useState("");
-  const id = useId();
 
   const toggleSelected = (option: string) =>
     selectedOptions.includes(option)
@@ -142,6 +183,7 @@ export const MultiSelectWithExternalChips: StoryFn<{
         </Chips>
       )}
       <UNSAFE_Combobox
+        id="combobox-with-external-chips"
         options={props.options}
         selectedOptions={selectedOptions}
         onToggleSelected={(option) => toggleSelected(option)}
@@ -154,7 +196,6 @@ export const MultiSelectWithExternalChips: StoryFn<{
         }
         label="Komboboks"
         size="medium"
-        id={id}
         shouldShowSelectedOptions={false}
       />
     </>
@@ -166,19 +207,16 @@ MultiSelectWithExternalChips.args = {
   options,
 };
 
-export const Loading: StoryFunction = (props) => {
-  const id = useId();
-  return (
-    <UNSAFE_Combobox
-      id={id}
-      label="Komboboks (laster)"
-      options={[]}
-      selectedOptions={[]}
-      isListOpen={props.isListOpen}
-      isLoading={props.isLoading}
-    />
-  );
-};
+export const Loading: StoryFunction = (props) => (
+  <UNSAFE_Combobox
+    id="combobox-with-loading-indicator"
+    label="Komboboks (laster)"
+    options={[]}
+    selectedOptions={[]}
+    isListOpen={props.isListOpen}
+    isLoading={props.isLoading}
+  />
+);
 
 Loading.args = {
   isLoading: true,
@@ -186,11 +224,10 @@ Loading.args = {
 };
 
 export const ComboboxWithNoHits: StoryFunction = (props) => {
-  const id = useId();
   const [value, setValue] = useState(props.value);
   return (
     <UNSAFE_Combobox
-      id={id}
+      id="combobox-with-no-hits"
       label="Komboboks (uten søketreff)"
       options={props.options}
       value={value}
@@ -210,7 +247,6 @@ export const Controlled: StoryFn<{
   options: string[];
   initialSelectedOptions: string[];
 }> = (props) => {
-  const id = useId();
   const [value, setValue] = useState(props.value);
   const [selectedOptions, setSelectedOptions] = useState(
     props.initialSelectedOptions,
@@ -238,7 +274,7 @@ export const Controlled: StoryFn<{
       <br />
       <UNSAFE_Combobox
         label="Hva er dine favorittfrukter?"
-        id={id}
+        id="combobox-controlled"
         filteredOptions={filteredOptions}
         isMultiSelect
         options={props.options}
@@ -292,7 +328,6 @@ export const ComboboxSizes = () => (
 );
 
 export const MaxSelectedOptions: StoryFunction = () => {
-  const id = useId();
   const [value, setValue] = useState<string | undefined>("");
   const [selectedOptions, setSelectedOptions] = useState([
     options[0],
@@ -301,7 +336,7 @@ export const MaxSelectedOptions: StoryFunction = () => {
   const comboboxRef = useRef<HTMLInputElement>(null);
   return (
     <UNSAFE_Combobox
-      id={id}
+      id="combobox-with-max-selected-options"
       label="Komboboks med begrenset antall valg"
       options={options}
       maxSelected={{ limit: 2 }}

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

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { act } from "react-dom/test-utils";
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { UNSAFE_Combobox } from "./index";
 
 const options = [
@@ -123,4 +123,35 @@ describe("Combobox state-handling", () => {
       await screen.findByRole("option", { name: "banana" }),
     ).toBeInTheDocument();
   });
+
+  test("Should handle complex options with label and value", async () => {
+    const onToggleSelected = vi.fn();
+    render(
+      <App
+        options={[
+          { label: "Hjelpemidler [HJE]", value: "HJE" },
+          { label: "Oppfølging [OPP]", value: "OPP" },
+          { label: "Sykepenger [SYK]", value: "SYK" },
+          { label: "Sykemelding [SYM]", value: "SYM" },
+        ]}
+        onToggleSelected={onToggleSelected}
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    const bananaOption = screen.getByRole("option", {
+      name: "Hjelpemidler [HJE]",
+      selected: false,
+    });
+    await act(async () => {
+      await userEvent.click(bananaOption);
+    });
+    expect(onToggleSelected).toHaveBeenCalledWith("HJE", true, false);
+    expect(
+      screen.getByRole("option", {
+        name: "Hjelpemidler [HJE]",
+        selected: true,
+      }),
+    ).toBeInTheDocument();
+  });
 });

package/src/form/combobox/customOptionsContext.tsx

@@ -1,11 +1,12 @@
 import React, { createContext, useCallback, useContext, useState } from "react";
 import { useInputContext } from "./Input/inputContext";
+import { ComboboxOption } from "./types";
 
 type CustomOptionsContextType = {
-  customOptions: string[];
-  removeCustomOption: (option: string) => void;
-  addCustomOption: (option: string) => void;
-  setCustomOptions: React.Dispatch<React.SetStateAction<string[]>>;
+  customOptions: ComboboxOption[];
+  removeCustomOption: (option: ComboboxOption) => void;
+  addCustomOption: (option: ComboboxOption) => void;
+  setCustomOptions: React.Dispatch<React.SetStateAction<ComboboxOption[]>>;
 };
 
 const CustomOptionsContext = createContext<CustomOptionsContextType>(
@@ -19,14 +20,14 @@ export const CustomOptionsProvider = ({
   children: any;
   value: { isMultiSelect?: boolean };
 }) => {
-  const [customOptions, setCustomOptions] = useState<string[]>([]);
+  const [customOptions, setCustomOptions] = useState<ComboboxOption[]>([]);
   const { focusInput } = useInputContext();
   const { isMultiSelect } = value;
 
   const removeCustomOption = useCallback(
-    (option: string) => {
+    (option: ComboboxOption) => {
       setCustomOptions((prevCustomOptions) =>
-        prevCustomOptions.filter((o) => o !== option),
+        prevCustomOptions.filter((o) => o.label !== option.label),
       );
       focusInput();
     },
@@ -34,7 +35,7 @@ export const CustomOptionsProvider = ({
   );
 
   const addCustomOption = useCallback(
-    (option: string) => {
+    (option: ComboboxOption) => {
       if (isMultiSelect) {
         setCustomOptions((prevOptions) => [...prevOptions, option]);
       } else {

package/src/form/combobox/types.ts

@@ -1,6 +1,21 @@
 import React, { ChangeEvent, InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
 
+/**
+ * A more complex version of options for the Combobox.
+ * Used for separating the label and the value of the option.
+ */
+export type ComboboxOption = {
+  /**
+   * The label to display in the dropdown list
+   */
+  label: string;
+  /**
+   * The programmatic value of the option, for use internally. Will be returned from onToggleSelected.
+   */
+  value: string;
+};
+
 export type MaxSelected = {
   /**
    * The limit for maximum selected options
@@ -16,23 +31,23 @@ export interface ComboboxProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
   /**
-   * Combobox label
+   * Combobox label.
    */
   label: React.ReactNode;
   /**
-   * List of options to use for autocompletion
+   * List of options
    */
-  options: string[];
+  options: string[] | ComboboxOption[];
   /**
    * If enabled, adds an option to add the value of the input as an option whenever there are no options matching the value.
    */
   allowNewValues?: boolean;
   /**
-   * If "true" adds a button to clear the value in the input field
+   * If `true` adds a button to clear the value in the input field
    */
   clearButton?: boolean;
   /**
-   * Custom name for the clear button. Requires "clearButton" to be "true".
+   * Custom name for the clear button. Requires `clearButton` to be `true`.
    *
    * @default "Tøm"
    */
@@ -42,7 +57,7 @@ export interface ComboboxProps
    * If provided, this overrides the internal search logic in the component.
    * Useful for e.g. searching on a server or when overriding the search algorithm to search for synonyms or similar.
    */
-  filteredOptions?: string[];
+  filteredOptions?: string[] | ComboboxOption[];
   /**
    * Optionally hide the label visually.
    * Not recommended, but can be considered for e.g. search fields in the top menu.
@@ -59,13 +74,13 @@ export interface ComboboxProps
    */
   isListOpen?: boolean;
   /**
-   * Set to "true" when doing an async search and waiting for new filteredOptions.
+   * Set to `true` when doing an async search and waiting for new filteredOptions.
    *
    * Will show a spinner in the dropdown and announce to screen readers that it is loading.
    */
   isLoading?: boolean;
   /**
-   * Set to "true" to allow multiple selections
+   * Set to `true` to allow multiple selections.
    *
    * This will display selected values as a list of Chips in front of the input field, instead of a selection replacing the value of the input.
    *
@@ -75,29 +90,26 @@ export interface ComboboxProps
    * Callback function triggered whenever the value of the input field is triggered.
    *
    * @param event
-   * @returns
    */
   onChange?: (
     event: ChangeEvent<HTMLInputElement> | null,
     value?: string,
   ) => void;
   /**
-   * Callback function triggered whenever the input field is cleared
+   * Callback function triggered whenever the input field is cleared.
    *
    * @param event
-   * @returns
    */
   onClear?: (event: React.PointerEvent | React.KeyboardEvent) => void;
   /**
-   * Callback function triggered whenever an option is selected or de-selected
+   * Callback function triggered whenever an option is selected or de-selected.
    *
-   * @param option
-   * @param isSelected - Whether the option has been selected or unselected
-   * @param isCustomOption - Whether the option comes from user input, instead of from the list
-   * @returns
+   * @param option The option value
+   * @param isSelected Whether the option has been selected or unselected
+   * @param isCustomOption Whether the option comes from user input, instead of from the list
    */
   onToggleSelected?: (
-    option: string,
+    option: ComboboxOption["value"],
     isSelected: boolean,
     isCustomOption: boolean,
   ) => void;
@@ -107,31 +119,31 @@ export interface ComboboxProps
    * Use this prop when controlling the selected state outside for the component,
    * e.g. for a filter, where options can be toggled elsewhere/programmatically.
    */
-  selectedOptions?: string[];
+  selectedOptions?: string[] | ComboboxOption[];
   /**
    * Options for the maximum number of selected options.
    */
   maxSelected?: MaxSelected;
   /**
-   * Set to "true" to enable inline autocomplete.
+   * Set to `true` to enable inline autocomplete.
    *
    * @default false
    */
   shouldAutocomplete?: boolean;
   /**
-   * When set to "true" displays selected options as Chips before the input field
+   * When set to `true` displays selected options as Chips before the input field
    *
    * @default true
    */
   shouldShowSelectedOptions?: boolean;
   /**
-   * When set to "true" displays the toggle button for opening/closing the dropdown list
+   * When set to `true` displays the toggle button for opening/closing the dropdown list
    *
    * @default true
    */
   toggleListButton?: boolean;
   /**
-   * Custom name for the toggle list-button. Requires "toggleListButton" to be "true".
+   * Custom name for the toggle list-button. Requires "toggleListButton" to be `true`.
    *
    * @default "Alternativer"
    */

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

@@ -6,20 +6,20 @@ import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Collectipn of ErrorSummary.Item
+   * Collection of `ErrorSummary.Item`.
    */
   children: React.ReactNode;
   /**
-   * Changes padding and font-sizes
+   * Changes padding and font-sizes.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * Heading above links
+   * Heading above links.
    */
   heading?: React.ReactNode;
   /**
-   * Allows setting a different HTML h-tag
+   * Allows setting a different HTML h-tag.
    * @default "h2"
    */
   headingTag?: React.ElementType<any>;
@@ -30,7 +30,7 @@ interface ErrorSummaryComponent
     ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * Link to error
+   * Link to error.
    *
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    *

package/src/form/file-upload/FileUpload.context.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "../../util/create-context";
+import { ComponentTranslation } from "./i18n/i18n.types";
+
+export type FileUploadLocaleContextProps = {
+  translations?: ComponentTranslation<"FileUpload">;
+};
+
+export const [FileUploadLocaleContextProvider, useFileUploadTranslation] =
+  createContext<FileUploadLocaleContextProps>();