@navikt/ds-react 6.4.1 → 6.6.0

package/src/tabs/Tabs.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 { Tabs } from "./Tabs";
@@ -39,72 +40,133 @@ const TestTabs = ({
 describe("Tabs", () => {
   test("sets default value correctly", () => {
     render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab2");
-    const panel = screen.getByTestId("tabpanel2");
+    const tab2 = screen.getByTestId("tab2");
+    const panel2 = screen.getByTestId("tabpanel2");
 
-    expect(tab).toHaveAttribute("aria-selected", "true");
-    expect(panel).toHaveTextContent("Tabpanel 2");
+    expect(tab2).toHaveAttribute("aria-selected", "true");
+    expect(panel2).toHaveTextContent("Tabpanel 2");
   });
 
   test("label-connection between tab and tabpanel is correct", async () => {
     render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab2");
-    const panel = screen.getByTestId("tabpanel2");
+    const tab2 = screen.getByTestId("tab2");
+    const panel2 = screen.getByTestId("tabpanel2");
 
-    const controlsId = tab.getAttribute("aria-controls");
-    const panelLabelledBy = panel.getAttribute("aria-labelledby");
+    const controlsId = tab2.getAttribute("aria-controls");
+    const panelLabelledBy = panel2.getAttribute("aria-labelledby");
 
-    expect(controlsId).toEqual(panel.id);
-    expect(tab.id).toEqual(panelLabelledBy);
+    expect(controlsId).toEqual(panel2.id);
+    expect(tab2.id).toEqual(panelLabelledBy);
   });
 
   test("sets correct attributes on active tab", () => {
     render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab2");
+    const tab2 = screen.getByTestId("tab2");
 
-    expect(tab).toHaveAttribute("aria-selected", "true");
-    expect(tab).toHaveAttribute("role", "tab");
-    expect(tab).toHaveAttribute("aria-controls");
-    expect(tab).toHaveAttribute("tabindex", "-1");
+    expect(tab2).toHaveAttribute("aria-selected", "true");
+    expect(tab2).toHaveAttribute("role", "tab");
+    expect(tab2).toHaveAttribute("aria-controls");
+    expect(tab2).toHaveAttribute("tabindex", "0");
   });
 
   test("sets correct attributes on idle tab", () => {
     render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab1");
+    const tab1 = screen.getByTestId("tab1");
 
-    expect(tab).toHaveAttribute("aria-selected", "false");
-    expect(tab).toHaveAttribute("role", "tab");
-    expect(tab).toHaveAttribute("aria-controls");
-    expect(tab).toHaveAttribute("tabindex", "-1");
+    expect(tab1).toHaveAttribute("aria-selected", "false");
+    expect(tab1).toHaveAttribute("role", "tab");
+    expect(tab1).toHaveAttribute("aria-controls");
+    expect(tab1).toHaveAttribute("tabindex", "-1");
   });
 
   test("sets correct attributes on active tabpanel", () => {
     render(<TestTabs defaultValue="tab2" />);
-    const panel = screen.getByTestId("tabpanel2");
+    const panel2 = screen.getByTestId("tabpanel2");
 
-    expect(panel).toHaveAttribute("aria-labelledby");
-    expect(panel).toHaveAttribute("role", "tabpanel");
-    expect(panel).toHaveAttribute("tabindex", "0");
-    expect(panel).toHaveTextContent("Tabpanel 2");
-    expect(panel).toHaveStyle({ display: "block" });
+    expect(panel2).toHaveAttribute("aria-labelledby");
+    expect(panel2).toHaveAttribute("role", "tabpanel");
+    expect(panel2).toHaveAttribute("tabindex", "0");
+    expect(panel2).toHaveTextContent("Tabpanel 2");
+    expect(panel2).toHaveStyle({ display: "block" });
   });
 
   test("sets correct attributes on idle tabpanel", () => {
     render(<TestTabs defaultValue="tab1" />);
-    const panel = screen.getByTestId("tabpanel2");
+    const panel2 = screen.getByTestId("tabpanel2");
 
-    expect(panel).toHaveAttribute("aria-labelledby");
-    expect(panel).toHaveAttribute("role", "tabpanel");
-    expect(panel).toHaveAttribute("tabindex", "0");
-    expect(panel).toBeEmptyDOMElement();
-    expect(panel).toHaveStyle({ display: "none" });
+    expect(panel2).toHaveAttribute("aria-labelledby");
+    expect(panel2).toHaveAttribute("role", "tabpanel");
+    expect(panel2).toHaveAttribute("tabindex", "0");
+    expect(panel2).toBeEmptyDOMElement();
+    expect(panel2).toHaveStyle({ display: "none" });
   });
 
   test("sets tabindex to 0 when focused", () => {
-    render(<TestTabs defaultValue="tab2" />);
-    const tab = screen.getByTestId("tab2");
+    render(<TestTabs defaultValue="tab1" />);
+    const tab2 = screen.getByTestId("tab2");
+
+    fireEvent.focus(tab2);
+    expect(tab2).toHaveAttribute("tabindex", "0");
+  });
+
+  test("rowing tabindex keydown moves focus", () => {
+    render(<TestTabs defaultValue="tab1" />);
+    const tab1 = screen.getByTestId("tab1");
+
+    expect(tab1).toHaveAttribute("tabindex", "0");
+    fireEvent.keyDown(tab1, { key: "ArrowRight" });
+
+    expect(tab1).toHaveAttribute("tabindex", "-1");
+    expect(screen.getByTestId("tab2")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByTestId("tab2")).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+  });
+
+  test("selectionFollowsFocus moves active tabs", () => {
+    render(<TestTabs defaultValue="tab1" selectionFollowsFocus />);
+    const tab1 = screen.getByTestId("tab1");
 
-    fireEvent.focus(tab);
-    expect(tab).toHaveAttribute("tabindex", "0");
+    expect(tab1).toHaveAttribute("tabindex", "0");
+    fireEvent.keyDown(tab1, { key: "ArrowRight" });
+
+    expect(screen.getByTestId("tab2")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByTestId("tab2")).toHaveAttribute("tabindex", "0");
+  });
+
+  test("tabbing from tabs moves focus to tabPanel", async () => {
+    render(<TestTabs defaultValue="tab1" />);
+    const tab1 = screen.getByTestId("tab1");
+
+    tab1.focus();
+    await userEvent.tab();
+
+    expect(screen.getByTestId("tabpanel1")).toHaveFocus();
+  });
+
+  test("shift+tab back to tablist should focus selected tab", async () => {
+    render(<TestTabs defaultValue="tab1" />);
+    const tab1 = screen.getByTestId("tab1");
+
+    /* Move focus to tab2 */
+    fireEvent.keyDown(tab1, { key: "ArrowRight" });
+    expect(screen.getByTestId("tab2")).toHaveFocus();
+
+    /* Move focus to tabPanel */
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      /* Tablist handles tabbing with setTimeout, so we need to use act */
+      await userEvent.tab();
+    });
+
+    expect(screen.getByTestId("tabpanel1")).toHaveFocus();
+    /* Move focus back to tablist, now tab1 should have focus */
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      await userEvent.tab({ shift: true });
+    });
+    expect(screen.getByTestId("tab1")).toHaveFocus();
   });
 });

