@navikt/ds-react 6.13.0 → 6.14.0

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/tabs/parts/tablist/useTabList.ts

@@ -48,9 +48,12 @@ export function useTabList() {
         End: lastTab,
       };
 
+      const hasModifiers =
+        event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
+
       const action = keyMap[event.key];
 
-      if (action) {
+      if (action && !hasModifiers) {
         event.preventDefault();
         action(event);
       } else if (event.key === "Tab") {

package/src/toggle-group/parts/useToggleItem.ts

@@ -77,9 +77,12 @@ export function useToggleItem<P extends UseToggleItemProps>(
         End: lastTab,
       };
 
+      const hasModifiers =
+        event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
+
       const action = keyMap[event.key];
 
-      if (action) {
+      if (action && !hasModifiers) {
         event.preventDefault();
         action(event);
       } else if (event.key === "Tab") {

package/src/util/virtualfocus/Context.tsx

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction } from "react";
+import { createContext } from "../create-context";
+import { createDescendantContext } from "../hooks/descendants/useDescendant";
+import { SlottedDivElementRef } from "./SlottedDivElement";
+
+export const [
+  VirtualFocusDescendantsProvider,
+  useVirtualFocusDescendantsContext,
+  useVirtualFocusDescendantInitializer,
+  useVirtualFocusDescendant,
+] = createDescendantContext<
+  SlottedDivElementRef,
+  {
+    handleOnSelect: () => void;
+    handleOnActive: () => void;
+  }
+>();
+
+export const [
+  VirtualFocusInternalContextProvider,
+  useVirtualFocusInternalContext,
+] = createContext<{
+  virtualFocusIdx: number;
+  setVirtualFocusIdx: Dispatch<SetStateAction<number>>;
+  loop: boolean;
+  uniqueId: string;
+}>();

package/src/util/virtualfocus/SlottedDivElement.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+
+interface SlottedDivProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+const SlottedDivElement = forwardRef<HTMLDivElement, SlottedDivProps>(
+  ({ asChild, ...rest }, forwardedRef) => {
+    const Comp = asChild ? Slot : "div";
+    return <Comp {...rest} ref={forwardedRef} />;
+  },
+);
+
+type SlottedDivElementRef = React.ElementRef<typeof SlottedDivElement>;
+
+export { SlottedDivElement, type SlottedDivElementRef, type SlottedDivProps };

package/src/util/virtualfocus/VirtualFocus.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { useId } from "../../util/hooks";
+import {
+  VirtualFocusDescendantsProvider,
+  VirtualFocusInternalContextProvider,
+  useVirtualFocusDescendantInitializer,
+} from "./Context";
+import { VirtualFocusAnchor } from "./parts/VirtualFocusAnchor";
+import { VirtualFocusContent } from "./parts/VirtualFocusContent";
+import { VirtualFocusItem } from "./parts/VirtualFocusItem";
+
+type VirtualFocusProps = {
+  children: React.ReactNode;
+  /**
+   * Whether to cause focus to loop around when it hits the first or last element
+   * @default false
+   **/
+  loop?: boolean;
+};
+
+/**
+ * A component that manages a virtual focus using the 'up' and 'down'
+ * arrow keys as well as selection with 'Return'.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/virtualfocus)
+ * @see 🏷️ {@link AccordionProps}
+ *
+ * @example
+ * ```jsx
+ * <VirtualFocus>
+ *   <VirtualFocus.Anchor
+ *     role="combobox"
+ *     onSelect={() => {
+ *       console.log("you selected the anchor");
+ *     }}
+ *     onActive={() => {
+ *       console.log("the anchor is now virtually focused");
+ *     }}
+ *   >
+ *     <input type="text" />
+ *   </VirtualFocus.Anchor>
+ *   <VirtualFocus.Content>
+ *     <VirtualFocus.Item
+ *       onSelect={() => {
+ *         console.log("you selected the item");
+ *       }}
+ *       onActive={() => {
+ *         console.log("the item is now virtually focused");
+ *       }}
+ *     >
+ *       <p>item 1</p>
+ *     </VirtualFocus.Item>
+ *     <VirtualFocus.Item
+ *       onSelect={() => {
+ *         console.log("you selected the item");
+ *       }}
+ *       onActive={() => {
+ *         console.log("the item is now virtually focused");
+ *       }}
+ *     >
+ *       <p>item 2</p>
+ *     </VirtualFocus.Item>
+ *   </VirtualFocus.Content>
+ * </VirtualFocus>
+ * ```
+ */
+export const VirtualFocus = ({ children, loop = false }: VirtualFocusProps) => {
+  const descendants = useVirtualFocusDescendantInitializer();
+  const [virtualFocusIdx, setVirtualFocusIdx] = useState(0);
+
+  return (
+    <VirtualFocusInternalContextProvider
+      virtualFocusIdx={virtualFocusIdx}
+      setVirtualFocusIdx={setVirtualFocusIdx}
+      loop={loop}
+      uniqueId={useId()}
+    >
+      <VirtualFocusDescendantsProvider value={descendants}>
+        {children}
+      </VirtualFocusDescendantsProvider>
+    </VirtualFocusInternalContextProvider>
+  );
+};
+
+VirtualFocus.Anchor = VirtualFocusAnchor;
+VirtualFocus.Item = VirtualFocusItem;
+VirtualFocus.Content = VirtualFocusContent;
+
+export default VirtualFocus;

package/src/util/virtualfocus/parts/VirtualFocusAnchor.tsx

@@ -0,0 +1,102 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../../slot/Slot";
+import { composeEventHandlers } from "../../composeEventHandlers";
+import { useMergeRefs } from "../../hooks";
+import {
+  useVirtualFocusDescendant,
+  useVirtualFocusInternalContext,
+} from "../Context";
+
+export interface VirtualFocusAnchorProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
+  /**
+   * The role of the container. This is a limited subset of roles that
+   * require manual focus management.
+   *
+   * Children that are to get focus inside this container element shall be
+   * pointed to by `aria-activedescendant`.
+   **/
+  role:
+    | "combobox"
+    | "grid"
+    | "listbox"
+    | "menu"
+    | "menubar"
+    | "radiogroup"
+    | "tree"
+    | "treegrid"
+    | "tablist";
+  /**
+   * The function that is run when the focused element
+   * is to be selected (eg. do an actual search, change route... etc)
+   */
+  onSelect: () => void;
+  /**
+   * The function that is run when the element gets
+   * virtual focus set to it.
+   */
+  onActive: () => void;
+  children: React.ReactElement;
+  /**
+   * Set this to `0` if you want the Anchor itself
+   * to be focusable. Since this Anchor is hoisted & merged with
+   * its first child, you most likely want to keep this as `0`.
+   * @default 0
+   */
+  tabIndex?: number;
+}
+
+/**
+ * Must have a single child that is an input element.
+ */
+export const VirtualFocusAnchor = forwardRef<
+  HTMLInputElement,
+  VirtualFocusAnchorProps
+>(({ onSelect, onActive, children, ...rest }, ref) => {
+  const { virtualFocusIdx, setVirtualFocusIdx, loop, uniqueId } =
+    useVirtualFocusInternalContext();
+
+  const { register, descendants, index } = useVirtualFocusDescendant({
+    handleOnActive: () => {
+      setVirtualFocusIdx(0);
+      onActive();
+    },
+    handleOnSelect: onSelect,
+  });
+
+  const mergedRefs = useMergeRefs(ref, register);
+
+  return (
+    <Slot
+      ref={mergedRefs}
+      tabIndex={0}
+      {...rest}
+      id={`virtualfocus-${uniqueId}-${index}`}
+      aria-owns={`virtualfocus-${uniqueId}-content`}
+      aria-controls={`virtualfocus-${uniqueId}-content`}
+      aria-activedescendant={`virtualfocus-${uniqueId}-${virtualFocusIdx}`}
+      onKeyDown={composeEventHandlers(rest.onKeyDown, (event) => {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          const to_focus_descendant = descendants.next(virtualFocusIdx, loop);
+          if (to_focus_descendant) {
+            to_focus_descendant.handleOnActive();
+          }
+        } else if (event.key === "ArrowUp") {
+          event.preventDefault();
+          const to_focus_descendant = descendants.prev(virtualFocusIdx, loop);
+          if (to_focus_descendant) {
+            to_focus_descendant.handleOnActive();
+          }
+        } else if (event.key === "Enter") {
+          const curr = descendants.item(virtualFocusIdx);
+          if (curr?.handleOnSelect) {
+            curr.handleOnSelect();
+          }
+        }
+      })}
+    >
+      {children}
+    </Slot>
+  );
+});

package/src/util/virtualfocus/parts/VirtualFocusContent.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from "react";
+import { useVirtualFocusInternalContext } from "../Context";
+
+export interface VirtualFocusContentProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {}
+
+export const VirtualFocusContent = forwardRef<
+  HTMLDivElement,
+  VirtualFocusContentProps
+>(({ children, ...rest }, ref) => {
+  const { uniqueId } = useVirtualFocusInternalContext();
+  return (
+    <div ref={ref} {...rest} id={`virtualfocus-${uniqueId}-content`}>
+      {children}
+    </div>
+  );
+});