@salt-ds/lab 1.0.0-alpha.87 → 1.0.0-alpha.89

package/dist-es/tabs-next/TabListNext.js

@@ -1,22 +1,29 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useForkRef, useId, capitalize } from '@salt-ds/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useAriaAnnouncer, useIsomorphicLayoutEffect, capitalize } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { useFocusWithRetry } from './hooks/useFocusWithRetry.js';
 import { useOverflow } from './hooks/useOverflow.js';
-import { useRestoreActiveTab } from './hooks/useRestoreActiveTab.js';
+import { useOverflowLayoutState } from './hooks/useOverflowLayoutState.js';
+import { useTabListRecovery } from './hooks/useTabListRecovery.js';
+import { useTabRemovalHandler } from './hooks/useTabRemovalHandler.js';
+import { useTabSelectionFocus } from './hooks/useTabSelectionFocus.js';
+import { TabListLayoutContext } from './TabListLayoutContext.js';
 import css_248z from './TabListNext.css.js';
 import { TabOverflowList } from './TabOverflowList.js';
+import { TabSlot } from './TabSlot.js';
+import { TabSlotRegistryContext } from './TabSlotRegistryContext.js';
 import { useTabsNext } from './TabsNextContext.js';
 
 const withBaseName = makePrefixer("saltTabListNext");
