@navikt/ds-react 6.4.1 → 6.6.0

package/src/tabs/parts/tablist/useScrollButtons.ts

@@ -0,0 +1,69 @@
+import { useEffect, useMemo, useState } from "react";
+import { debounce } from "../../../util";
+
+export function useScrollButtons(listRef: React.RefObject<HTMLDivElement>) {
+  const [displayScroll, setDisplayScroll] = useState({
+    start: false,
+    end: false,
+  });
+
+  const updateScrollButtonState = useMemo(
+    () =>
+      debounce(() => {
+        if (!listRef?.current) return;
+        const { scrollWidth, clientWidth } = listRef.current;
+        const scrollLeft = listRef.current.scrollLeft;
+        // use 1 for the potential rounding error with browser zooms.
+        const showStartScroll = scrollLeft > 1;
+        const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+
+        setDisplayScroll((oldDisplayScroll) =>
+          showStartScroll === oldDisplayScroll.start &&
+          showEndScroll === oldDisplayScroll.end
+            ? oldDisplayScroll
+            : { start: showStartScroll, end: showEndScroll },
+        );
+      }),
+    [listRef],
+  );
+
+  useEffect(() => {
+    const handleResize = () => updateScrollButtonState();
+    const win = listRef.current?.ownerDocument ?? document ?? window;
+    win.addEventListener("resize", handleResize);
+
+    let resizeObserver;
+
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(listRef.current);
+    }
+
+    return () => {
+      win.removeEventListener("resize", handleResize);
+      resizeObserver && resizeObserver.disconnect();
+      updateScrollButtonState.clear();
+    };
+  }, [listRef, updateScrollButtonState]);
+
+  useEffect(() => {
+    updateScrollButtonState();
+  });
+
+  return {
+    update: updateScrollButtonState,
+    start: displayScroll.start,
+    end: displayScroll.end,
+    show: displayScroll.end || displayScroll.start,
+    scrollLeft: () => {
+      if (listRef.current) {
+        listRef.current.scrollLeft -= 100;
+      }
+    },
+    scrollRight: () => {
+      if (listRef.current) {
+        listRef.current.scrollLeft += 100;
+      }
+    },
+  };
+}

package/src/tabs/parts/tablist/useTabList.ts

@@ -0,0 +1,68 @@
+import { useCallback } from "react";
+import { useTabsContext, useTabsDescendantsContext } from "../../Tabs.context";
+
+/**
+ * TabList hook to manage multiple tab buttons,
+ * and ensures only one tab is selected at a time.
+ */
+export function useTabList() {
+  const { focusedValue, loop, selectedValue, setFocusedValue } =
+    useTabsContext();
+
+  const descendants = useTabsDescendantsContext();
+
+  /**
+   * Implements rowing-tabindex for horizontal tabs
+   */
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      /**
+       * Tabs.Tab is registered with its prop 'value'.
+       * We can then use it to find the current focuses descendant
+       */
+      const idx = descendants
+        .values()
+        .findIndex((x) => x.value === focusedValue);
+
+      const nextTab = () => {
+        const next = descendants.nextEnabled(idx, loop);
+        next && next.node?.focus();
+      };
+      const prevTab = () => {
+        const prev = descendants.prevEnabled(idx, loop);
+        prev && prev.node?.focus();
+      };
+      const firstTab = () => {
+        const first = descendants.firstEnabled();
+        first && first.node?.focus();
+      };
+      const lastTab = () => {
+        const last = descendants.lastEnabled();
+        last && last.node?.focus();
+      };
+
+      const keyMap: Record<string, React.KeyboardEventHandler> = {
+        ArrowLeft: prevTab,
+        ArrowRight: nextTab,
+        Home: firstTab,
+        End: lastTab,
+      };
+
+      const action = keyMap[event.key];
+
+      if (action) {
+        event.preventDefault();
+        action(event);
+      } else if (event.key === "Tab") {
+        /**
+         * Imperative focus during keydown is risky so we prevent React's batching updates
+         * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
+         */
+        selectedValue && setTimeout(() => setFocusedValue(selectedValue));
+      }
+    },
+    [descendants, focusedValue, loop, selectedValue, setFocusedValue],
+  );
+
+  return { onKeyDown };
+}

