@navikt/ds-react 4.6.0 → 4.7.0

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

@@ -0,0 +1,413 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
+import React, { useState, useId, useMemo } from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import { Chips, UNSAFE_Combobox, TextField } from "../../index";
+import { expect } from "@storybook/jest";
+
+export default {
+  title: "ds-react/Combobox",
+  component: UNSAFE_Combobox,
+  argTypes: {
+    isListOpen: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isLoading: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} as Meta;
+
+const options = [
+  "banana",
+  "apple",
+  "apple pie",
+  "tangerine",
+  "pear",
+  "grape",
+  "kiwi",
+  "mango",
+  "passion fruit",
+  "pineapple",
+  "strawberry",
+  "watermelon",
+  "grape fruit",
+];
+
+const initialSelectedOptions = ["passion fruit", "grape fruit"];
+
+const DemoContainer = ({
+  dataTheme,
+  children,
+}: {
+  children: any;
+  dataTheme: "dark" | "light";
+}) => (
+  <div data-theme={dataTheme} style={{ width: "300px" }}>
+    {children}
+  </div>
+);
+
+export const Default = (props) => {
+  const id = useId();
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      <UNSAFE_Combobox
+        options={props.options}
+        label="Hva er dine favorittfrukter?"
+        /* everything under here is optional? */
+        shouldAutocomplete={props.shouldAutoComplete}
+        size="medium"
+        id={id}
+      />
+    </DemoContainer>
+  );
+};
+
+Default.args = {
+  options,
+  shouldAutoComplete: true,
+};
+
+export function MultiSelect(props) {
+  const id = useId();
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      <UNSAFE_Combobox
+        id={id}
+        label="Komboboks - velg flere"
+        options={props.options}
+        isMultiSelect={props.isMultiSelect}
+      />
+    </DemoContainer>
+  );
+}
+
+MultiSelect.args = {
+  options,
+  isMultiSelect: true,
+};
+
+export function MultiSelectWithAddNewOptions(props) {
+  const id = useId();
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      <UNSAFE_Combobox
+        id={id}
+        isMultiSelect={props.isMultiSelect}
+        label="Komboboks (med mulighet for å legge til nye verdier)"
+        options={props.options}
+        allowNewValues={props.allowNewValues}
+      />
+    </DemoContainer>
+  );
+}
+
+MultiSelectWithAddNewOptions.args = {
+  allowNewValues: true,
+  isMultiSelect: true,
+  options,
+  shouldAutocomplete: false,
+};
+
+export const MultiSelectWithExternalChips = (props) => {
+  const [selectedOptions, setSelectedOptions] = useState<string[]>(
+    props.selectedOptions
+  );
+  const [value, setValue] = useState("");
+  const id = useId();
+
+  const toggleSelected = (option) =>
+    selectedOptions.includes(option)
+      ? setSelectedOptions(selectedOptions.filter((opt) => opt !== option))
+      : setSelectedOptions([...selectedOptions, option]);
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      {selectedOptions && (
+        <Chips>
+          {selectedOptions.map((option) => (
+            <Chips.Removable
+              key={option}
+              onPointerUp={() => toggleSelected(option)}
+              onKeyUp={(e) => e.key === "Enter" && toggleSelected(option)}
+            >
+              {option}
+            </Chips.Removable>
+          ))}
+        </Chips>
+      )}
+      <UNSAFE_Combobox
+        options={options}
+        selectedOptions={selectedOptions}
+        onToggleSelected={(option: string) => toggleSelected(option)}
+        isListOpen={props.isListOpen}
+        isMultiSelect
+        value={props.controlled ? value : undefined}
+        onChange={(event) =>
+          props.controlled ? setValue(event.currentTarget.value) : undefined
+        }
+        label="Komboboks"
+        size="medium"
+        error={props.error && "error here"}
+        id={id}
+        shouldShowSelectedOptions={false}
+      />
+    </DemoContainer>
+  );
+};
+
+MultiSelectWithExternalChips.args = {
+  controlled: false,
+  options,
+  selectedOptions: [],
+};
+
+export function Loading(props) {
+  const id = useId();
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      <UNSAFE_Combobox
+        id={id}
+        label="Komboboks (laster)"
+        options={[]}
+        selectedOptions={[]}
+        isListOpen={props.isListOpen}
+        isLoading={props.isLoading}
+      />
+    </DemoContainer>
+  );
+}
+
+Loading.args = {
+  isLoading: true,
+  isListOpen: true,
+};
+
+export function ComboboxWithNoHits(props) {
+  const id = useId();
+  const [value, setValue] = useState(props.value);
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      <UNSAFE_Combobox
+        id={id}
+        label="Komboboks (uten søketreff)"
+        options={props.options}
+        value={value}
+        onChange={(event) => setValue(event.currentTarget.value)}
+        isListOpen={true}
+      />
+    </DemoContainer>
+  );
+}
+
+ComboboxWithNoHits.args = {
+  options,
+  value: "Orange",
+};
+
+export const Controlled = (props) => {
+  const id = useId();
+  const [value, setValue] = useState(props.value);
+  const [selectedOptions, setSelectedOptions] = useState(props.selectedOptions);
+  const filteredOptions = useMemo(
+    () => props.options.filter((option) => option.includes(value)),
+    [props.options, value]
+  );
+
+  const onToggleSelected = (option, isSelected) => {
+    if (isSelected) {
+      setSelectedOptions([...selectedOptions, option]);
+    } else {
+      setSelectedOptions(selectedOptions.filter((o) => o !== option));
+    }
+  };
+
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      <TextField
+        label="Overstyr value"
+        onChange={(event) => setValue(event.target.value)}
+        value={value}
+      />
+      <br />
+      <UNSAFE_Combobox
+        label="Hva er dine favorittfrukter?"
+        id={id}
+        filteredOptions={filteredOptions}
+        isMultiSelect
+        options={props.options}
+        onChange={(event) => setValue(event.target.value)}
+        onToggleSelected={onToggleSelected}
+        selectedOptions={selectedOptions}
+        value={value}
+      />
+    </DemoContainer>
+  );
+};
+
+Controlled.args = {
+  value: "apple",
+  options,
+  selectedOptions: initialSelectedOptions,
+};
+
+export const ComboboxSizes = (props) => (
+  <DemoContainer dataTheme={props.darkMode}>
+    <UNSAFE_Combobox
+      label="Hva er dine favorittfrukter?"
+      description="Medium single-select"
+      options={options}
+    />
+    <br />
+    <UNSAFE_Combobox
+      label="Hva er dine favorittfrukter?"
+      description="Small single-select"
+      options={options}
+      size="small"
+    />
+    <br />
+    <UNSAFE_Combobox
+      label="Hva er dine favorittfrukter?"
+      description="Medium multiselect"
+      options={options}
+      isMultiSelect
+      allowNewValues
+    />
+    <br />
+    <UNSAFE_Combobox
+      label="Hva er dine favorittfrukter?"
+      description="Small multiselect"
+      options={options}
+      isMultiSelect
+      size="small"
+      allowNewValues
+    />
+  </DemoContainer>
+);
+
+ComboboxSizes.args = {
+  options,
+};
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const CancelInputTest = {
+  render: (props) => {
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+        />
+      </DemoContainer>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const input = canvas.getByLabelText("Hva er dine favorittfrukter?");
+
+    userEvent.click(input);
+    await userEvent.type(input, "apple", { delay: 200 });
+    await sleep(1000);
+
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(1000);
+    userEvent.keyboard("{Escape}");
+    await sleep(1000);
+    userEvent.keyboard("{ArrowDown}");
+    const banana = canvas.getByText("banana");
+    userEvent.click(banana);
+  },
+};
+
+export const RemoveSelectedMultiSelectTest = {
+  render: (props) => {
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          isMultiSelect
+        />
+      </DemoContainer>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const input = canvas.getByLabelText("Hva er dine favorittfrukter?");
+
+    userEvent.click(input);
+    await userEvent.type(input, "apple", { delay: 200 });
+    await sleep(250);
+
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    userEvent.keyboard("{Enter}");
+    await sleep(250);
+    userEvent.keyboard("{Escape}");
+    await sleep(250);
+
+    userEvent.click(input);
+    await userEvent.type(input, "banana", { delay: 200 });
+    await sleep(250);
+
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    userEvent.keyboard("{Enter}");
+    await sleep(250);
+    userEvent.keyboard("{Escape}");
+    await sleep(250);
+
+    const appleSlett = canvas.getByLabelText("apple slett");
+    userEvent.click(appleSlett);
+    await sleep(250);
+
+    const bananaSlett = canvas.getByLabelText("banana slett");
+    expect(bananaSlett).toBeInTheDocument();
+    const appleSlettAgain = canvas.queryByLabelText("apple slett");
+    expect(appleSlettAgain).not.toBeInTheDocument();
+  },
+};
+
+export const AddWhenAddNewDisabledTest = {
+  render: (props) => {
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          isMultiSelect
+        />
+      </DemoContainer>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const input = canvas.getByLabelText("Hva er dine favorittfrukter?");
+
+    userEvent.click(input);
+    await userEvent.type(input, "aaa", { delay: 200 });
+    await sleep(250);
+
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    userEvent.keyboard("{Enter}");
+    await sleep(250);
+    userEvent.keyboard("{Escape}");
+    await sleep(250);
+
+    const invalidSelect = canvas.queryByLabelText("aaa slett");
+    expect(invalidSelect).not.toBeInTheDocument();
+  },
+};

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

