@navikt/ds-react 6.4.1 → 6.6.0

package/esm/tabs/parts/tabpanel/TabPanel.js

@@ -0,0 +1,22 @@
+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 { useTabPanel } from "./useTabPanel.js";
+const TabPanel = forwardRef((_a, ref) => {
+    var _b;
+    var { className, value, children, lazy = true, id } = _a, rest = __rest(_a, ["className", "value", "children", "lazy", "id"]);
+    const ctx = useTabPanel({ value });
+    return (React.createElement("div", Object.assign({ ref: ref }, rest, { className: cl("navds-tabs__tabpanel", className), role: "tabpanel", tabIndex: 0, "aria-labelledby": (_b = rest["aria-labelledby"]) !== null && _b !== void 0 ? _b : ctx.labelledbyId, id: id !== null && id !== void 0 ? id : ctx.id, hidden: ctx.hidden, "data-state": !ctx.hidden ? "active" : "inactive" }), lazy && ctx.hidden ? null : children));
+});
+export default TabPanel;
+//# sourceMappingURL=TabPanel.js.map

package/esm/tabs/parts/tabpanel/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tabpanel/TabPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAyB5C,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAAwD,EAAE,GAAG,EAAE,EAAE;;QAAjE,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE,OAAW,EAAN,IAAI,cAAtD,gDAAwD,CAAF;IACrD,MAAM,GAAG,GAAG,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAEnC,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,qBACM,MAAA,IAAI,CAAC,iBAAiB,CAAC,mCAAI,GAAG,CAAC,YAAY,EAC5D,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,GAAG,CAAC,EAAE,EAChB,MAAM,EAAE,GAAG,CAAC,MAAM,gBACN,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,KAE9C,IAAI,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CACjC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,12 @@
+type TabPanelProps = {
+    value: string;
+};
+/**
+ * Tabs hook for managing the visible/hidden state of Tabs.Panel
+ */
+export declare function useTabPanel({ value }: TabPanelProps): {
+    labelledbyId: string;
+    hidden: boolean;
+    id: string;
+};
+export {};

package/esm/tabs/parts/tabpanel/useTabPanel.js

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

package/esm/tabs/parts/tabpanel/useTabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabPanel.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tabpanel/useTabPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAMpD;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAiB;IAClD,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IAE1E,OAAO;QACL,YAAY,EAAE,SAAS,CAAC,EAAE,EAAE,KAAK,CAAC;QAClC,MAAM,EAAE,aAAa,KAAK,KAAK;QAC/B,EAAE,EAAE,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC;KAC9B,CAAC;AACJ,CAAC"}

package/esm/tabs/useTabs.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TabsProps } from "./Tabs.types.js";
+export declare function useTabs({ onChange, value, defaultValue, id, }: Pick<TabsProps, "onChange" | "value" | "defaultValue" | "id">): {
+    id: string;
+    selectedValue: string;
+    setSelectedValue: (next: import("react").SetStateAction<string>) => void;
+    focusedValue: string;
+    setFocusedValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    makeTabId: typeof makeTabId;
+    makeTabPanelId: typeof makeTabPanelId;
+};
+declare function makeTabId(id: string, value: string): string;
+declare function makeTabPanelId(id: string, value: string): string;
+export {};