package/src/tabs/parts/tabpanel/TabPanel.tsx

@@ -0,0 +1,50 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { useTabPanel } from "./useTabPanel";
+
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Tab panel content.
+   */
+  children: React.ReactNode;
+  /**
+   * Value for state-handling.
+   */
+  value: string;
+  /**
+   * If true, will only render children when selected.
+   * @default true
+   */
+  lazy?: boolean;
+  /**
+   * Overrides auto-generated id.
+   *
+   * **Warning**: TabPanel generates an id if not provided. If you need to override it,
+   * make sure to also include the correct `aria-labelledby` id for the Tab that labels it.
+   */
+  id?: string;
+}
+
+const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
+  ({ className, value, children, lazy = true, id, ...rest }, ref) => {
+    const ctx = useTabPanel({ value });
+
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cl("navds-tabs__tabpanel", className)}
+        role="tabpanel"
+        tabIndex={0}
+        aria-labelledby={rest["aria-labelledby"] ?? ctx.labelledbyId}
+        id={id ?? ctx.id}
+        hidden={ctx.hidden}
+        data-state={!ctx.hidden ? "active" : "inactive"}
+      >
+        {lazy && ctx.hidden ? null : children}
+      </div>
+    );
+  },
+);
+
+export default TabPanel;

package/src/tabs/parts/tabpanel/useTabPanel.ts

@@ -0,0 +1,18 @@
+import { useTabsContext } from "../../Tabs.context";
+
+type TabPanelProps = {
+  value: string;
+};
+
+/**
+ * Tabs hook for managing the visible/hidden state of Tabs.Panel
+ */
+export function useTabPanel({ value }: TabPanelProps) {
+  const { id, selectedValue, makeTabId, makeTabPanelId } = useTabsContext();
+
+  return {
+    labelledbyId: makeTabId(id, value),
+    hidden: selectedValue !== value,
+    id: makeTabPanelId(id, value),
+  };
+}

package/src/tabs/useTabs.ts

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { useId } from "../util";
+import { useControllableState } from "../util/hooks/useControllableState";
+import { TabsProps } from "./Tabs.types";
+
+export function useTabs({
+  onChange,
+  value,
+  defaultValue = "",
+  id,
+}: Pick<TabsProps, "onChange" | "value" | "defaultValue" | "id">) {
+  const [focusedValue, setFocusedValue] = useState(defaultValue);
+
+  const [selectedValue, setSelectedValue] = useControllableState({
+    defaultValue,
+    value,
+    onChange,
+  });
+
+  /**
+   * Sync focused `value` with controlled `selectedValue`
+   */
+  useEffect(() => {
+    if (value != null) {
+      setFocusedValue(value);
+    }
+  }, [value]);
+
+  /**
+   * Scope ids for better tracking
+   */
+  const uuid = useId();
+
+  return {
+    id: `tabs-${id ?? uuid}`,
+    selectedValue,
+    setSelectedValue,
+    focusedValue,
+    setFocusedValue,
+    makeTabId,
+    makeTabPanelId,
+  };
+}
+
+function makeTabId(id: string, value: string) {
+  return `${id}--tab-${value}`;
+}
+
+function makeTabPanelId(id: string, value: string) {
+  return `${id}--tabpanel-${value}`;
+}

package/src/toggle-group/ToggleGroup.context.ts