@@ -0,0 +1,123 @@
+/* eslint-disable react/jsx-pascal-case */
+import { render } 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";
+
+const options = [
+  "banana",
+  "apple",
+  "tangerine",
+  "pear",
+  "grape",
+  "kiwi",
+  "mango",
+  "passion fruit",
+  "pineapple",
+  "strawberry",
+  "watermelon",
+  "grape fruit",
+];
+
+const App = (props) => {
+  const id = useId();
+  return (
+    <div data-theme="light">
+      <UNSAFE_Combobox
+        label="Hva er dine favorittfrukter?"
+        size="medium"
+        variant="simple"
+        id={id}
+        {...props}
+      />
+    </div>
+  );
+};
+
+describe("Render combobox", () => {
+  describe("with multi select", () => {
+    it("Should be able to search, select and remove selections", async () => {
+      const utils = render(<App isMultiSelect options={options} />);
+
+      await act(async () => {
+        await userEvent.click(
+          utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+        );
+      });
+      await act(async () => {
+        await userEvent.type(
+          utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+          "apple"
+        );
+      });
+      await act(async () => {
+        await userEvent.click(
+          await utils.findByRole("option", { name: "apple" })
+        );
+      });
+      expect(
+        await utils.findByRole("option", { name: "apple", selected: true })
+      ).toBeInTheDocument();
+      await act(async () => {
+        await userEvent.click(
+          await utils.findByRole("button", { name: "apple slett" })
+        );
+      });
+    });
+  });
+
+  it("Should show loading icon when loading (used for async search)", async () => {
+    const utils = render(<App options={[]} isListOpen isLoading />);
+
+    expect(await utils.findByRole("option", { name: "venter..." }));
+  });
+});
+
+describe("Combobox state-handling", () => {
+  it("Should not select previous focused element when closes", async () => {
+    const utils = render(<App options={options} />);
+
+    await act(async () => {
+      await userEvent.click(
+        utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+      );
+    });
+    await act(async () => {
+      await userEvent.type(
+        utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+        "ban"
+      );
+      await userEvent.keyboard("{ArrowDown}");
+      await userEvent.keyboard("{ArrowUp}");
+      await userEvent.keyboard("{Enter}");
+    });
+
+    expect(
+      await utils.queryByRole("button", { name: "banana slett" })
+    ).toBeNull();
+  });
+
+  it("Should reset list when resetting input (ESC)", async () => {
+    const utils = render(<App options={options} />);
+
+    await act(async () => {
+      await userEvent.click(
+        utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" })
+      );
+    });
+    await act(async () => {
+      await userEvent.type(
+        utils.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+        "apple"
+      );
+      await userEvent.keyboard("{ArrowDown}");
+      await userEvent.keyboard("{Escape}");
+      await userEvent.keyboard("{ArrowDown}");
+    });
+
+    expect(
+      await utils.findByRole("option", { name: "banana" })
+    ).toBeInTheDocument();
+  });
+});

