@navikt/ds-react 6.4.1 → 6.6.0

package/esm/tabs/Tabs.context.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { TabsProps } from "./Tabs.types.js";
+import { useTabs } from "./useTabs.js";
+export declare const TabsDescendantsProvider: import("react").Provider<import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>>, useTabsDescendantsContext: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>, useTabsDescendants: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>, useTabsDescendant: (options?: import("../util/hooks/descendants/descendant.js").DescendantOptions<{
+    value: string;
+}> | undefined) => {
+    descendants: import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLElement, Record<string, any>>;
+    index: number;
+    enabledIndex: number;
+    register: (instance: HTMLButtonElement | null) => void;
+};
+type TabsProviderProps = ReturnType<typeof useTabs> & Pick<TabsProps, "selectionFollowsFocus" | "loop" | "size" | "iconPosition" | "fill">;
+export declare const TabsProvider: import("react").ForwardRefExoticComponent<{
+    id: string;
+    selectedValue: string;
+    setSelectedValue: (next: import("react").SetStateAction<string>) => void;
+    focusedValue: string;
+    setFocusedValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    makeTabId: (id: string, value: string) => string;
+    makeTabPanelId: (id: string, value: string) => string;
+} & Pick<TabsProps, "size" | "fill" | "loop" | "iconPosition" | "selectionFollowsFocus"> & {
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>, useTabsContext: <S extends boolean = true>(strict?: S) => S extends true ? TabsProviderProps : TabsProviderProps | undefined;
+export {};

package/esm/tabs/Tabs.context.js

@@ -0,0 +1,10 @@
+import { createContext } from "../util/create-context.js";
+import { createDescendantContext } from "../util/hooks/descendants/useDescendant.js";
+export const [TabsDescendantsProvider, useTabsDescendantsContext, useTabsDescendants, useTabsDescendant,] = createDescendantContext();
+/* State context */
+export const [TabsProvider, useTabsContext] = createContext({
+    name: "TabsContext",
+    hookName: "useTabsContext",
+    providerName: "TabsProvider",
+});
+//# sourceMappingURL=Tabs.context.js.map

package/esm/tabs/Tabs.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.context.js","sourceRoot":"","sources":["../../src/tabs/Tabs.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAIlF,MAAM,CAAC,MAAM,CACX,uBAAuB,EACvB,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EAClB,GAAG,uBAAuB,EAAwC,CAAC;AAQpE,mBAAmB;AACnB,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,GAAG,aAAa,CAAoB;IAC7E,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,gBAAgB;IAC1B,YAAY,EAAE,cAAc;CAC7B,CAAC,CAAC"}

package/esm/tabs/Tabs.d.ts

@@ -1,57 +1,22 @@
-import React, { HTMLAttributes } from "react";
-import { OverridableComponent } from "../util/types/index.js";
-import { TabProps } from "./Tab.js";
-import { TabListProps } from "./TabList.js";
-import { TabPanelProps } from "./TabPanel.js";
-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 from "react";
+import { TabsProps } from "./Tabs.types.js";
+import Tab from "./parts/tab/Tab.js";
+import TabList from "./parts/tablist/TabList.js";
+import TabPanel from "./parts/tabpanel/TabPanel.js";
 interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> {
     /**
      * @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;
 }
 /**
  * A component that displays a set of tabs that can be used to switch between different views.

package/esm/tabs/Tabs.js

@@ -9,13 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import Tab from "./Tab.js";
-import TabList from "./TabList.js";
-import TabPanel from "./TabPanel.js";
-import { TabsContext } from "./context.js";
+import { TabsDescendantsProvider, TabsProvider, useTabsDescendants, } from "./Tabs.context.js";
+import Tab from "./parts/tab/Tab.js";
+import TabList from "./parts/tablist/TabList.js";
+import TabPanel from "./parts/tabpanel/TabPanel.js";
+import { useTabs } from "./useTabs.js";
 /**
  * A component that displays a set of tabs that can be used to switch between different views.
  *
@@ -43,13 +43,20 @@ import { TabsContext } from "./context.js";
  * ```
  */
 export const Tabs = forwardRef((_a, ref) => {
-    var { className, children, onChange, size = "medium", selectionFollowsFocus = false, loop = false, iconPosition = "left" } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "selectionFollowsFocus", "loop", "iconPosition"]);
-    return (React.createElement(RadixTabs.Root, Object.assign({}, rest, { ref: ref, className: cl("navds-tabs", className, `navds-tabs--${size}`), activationMode: selectionFollowsFocus ? "automatic" : "manual", onValueChange: onChange }),
-        React.createElement(TabsContext.Provider, { value: {
-                size,
-                loop,
-                iconPosition,
-            } }, children)));
+    var { className, children, size = "medium", defaultValue = "", value, onChange, id, selectionFollowsFocus = false, loop = true, iconPosition = "left", fill = false } = _a, rest = __rest(_a, ["className", "children", "size", "defaultValue", "value", "onChange", "id", "selectionFollowsFocus", "loop", "iconPosition", "fill"]);
+    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 = Object.assign(Object.assign({}, tabsContext), { selectionFollowsFocus,
+        loop,
+        size,
+        iconPosition,
+        fill });
+    return (React.createElement(TabsDescendantsProvider, { value: descendants },
+        React.createElement(TabsProvider, Object.assign({}, context),
+            React.createElement("div", Object.assign({ ref: ref }, rest, { id: id, className: cl("navds-tabs", className, `navds-tabs--${size}`) }), children))));
 });
 Tabs.Tab = Tab;
 Tabs.List = TabList;