@@ -0,0 +1,31 @@
+import { createContext as ReactCreateContext } from "react";
+import { createContext } from "../util/create-context";
+import { createDescendantContext } from "../util/hooks/descendants/useDescendant";
+import { ToggleGroupProps } from "./ToggleGroup.types";
+import { useToggleGroup } from "./useToggleGroup";
+
+interface ToggleContextProps {
+  size: "medium" | "small";
+}
+
+export const ToggleGroupContext = ReactCreateContext<ToggleContextProps | null>(
+  null,
+);
+
+export const [
+  ToggleGroupDescendantsProvider,
+  useToggleGroupDescendantsContext,
+  useToggleGroupDescendants,
+  useToggleGroupDescendant,
+] = createDescendantContext<HTMLButtonElement, { value: string }>();
+
+type ToggleGroupProviderProps = ReturnType<typeof useToggleGroup> &
+  Pick<ToggleGroupProps, "size">;
+
+/* State context */
+export const [ToggleGroupProvider, useToggleGroupContext] =
+  createContext<ToggleGroupProviderProps>({
+    name: "ToggleGroupContext",
+    hookName: "useToggleGroupContext",
+    providerName: "ToggleGroupProvider",
+  });

package/src/toggle-group/ToggleGroup.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
 import { ToggleGroup } from "./ToggleGroup";
@@ -20,36 +21,76 @@ const TestToggleGroup = ({ value, onChange, defaultValue }: any) => (
 describe("ToggleGroup", () => {
   test("sets default value correctly", () => {
     render(<TestToggleGroup defaultValue="toggle2" />);
-    const toggle = screen.getByTestId("toggle2");
+    const toggle2 = screen.getByTestId("toggle2");
 
-    expect(toggle).toHaveAttribute("aria-checked", "true");
+    expect(toggle2).toHaveAttribute("aria-checked", "true");
   });
 
   test("sets correct attributes on active toggle", () => {
     render(<TestToggleGroup defaultValue="toggle2" />);
-    const toggle = screen.getByTestId("toggle2");
+    const toggle2 = screen.getByTestId("toggle2");
 
-    expect(toggle).toHaveAttribute("aria-checked", "true");
-    expect(toggle).toHaveAttribute("role", "radio");
-    expect(toggle).toHaveAttribute("type", "button");
-    expect(toggle).toHaveAttribute("tabindex", "-1");
+    expect(toggle2).toHaveAttribute("aria-checked", "true");
+    expect(toggle2).toHaveAttribute("role", "radio");
+    expect(toggle2).toHaveAttribute("type", "button");
+    expect(toggle2).toHaveAttribute("tabindex", "0");
   });
 
   test("sets correct attributes on idle toggle", () => {
     render(<TestToggleGroup defaultValue="toggle1" />);
-    const toggle = screen.getByTestId("toggle2");
+    const toggle2 = screen.getByTestId("toggle2");
 
-    expect(toggle).toHaveAttribute("aria-checked", "false");
-    expect(toggle).toHaveAttribute("role", "radio");
-    expect(toggle).toHaveAttribute("type", "button");
-    expect(toggle).toHaveAttribute("tabindex", "-1");
+    expect(toggle2).toHaveAttribute("aria-checked", "false");
+    expect(toggle2).toHaveAttribute("role", "radio");
+    expect(toggle2).toHaveAttribute("type", "button");
+    expect(toggle2).toHaveAttribute("tabindex", "-1");
   });
 
   test("sets tabindex to 0 when focused", () => {
     render(<TestToggleGroup defaultValue="toggle2" />);
-    const toggle = screen.getByTestId("toggle2");
+    const toggle2 = screen.getByTestId("toggle2");
 
-    fireEvent.focus(toggle);
-    expect(toggle).toHaveAttribute("tabindex", "0");
+    fireEvent.focus(toggle2);
+    expect(toggle2).toHaveAttribute("tabindex", "0");
+  });
+
+  test("roving tabindex keydown moves focus", () => {
+    render(<TestToggleGroup defaultValue="toggle1" />);
+    const toggle1 = screen.getByTestId("toggle1");
+
+    expect(toggle1).toHaveAttribute("tabindex", "0");
+    fireEvent.keyDown(toggle1, { key: "ArrowRight" });
+
+    expect(toggle1).toHaveAttribute("tabindex", "-1");
+    expect(screen.getByTestId("toggle2")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByTestId("toggle2")).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+  });
+
+  test("Space selects focused toggle-item", async () => {
+    render(<TestToggleGroup defaultValue="toggle1" />);
+    const toggle1 = screen.getByTestId("toggle1");
+
+    expect(toggle1).toHaveAttribute("tabindex", "0");
+    fireEvent.keyDown(toggle1, { key: "ArrowRight" });
+
+    expect(toggle1).toHaveAttribute("tabindex", "-1");
+    expect(screen.getByTestId("toggle2")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByTestId("toggle2")).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      await userEvent.keyboard(" ");
+    });
+
+    expect(screen.getByTestId("toggle2")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
   });
 });