package/esm/tabs/useTabs.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { useId } from "../util/index.js";
+import { useControllableState } from "../util/hooks/useControllableState.js";
+export function useTabs({ 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 !== null && id !== void 0 ? id : uuid}`,
+        selectedValue,
+        setSelectedValue,
+        focusedValue,
+        setFocusedValue,
+        makeTabId,
+        makeTabPanelId,
+    };
+}
+function makeTabId(id, value) {
+    return `${id}--tab-${value}`;
+}
+function makeTabPanelId(id, value) {
+    return `${id}--tabpanel-${value}`;
+}
+//# sourceMappingURL=useTabs.js.map

package/esm/tabs/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","sourceRoot":"","sources":["../../src/tabs/useTabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAG1E,MAAM,UAAU,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,EAAE,EACjB,EAAE,GAC4D;IAC9D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAE/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,oBAAoB,CAAC;QAC7D,YAAY;QACZ,KAAK;QACL,QAAQ;KACT,CAAC,CAAC;IAEH;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAClB,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ;;OAEG;IACH,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC;IAErB,OAAO;QACL,EAAE,EAAE,QAAQ,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,EAAE;QACxB,aAAa;QACb,gBAAgB;QAChB,YAAY;QACZ,eAAe;QACf,SAAS;QACT,cAAc;KACf,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAU,EAAE,KAAa;IAC1C,OAAO,GAAG,EAAE,SAAS,KAAK,EAAE,CAAC;AAC/B,CAAC;AAED,SAAS,cAAc,CAAC,EAAU,EAAE,KAAa;IAC/C,OAAO,GAAG,EAAE,cAAc,KAAK,EAAE,CAAC;AACpC,CAAC"}

package/esm/toggle-group/ToggleGroup.context.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { ToggleGroupProps } from "./ToggleGroup.types.js";
+import { useToggleGroup } from "./useToggleGroup.js";
+interface ToggleContextProps {
+    size: "medium" | "small";
+}
+export declare const ToggleGroupContext: import("react").Context<ToggleContextProps | null>;
+export declare const ToggleGroupDescendantsProvider: import("react").Provider<import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>>, useToggleGroupDescendantsContext: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>, useToggleGroupDescendants: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}>, useToggleGroupDescendant: (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 ToggleGroupProviderProps = ReturnType<typeof useToggleGroup> & Pick<ToggleGroupProps, "size">;
+export declare const ToggleGroupProvider: import("react").ForwardRefExoticComponent<{
+    selectedValue: string;
+    setSelectedValue: (next: import("react").SetStateAction<string>) => void;
+    focusedValue: string;
+    setFocusedValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+} & Pick<ToggleGroupProps, "size"> & {
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>, useToggleGroupContext: <S extends boolean = true>(strict?: S) => S extends true ? ToggleGroupProviderProps : ToggleGroupProviderProps | undefined;
+export {};

package/esm/toggle-group/ToggleGroup.context.js

@@ -0,0 +1,12 @@
+import { createContext as ReactCreateContext } from "react";
+import { createContext } from "../util/create-context.js";
+import { createDescendantContext } from "../util/hooks/descendants/useDescendant.js";
+export const ToggleGroupContext = ReactCreateContext(null);
+export const [ToggleGroupDescendantsProvider, useToggleGroupDescendantsContext, useToggleGroupDescendants, useToggleGroupDescendant,] = createDescendantContext();
+/* State context */
+export const [ToggleGroupProvider, useToggleGroupContext] = createContext({
+    name: "ToggleGroupContext",
+    hookName: "useToggleGroupContext",
+    providerName: "ToggleGroupProvider",
+});
+//# sourceMappingURL=ToggleGroup.context.js.map

package/esm/toggle-group/ToggleGroup.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.context.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAQlF,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAClD,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,CACX,8BAA8B,EAC9B,gCAAgC,EAChC,yBAAyB,EACzB,wBAAwB,EACzB,GAAG,uBAAuB,EAAwC,CAAC;AAKpE,mBAAmB;AACnB,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GACvD,aAAa,CAA2B;IACtC,IAAI,EAAE,oBAAoB;IAC1B,QAAQ,EAAE,uBAAuB;IACjC,YAAY,EAAE,qBAAqB;CACpC,CAAC,CAAC"}

package/esm/toggle-group/ToggleGroup.d.ts

@@ -1,42 +1,11 @@
-import React, { HTMLAttributes } from "react";
-import { ToggleGroupItemProps } from "./ToggleItem.js";
-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 React from "react";
+import { ToggleGroupProps } from "./ToggleGroup.types.js";
+import ToggleItem from "./parts/ToggleItem.js";
 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;
 }
 /**
  * A component that displays a group of toggle buttons.

package/esm/toggle-group/ToggleGroup.js

@@ -9,13 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import cl from "clsx";
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef } from "react";
 import { Label } from "../typography/index.js";
-import { useId } from "../util/hooks/index.js";
-import ToggleItem from "./ToggleItem.js";
-import { ToggleGroupContext } from "./context.js";
+import { useId } from "../util/index.js";
+import { ToggleGroupDescendantsProvider, ToggleGroupProvider, useToggleGroupDescendants, } from "./ToggleGroup.context.js";
+import ToggleItem from "./parts/ToggleItem.js";
+import { useToggleGroup } from "./useToggleGroup.js";
 /**
  * A component that displays a group of toggle buttons.
  *
@@ -32,31 +32,31 @@ import { ToggleGroupContext } from "./context.js";
  * ```
  */
 export const ToggleGroup = forwardRef((_a, ref) => {
-    var { className, children, onChange, size = "medium", label, value, defaultValue, "aria-describedby": desc, variant = "action" } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "aria-describedby", "variant"]);
-    const [groupValue, setGroupValue] = useState(defaultValue);
+    var { className, children, onChange, size = "medium", label, value, defaultValue, "aria-describedby": userDescribedby, variant = "action", fill = false } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "aria-describedby", "variant", "fill"]);
+    const descendants = useToggleGroupDescendants();
+    const toggleGroupContext = useToggleGroup({
+        defaultValue,
+        value,
+        onChange,
+    });
+    /**
+     * ToggleGroupProvider handles memoization.
+     */
+    const context = Object.assign(Object.assign({}, toggleGroupContext), { size });
     const labelId = useId();