package/esm/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,GAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,OAAyB,MAAM,WAAW,CAAC;AAClD,OAAO,QAA2B,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA8DxC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,qBAAqB,GAAG,KAAK,EAC7B,IAAI,GAAG,KAAK,EACZ,YAAY,GAAG,MAAM,OAEtB,EADI,IAAI,cART,8FASC,CADQ;IAIT,OAAO,CACL,oBAAC,SAAS,CAAC,IAAI,oBACT,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,IAAI,EAAE,CAAC,EAC7D,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAC9D,aAAa,EAAE,QAAQ;QAEvB,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;gBACL,IAAI;gBACJ,IAAI;gBACJ,YAAY;aACb,IAEA,QAAQ,CACY,CACR,CAClB,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AACf,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;AACpB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AAExB,OAAO,GAAG,MAAM,iBAAiB,CAAC;AAClC,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAqBpC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAaC,EACD,GAAG,EACH,EAAE;QAfF,EACE,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,YAAY,GAAG,EAAE,EACjB,KAAK,EACL,QAAQ,EACR,EAAE,EACF,qBAAqB,GAAG,KAAK,EAC7B,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,MAAM,EACrB,IAAI,GAAG,KAAK,OAEb,EADI,IAAI,cAZT,qIAaC,CADQ;IAIT,MAAM,WAAW,GAAG,kBAAkB,EAAE,CAAC;IAEzC,MAAM,WAAW,GAAG,OAAO,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAEnE;;OAEG;IACH,MAAM,OAAO,mCACR,WAAW,KACd,qBAAqB;QACrB,IAAI;QACJ,IAAI;QACJ,YAAY;QACZ,IAAI,GACL,CAAC;IAEF,OAAO,CACL,oBAAC,uBAAuB,IAAC,KAAK,EAAE,WAAW;QACzC,oBAAC,YAAY,oBAAK,OAAO;YACvB,2CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,IAAI,EAAE,CAAC,KAE5D,QAAQ,CACL,CACO,CACS,CAC3B,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AACf,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;AACpB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAe,IAAI,CAAC"}

package/esm/tabs/Tabs.types.d.ts

@@ -0,0 +1,41 @@
+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/esm/tabs/Tabs.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tabs.types.js.map

package/esm/tabs/Tabs.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.js","sourceRoot":"","sources":["../../src/tabs/Tabs.types.ts"],"names":[],"mappings":""}

package/esm/tabs/index.d.ts

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

package/esm/tabs/index.js

@@ -1,6 +1,6 @@
 "use client";