+const MAX_FOCUS_RETRY_ATTEMPTS = 120;
 const TabListNext = forwardRef(
-  function TabstripNext(props, ref) {
+  function TabListNext2(props, ref) {
     const {
       appearance = "bordered",
       activeColor = "primary",
-      "aria-describedby": ariaDescribedBy,
       children,
       className,
       onKeyDown,
@@ -29,61 +36,185 @@ const TabListNext = forwardRef(
       window: targetWindow
     });
     const {
+      renderMode,
       selected,
+      setSelected,
+      setBootstrapOverflowReady,
       getNext,
       getPrevious,
       getFirst,
       getLast,
-      items,
+      getIndex,
+      item,
+      itemAt,
       activeTab,
+      selectionFromOverflowValueRef,
       menuOpen,
       setMenuOpen,
-      removedActiveTabRef
+      sortItems,
+      getRemovedItems,
+      getRenderedTab,
+      renderedTabs,
+      removalVersion
     } = useTabsNext();
     const tabstripRef = useRef(null);
+    const overflowListRef = useRef(null);
+    const slotMapRef = useRef(/* @__PURE__ */ new Map());
+    const removalRecoveryRafRef = useRef(null);
+    const pendingRemovalRecoveryRef = useRef(false);
+    const pendingRemovalRecoveryRetriesRef = useRef(0);
+    const [slotVersion, setSlotVersion] = useState(0);
     const handleRef = useForkRef(tabstripRef, ref);
     const overflowButtonRef = useRef(null);
-    const [visible, hidden, isMeasuring, realSelectedIndexRef] = useOverflow({
+    const { announce } = useAriaAnnouncer();
+    const overflowMenuOpen = renderMode === "portal" ? menuOpen : false;
+    const [visibleValues, hiddenValues, isMeasuring] = useOverflow({
       container: tabstripRef,
-      tabs: items,
-      children,
+      menuOpen: overflowMenuOpen,
       selected,
+      tabs: renderedTabs,
       overflowButton: overflowButtonRef
     });
-    useRestoreActiveTab({
-      container: tabstripRef,
-      tabs: items,
-      realSelectedIndex: realSelectedIndexRef,
-      removedActiveTabRef
+    useEffect(() => {
+      setBootstrapOverflowReady(
+        renderMode === "inline" && renderedTabs.length > 0 && !isMeasuring
+      );
+    }, [
+      isMeasuring,
+      renderMode,
+      renderedTabs.length,
+      setBootstrapOverflowReady
+    ]);
+    const { resolvedOverflowActiveValue, tabListLayoutContext } = useOverflowLayoutState({
+      hiddenValues,
+      menuOpen,
+      overflowMenuOpen,
+      visibleValues
     });
+    const registerSlot = useCallback(
+      (slotId, element) => {
+        const currentElement = slotMapRef.current.get(slotId) ?? null;
+        if (currentElement === element) {
+          return;
+        }
+        if (element) {
+          slotMapRef.current.set(slotId, element);
+        } else {
+          slotMapRef.current.delete(slotId);
+        }
+        setSlotVersion((currentVersion) => currentVersion + 1);
+      },
+      []
+    );
+    const slotRegistryContext = useMemo(
+      () => ({ registerSlot }),
+      [registerSlot]
+    );
+    const slotAssignments = useMemo(() => {
+      const nextAssignments = /* @__PURE__ */ new Map();
+      for (const value of visibleValues) {
+        nextAssignments.set(value, `main:${value}`);
+      }
+      for (const value of hiddenValues) {
+        nextAssignments.set(
+          value,
+          menuOpen ? `overflow:${value}` : `measure:${value}`
+        );
+      }
+      return {
+        map: nextAssignments,
+        version: slotVersion
+      };
+    }, [hiddenValues, menuOpen, slotVersion, visibleValues]);
+    useIsomorphicLayoutEffect(() => {
+      var _a;
+      if (renderMode !== "portal") {
+        return;
+      }
+      for (const [value, slotId] of slotAssignments.map) {
+        const host = (_a = getRenderedTab(value)) == null ? void 0 : _a.host;
+        const slot = slotMapRef.current.get(slotId);
+        if (host && slot && host.parentElement !== slot) {
+          slot.appendChild(host);
+        }
+      }
+    }, [getRenderedTab, renderMode, slotAssignments]);
     const handleKeyDown = (event) => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       onKeyDown == null ? void 0 : onKeyDown(event);
+      if (menuOpen) return;
       const actionMap = {
         ArrowRight: getNext,
         ArrowLeft: getPrevious,
         Home: getFirst,
-        End: getLast,
-        ArrowUp: menuOpen ? getPrevious : void 0,
-        ArrowDown: menuOpen ? getNext : void 0
+        End: getLast
       };
       const action = actionMap[event.key];
       if (action) {
         event.preventDefault();
+        sortItems();
         const activeTabId = (_a = activeTab.current) == null ? void 0 : _a.id;
         if (!activeTabId) return;
         const nextItem = action(activeTabId);
         if (nextItem) {
-          (_c = (_b = nextItem.element) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.scrollIntoView({
-            block: "nearest",
-            inline: "nearest"
-          });
-          (_d = nextItem.element) == null ? void 0 : _d.focus({ preventScroll: true });
+          (_b = nextItem.element) == null ? void 0 : _b.focus({ preventScroll: true });
         }
       }
     };
-    const warningId = useId();
-    return /* @__PURE__ */ jsxs(
+    const getSelectedTabElement = useCallback(() => {
+      var _a, _b, _c;
+      return ((_a = tabstripRef.current) == null ? void 0 : _a.querySelector(
+        '[role="tab"][aria-selected="true"]'
+      )) ?? ((_c = item((_b = activeTab.current) == null ? void 0 : _b.id)) == null ? void 0 : _c.element);
+    }, [item, activeTab]);
+    const { focusElementWithRetry } = useFocusWithRetry({
+      maxAttempts: MAX_FOCUS_RETRY_ATTEMPTS,
+      targetWindow
+    });
+    useTabSelectionFocus({
+      announce,
+      focusElementWithRetry,
+      getRenderedTab,
+      getSelectedTabElement,
+      menuOpen,
+      resolvedOverflowActiveValue,
+      selected,
+      selectionFromOverflowValueRef,
+      targetWindow
+    });
+    const handleTabRemoval = useTabRemovalHandler({
+      activeTab,
+      focusElementWithRetry,
+      getFirst,
+      getIndex,
+      getLast,
+      getRemovedItems,
+      getRenderedTab,
+      getSelectedTabElement,
+      item,
+      itemAt,
+      maxRetryAttempts: MAX_FOCUS_RETRY_ATTEMPTS,
+      menuOpen,
+      overflowButtonRef,
+      overflowListRef,
+      pendingRemovalRecoveryRef,
+      pendingRemovalRecoveryRetriesRef,
+      removalRecoveryRafRef,
+      selected,
+      setSelected,
+      tabstripRef,
+      targetWindow
+    });
+    useTabListRecovery({
+      removalVersion,
+      targetWindow,
+      tabstripRef,
+      overflowListRef,
+      handleTabRemoval,
+      pendingRemovalRecoveryRef,
+      pendingRemovalRecoveryRetriesRef
+    });
+    return /* @__PURE__ */ jsx(
       "div",
       {
         role: "tablist",
@@ -94,26 +225,41 @@ const TabListNext = forwardRef(
           withBaseName(`activeColor${capitalize(activeColor)}`),
           className
         ),
-        "data-ismeasuring": isMeasuring ? true : void 0,
+        "data-ismeasuring": renderMode === "portal" && isMeasuring ? true : void 0,
         ref: handleRef,
         onKeyDown: handleKeyDown,
-        "aria-describedby": clsx(ariaDescribedBy, warningId) || void 0,
         ...rest,
-        children: [
-          !isMeasuring && hidden.length > 0 && /* @__PURE__ */ jsx("span", { id: warningId, className: withBaseName("overflowWarning"), children: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected" }),
-          visible,
+        children: renderMode === "inline" ? children : /* @__PURE__ */ jsx(TabSlotRegistryContext.Provider, { value: slotRegistryContext, children: /* @__PURE__ */ jsxs(TabListLayoutContext.Provider, { value: tabListLayoutContext, children: [
+          children,
+          visibleValues.map((value) => /* @__PURE__ */ jsx(TabSlot, { slotId: `main:${value}`, value }, value)),
+          !menuOpen && hiddenValues.length > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              role: "presentation",
+              className: withBaseName("measureContainer"),
+              children: hiddenValues.map((value) => /* @__PURE__ */ jsx(
+                TabSlot,
+                {
+                  slotId: `measure:${value}`,
+                  value
+                },
+                `measure-${value}`
+              ))
+            }
+          ) : null,
           /* @__PURE__ */ jsx(
             TabOverflowList,
             {
-              isMeasuring,
               buttonRef: overflowButtonRef,
-              tabstripRef,
+              hiddenValues,
               open: menuOpen,
+              order: renderedTabs.length,
               setOpen: setMenuOpen,
-              children: hidden
+              ref: overflowListRef
             }
           )
-        ]
+        ] }) })
       }
     );
   }

package/dist-es/tabs-next/TabListNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import { capitalize, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  useRef,\n} from \"react\";\nimport { useOverflow } from \"./hooks/useOverflow\";\nimport { useRestoreActiveTab } from \"./hooks/useRestoreActiveTab\";\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      removedActiveTabRef,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring, realSelectedIndexRef] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    useRestoreActiveTab({\n      container: tabstripRef,\n      tabs: items,\n      realSelectedIndex: realSelectedIndexRef,\n      removedActiveTabRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.parentElement?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    const warningId = useId();\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        aria-describedby={clsx(ariaDescribedBy, warningId) || undefined}\n        {...rest}\n      >\n        {!isMeasuring && hidden.length > 0 && (\n          <span id={warningId} className={withBaseName(\"overflowWarning\")}>\n            Note: This tab list includes overflow; tab positions may be\n            inaccurate or change when a tab is selected\n          </span>\n        )}\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["tablistNextCss"],"mappings":"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"}
+{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useAriaAnnouncer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFocusWithRetry } from \"./hooks/useFocusWithRetry\";\nimport { useOverflow } from \"./hooks/useOverflow\";\nimport { useOverflowLayoutState } from \"./hooks/useOverflowLayoutState\";\nimport { useTabListRecovery } from \"./hooks/useTabListRecovery\";\nimport { useTabRemovalHandler } from \"./hooks/useTabRemovalHandler\";\nimport { useTabSelectionFocus } from \"./hooks/useTabSelectionFocus\";\nimport { TabListLayoutContext } from \"./TabListLayoutContext\";\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { TabSlot } from \"./TabSlot\";\nimport { TabSlotRegistryContext } from \"./TabSlotRegistryContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\nconst MAX_FOCUS_RETRY_ATTEMPTS = 120;\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabListNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      renderMode,\n      selected,\n      setSelected,\n      setBootstrapOverflowReady,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      getIndex,\n      item,\n      itemAt,\n      activeTab,\n      selectionFromOverflowValueRef,\n      menuOpen,\n      setMenuOpen,\n      sortItems,\n      getRemovedItems,\n      getRenderedTab,\n      renderedTabs,\n      removalVersion,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const overflowListRef = useRef<HTMLDivElement>(null);\n    const slotMapRef = useRef<Map<string, HTMLDivElement>>(new Map());\n    const removalRecoveryRafRef = useRef<number | null>(null);\n    const pendingRemovalRecoveryRef = useRef(false);\n    const pendingRemovalRecoveryRetriesRef = useRef(0);\n    const [slotVersion, setSlotVersion] = useState(0);\n\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const { announce } = useAriaAnnouncer();\n    const overflowMenuOpen = renderMode === \"portal\" ? menuOpen : false;\n\n    const [visibleValues, hiddenValues, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      menuOpen: overflowMenuOpen,\n      selected,\n      tabs: renderedTabs,\n      overflowButton: overflowButtonRef,\n    });\n\n    useEffect(() => {\n      setBootstrapOverflowReady(\n        renderMode === \"inline\" && renderedTabs.length > 0 && !isMeasuring,\n      );\n    }, [\n      isMeasuring,\n      renderMode,\n      renderedTabs.length,\n      setBootstrapOverflowReady,\n    ]);\n\n    const { resolvedOverflowActiveValue, tabListLayoutContext } =\n      useOverflowLayoutState({\n        hiddenValues,\n        menuOpen,\n        overflowMenuOpen,\n        visibleValues,\n      });\n    const registerSlot = useCallback(\n      (slotId: string, element: HTMLDivElement | null) => {\n        const currentElement = slotMapRef.current.get(slotId) ?? null;\n        if (currentElement === element) {\n          return;\n        }\n\n        if (element) {\n          slotMapRef.current.set(slotId, element);\n        } else {\n          slotMapRef.current.delete(slotId);\n        }\n\n        setSlotVersion((currentVersion) => currentVersion + 1);\n      },\n      [],\n    );\n    const slotRegistryContext = useMemo(\n      () => ({ registerSlot }),\n      [registerSlot],\n    );\n    const slotAssignments = useMemo(() => {\n      const nextAssignments = new Map<string, string>();\n\n      for (const value of visibleValues) {\n        nextAssignments.set(value, `main:${value}`);\n      }\n\n      for (const value of hiddenValues) {\n        nextAssignments.set(\n          value,\n          menuOpen ? `overflow:${value}` : `measure:${value}`,\n        );\n      }\n\n      return {\n        map: nextAssignments,\n        version: slotVersion,\n      };\n    }, [hiddenValues, menuOpen, slotVersion, visibleValues]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (renderMode !== \"portal\") {\n        return;\n      }\n\n      for (const [value, slotId] of slotAssignments.map) {\n        const host = getRenderedTab(value)?.host;\n        const slot = slotMapRef.current.get(slotId);\n\n        if (host && slot && host.parentElement !== slot) {\n          slot.appendChild(host);\n        }\n      }\n    }, [getRenderedTab, renderMode, slotAssignments]);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (menuOpen) return;\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        // Item registration/sorting is raf-driven; flush before keyboard nav to\n        // avoid navigating against stale collection order/registration.\n        sortItems();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          // Scrolling is handled by TabTrigger.\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    const getSelectedTabElement = useCallback(() => {\n      return (\n        tabstripRef.current?.querySelector<HTMLElement>(\n          '[role=\"tab\"][aria-selected=\"true\"]',\n        ) ?? item(activeTab.current?.id)?.element\n      );\n    }, [item, activeTab]);\n    const { focusElementWithRetry } = useFocusWithRetry({\n      maxAttempts: MAX_FOCUS_RETRY_ATTEMPTS,\n      targetWindow,\n    });\n    useTabSelectionFocus({\n      announce,\n      focusElementWithRetry,\n      getRenderedTab,\n      getSelectedTabElement,\n      menuOpen,\n      resolvedOverflowActiveValue,\n      selected,\n      selectionFromOverflowValueRef,\n      targetWindow,\n    });\n\n    const handleTabRemoval = useTabRemovalHandler({\n      activeTab,\n      focusElementWithRetry,\n      getFirst,\n      getIndex,\n      getLast,\n      getRemovedItems,\n      getRenderedTab,\n      getSelectedTabElement,\n      item,\n      itemAt,\n      maxRetryAttempts: MAX_FOCUS_RETRY_ATTEMPTS,\n      menuOpen,\n      overflowButtonRef,\n      overflowListRef,\n      pendingRemovalRecoveryRef,\n      pendingRemovalRecoveryRetriesRef,\n      removalRecoveryRafRef,\n      selected,\n      setSelected,\n      tabstripRef,\n      targetWindow,\n    });\n\n    useTabListRecovery({\n      removalVersion,\n      targetWindow,\n      tabstripRef,\n      overflowListRef,\n      handleTabRemoval,\n      pendingRemovalRecoveryRef,\n      pendingRemovalRecoveryRetriesRef,\n    });\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={\n          renderMode === \"portal\" && isMeasuring ? true : undefined\n        }\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {renderMode === \"inline\" ? (\n          children\n        ) : (\n          <TabSlotRegistryContext.Provider value={slotRegistryContext}>\n            <TabListLayoutContext.Provider value={tabListLayoutContext}>\n              {children}\n              {visibleValues.map((value) => (\n                <TabSlot key={value} slotId={`main:${value}`} value={value} />\n              ))}\n              {!menuOpen && hiddenValues.length > 0 ? (\n                <div\n                  aria-hidden=\"true\"\n                  role=\"presentation\"\n                  className={withBaseName(\"measureContainer\")}\n                >\n                  {hiddenValues.map((value) => (\n                    <TabSlot\n                      key={`measure-${value}`}\n                      slotId={`measure:${value}`}\n                      value={value}\n                    />\n                  ))}\n                </div>\n              ) : null}\n              <TabOverflowList\n                buttonRef={overflowButtonRef}\n                hiddenValues={hiddenValues}\n                open={menuOpen}\n                order={renderedTabs.length}\n                setOpen={setMenuOpen}\n                ref={overflowListRef}\n              />\n            </TabListLayoutContext.Provider>\n          </TabSlotRegistryContext.Provider>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["TabListNext","tablistNextCss"],"mappings":"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"}

package/dist-es/tabs-next/TabNext.js

@@ -1,12 +1,15 @@
-import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, useId } from '@salt-ds/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { makePrefixer, useId, useIsomorphicLayoutEffect, useForkRef } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { useRenderedTabWidth } from './hooks/useRenderedTabWidth.js';
 import css_248z from './TabNext.css.js';
 import { TabNextContext } from './TabNextContext.js';
 import { useTabsNext } from './TabsNextContext.js';
+import { getIntrinsicMeasuredWidth } from './widthMeasurement.js';
 
 const withBaseName = makePrefixer("saltTabNext");
 const TabNext = forwardRef(
@@ -29,15 +32,26 @@ const TabNext = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const { selected, activeTab } = useTabsNext();
+    const {
+      selected,
+      activeTab,
+      renderMode,
+      registerBootstrapTab,
+      setBootstrapTabReady,
+      registerRenderedTab,
+      updateRenderedTab
+    } = useTabsNext();
     const disabled = !!disabledProp;
     const id = useId(idProp);
     const wasMouseDown = useRef(false);
     const [focusVisible, setFocusVisible] = useState(false);
     const [focused, setFocused] = useState(false);
+    const [hostElement, setHostElement] = useState(null);
+    const markerRef = useRef(null);
+    const tabRootRef = useRef(null);
     const handleFocusCapture = (event) => {
       onFocusCapture == null ? void 0 : onFocusCapture(event);
-      if (value && id) {
+      if (id) {
         activeTab.current = { value, id };
       }
     };
@@ -56,15 +70,33 @@ const TabNext = forwardRef(
     };
     const handleMouseDown = (event) => {
       onMouseDown == null ? void 0 : onMouseDown(event);
+      if (id) {
+        activeTab.current = { value, id };
+      }
       wasMouseDown.current = true;
     };
-    const [actions, setActions] = useState([]);
+    const [actionIds, setActionIds] = useState(() => /* @__PURE__ */ new Set());
     const registerAction = useCallback((id2) => {
-      setActions((old) => old.concat(id2));
+      setActionIds((old) => {
+        if (old.has(id2)) {
+          return old;
+        }
+        const next = new Set(old);
+        next.add(id2);
+        return next;
+      });
       return () => {
-        setActions((old) => old.filter((action) => action !== id2));
+        setActionIds((old) => {
+          if (!old.has(id2)) {
+            return old;
+          }
+          const next = new Set(old);
+          next.delete(id2);
+          return next;
+        });
       };
     }, []);
+    const actions = useMemo(() => Array.from(actionIds), [actionIds]);
     const context = useMemo(
       () => ({
         tabId: id,
@@ -77,7 +109,66 @@ const TabNext = forwardRef(
       }),
       [id, selected, value, focused, disabled, actions, registerAction]
     );
-    return /* @__PURE__ */ jsx(TabNextContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    useIsomorphicLayoutEffect(() => {
+      const doc = targetWindow == null ? void 0 : targetWindow.document;
+      if (!doc) {
+        return;
+      }
+      const host = doc.createElement("div");
+      host.dataset.tabHost = value;
+      host.role = "presentation";
+      host.style.display = "contents";
+      setHostElement(host);
+      return () => {
+        host.remove();
+      };
+    }, [targetWindow, value]);
+    useIsomorphicLayoutEffect(() => {
+      if (renderMode !== "inline") {
+        return;
+      }
+      return registerBootstrapTab(value);
+    }, [registerBootstrapTab, renderMode, value]);
+    useIsomorphicLayoutEffect(() => {
+      setBootstrapTabReady(value, hostElement != null);
+      return () => {
+        setBootstrapTabReady(value, false);
+      };
+    }, [hostElement, setBootstrapTabReady, value]);
+    useIsomorphicLayoutEffect(() => {
+      if (!hostElement || !id) {
+        return;
+      }
+      return registerRenderedTab({
+        host: hostElement,
+        id,
+        marker: markerRef.current,
+        root: tabRootRef.current,
+        trigger: null,
+        value,
+        width: getIntrinsicMeasuredWidth(tabRootRef.current)
+      });
+    }, [hostElement, id, registerRenderedTab, value]);
+    useIsomorphicLayoutEffect(() => {
+      const updates = {
+        marker: markerRef.current,
+        root: tabRootRef.current
+      };
+      if (renderMode === "inline") {
+        updates.width = getIntrinsicMeasuredWidth(tabRootRef.current);
+      }
+      updateRenderedTab(value, updates);
+    }, [renderMode, updateRenderedTab, value]);
+    useRenderedTabWidth({
+      hostElement,
+      renderMode,
+      tabRootRef,
+      targetWindow,
+      updateRenderedTab,
+      value
+    });
+    const handleTabRootRef = useForkRef(tabRootRef, ref);
+    const tabMarkup = /* @__PURE__ */ jsx(TabNextContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
       "div",
       {
         className: clsx(
@@ -90,7 +181,8 @@ const TabNext = forwardRef(
           className
         ),
         "data-overflowitem": "true",
-        ref,
+        "data-value": value,
+        ref: handleTabRootRef,
         onMouseDown: handleMouseDown,
         onFocusCapture: handleFocusCapture,
         onFocus: handleFocus,
@@ -100,6 +192,18 @@ const TabNext = forwardRef(
         children
       }
     ) });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "presentation",
+          "data-tabnext-marker": "",
+          hidden: true,
+          ref: markerRef
+        }
+      ),
+      renderMode === "inline" ? tabMarkup : hostElement ? createPortal(tabMarkup, hostElement) : null
+    ] });
   }
 );
 

package/dist-es/tabs-next/TabNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the tab.\n   */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n  function Tab(props, ref): ReactElement<TabNextProps> {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      onBlur,\n      onMouseDown,\n      onFocus,\n      onFocusCapture,\n      value,\n      id: idProp,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next\",\n      css: tabCss,\n      window: targetWindow,\n    });\n\n    const { selected, activeTab } = useTabsNext();\n\n    const disabled = !!disabledProp;\n\n    const id = useId(idProp);\n\n    const wasMouseDown = useRef(false);\n    const [focusVisible, setFocusVisible] = useState(false);\n    const [focused, setFocused] = useState(false);\n\n    const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n      onFocusCapture?.(event);\n      if (value && id) {\n        activeTab.current = { value, id };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n\n      setFocused(true);\n\n      if (\n        !wasMouseDown.current &&\n        event.target.getAttribute(\"role\") === \"tab\"\n      ) {\n        setFocusVisible(true);\n      }\n\n      wasMouseDown.current = false;\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n      setFocusVisible(false);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n      onMouseDown?.(event);\n      wasMouseDown.current = true;\n    };\n\n    const [actions, setActions] = useState<string[]>([]);\n\n    const registerAction = useCallback((id: string) => {\n      setActions((old) => old.concat(id));\n\n      return () => {\n        setActions((old) => old.filter((action) => action !== id));\n      };\n    }, []);\n\n    const context = useMemo(\n      () => ({\n        tabId: id,\n        selected: selected === value,\n        focused,\n        value,\n        disabled,\n        actions,\n        registerAction,\n      }),\n      [id, selected, value, focused, disabled, actions, registerAction],\n    );\n\n    return (\n      <TabNextContext.Provider value={context}>\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"selected\")]: selected === value,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"focusVisible\")]: focusVisible,\n            },\n            className,\n          )}\n          data-overflowitem=\"true\"\n          ref={ref}\n          onMouseDown={handleMouseDown}\n          onFocusCapture={handleFocusCapture}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          role=\"presentation\"\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabNextContext.Provider>\n    );\n  },\n);\n"],"names":["tabCss","id"],"mappings":"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"}
+{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { useRenderedTabWidth } from \"./hooks/useRenderedTabWidth\";\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { getIntrinsicMeasuredWidth } from \"./widthMeasurement\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the tab. This must be unique within a `TabsNext` instance.\n   */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n  function Tab(props, ref): ReactElement<TabNextProps> {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      onBlur,\n      onMouseDown,\n      onFocus,\n      onFocusCapture,\n      value,\n      id: idProp,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next\",\n      css: tabCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      activeTab,\n      renderMode,\n      registerBootstrapTab,\n      setBootstrapTabReady,\n      registerRenderedTab,\n      updateRenderedTab,\n    } = useTabsNext();\n\n    const disabled = !!disabledProp;\n\n    const id = useId(idProp);\n\n    const wasMouseDown = useRef(false);\n    const [focusVisible, setFocusVisible] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [hostElement, setHostElement] = useState<HTMLDivElement | null>(null);\n    const markerRef = useRef<HTMLSpanElement>(null);\n    const tabRootRef = useRef<HTMLDivElement>(null);\n\n    const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n      onFocusCapture?.(event);\n      if (id) {\n        activeTab.current = { value, id };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n\n      setFocused(true);\n\n      if (\n        !wasMouseDown.current &&\n        event.target.getAttribute(\"role\") === \"tab\"\n      ) {\n        setFocusVisible(true);\n      }\n\n      wasMouseDown.current = false;\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n      setFocusVisible(false);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n      onMouseDown?.(event);\n      if (id) {\n        activeTab.current = { value, id };\n      }\n      wasMouseDown.current = true;\n    };\n\n    const [actionIds, setActionIds] = useState(() => new Set<string>());\n\n    const registerAction = useCallback((id: string) => {\n      setActionIds((old) => {\n        if (old.has(id)) {\n          return old;\n        }\n\n        const next = new Set(old);\n        next.add(id);\n        return next;\n      });\n\n      return () => {\n        setActionIds((old) => {\n          if (!old.has(id)) {\n            return old;\n          }\n\n          const next = new Set(old);\n          next.delete(id);\n          return next;\n        });\n      };\n    }, []);\n\n    const actions = useMemo(() => Array.from(actionIds), [actionIds]);\n\n    const context = useMemo(\n      () => ({\n        tabId: id,\n        selected: selected === value,\n        focused,\n        value,\n        disabled,\n        actions,\n        registerAction,\n      }),\n      [id, selected, value, focused, disabled, actions, registerAction],\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      const doc = targetWindow?.document;\n      if (!doc) {\n        return;\n      }\n\n      const host = doc.createElement(\"div\");\n      host.dataset.tabHost = value;\n      host.role = \"presentation\";\n      host.style.display = \"contents\";\n      setHostElement(host);\n\n      return () => {\n        host.remove();\n      };\n    }, [targetWindow, value]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (renderMode !== \"inline\") {\n        return;\n      }\n\n      return registerBootstrapTab(value);\n    }, [registerBootstrapTab, renderMode, value]);\n\n    useIsomorphicLayoutEffect(() => {\n      setBootstrapTabReady(value, hostElement != null);\n\n      return () => {\n        setBootstrapTabReady(value, false);\n      };\n    }, [hostElement, setBootstrapTabReady, value]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!hostElement || !id) {\n        return;\n      }\n\n      return registerRenderedTab({\n        host: hostElement,\n        id,\n        marker: markerRef.current,\n        root: tabRootRef.current,\n        trigger: null,\n        value,\n        width: getIntrinsicMeasuredWidth(tabRootRef.current),\n      });\n    }, [hostElement, id, registerRenderedTab, value]);\n\n    useIsomorphicLayoutEffect(() => {\n      const updates = {\n        marker: markerRef.current,\n        root: tabRootRef.current,\n      } as Partial<{\n        host: HTMLDivElement;\n        id: string;\n        marker: HTMLElement | null;\n        root: HTMLElement | null;\n        trigger: HTMLButtonElement | null;\n        width: number;\n      }>;\n\n      if (renderMode === \"inline\") {\n        updates.width = getIntrinsicMeasuredWidth(tabRootRef.current);\n      }\n\n      updateRenderedTab(value, updates);\n    }, [renderMode, updateRenderedTab, value]);\n\n    useRenderedTabWidth({\n      hostElement,\n      renderMode,\n      tabRootRef,\n      targetWindow,\n      updateRenderedTab,\n      value,\n    });\n\n    const handleTabRootRef = useForkRef(tabRootRef, ref);\n\n    const tabMarkup = (\n      <TabNextContext.Provider value={context}>\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"selected\")]: selected === value,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"focusVisible\")]: focusVisible,\n            },\n            className,\n          )}\n          data-overflowitem=\"true\"\n          data-value={value}\n          ref={handleTabRootRef}\n          onMouseDown={handleMouseDown}\n          onFocusCapture={handleFocusCapture}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          role=\"presentation\"\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabNextContext.Provider>\n    );\n\n    return (\n      <>\n        <span\n          role=\"presentation\"\n          data-tabnext-marker=\"\"\n          hidden\n          ref={markerRef}\n        />\n        {renderMode === \"inline\"\n          ? tabMarkup\n          : hostElement\n            ? createPortal(tabMarkup, hostElement)\n            : null}\n      </>\n    );\n  },\n);\n"],"names":["tabCss","id"],"mappings":"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"}

package/dist-es/tabs-next/TabNextAction.js

@@ -3,17 +3,38 @@ import { useId, useIsomorphicLayoutEffect, Button } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useTabNext } from './TabNextContext.js';
+import { useTabsNext } from './TabsNextContext.js';
 
 const TabNextAction = forwardRef(
   function TabNextAction2(props, ref) {
-    const { "aria-labelledby": ariaLabelledBy, id: idProp, ...rest } = props;
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      id: idProp,
+      onFocus,
+      onMouseDown,
+      ...rest
+    } = props;
     const id = useId(idProp);
-    const { focused, selected, tabId, registerAction } = useTabNext();
+    const { focused, selected, tabId, registerAction, value } = useTabNext();
+    const { activeTab } = useTabsNext();
     useIsomorphicLayoutEffect(() => {
       if (id) {
         return registerAction(id);
       }
     }, [registerAction, id]);
+    const setActiveTab = () => {
+      if (tabId) {
+        activeTab.current = { id: tabId, value };
+      }
+    };
+    const handleFocus = (event) => {
+      onFocus == null ? void 0 : onFocus(event);
+      setActiveTab();
+    };
+    const handleMouseDown = (event) => {
+      onMouseDown == null ? void 0 : onMouseDown(event);
+      setActiveTab();
+    };
     return /* @__PURE__ */ jsx(
       Button,
       {
@@ -23,6 +44,8 @@ const TabNextAction = forwardRef(
         appearance: "transparent",
         sentiment: "neutral",
         ref,
+        onFocus: handleFocus,
+        onMouseDown: handleMouseDown,
         ...rest
       }
     );

package/dist-es/tabs-next/TabNextAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNextAction.js","sources":["../src/tabs-next/TabNextAction.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\n\nexport interface TabNextActionProps extends ButtonProps {}\n\nexport const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(\n  function TabNextAction(props, ref) {\n    const { \"aria-labelledby\": ariaLabelledBy, id: idProp, ...rest } = props;\n\n    const id = useId(idProp);\n    const { focused, selected, tabId, registerAction } = useTabNext();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerAction(id);\n      }\n    }, [registerAction, id]);\n\n    return (\n      <Button\n        id={id}\n        aria-labelledby={clsx(ariaLabelledBy, tabId, id)}\n        tabIndex={focused || selected ? undefined : -1}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["TabNextAction"],"mappings":";;;;;;AAYO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,iBAAA,EAAmB,cAAA,EAAgB,IAAI,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAEnE,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,KAAA,EAAO,cAAA,KAAmB,UAAA,EAAW;AAEhE,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAA,EAAI;AACN,QAAA,OAAO,eAAe,EAAE,CAAA;AAAA,MAC1B;AAAA,IACF,CAAA,EAAG,CAAC,cAAA,EAAgB,EAAE,CAAC,CAAA;AAEvB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAA,EAAiB,IAAA,CAAK,cAAA,EAAgB,KAAA,EAAO,EAAE,CAAA;AAAA,QAC/C,QAAA,EAAU,OAAA,IAAW,QAAA,GAAW,MAAA,GAAY,EAAA;AAAA,QAC5C,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAU,SAAA;AAAA,QACV,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"TabNextAction.js","sources":["../src/tabs-next/TabNextAction.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type FocusEvent, forwardRef, type MouseEvent } from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextActionProps extends ButtonProps {}\n\nexport const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(\n  function TabNextAction(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      id: idProp,\n      onFocus,\n      onMouseDown,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const { focused, selected, tabId, registerAction, value } = useTabNext();\n    const { activeTab } = useTabsNext();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerAction(id);\n      }\n    }, [registerAction, id]);\n\n    const setActiveTab = () => {\n      if (tabId) {\n        activeTab.current = { id: tabId, value };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      onFocus?.(event);\n      setActiveTab();\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n      onMouseDown?.(event);\n      setActiveTab();\n    };\n\n    return (\n      <Button\n        id={id}\n        aria-labelledby={clsx(ariaLabelledBy, tabId, id)}\n        tabIndex={focused || selected ? undefined : -1}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={ref}\n        onFocus={handleFocus}\n        onMouseDown={handleMouseDown}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["TabNextAction"],"mappings":";;;;;;;AAaO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM;AAAA,MACJ,iBAAA,EAAmB,cAAA;AAAA,MACnB,EAAA,EAAI,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,OAAO,cAAA,EAAgB,KAAA,KAAU,UAAA,EAAW;AACvE,IAAA,MAAM,EAAE,SAAA,EAAU,GAAI,WAAA,EAAY;AAElC,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAA,EAAI;AACN,QAAA,OAAO,eAAe,EAAE,CAAA;AAAA,MAC1B;AAAA,IACF,CAAA,EAAG,CAAC,cAAA,EAAgB,EAAE,CAAC,CAAA;AAEvB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,SAAA,CAAU,OAAA,GAAU,EAAE,EAAA,EAAI,KAAA,EAAO,KAAA,EAAM;AAAA,MACzC;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,YAAA,EAAa;AAAA,IACf,CAAA;AAEA,IAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyC;AAChE,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,KAAA,CAAA;AACd,MAAA,YAAA,EAAa;AAAA,IACf,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAA,EAAiB,IAAA,CAAK,cAAA,EAAgB,KAAA,EAAO,EAAE,CAAA;AAAA,QAC/C,QAAA,EAAU,OAAA,IAAW,QAAA,GAAW,MAAA,GAAY,EAAA;AAAA,QAC5C,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAU,SAAA;AAAA,QACV,GAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,WAAA,EAAa,eAAA;AAAA,QACZ,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}