package/src/toggle-group/ToggleGroup.tsx

@@ -1,55 +1,24 @@
-import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef, useState } from "react";
+import React, { forwardRef } from "react";
 import { Label } from "../typography";
-import { useId } from "../util/hooks";
-import ToggleItem, { ToggleGroupItemProps } from "./ToggleItem";
-import { ToggleGroupContext } from "./context";
-
-export interface ToggleGroupProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
-  /**
-   * Toggles.Item elements
-   */
-  children: React.ReactNode;
-  /**
-   * Changes padding and font-size
-   * @default "medium"
-   */
-  size?: "medium" | "small";
-  /**
-   * Controlled selected value
-   */
-  value?: string;
-  /**
-   * If not controlled, a default-value needs to be set
-   */
-  defaultValue?: string;
-  /**
-   * Callback for selected toggle
-   */
-  onChange: (value: string) => void;
-  /**
-   * Label describing ToggleGroup
-   */
-  label?: React.ReactNode;
-  /**
-   * Changes design and interaction-visuals
-   * @default "action"
-   */
-  variant?: "action" | "neutral";
-}
+import { useId } from "../util";
+import {
+  ToggleGroupDescendantsProvider,
+  ToggleGroupProvider,
+  useToggleGroupDescendants,
+} from "./ToggleGroup.context";
+import { ToggleGroupProps } from "./ToggleGroup.types";
+import ToggleItem from "./parts/ToggleItem";
+import { useToggleGroup } from "./useToggleGroup";
 
 interface ToggleGroupComponent
   extends React.ForwardRefExoticComponent<
     ToggleGroupProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * @see 🏷️ {@link ToggleGroupItemProps}
+   * @see 🏷️ {@link ToggleItem}
    */
-  Item: React.ForwardRefExoticComponent<
-    ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>
-  >;
+  Item: typeof ToggleItem;
 }
 
 /**
@@ -77,70 +46,74 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       label,
       value,
       defaultValue,
-      "aria-describedby": desc,
+      "aria-describedby": userDescribedby,
       variant = "action",
+      fill = false,
       ...rest
     },
     ref,
   ) => {
-    const [groupValue, setGroupValue] = useState(defaultValue);
-    const labelId = useId();
+    const descendants = useToggleGroupDescendants();
+
+    const toggleGroupContext = useToggleGroup({
+      defaultValue,
+      value,
+      onChange,
+    });
 
-    const handleValueChange = (v: string) => {
-      if (v !== "") {
-        setGroupValue(v);
-        onChange?.(v);
-      }
+    /**
+     * ToggleGroupProvider handles memoization.
+     */
+    const context = {
+      ...toggleGroupContext,
+      size,
     };
 
+    const labelId = useId();
+
     if (!value && !defaultValue) {
-      console.error("ToggleGroup without value/defaultvalue is not allowed");
+      console.error("ToggleGroup without value or defaultvalue is not allowed");
     }
 