package/src/form/combobox/customOptionsContext.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useCallback, createContext, useContext } from "react";
+import { useInputContext } from "./Input/inputContext";
+
+type CustomOptionsContextType = {
+  customOptions: string[];
+  removeCustomOption: (option: string) => void;
+  addCustomOption: (option: string) => void;
+};
+
+const CustomOptionsContext = createContext<CustomOptionsContextType>(
+  {} as CustomOptionsContextType
+);
+
+export const CustomOptionsProvider = ({ children }) => {
+  const [customOptions, setCustomOptions] = useState<string[]>([]);
+  const { focusInput } = useInputContext();
+
+  const removeCustomOption = useCallback(
+    (option) => {
+      setCustomOptions((prevCustomOptions) =>
+        prevCustomOptions.filter((o) => o !== option)
+      );
+      focusInput();
+    },
+    [focusInput, setCustomOptions]
+  );
+
+  const addCustomOption = useCallback(
+    (option) => {
+      setCustomOptions((prevOptions) => [...prevOptions, option]);
+      focusInput();
+    },
+    [focusInput, setCustomOptions]
+  );
+
+  const customOptionsState = {
+    customOptions,
+    removeCustomOption,
+    addCustomOption,
+  };
+
+  return (
+    <CustomOptionsContext.Provider value={customOptionsState}>
+      {children}
+    </CustomOptionsContext.Provider>
+  );
+};
+
+export const useCustomOptionsContext = () => {
+  const context = useContext(CustomOptionsContext);
+  if (!context) {
+    throw new Error(
+      "useCustomOptionsContext must be used within a CustomOptionsProvider"
+    );
+  }
+  return context;
+};