-    const handleValueChange = (v) => {
-        if (v !== "") {
-            setGroupValue(v);
-            onChange === null || onChange === void 0 ? void 0 : onChange(v);
-        }
-    };
     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 !== null && desc !== void 0 ? desc : ""]: !!desc,
-        [labelId !== null && labelId !== void 0 ? labelId : ""]: !!label,
-    });
     if (!value && !defaultValue) {
         console.error("ToggleGroup needs either a value or defaultValue");
     }
-    return (React.createElement(ToggleGroupContext.Provider, { value: {
-            size,
-        } },
-        React.createElement("div", { className: cl("navds-toggle-group__wrapper", className) },
-            label && (React.createElement(Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
-            React.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? 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" }), children))));
+    return (React.createElement(ToggleGroupDescendantsProvider, { value: descendants },
+        React.createElement(ToggleGroupProvider, Object.assign({}, context),
+            React.createElement("div", { className: cl("navds-toggle-group__wrapper", className, {
+                    "navds-toggle-group__wrapper--fill": fill,
+                }) },
+                label && (React.createElement(Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
+                React.createElement("div", Object.assign({}, 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)))));
 });
 ToggleGroup.Item = ToggleItem;
 export default ToggleGroup;

package/esm/toggle-group/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,UAAoC,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAgD/C;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,kBAAkB,EAAE,IAAI,EACxB,OAAO,GAAG,QAAQ,OAEnB,EADI,IAAI,cAVT,8GAWC,CADQ;IAIT,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,EAAE;QACtC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;YACb,aAAa,CAAC,CAAC,CAAC,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;IACzE,CAAC;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;QACpB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;QACpB,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,IAAI;SACL;QAED,6BAAK,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC;YACzD,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;YACD,oBAAC,gBAAgB,CAAC,IAAI,oBAChB,IAAI,IACR,aAAa,EAAE,iBAAiB,EAChC,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,UAAU,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,uBAAuB,OAAO,EAAE,CACjC,IACG,CAAC,UAAU,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC,IACtD,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACa,CACpB,CACsB,CAC/B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EACL,8BAA8B,EAC9B,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAE/B,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,kBAAkB,EAAE,eAAe,EACnC,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,KAAK,OAEb,EADI,IAAI,cAXT,sHAYC,CADQ;IAIT,MAAM,WAAW,GAAG,yBAAyB,EAAE,CAAC;IAEhD,MAAM,kBAAkB,GAAG,cAAc,CAAC;QACxC,YAAY;QACZ,KAAK;QACL,QAAQ;KACT,CAAC,CAAC;IAEH;;OAEG;IACH,MAAM,OAAO,mCACR,kBAAkB,KACrB,IAAI,GACL,CAAC;IAEF,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CACL,oBAAC,8BAA8B,IAAC,KAAK,EAAE,WAAW;QAChD,oBAAC,mBAAmB,oBAAK,OAAO;YAC9B,6BACE,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,EAAE;oBACtD,mCAAmC,EAAE,IAAI;iBAC1C,CAAC;gBAED,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;gBACD,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,uBAAuB,OAAO,EAAE,CACjC,sBAEC,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,SAAS,EAEtD,IAAI,EAAC,YAAY,KAEhB,QAAQ,CACL,CACF,CACc,CACS,CAClC,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC"}

package/esm/toggle-group/ToggleGroup.types.d.ts

@@ -0,0 +1,38 @@
+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/esm/toggle-group/ToggleGroup.types.js

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

package/esm/toggle-group/ToggleGroup.types.js.map

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

package/esm/toggle-group/index.d.ts

@@ -1,2 +1,3 @@
-export { default as ToggleGroup, type ToggleGroupProps } from "./ToggleGroup.js";
-export { default as ToggleGroupItem, type ToggleGroupItemProps, } from "./ToggleItem.js";
+export { default as ToggleGroup } from "./ToggleGroup.js";
+export { type ToggleGroupProps } from "./ToggleGroup.types.js";
+export { default as ToggleGroupItem, type ToggleGroupItemProps, } from "./parts/ToggleItem.js";

package/esm/toggle-group/index.js

@@ -1,4 +1,4 @@
 "use client";
 export { default as ToggleGroup } from "./ToggleGroup.js";
-export { default as ToggleGroupItem, } from "./ToggleItem.js";
+export { default as ToggleGroupItem, } from "./parts/ToggleItem.js";
 //# sourceMappingURL=index.js.map

package/esm/toggle-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle-group/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAyB,MAAM,eAAe,CAAC;AAC9E,OAAO,EACL,OAAO,IAAI,eAAe,GAE3B,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle-group/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EACL,OAAO,IAAI,eAAe,GAE3B,MAAM,oBAAoB,CAAC"}

package/esm/toggle-group/{ToggleItem.d.ts → parts/ToggleItem.d.ts}

@@ -1,11 +1,11 @@
 import React from "react";
 export interface ToggleGroupItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
-     * Content
+     * Content.
      */
     children: React.ReactNode;
     /**
-     * Value for state-handling
+     * Value for state-handling.
      */
     value: string;
 }

package/esm/toggle-group/parts/ToggleItem.js

@@ -0,0 +1,25 @@
+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/BodyShort.js";
+import { useToggleGroupContext } from "../ToggleGroup.context.js";
+import { useToggleItem } from "./useToggleItem.js";
+const ToggleItem = forwardRef((_a, forwardedRef) => {
+    var { className, children, value, onClick, onFocus, onKeyDown } = _a, rest = __rest(_a, ["className", "children", "value", "onClick", "onFocus", "onKeyDown"]);
+    const itemCtx = useToggleItem({ value, onClick, onFocus, disabled: false, onKeyDown }, forwardedRef);
+    const ctx = useToggleGroupContext();
+    return (React.createElement("button", Object.assign({}, 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 }),
+        React.createElement(BodyShort, { as: "span", className: "navds-toggle-group__button-inner", size: ctx === null || ctx === void 0 ? void 0 : ctx.size }, children)));
+});
+export default ToggleItem;
+//# sourceMappingURL=ToggleItem.js.map

package/esm/toggle-group/parts/ToggleItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/ToggleItem.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,4BAA4B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAchD,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EAAoE,EACpE,YAAY,EACZ,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,OAAW,EAAN,IAAI,cAAlE,qEAAoE,CAAF;IAGlE,MAAM,OAAO,GAAG,aAAa,CAC3B,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EACvD,YAAY,CACb,CAAC;IACF,MAAM,GAAG,GAAG,qBAAqB,EAAE,CAAC;IAEpC,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EACtD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,OAAO,CAAC,UAAU,EAChC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACpC,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,SAAS,EAAE,OAAO,CAAC,SAAS;QAE5B,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,kCAAkC,EAC5C,IAAI,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,IAEd,QAAQ,CACC,CACL,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/toggle-group/parts/useToggleItem.d.ts

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

package/esm/toggle-group/parts/useToggleItem.js

@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import { composeEventHandlers } from "../../util/composeEventHandlers.js";
+import { mergeRefs } from "../../util/hooks/useMergeRefs.js";
+import { useToggleGroupContext, useToggleGroupDescendant, } from "../ToggleGroup.context.js";
+export function useToggleItem({ value, disabled = false, onFocus: _onFocus, onClick, onKeyDown: _onKeyDown, }, ref) {
+    const { setSelectedValue, setFocusedValue, selectedValue, focusedValue } = useToggleGroupContext();
+    const { register, descendants } = useToggleGroupDescendant({
+        disabled,
+        value,
+    });
+    const isSelected = value === selectedValue;
+    const onFocus = () => setFocusedValue(value);
+    /**
+     * Implements roving-tabindex for horizontal tabs
+     */
+    const onKeyDown = useCallback((event) => {
+        /**
+         * ToggleGroup.Item 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, false);
+            next && ((_a = next.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const prevTab = () => {
+            var _a;
+            const prev = descendants.prevEnabled(idx, false);
+            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, selectedValue, setFocusedValue]);
+    return {
+        ref: mergeRefs([register, ref]),
+        isSelected,
+        isFocused: focusedValue === value,
+        onClick: composeEventHandlers(onClick, () => setSelectedValue(value)),
+        onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus),
+        onKeyDown: composeEventHandlers(_onKeyDown, onKeyDown),
+    };
+}
+//# sourceMappingURL=useToggleItem.js.map

package/esm/toggle-group/parts/useToggleItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/useToggleItem.ts"],"names":[],"mappings":"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"}

package/esm/toggle-group/useToggleGroup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ToggleGroupProps } from "./ToggleGroup.types.js";
+export declare function useToggleGroup({ onChange, value, defaultValue, }: Pick<ToggleGroupProps, "onChange" | "value" | "defaultValue">): {
+    selectedValue: string;
+    setSelectedValue: (next: import("react").SetStateAction<string>) => void;
+    focusedValue: string;
+    setFocusedValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

package/esm/toggle-group/useToggleGroup.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { useControllableState } from "../util/hooks/useControllableState.js";
+export function useToggleGroup({ onChange, value, defaultValue = "", }) {
+    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]);
+    return {
+        selectedValue,
+        setSelectedValue,
+        focusedValue,
+        setFocusedValue,
+    };
+}
+//# sourceMappingURL=useToggleGroup.js.map

package/esm/toggle-group/useToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/useToggleGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAG1E,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,EAAE,GAC6C;IAC9D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAE/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,oBAAoB,CAAC;QAC7D,YAAY;QACZ,KAAK;QACL,QAAQ;KACT,CAAC,CAAC;IAEH;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAClB,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO;QACL,aAAa;QACb,gBAAgB;QAChB,YAAY;QACZ,eAAe;KAChB,CAAC;AACJ,CAAC"}

package/esm/util/hooks/descendants/descendant.js

@@ -98,8 +98,17 @@ export class DescendantsManager {
             return this.enabledItem(prevEnabledIndex);
         };
         this.registerNode = (node, options) => {
-            if (!node || this.descendants.has(node))
+            if (!node)
+                return;
+            /**
+             * While the node is registered, we have to make sure to sync options
+             * This is useful when ex. a node is disabled after it has been registered
+             */
+            const mapNode = this.descendants.get(node);
+            if (mapNode) {
+                this.descendants.set(node, Object.assign({ index: mapNode.index, node }, options));
                 return;
+            }
             const keys = Array.from(this.descendants.keys()).concat(node);
             const sorted = sortNodes(keys);
             if (options === null || options === void 0 ? void 0 : options.disabled) {

package/esm/util/hooks/descendants/descendant.js.map

@@ -1 +1 @@
-{"version":3,"file":"descendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/descendant.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"descendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/descendant.ts"],"names":[],"mappings":"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"}

package/esm/util/hooks/descendants/useDescendant.js

@@ -13,11 +13,6 @@ import { cast } from "./utils.js";
  */
 function useDescendants() {
     const descendants = useRef(new DescendantsManager()).current;
-    useClientLayoutEffect(() => {
-        return () => {
-            descendants.destroy();
-        };
-    });
     return descendants;
 }
 const [DescendantsContextProvider, useDescendantsContext] = createContext({