@navikt/ds-react 6.4.0 → 6.5.0

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.stories.tsx

@@ -5,6 +5,7 @@ import {
   EnvelopeOpenIcon,
   InboxUpIcon,
 } from "@navikt/aksel-icons";
+import { VStack } from "../layout/stack";
 import ToggleGroup from "./ToggleGroup";
 
 const meta: Meta<typeof ToggleGroup> = {
@@ -22,7 +23,11 @@ const meta: Meta<typeof ToggleGroup> = {
       control: { type: "radio" },
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
+
 export default meta;
 
 const Items = (icon?: boolean, both?: boolean) => (
@@ -71,6 +76,7 @@ export const Default = (props) => {
     </ToggleGroup>
   );
 };
+
 Default.args = {
   icon: true,
   text: true,
@@ -81,7 +87,7 @@ export const Compositions = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 
   return (
-    <div className="colgap">
+    <VStack gap="6">
       <ToggleGroup value={activeValue} onChange={setActiveValue}>
         {Items()}
       </ToggleGroup>
@@ -91,7 +97,10 @@ export const Compositions = () => {
       <ToggleGroup value={activeValue} onChange={setActiveValue}>
         {Items(true)}
       </ToggleGroup>
-    </div>
+      <ToggleGroup fill value={activeValue} onChange={setActiveValue}>
+        {Items(true)}
+      </ToggleGroup>
+    </VStack>
   );
 };
 
@@ -99,7 +108,7 @@ export const Variants = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 
   return (
-    <div className="colgap">
+    <VStack gap="6">
       <ToggleGroup
         variant="action"
         value={activeValue}
@@ -114,7 +123,7 @@ export const Variants = () => {
       >
         {Items(true, true)}
       </ToggleGroup>
-    </div>
+    </VStack>
   );
 };
 
@@ -122,7 +131,7 @@ export const Small = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 
   return (
-    <div className="colgap">
+    <VStack gap="6">
       <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
         {Items()}
       </ToggleGroup>
@@ -132,6 +141,58 @@ export const Small = () => {
       <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
         {Items(true)}
       </ToggleGroup>
-    </div>
+    </VStack>
   );
 };
+
+export const Chromatic = {
+  render: () => (
+    <VStack gap="6">
+      <div>
+        <h2>Text</h2>
+        <ToggleGroup value="ulest" onChange={console.log}>
+          {Items()}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Icon</h2>
+        <ToggleGroup value="ulest" onChange={console.log}>
+          {Items(true)}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Text + icon</h2>
+        <ToggleGroup value="ulest" onChange={console.log}>
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <div style={{ minWidth: 600 }}>
+        <h2>Fill</h2>
+        <ToggleGroup value="ulest" onChange={console.log} fill>
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Small</h2>
+        <ToggleGroup value="ulest" onChange={console.log} size="small">
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Small + fill</h2>
+        <ToggleGroup value="ulest" onChange={console.log} size="small" fill>
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Neutral</h2>
+        <ToggleGroup value="ulest" onChange={console.log} variant="neutral">
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

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;