package/src/tabs/Tabs.tsx

@@ -1,48 +1,15 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../util/types";
-import Tab, { TabProps } from "./Tab";
-import TabList, { TabListProps } from "./TabList";
-import TabPanel, { TabPanelProps } from "./TabPanel";
-import { TabsContext } from "./context";
-
-export interface TabsProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
-  children: React.ReactNode;
-  /**
-   * Changes padding and font-size.
-   * @default "medium"
-   */
-  size?: "medium" | "small";
-  /**
-   * onChange callback for selected Tab.
-   */
-  onChange?: (value: string) => void;
-  /**
-   * Controlled selected value.
-   */
-  value?: string;
-  /**
-   * If not controlled, a default-value needs to be set.
-   */
-  defaultValue?: string;
-  /**
-   * Automatically activates tab on focus/navigation.
-   * @default false
-   */
-  selectionFollowsFocus?: boolean;
-  /**
-   * Loops back to start when navigating past last item.
-   * @default false
-   */
-  loop?: boolean;
-  /**
-   * Icon position in Tab.
-   * @default "left"
-   */
-  iconPosition?: "left" | "top";
-}
+import React, { forwardRef } from "react";
+import {
+  TabsDescendantsProvider,
+  TabsProvider,
+  useTabsDescendants,
+} from "./Tabs.context";
+import { TabsProps } from "./Tabs.types";
+import Tab from "./parts/tab/Tab";
+import TabList from "./parts/tablist/TabList";
+import TabPanel from "./parts/tabpanel/TabPanel";
+import { useTabs } from "./useTabs";
 
 interface TabsComponent
   extends React.ForwardRefExoticComponent<
