@navikt/ds-react 6.12.0 → 6.14.0

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

@@ -1,11 +1,4 @@
-import React, {
-  ChangeEvent,
-  ChangeEventHandler,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { createContext } from "../../../util/create-context";
 import { useClientLayoutEffect } from "../../../util/hooks";
 import { FormFieldType, useFormField } from "../../useFormField";
@@ -13,12 +6,12 @@ import { ComboboxProps } from "../types";
 
 interface InputContextValue extends FormFieldType {
   clearInput: NonNullable<ComboboxProps["onClear"]>;
-  error?: string;
+  error?: ComboboxProps["error"];
   focusInput: () => void;
   inputRef: React.RefObject<HTMLInputElement>;
   value: string;
   setValue: (text: string) => void;
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange: (newValue: string) => void;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
@@ -31,7 +24,24 @@ const [InputContextProvider, useInputContext] =
     errorMessage: "useInputContext must be used within an InputContextProvider",
   });
 
-const InputProvider = ({ children, value: props }) => {
+interface Props {
+  children: React.ReactNode;
+  value: {
+    defaultValue: ComboboxProps["defaultValue"];
+    description: ComboboxProps["description"];
+    disabled: ComboboxProps["disabled"];
+    error: ComboboxProps["error"];
+    errorId: ComboboxProps["errorId"];
+    id: ComboboxProps["id"];
+    value: ComboboxProps["value"];
+    onChange: ComboboxProps["onChange"];
+    onClear: ComboboxProps["onClear"];
+    shouldAutocomplete: ComboboxProps["shouldAutocomplete"];
+    size: ComboboxProps["size"];
+  };
+}
+
+const InputProvider = ({ children, value: props }: Props) => {
   const {
     defaultValue = "",
     description,
@@ -68,30 +78,22 @@ const InputProvider = ({ children, value: props }) => {
   const [searchTerm, setSearchTerm] = useState(value);
 
   const onChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const newValue = event.currentTarget.value;
+    (newValue: string) => {
       externalValue ?? setInternalValue(newValue);
-      externalOnChange?.(event);
       setSearchTerm(newValue);
+      externalOnChange?.(newValue);
     },
     [externalValue, externalOnChange],
   );
 
-  const setValue = useCallback(
-    (text) => {
-      setInternalValue(text);
-    },
-    [setInternalValue],
-  );
-
   const clearInput = useCallback(
     (event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent) => {
       onClear?.(event);
-      externalOnChange?.(null, "");
-      setValue("");
+      externalOnChange?.("");
+      setInternalValue("");
       setSearchTerm("");
     },
-    [externalOnChange, onClear, setValue],
+    [externalOnChange, onClear, setInternalValue],
   );
 
   const focusInput = useCallback(() => {
@@ -111,7 +113,7 @@ const InputProvider = ({ children, value: props }) => {
     focusInput,
     inputRef,
     value,
-    setValue,
+    setValue: setInternalValue,
     onChange,
     searchTerm,
     setSearchTerm,

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

@@ -1,18 +1,19 @@
 import cl from "clsx";
 import React, {
-  ChangeEvent,
   InputHTMLAttributes,
   forwardRef,
   useCallback,
+  useRef,
 } from "react";
 import { omit } from "../../../util";
+import { useMergeRefs } from "../../../util/hooks";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "./Input.context";
 
 interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "disabled"> {
   ref: React.Ref<HTMLInputElement>;
   inputClassName?: string;
   value?: string;
@@ -20,7 +21,17 @@ interface InputProps
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ inputClassName, ...rest }, ref) => {
-    const { clearInput, inputProps, onChange, size, value } = useInputContext();
+    const internalRef = useRef<HTMLInputElement>(null);
+    const mergedRefs = useMergeRefs(ref, internalRef);
+    const {
+      clearInput,
+      inputProps,
+      onChange,
+      size,
+      value,
+      searchTerm,
+      setValue,
+    } = useInputContext();
     const {
       selectedOptions,
       removeSelectedOption,
@@ -56,7 +67,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (!isMultiSelect && !isTextInSelectedOptions(currentOption.label)) {
             toggleIsListOpen(false);
           }
-        } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
+        } else if (isTextInSelectedOptions(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
           clearInput(event);
@@ -67,13 +78,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             allowNewValues && isValueNew
               ? { label: value, value }
               : filteredOptions[0];
+
+          if (!selectedValue) {
+            return;
+          }
+
           toggleOption(selectedValue, event);
-          if (
-            !isMultiSelect &&
-            !isTextInSelectedOptions(
-              filteredOptions[0].label || selectedValue.label,
-            )
-          ) {
+          if (!isMultiSelect && !isTextInSelectedOptions(selectedValue.label)) {
             toggleIsListOpen(false);
           }
         }
@@ -96,10 +107,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
       e.preventDefault();
       switch (e.key) {
-        case "Escape":
-          clearInput(e);
-          toggleIsListOpen(false);
-          break;
         case "Enter":
         case "Accept":
           onEnter(e);
@@ -118,7 +125,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     };
 
     const handleKeyDown = useCallback(
-      (e) => {
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
         setIsMouseLastUsedInputDevice(false);
         if (e.key === "Backspace") {
           if (value === "") {
@@ -132,17 +139,34 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (activeDecendantId || value) {
             e.preventDefault();
           }
+        } else if (e.key === "Escape") {
+          if (isListOpen || value) {
+            e.preventDefault(); // Prevents closing an encasing Modal, as Combobox reacts on keyup.
+            clearInput(e);
+            toggleIsListOpen(false);
+          }
+        } else if (["ArrowLeft", "ArrowRight"].includes(e.key)) {
+          /**
+           * In case user has an active selection and 'completes' the selection with ArrowLeft or ArrowRight
+           * we need to make sure to update the filter.
+           */
+          if (value !== "" && value !== searchTerm) {
+            onChange(value);
+          }
         } else if (e.key === "ArrowDown") {
-          // Check that cursor position is at the end of the input field,
-          // so we don't interfere with text editing
-          if (e.target.selectionStart === value?.length) {
-            e.preventDefault();
-            if (virtualFocus.activeElement === null || !isListOpen) {
-              toggleIsListOpen(true);
-            }
-            virtualFocus.moveFocusDown();
+          // Reset the value to the search term to cancel autocomplete
+          // if the user moves focus down to the FilteredOptions
+          if (value !== searchTerm) {
+            setValue(searchTerm);
           }
+          if (virtualFocus.activeElement === null || !isListOpen) {
+            toggleIsListOpen(true);
+          }
+          virtualFocus.moveFocusDown();
         } else if (e.key === "ArrowUp") {
+          if (value !== "" && value !== searchTerm) {
+            onChange(value);
+          }
           // Check that the FilteredOptions list is open and has virtual focus.
           // Otherwise ignore keystrokes, so it doesn't interfere with text editing
           if (isListOpen && activeDecendantId) {
@@ -161,13 +185,17 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         isListOpen,
         activeDecendantId,
         setIsMouseLastUsedInputDevice,
+        clearInput,
         toggleIsListOpen,
+        onChange,
         virtualFocus,
+        setValue,
+        searchTerm,
       ],
     );
 
     const onChangeHandler = useCallback(
-      (event: ChangeEvent<HTMLInputElement>) => {
+      (event: React.ChangeEvent<HTMLInputElement>) => {
         const newValue = event.target.value;
         if (newValue && newValue !== "") {
           toggleIsListOpen(true);
@@ -175,7 +203,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           toggleIsListOpen(false);
         }
         virtualFocus.moveFocusToTop();
-        onChange(event);
+        onChange(newValue);
       },
       [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen],
     );
@@ -184,10 +212,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <input
         {...rest}
         {...omit(inputProps, ["aria-invalid"])}
-        ref={ref}
+        ref={mergedRefs}
         value={value}
         onBlur={() => virtualFocus.moveFocusToTop()}
-        onChange={onChangeHandler}
+        onClick={() => value !== searchTerm && onChange(value)}
+        onInput={onChangeHandler}
         type="text"
         role="combobox"
         onKeyUp={handleKeyUp}

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

@@ -24,6 +24,7 @@ export const InputController = forwardRef<
     | "size"
     | "onClear"
     | "value"
+    | "disabled"
   >
 >((props, ref) => {
   const {

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

@@ -8,6 +8,7 @@ import { UNSAFE_Combobox } from "../index";
 const options = [
   "banana",
   "apple",
+  "apple pie",
   "tangerine",
   "pear",
   "grape",
@@ -71,86 +72,193 @@ describe("Render combobox", () => {
     });
   });
 
-  test("Should show loading icon when loading (used for async search)", async () => {
-    render(<App options={[]} isListOpen isLoading />);
+  describe("Combobox state-handling", () => {
+    test("Should show loading icon when loading (used for async search)", async () => {
+      render(<App options={[]} isListOpen isLoading />);
 
-    expect(await screen.findByText("Søker...")).toBeInTheDocument();
-  });
-});
+      expect(await screen.findByText("Søker...")).toBeInTheDocument();
+    });
 
-describe("Combobox state-handling", () => {
-  test("Should not select previous focused element when closes", async () => {
-    render(<App options={options} />);
+    test("Should not select previous focused element when closes", async () => {
+      render(<App options={options} />);
 
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-      );
-    });
-    await act(async () => {
-      await userEvent.type(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-        "ban",
-      );
-      await userEvent.keyboard("{ArrowDown}");
-      await userEvent.keyboard("{ArrowUp}");
-      await userEvent.keyboard("{Enter}");
+      await act(async () => {
+        await userEvent.click(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+        );
+      });
+      await act(async () => {
+        await userEvent.type(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+          "ban",
+        );
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{Enter}");
+      });
+
+      expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
     });
 
-    expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
-  });
+    test("Should reset list when resetting input (ESC)", async () => {
+      render(<App options={options} />);
 
-  test("Should reset list when resetting input (ESC)", async () => {
-    render(<App options={options} />);
+      await act(async () => {
+        await userEvent.click(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+        );
+      });
+      await act(async () => {
+        await userEvent.type(
+          screen.getByRole("combobox", {
+            name: "Hva er dine favorittfrukter?",
+          }),
+          "apple",
+        );
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{Escape}");
+        await userEvent.keyboard("{ArrowDown}");
+      });
+
+      expect(
+        await screen.findByRole("option", { name: "banana" }),
+      ).toBeInTheDocument();
+    });
 
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
+    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();
     });
-    await act(async () => {
-      await userEvent.type(
-        screen.getByRole("combobox", { name: "Hva er dine favorittfrukter?" }),
-        "apple",
+
+    test("should trigger onChange for every character typed or removed", async () => {
+      const onChange = vi.fn();
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          options={["Apple", "Orange", "Banana", "Lemon"]}
+          onChange={onChange}
+          onToggleSelected={onToggleSelected}
+          shouldAutocomplete
+        />,
       );
-      await userEvent.keyboard("{ArrowDown}");
-      await userEvent.keyboard("{Escape}");
-      await userEvent.keyboard("{ArrowDown}");
+      const combobox = screen.getByRole("combobox");
+      expect(combobox).toBeInTheDocument();
+
+      await act(async () => {
+        await userEvent.click(combobox);
+        await userEvent.type(combobox, "Lemon");
+      });
+      expect(onChange).toHaveBeenNthCalledWith(1, "L");
+      expect(onChange).toHaveBeenNthCalledWith(2, "Le");
+      expect(onChange).toHaveBeenNthCalledWith(3, "Lem");
+      expect(onChange).toHaveBeenNthCalledWith(4, "Lemo");
+      expect(onChange).toHaveBeenNthCalledWith(5, "Lemon");
     });
 
-    expect(
-      await screen.findByRole("option", { name: "banana" }),
-    ).toBeInTheDocument();
-  });
+    test("should trigger onChange while typing and on accepting autocomplete suggestions", async () => {
+      const onChange = vi.fn();
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          options={[
+            "Hjelpemidler [HJE]",
+            "Oppfølging [OPP]",
+            "Sykepenger [SYK]",
+            "Sykemelding [SYM]",
+          ]}
+          onChange={onChange}
+          onToggleSelected={onToggleSelected}
+          shouldAutocomplete
+        />,
+      );
+      const combobox = screen.getByRole("combobox");
+      expect(combobox).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(combobox);
+        await userEvent.type(combobox, "Syke");
+        await userEvent.keyboard("{ArrowRight}");
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{Enter}");
+      });
+      expect(onChange).toHaveBeenNthCalledWith(1, "S");
+      expect(onChange).toHaveBeenNthCalledWith(2, "Sy");
+      expect(onChange).toHaveBeenNthCalledWith(3, "Syk");
+      expect(onChange).toHaveBeenNthCalledWith(4, "Syke");
+      expect(onChange).toHaveBeenNthCalledWith(5, "Sykepenger [SYK]");
+      expect(onChange).toHaveBeenCalledWith("");
+      expect(onToggleSelected).toHaveBeenCalledOnce();
+      expect(onToggleSelected).toHaveBeenCalledWith(
+        "Sykepenger [SYK]",
+        true,
+        false,
+      );
     });
-    await act(async () => {
-      await userEvent.click(bananaOption);
+  });
+
+  describe("search", () => {
+    test("should find matched anywhere in the label", async () => {
+      render(<App options={options} />);
+
+      const combobox = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+      await act(async () => {
+        await userEvent.click(combobox);
+
+        await userEvent.type(combobox, "p");
+      });
+
+      const searchHits = [
+        "apple",
+        "apple pie",
+        "pear",
+        "grape",
+        "passion fruit",
+        "pineapple",
+        "grape fruit",
+      ];
+      searchHits.forEach((label) => {
+        expect(screen.getByRole("option", { name: label })).toBeInTheDocument();
+      });
+      screen.getAllByRole("option").forEach((option) => {
+        expect(
+          option.textContent && searchHits.includes(option.textContent),
+        ).toBe(true);
+      });
     });
-    expect(onToggleSelected).toHaveBeenCalledWith("HJE", true, false);
-    expect(
-      screen.getByRole("option", {
-        name: "Hjelpemidler [HJE]",
-        selected: true,
-      }),
-    ).toBeInTheDocument();
   });
 });

package/src/form/combobox/types.ts

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
 
 /**
@@ -29,7 +29,10 @@ export type MaxSelected = {
 
 export interface ComboboxProps
   extends FormFieldProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      "size" | "onChange" | "value" | "defaultValue"
+    > {
   /**
    * Combobox label.
    */
@@ -89,12 +92,9 @@ export interface ComboboxProps
   /**
    * Callback function triggered whenever the value of the input field is triggered.
    *
-   * @param event
+   * @param value The value after change
    */
-  onChange?: (
-    event: ChangeEvent<HTMLInputElement> | null,
-    value?: string,
-  ) => void;
+  onChange?: (value: string) => void;
   /**
    * Callback function triggered whenever the input field is cleared.
    *
@@ -156,4 +156,8 @@ export interface ComboboxProps
    * This converts the input to a controlled input, so you have to use onChange to update the value.
    */
   value?: string;
+  /**
+   * Initial value of the input field. Only works when the input is uncontrolled.
+   */
+  defaultValue?: string;
 }

package/src/layout/grid/HGrid.tsx

@@ -92,7 +92,10 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
           <Comp
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
-            className={cl("navds-hgrid", className)}
+            className={cl("navds-hgrid", className, {
+              "navds-hgrid-gap": gap,
+              "navds-hgrid-align": align,
+            })}
             style={styles}
           >
             {children}

package/src/layout/stack/Stack.tsx

@@ -73,7 +73,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
         children,
         className,
         as: Component = "div",
-        align = "stretch",
+        align,
         justify,
         wrap = true,
         gap,
@@ -86,7 +86,6 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
     ) => {
       const style: React.CSSProperties = {
         ..._style,
-        "--__ac-stack-wrap": wrap ? "wrap" : "nowrap",
         ...getResponsiveProps(`stack`, "gap", "spacing", gap),
         ...getResponsiveValue(`stack`, "direction", direction),
         ...getResponsiveValue(`stack`, "align", align),
@@ -104,6 +103,11 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
             className={cl("navds-stack", className, {
               "navds-vstack": direction === "column",
               "navds-hstack": direction === "row",
+              "navds-stack-gap": gap,
+              "navds-stack-align": align,
+              "navds-stack-justify": justify,
+              "navds-stack-direction": direction,
+              "navds-stack-wrap": wrap,
             })}
           >
             {children}

package/src/modal/Modal.tsx

@@ -88,6 +88,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onCancel,
       closeOnBackdropClick,
       width,
+      placement,
       portal,
       className,
       "aria-labelledby": ariaLabelledby,
@@ -147,9 +148,10 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       typeof width === "string" && ["small", "medium"].includes(width);
 
     const mergedClassName = cl("navds-modal", className, {
-      polyfillClassName: needPolyfill,
+      [polyfillClassName]: needPolyfill,
       "navds-modal--autowidth": !width,
       [`navds-modal--${width}`]: isWidthPreset,
+      "navds-modal--top": placement === "top" && !needPolyfill,
     });
 
     const mergedStyle = {

package/src/modal/types.ts

@@ -59,6 +59,11 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
    * @default fit-content (up to 700px)
    * */
   width?: "medium" | "small" | number | `${number}${string}`;
+  /**
+   * Where to place the modal in the viewport. (Will always be centered on mobile and old browsers.)
+   * @default "center"
+   */
+  placement?: "top" | "center";
   /**
    * Lets you render the modal into a different part of the DOM.
    * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.