package/src/form/combobox/index.ts

@@ -0,0 +1,2 @@
+export { default as Combobox } from "./ComboboxProvider";
+export { type ComboboxProps } from "./types";

package/src/form/combobox/types.ts

@@ -0,0 +1,122 @@
+import React, { ChangeEvent, InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+
+export interface ComboboxProps
+  extends FormFieldProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
+  /**
+   * Combobox label
+   */
+  label: React.ReactNode;
+  /**
+   * List of options to use for autocompletion
+   */
+  options: string[];
+  /**
+   * 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
+   */
+  clearButton?: boolean;
+  /**
+   * Custom name for the clear button. Requires "clearButton" to be "true".
+   *
+   * @default "Tøm"
+   */
+  clearButtonLabel?: string;
+  /**
+   * A list of options to display in the dropdown list.
+   * 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[];
+  /**
+   * Optionally hide the label visually.
+   * Not recommended, but can be considered for e.g. search fields in the top menu.
+   */
+  hideLabel?: boolean;
+  /**
+   * Custom class name for the input field.
+   *
+   * If used for styling, please consider using tokens instead.
+   */
+  inputClassName?: string | undefined;
+  /**
+   * Controlled open/closed state for the dropdown list
+   */
+  isListOpen?: boolean;
+  /**
+   * 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
+   *
+   * 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.
+   *
+   */
+  isMultiSelect?: boolean;
+  /**
+   * Callback function triggered whenever the value of the input field is triggered.
+   *
+   * @param event
+   * @returns
+   */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * 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
+   *
+   * @param option
+   * @param isSelected
+   * @returns
+   */
+  onToggleSelected?: (option: string, isSelected: boolean) => void;
+  /**
+   * List of selected options.
+   *
+   * 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[];
+  /**
+   * Set to "true" to enable inline autocomplete.
+   *
+   * @default false
+   */
+  shouldAutocomplete?: boolean;
+  /**
+   * 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
+   *
+   * @default true
+   */
+  toggleListButton?: boolean;
+  /**
+   * Custom name for the toggle list-button. Requires "toggleListButton" to be "true".
+   *
+   * @default "Alternativer"
+   */
+  toggleListButtonLabel?: string;
+  /**
+   * Set this to override the value of the input field.
+   *
+   * This converts the input to a controlled input, so you have to use onChange to update the value.
+   */
+  value?: string;
+}