@@ -52,19 +19,15 @@ interface TabsComponent
    * @see 🏷️ {@link TabProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Tab: OverridableComponent<TabProps, HTMLButtonElement>;
+  Tab: typeof Tab;
   /**
    * @see 🏷️ {@link TabListProps}
    */
-  List: React.ForwardRefExoticComponent<
-    TabListProps & React.RefAttributes<HTMLDivElement>
-  >;
+  List: typeof TabList;
   /**
    * @see 🏷️ {@link TabPanelProps}
    */
-  Panel: React.ForwardRefExoticComponent<
-    TabPanelProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Panel: typeof TabPanel;
 }
 
 /**
@@ -98,33 +61,48 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
     {
       className,
       children,
-      onChange,
       size = "medium",
+      defaultValue = "",
+      value,
+      onChange,
+      id,
       selectionFollowsFocus = false,
-      loop = false,
+      loop = true,
       iconPosition = "left",
+      fill = false,
       ...rest
     },
     ref,
   ) => {
+    const descendants = useTabsDescendants();
+
+    const tabsContext = useTabs({ defaultValue, value, onChange, id });
+
+    /**
+     * TabsProvider handles memoization of context values, so we can safely skip it here.
+     */
+    const context = {
+      ...tabsContext,
+      selectionFollowsFocus,
+      loop,
+      size,
+      iconPosition,
+      fill,
+    };
+
     return (
-      <RadixTabs.Root
-        {...rest}
-        ref={ref}
-        className={cl("navds-tabs", className, `navds-tabs--${size}`)}
-        activationMode={selectionFollowsFocus ? "automatic" : "manual"}
-        onValueChange={onChange}
-      >
-        <TabsContext.Provider
-          value={{
-            size,
-            loop,
-            iconPosition,
-          }}
-        >
-          {children}
-        </TabsContext.Provider>
-      </RadixTabs.Root>
+      <TabsDescendantsProvider value={descendants}>
+        <TabsProvider {...context}>
+          <div
+            ref={ref}
+            {...rest}
+            id={id}
+            className={cl("navds-tabs", className, `navds-tabs--${size}`)}
+          >
+            {children}
+          </div>
+        </TabsProvider>
+      </TabsDescendantsProvider>
     );
   },
 ) as TabsComponent;

package/src/tabs/Tabs.types.ts

