@navikt/ds-react 6.4.0 → 6.5.0

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;

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),
+  };
+}