-    const describeBy = cl({
-      [desc ?? ""]: !!desc,
-      [labelId ?? ""]: !!label,
-    });
-
     if (!value && !defaultValue) {
       console.error("ToggleGroup needs either a value or defaultValue");
     }
 
     return (
-      <ToggleGroupContext.Provider
-        value={{
-          size,
-        }}
-      >
-        <div className={cl("navds-toggle-group__wrapper", className)}>
-          {label && (
-            <Label
-              size={size}
-              className="navds-toggle-group__label"
-              id={labelId}
-            >
-              {label}
-            </Label>
-          )}
-          <RadixToggleGroup.Root
-            {...rest}
-            onValueChange={handleValueChange}
-            value={value ?? groupValue}
-            defaultValue={defaultValue}
-            ref={ref}
-            className={cl(
-              "navds-toggle-group",
-              `navds-toggle-group--${size}`,
-              `navds-toggle-group--${variant}`,
-            )}
-            {...(describeBy && { "aria-describedby": describeBy })}
-            role="radiogroup"
-            type="single"
+      <ToggleGroupDescendantsProvider value={descendants}>
+        <ToggleGroupProvider {...context}>
+          <div
+            className={cl("navds-toggle-group__wrapper", className, {
+              "navds-toggle-group__wrapper--fill": fill,
+            })}
           >
-            {children}
-          </RadixToggleGroup.Root>
-        </div>
-      </ToggleGroupContext.Provider>
+            {label && (
+              <Label
+                size={size}
+                className="navds-toggle-group__label"
+                id={labelId}
+              >
+                {label}
+              </Label>
+            )}
+            <div
+              {...rest}
+              ref={ref}
+              className={cl(
+                "navds-toggle-group",
+                `navds-toggle-group--${size}`,
+                `navds-toggle-group--${variant}`,
+              )}
+              aria-describedby={
+                cl(userDescribedby, !!label && labelId) || undefined
+              }
+              role="radiogroup"
+            >
+              {children}
+            </div>
+          </div>
+        </ToggleGroupProvider>
+      </ToggleGroupDescendantsProvider>
     );
   },
 ) as ToggleGroupComponent;

package/src/toggle-group/ToggleGroup.types.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from "react";
+
+export interface ToggleGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+  /**
+   * Toggles.Item elements.
+   */
+  children: React.ReactNode;
+  /**
+   * Changes padding and font-size.
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Controlled selected value.
+   */
+  value?: string;
+  /**
+   * If not controlled, a default-value needs to be set.
+   */
+  defaultValue?: string;
+  /**
+   * Callback for selected toggle.
+   */
+  onChange: (value: string) => void;
+  /**
+   * Label describing ToggleGroup.
+   */
+  label?: React.ReactNode;
+  /**
+   * Changes design and interaction-visuals.
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Stretch each button to fill avaliable space in container.
+   * @default false
+   */
+  fill?: boolean;
+}

package/src/toggle-group/index.ts

@@ -1,6 +1,7 @@
 "use client";
-export { default as ToggleGroup, type ToggleGroupProps } from "./ToggleGroup";
+export { default as ToggleGroup } from "./ToggleGroup";
+export { type ToggleGroupProps } from "./ToggleGroup.types";
 export {
   default as ToggleGroupItem,
   type ToggleGroupItemProps,
-} from "./ToggleItem";
+} from "./parts/ToggleItem";

package/src/toggle-group/parts/ToggleItem.tsx

@@ -0,0 +1,55 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BodyShort } from "../../typography/BodyShort";
+import { useToggleGroupContext } from "../ToggleGroup.context";
+import { useToggleItem } from "./useToggleItem";
+
+export interface ToggleGroupItemProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Content.
+   */
+  children: React.ReactNode;
+  /**
+   * Value for state-handling.
+   */
+  value: string;
+}
+
+const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  (
+    { className, children, value, onClick, onFocus, onKeyDown, ...rest },
+    forwardedRef,
+  ) => {
+    const itemCtx = useToggleItem(
+      { value, onClick, onFocus, disabled: false, onKeyDown },
+      forwardedRef,
+    );
+    const ctx = useToggleGroupContext();
+
+    return (
+      <button
+        {...rest}
+        ref={itemCtx.ref}
+        className={cl("navds-toggle-group__button", className)}
+        type="button"
+        role="radio"
+        aria-checked={itemCtx.isSelected}
+        tabIndex={itemCtx.isFocused ? 0 : -1}
+        onClick={itemCtx.onClick}
+        onFocus={itemCtx.onFocus}
+        onKeyDown={itemCtx.onKeyDown}
+      >
+        <BodyShort
+          as="span"
+          className="navds-toggle-group__button-inner"
+          size={ctx?.size}
+        >
+          {children}
+        </BodyShort>
+      </button>
+    );
+  },
+);
+
+export default ToggleItem;