@@ -0,0 +1,43 @@
+import { HTMLAttributes } from "react";
+
+export interface TabsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+  children: React.ReactNode;
+  /**
+   * Changes padding and font-size.
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * onChange callback for selected Tab.
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Controlled selected value.
+   */
+  value?: string;
+  /**
+   * If not controlled, a default-value needs to be set.
+   */
+  defaultValue?: string;
+  /**
+   * Automatically activates tab on focus/navigation.
+   * @default false
+   */
+  selectionFollowsFocus?: boolean;
+  /**
+   * Loops back to start when navigating past last item.
+   * @default true
+   */
+  loop?: boolean;
+  /**
+   * Icon position in Tab.
+   * @default "left"
+   */
+  iconPosition?: "left" | "top";
+  /**
+   * Stretches each tab to fill avaliable space in container.
+   * @default false
+   */
+  fill?: boolean;
+}

package/src/tabs/index.ts

@@ -1,5 +1,12 @@
 "use client";
-export { default as TabsTab, type TabProps } from "./Tab";
-export { default as TabsList, type TabListProps } from "./TabList";
-export { default as TabsPanel, type TabPanelProps } from "./TabPanel";
-export { default as Tabs, type TabsProps } from "./Tabs";
+export { default as Tabs } from "./Tabs";
+export { type TabsProps } from "./Tabs.types";
+export { default as TabsTab, type TabProps } from "./parts/tab/Tab";
+export {
+  default as TabsList,
+  type TabListProps,
+} from "./parts/tablist/TabList";
+export {
+  default as TabsPanel,
+  type TabPanelProps,
+} from "./parts/tabpanel/TabPanel";

package/src/tabs/parts/tab/Tab.tsx

@@ -0,0 +1,93 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BodyShort } from "../../../typography";
+import { OverridableComponent } from "../../../util";
+import { useTabsContext } from "../../Tabs.context";
+import { useTab } from "./useTab";
+
+export interface TabProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /**
+   * Tab label.
+   */
+  label?: React.ReactNode;
+  /**
+   * Tab Icon.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Value for state-handling.
+   */
+  value: string;
+  /**
+   * Overrides auto-generated id.
+   *
+   * **Warning**: Tab generates an id if not provided. If you need to override it,
+   * make sure to also include the correct `aria-controls` id for the TabPanel it controls.
+   */
+  id?: string;
+}
+
+export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
+  forwardRef(
+    (
+      {
+        className,
+        as: Component = "button",
+        label,
+        icon,
+        value,
+        onClick,
+        onFocus,
+        disabled,
+        id,
+        ...rest
+      },
+      ref: React.ForwardedRef<HTMLButtonElement>,
+    ) => {
+      const tabCtx = useTab({ value, onClick, onFocus, disabled }, ref);
+      const ctx = useTabsContext();
+
+      if (!label && !icon) {
+        console.error("<Tabs.Tab/> needs label and/or icon");
+        return null;
+      }
+
+      return (
+        <Component
+          ref={tabCtx.ref}
+          {...rest}
+          className={cl(
+            "navds-tabs__tab",
+            `navds-tabs__tab--${ctx?.size ?? "medium"}`,
+            `navds-tabs__tab-icon--${ctx?.iconPosition}`,
+            className,
+            {
+              "navds-tabs__tab--icon-only": icon && !label,
+              "navds-tabs__tab--fill": ctx.fill,
+            },
+          )}
+          role="tab"
+          type="button"
+          aria-selected={tabCtx.isSelected}
+          data-state={tabCtx.isSelected ? "active" : "inactive"}
+          tabIndex={tabCtx.isFocused ? 0 : -1}
+          aria-controls={rest["aria-controls"] ?? tabCtx.controlsId}
+          id={id ?? tabCtx.id}
+          onFocus={tabCtx.onFocus}
+          onClick={tabCtx.onClick}
+        >
+          <BodyShort
+            as="span"
+            className="navds-tabs__tab-inner"
+            size={ctx?.size}
+          >
+            <span aria-hidden={!!label}>{icon}</span>
+            <span>{label}</span>
+          </BodyShort>
+        </Component>
+      );
+    },
+  );
+
+export default Tab;

package/src/tabs/parts/tab/useTab.ts

@@ -0,0 +1,52 @@
+import { composeEventHandlers } from "../../../util/composeEventHandlers";
+import { mergeRefs } from "../../../util/hooks/useMergeRefs";
+import { useTabsContext, useTabsDescendant } from "../../Tabs.context";
+
+export interface UseTabProps {
+  /**
+   * If `true`, the `Tab` won't be toggleable
+   * @default false
+   */
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler;
+  onFocus?: React.FocusEventHandler;
+  value: string;
+}
+
+export function useTab<P extends UseTabProps>(
+  { value, disabled = false, onFocus: _onFocus, onClick }: P,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    id,
+    setSelectedValue,
+    selectionFollowsFocus,
+    focusedValue,
+    setFocusedValue,
+    selectedValue,
+    makeTabId,
+    makeTabPanelId,
+  } = useTabsContext();
+
+  const { register } = useTabsDescendant({
+    disabled,
+    value,
+  });
+
+  const isSelected = value === selectedValue;
+
+  const onFocus = () => {
+    setFocusedValue(value);
+    selectionFollowsFocus && setSelectedValue(value);
+  };
+
+  return {
+    ref: mergeRefs([register, ref]),
+    isSelected,
+    isFocused: focusedValue === value,
+    id: makeTabId(id, value),
+    controlsId: makeTabPanelId(id, value),
+    onClick: composeEventHandlers(onClick, () => setSelectedValue(value)),
+    onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus),
+  };
+}

package/src/tabs/parts/tablist/ScrollButtons.tsx

@@ -0,0 +1,29 @@
+import cl from "clsx";
+import React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+
+interface ScrollButtonProps {
+  hidden: boolean;
+  onClick: () => void;
+  dir: "left" | "right";
+}
+
+function ScrollButton({ hidden, onClick, dir }: ScrollButtonProps) {
+  return (
+    <div
+      className={cl("navds-tabs__scroll-button", {
+        "navds-tabs__scroll-button--hidden": hidden,
+      })}
+      onClick={onClick}
+      aria-hidden
+    >
+      {dir === "left" ? (
+        <ChevronLeftIcon title="scroll tilbake" />
+      ) : (
+        <ChevronRightIcon title="scroll neste" />
+      )}
+    </div>
+  );
+}
+
+export default ScrollButton;

package/src/tabs/parts/tablist/TabList.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+import cl from "clsx";
+import React, { forwardRef, useRef } from "react";
+import { composeEventHandlers } from "../../../util/composeEventHandlers";
+import { useMergeRefs } from "../../../util/hooks/useMergeRefs";
+import ScrollButton from "./ScrollButtons";
+import { useScrollButtons } from "./useScrollButtons";
+import { useTabList } from "./useTabList";
+
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * <Tabs.Tab /> elements.
+   */
+  children: React.ReactNode;
+}
+
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(
+  ({ className, onKeyDown, ...rest }, ref) => {
+    const { onKeyDown: _onKeyDown } = useTabList();
+
+    const listRef = useRef<HTMLDivElement>(null);
+    const mergedRef = useMergeRefs(listRef, ref);
+
+    const scrollCtx = useScrollButtons(listRef);
+
+    return (
+      <div className="navds-tabs__tablist-wrapper">
+        {scrollCtx.show && (
+          <ScrollButton
+            dir="left"
+            hidden={!scrollCtx.start}
+            onClick={scrollCtx.scrollLeft}
+          />
+        )}
+        <div
+          ref={mergedRef}
+          {...rest}
+          onScroll={scrollCtx.update}
+          className={cl("navds-tabs__tablist", className)}
+          role="tablist"
+          aria-orientation="horizontal"
+          onKeyDown={composeEventHandlers(onKeyDown, _onKeyDown)}
+        />
+        {scrollCtx.show && (
+          <ScrollButton
+            dir="right"
+            hidden={!scrollCtx.end}
+            onClick={scrollCtx.scrollRight}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export default TabList;