-export { default as TabsTab } from "./Tab.js";
-export { default as TabsList } from "./TabList.js";
-export { default as TabsPanel } from "./TabPanel.js";
 export { default as Tabs } from "./Tabs.js";
+export { default as TabsTab } from "./parts/tab/Tab.js";
+export { default as TabsList, } from "./parts/tablist/TabList.js";
+export { default as TabsPanel, } from "./parts/tabpanel/TabPanel.js";
 //# sourceMappingURL=index.js.map

package/esm/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,OAAO,EAAiB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAqB,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAsB,MAAM,YAAY,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAkB,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAiB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EACL,OAAO,IAAI,QAAQ,GAEpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,OAAO,IAAI,SAAS,GAErB,MAAM,2BAA2B,CAAC"}

package/esm/tabs/parts/tab/Tab.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { OverridableComponent } from "../../../util/index.js";
+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 declare const Tab: OverridableComponent<TabProps, HTMLButtonElement>;
+export default Tab;

package/esm/tabs/parts/tab/Tab.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BodyShort } from "../../../typography/index.js";
+import { useTabsContext } from "../../Tabs.context.js";
+import { useTab } from "./useTab.js";
+export const Tab = forwardRef((_a, ref) => {
+    var _b, _c;
+    var { className, as: Component = "button", label, icon, value, onClick, onFocus, disabled, id } = _a, rest = __rest(_a, ["className", "as", "label", "icon", "value", "onClick", "onFocus", "disabled", "id"]);
+    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 (React.createElement(Component, Object.assign({ ref: tabCtx.ref }, rest, { className: cl("navds-tabs__tab", `navds-tabs__tab--${(_b = ctx === null || ctx === void 0 ? void 0 : ctx.size) !== null && _b !== void 0 ? _b : "medium"}`, `navds-tabs__tab-icon--${ctx === null || ctx === void 0 ? void 0 : 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": (_c = rest["aria-controls"]) !== null && _c !== void 0 ? _c : tabCtx.controlsId, id: id !== null && id !== void 0 ? id : tabCtx.id, onFocus: tabCtx.onFocus, onClick: tabCtx.onClick }),
+        React.createElement(BodyShort, { as: "span", className: "navds-tabs__tab-inner", size: ctx === null || ctx === void 0 ? void 0 : ctx.size },
+            React.createElement("span", { "aria-hidden": !!label }, icon),
+            React.createElement("span", null, label))));
+});
+export default Tab;
+//# sourceMappingURL=Tab.js.map

package/esm/tabs/parts/tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAyBlC,MAAM,CAAC,MAAM,GAAG,GACd,UAAU,CACR,CACE,EAWC,EACD,GAA0C,EAC1C,EAAE;;QAbF,EACE,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,EAAE,OAEH,EADI,IAAI,cAVT,qFAWC,CADQ;IAIT,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC;IAClE,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;QACpB,OAAO,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC;QACrD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,MAAM,CAAC,GAAG,IACX,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,oBAAoB,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,mCAAI,QAAQ,EAAE,EAC3C,yBAAyB,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,YAAY,EAAE,EAC5C,SAAS,EACT;YACE,4BAA4B,EAAE,IAAI,IAAI,CAAC,KAAK;YAC5C,uBAAuB,EAAE,GAAG,CAAC,IAAI;SAClC,CACF,EACD,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,mBACE,MAAM,CAAC,UAAU,gBACpB,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EACrD,QAAQ,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACpB,MAAA,IAAI,CAAC,eAAe,CAAC,mCAAI,MAAM,CAAC,UAAU,EACzD,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,MAAM,CAAC,EAAE,EACnB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAE,MAAM,CAAC,OAAO;QAEvB,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI;YAEf,6CAAmB,CAAC,CAAC,KAAK,IAAG,IAAI,CAAQ;YACzC,kCAAO,KAAK,CAAQ,CACV,CACF,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,GAAG,CAAC"}

package/esm/tabs/parts/tab/useTab.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export interface UseTabProps {
+    /**
+     * If `true`, the `Tab` won't be toggleable
+     * @default false
+     */
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler;
+    onFocus?: React.FocusEventHandler;
+    value: string;
+}
+export declare function useTab<P extends UseTabProps>({ value, disabled, onFocus: _onFocus, onClick }: P, ref: React.ForwardedRef<HTMLButtonElement>): {
+    ref: (instance: HTMLButtonElement | null) => void;
+    isSelected: boolean;
+    isFocused: boolean;
+    id: string;
+    controlsId: string;
+    onClick: (event: import("react").MouseEvent<Element, MouseEvent>) => void;
+    onFocus: ((event: import("react").FocusEvent<Element, Element>) => void) | undefined;
+};

package/esm/tabs/parts/tab/useTab.js

@@ -0,0 +1,25 @@
+import { composeEventHandlers } from "../../../util/composeEventHandlers.js";
+import { mergeRefs } from "../../../util/hooks/useMergeRefs.js";
+import { useTabsContext, useTabsDescendant } from "../../Tabs.context.js";
+export function useTab({ value, disabled = false, onFocus: _onFocus, onClick }, ref) {
+    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),
+    };
+}
+//# sourceMappingURL=useTab.js.map

package/esm/tabs/parts/tab/useTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTab.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tab/useTab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAavE,MAAM,UAAU,MAAM,CACpB,EAAE,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAK,EAC1D,GAA0C;IAE1C,MAAM,EACJ,EAAE,EACF,gBAAgB,EAChB,qBAAqB,EACrB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,SAAS,EACT,cAAc,GACf,GAAG,cAAc,EAAE,CAAC;IAErB,MAAM,EAAE,QAAQ,EAAE,GAAG,iBAAiB,CAAC;QACrC,QAAQ;QACR,KAAK;KACN,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC;IAE3C,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,qBAAqB,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,OAAO;QACL,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAC/B,UAAU;QACV,SAAS,EAAE,YAAY,KAAK,KAAK;QACjC,EAAE,EAAE,SAAS,CAAC,EAAE,EAAE,KAAK,CAAC;QACxB,UAAU,EAAE,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC;QACrC,OAAO,EAAE,oBAAoB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACrE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACxE,CAAC;AACJ,CAAC"}

package/esm/tabs/parts/tablist/ScrollButtons.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ScrollButtonProps {
+    hidden: boolean;
+    onClick: () => void;
+    dir: "left" | "right";
+}
+declare function ScrollButton({ hidden, onClick, dir }: ScrollButtonProps): React.JSX.Element;
+export default ScrollButton;

package/esm/tabs/parts/tablist/ScrollButtons.js

@@ -0,0 +1,10 @@
+import cl from "clsx";
+import React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+function ScrollButton({ hidden, onClick, dir }) {
+    return (React.createElement("div", { className: cl("navds-tabs__scroll-button", {
+            "navds-tabs__scroll-button--hidden": hidden,
+        }), onClick: onClick, "aria-hidden": true }, dir === "left" ? (React.createElement(ChevronLeftIcon, { title: "scroll tilbake" })) : (React.createElement(ChevronRightIcon, { title: "scroll neste" }))));
+}
+export default ScrollButton;
+//# sourceMappingURL=ScrollButtons.js.map

package/esm/tabs/parts/tablist/ScrollButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollButtons.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/ScrollButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAQxE,SAAS,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAqB;IAC/D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE;YACzC,mCAAmC,EAAE,MAAM;SAC5C,CAAC,EACF,OAAO,EAAE,OAAO,yBAGf,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,CAChB,oBAAC,eAAe,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAC3C,CAAC,CAAC,CAAC,CACF,oBAAC,gBAAgB,IAAC,KAAK,EAAC,cAAc,GAAG,CAC1C,CACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,YAAY,CAAC"}

package/{cjs/tabs → esm/tabs/parts/tablist}/TabList.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * `<Tabs.Tab />` elements
+     * <Tabs.Tab /> elements.
      */
     children: React.ReactNode;
 }

package/esm/tabs/parts/tablist/TabList.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+import cl from "clsx";
+import React, { forwardRef, useRef } from "react";
+import { composeEventHandlers } from "../../../util/composeEventHandlers.js";
+import { useMergeRefs } from "../../../util/hooks/useMergeRefs.js";
+import ScrollButton from "./ScrollButtons.js";
+import { useScrollButtons } from "./useScrollButtons.js";
+import { useTabList } from "./useTabList.js";
+export const TabList = forwardRef((_a, ref) => {
+    var { className, onKeyDown } = _a, rest = __rest(_a, ["className", "onKeyDown"]);
+    const { onKeyDown: _onKeyDown } = useTabList();
+    const listRef = useRef(null);
+    const mergedRef = useMergeRefs(listRef, ref);
+    const scrollCtx = useScrollButtons(listRef);
+    return (React.createElement("div", { className: "navds-tabs__tablist-wrapper" },
+        scrollCtx.show && (React.createElement(ScrollButton, { dir: "left", hidden: !scrollCtx.start, onClick: scrollCtx.scrollLeft })),
+        React.createElement("div", Object.assign({ ref: mergedRef }, rest, { onScroll: scrollCtx.update, className: cl("navds-tabs__tablist", className), role: "tablist", "aria-orientation": "horizontal", onKeyDown: composeEventHandlers(onKeyDown, _onKeyDown) })),
+        scrollCtx.show && (React.createElement(ScrollButton, { dir: "right", hidden: !scrollCtx.end, onClick: scrollCtx.scrollRight }))));
+});
+export default TabList;
+//# sourceMappingURL=TabList.js.map

package/esm/tabs/parts/tablist/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/TabList.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,wDAAwD;AACxD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS1C,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,CAAC,EAAiC,EAAE,GAAG,EAAE,EAAE;QAA1C,EAAE,SAAS,EAAE,SAAS,OAAW,EAAN,IAAI,cAA/B,0BAAiC,CAAF;IAC9B,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,CAAC;IAE/C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAE5C,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B;QACzC,SAAS,CAAC,IAAI,IAAI,CACjB,oBAAC,YAAY,IACX,GAAG,EAAC,MAAM,EACV,MAAM,EAAE,CAAC,SAAS,CAAC,KAAK,EACxB,OAAO,EAAE,SAAS,CAAC,UAAU,GAC7B,CACH;QACD,2CACE,GAAG,EAAE,SAAS,IACV,IAAI,IACR,QAAQ,EAAE,SAAS,CAAC,MAAM,EAC1B,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,IAAI,EAAC,SAAS,sBACG,YAAY,EAC7B,SAAS,EAAE,oBAAoB,CAAC,SAAS,EAAE,UAAU,CAAC,IACtD;QACD,SAAS,CAAC,IAAI,IAAI,CACjB,oBAAC,YAAY,IACX,GAAG,EAAC,OAAO,EACX,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,EACtB,OAAO,EAAE,SAAS,CAAC,WAAW,GAC9B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/esm/tabs/parts/tablist/useScrollButtons.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare function useScrollButtons(listRef: React.RefObject<HTMLDivElement>): {
+    update: {
+        (this: any, ...args: any[]): void;
+        clear(): void;
+    };
+    start: boolean;
+    end: boolean;
+    show: boolean;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+};

package/esm/tabs/parts/tablist/useScrollButtons.js

@@ -0,0 +1,57 @@
+import { useEffect, useMemo, useState } from "react";
+import { debounce } from "../../../util/index.js";
+export function useScrollButtons(listRef) {
+    const [displayScroll, setDisplayScroll] = useState({
+        start: false,
+        end: false,
+    });
+    const updateScrollButtonState = useMemo(() => debounce(() => {
+        if (!(listRef === null || listRef === void 0 ? void 0 : 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(() => {
+        var _a, _b, _c;
+        const handleResize = () => updateScrollButtonState();
+        const win = (_c = (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document) !== null && _c !== void 0 ? _c : 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;
+            }
+        },
+    };
+}
+//# sourceMappingURL=useScrollButtons.js.map

package/esm/tabs/parts/tablist/useScrollButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollButtons.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/useScrollButtons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,UAAU,gBAAgB,CAAC,OAAwC;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC;QACjD,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,KAAK;KACX,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,OAAO,CACrC,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA;YAAE,OAAO;QAC9B,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QACrD,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC;QAC9C,6DAA6D;QAC7D,MAAM,eAAe,GAAG,UAAU,GAAG,CAAC,CAAC;QACvC,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;QAEjE,gBAAgB,CAAC,CAAC,gBAAgB,EAAE,EAAE,CACpC,eAAe,KAAK,gBAAgB,CAAC,KAAK;YAC1C,aAAa,KAAK,gBAAgB,CAAC,GAAG;YACpC,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,aAAa,EAAE,CACnD,CAAC;IACJ,CAAC,CAAC,EACJ,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAC;QACrD,MAAM,GAAG,GAAG,MAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,mCAAI,QAAQ,mCAAI,MAAM,CAAC;QACjE,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAE7C,IAAI,cAAc,CAAC;QAEnB,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;YAC1C,cAAc,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;YAClD,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,cAAc,IAAI,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9C,uBAAuB,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,uBAAuB,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,aAAa,CAAC,KAAK;QAC1B,GAAG,EAAE,aAAa,CAAC,GAAG;QACtB,IAAI,EAAE,aAAa,CAAC,GAAG,IAAI,aAAa,CAAC,KAAK;QAC9C,UAAU,EAAE,GAAG,EAAE;YACf,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC;YACpC,CAAC;QACH,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YAChB,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC;YACpC,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

package/esm/tabs/parts/tablist/useTabList.d.ts

@@ -0,0 +1,7 @@
+/**
+ * TabList hook to manage multiple tab buttons,
+ * and ensures only one tab is selected at a time.
+ */
+export declare function useTabList(): {
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};

package/esm/tabs/parts/tablist/useTabList.js

@@ -0,0 +1,62 @@
+import { useCallback } from "react";
+import { useTabsContext, useTabsDescendantsContext } from "../../Tabs.context.js";
+/**
+ * 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) => {
+        /**
+         * 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 = () => {
+            var _a;
+            const next = descendants.nextEnabled(idx, loop);
+            next && ((_a = next.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const prevTab = () => {
+            var _a;
+            const prev = descendants.prevEnabled(idx, loop);
+            prev && ((_a = prev.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const firstTab = () => {
+            var _a;
+            const first = descendants.firstEnabled();
+            first && ((_a = first.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const lastTab = () => {
+            var _a;
+            const last = descendants.lastEnabled();
+            last && ((_a = last.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const keyMap = {
+            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 };
+}
+//# sourceMappingURL=useTabList.js.map

package/esm/tabs/parts/tablist/useTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabList.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/useTabList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/E;;;GAGG;AACH,MAAM,UAAU,UAAU;IACxB,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,EAAE,GAC1D,cAAc,EAAE,CAAC;IAEnB,MAAM,WAAW,GAAG,yBAAyB,EAAE,CAAC;IAEhD;;OAEG;IACH,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAA0B,EAAE,EAAE;QAC7B;;;WAGG;QACH,MAAM,GAAG,GAAG,WAAW;aACpB,MAAM,EAAE;aACR,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC;QAE9C,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YAChD,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YAChD,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,GAAG,EAAE;;YACpB,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,EAAE,CAAC;YACzC,KAAK,KAAI,MAAA,KAAK,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC/B,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC;YACvC,IAAI,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAA,CAAC;QAC7B,CAAC,CAAC;QAEF,MAAM,MAAM,GAA+C;YACzD,SAAS,EAAE,OAAO;YAClB,UAAU,EAAE,OAAO;YACnB,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,OAAO;SACb,CAAC;QAEF,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,MAAM,EAAE,CAAC;YACX,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAC/B;;;eAGG;YACH,aAAa,IAAI,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC;QACpE,CAAC;IACH,CAAC,EACD,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,CAAC,CAClE,CAAC;IAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACvB,CAAC"}

package/esm/tabs/parts/tabpanel/TabPanel.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+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;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPanel;