@salt-ds/core 1.59.1 → 1.61.0

package/dist-cjs/tabs/internal/hooks/useTabRemovalHandler.js

@@ -0,0 +1,165 @@
+'use strict';
+
+var React = require('react');
+var useEventCallback = require('../../../utils/useEventCallback.js');
+var domUtils = require('../utils/domUtils.js');
+
+function hasLostDocumentFocus(doc) {
+  const activeElement = doc.activeElement;
+  return !activeElement || activeElement === doc.body || activeElement === doc.documentElement || !activeElement.isConnected;
+}
+function getVisibleSelectedTab(tabstrip, excludedId) {
+  if (!tabstrip) {
+    return null;
+  }
+  const tabs = tabstrip.querySelectorAll(
+    ':scope > [data-tabslot] [role="tab"][aria-selected="true"]'
+  );
+  return Array.from(tabs).find((tab) => {
+    if (excludedId && tab.id === excludedId) {
+      return false;
+    }
+    return tab.isConnected;
+  }) ?? null;
+}
+function useTabRemovalHandler({
+  activeTab,
+  focusElementWithRetry,
+  getFirst,
+  getIndex,
+  getLast,
+  getRemovedItems,
+  getRenderedTab,
+  getSelectedTabElement,
+  item,
+  itemAt,
+  maxRetryAttempts,
+  menuOpen,
+  overflowButtonRef,
+  overflowListRef,
+  pendingRemovalRecoveryRef,
+  pendingRemovalRecoveryRetriesRef,
+  removalRecoveryRafRef,
+  selected,
+  setSelected,
+  tabstripRef,
+  targetWindow
+}) {
+  const clearPendingRemovalRecovery = React.useCallback(() => {
+    pendingRemovalRecoveryRef.current = false;
+    pendingRemovalRecoveryRetriesRef.current = 0;
+  }, [pendingRemovalRecoveryRef, pendingRemovalRecoveryRetriesRef]);
+  const handleTabRemoval = useEventCallback.useEventCallback(() => {
+    var _a;
+    const doc = targetWindow == null ? void 0 : targetWindow.document;
+    if (!doc) return;
+    const activeTabWasSelected = ((_a = activeTab.current) == null ? void 0 : _a.value) === selected;
+    const shouldRecoverFocus = () => {
+      var _a2, _b;
+      if (hasLostDocumentFocus(doc)) return true;
+      const activeElement = doc.activeElement;
+      if (!domUtils.isHTMLElement(activeElement)) return false;
+      if (!menuOpen) {
+        if (activeElement === overflowButtonRef.current) {
+          return activeTabWasSelected;
+        }
+        return ((_a2 = tabstripRef.current) == null ? void 0 : _a2.contains(activeElement)) && activeElement.getAttribute("role") !== "tab";
+      }
+      if (activeElement === overflowButtonRef.current) {
+        return true;
+      }
+      if ((_b = overflowListRef.current) == null ? void 0 : _b.contains(activeElement)) {
+        return activeElement.getAttribute("role") !== "tab";
+      }
+      return false;
+    };
+    if (!shouldRecoverFocus()) {
+      if (pendingRemovalRecoveryRef.current && removalRecoveryRafRef.current == null) {
+        if (pendingRemovalRecoveryRetriesRef.current < maxRetryAttempts) {
+          pendingRemovalRecoveryRetriesRef.current += 1;
+          if (!(targetWindow == null ? void 0 : targetWindow.requestAnimationFrame)) {
+            handleTabRemoval();
+            return;
+          }
+          removalRecoveryRafRef.current = targetWindow.requestAnimationFrame(
+            () => {
+              removalRecoveryRafRef.current = null;
+              handleTabRemoval();
+            }
+          );
+        } else {
+          clearPendingRemovalRecovery();
+        }
+      }
+      return;
+    }
+    if (!activeTab.current) {
+      clearPendingRemovalRecovery();
+      return;
+    }
+    const removedItems = getRemovedItems();
+    const removed = removedItems.get(activeTab.current.id);
+    if (!removed) {
+      clearPendingRemovalRecovery();
+      return;
+    }
+    clearPendingRemovalRecovery();
+    const removedWasSelected = removed.value === selected;
+    const baseIndex = removed.staleIndex ?? -1;
+    const removedId = removed.id;
+    const restoreFocus = () => {
+      var _a2;
+      const restoredTab = item(removedId);
+      const restoredRenderedTab = getRenderedTab(removed.value);
+      const focusMovedToOverflowButton = doc.activeElement === overflowButtonRef.current;
+      if (((_a2 = restoredTab == null ? void 0 : restoredTab.element) == null ? void 0 : _a2.isConnected) && (restoredRenderedTab == null ? void 0 : restoredRenderedTab.trigger) === restoredTab.element && !(removedWasSelected && focusMovedToOverflowButton)) {
+        if (shouldRecoverFocus()) {
+          focusElementWithRetry(() => {
+            var _a3;
+            return (_a3 = item(removedId)) == null ? void 0 : _a3.element;
+          });
+        }
+        return;
+      }
+      if (!shouldRecoverFocus()) {
+        return;
+      }
+      let nextTab = (baseIndex >= 0 ? itemAt(baseIndex) : null) ?? (baseIndex > 0 ? itemAt(baseIndex - 1) : null) ?? getLast() ?? getFirst();
+      if ((nextTab == null ? void 0 : nextTab.element) === overflowButtonRef.current) {
+        const overflowIndex = getIndex(nextTab.id);
+        nextTab = (overflowIndex > 0 ? itemAt(overflowIndex - 1) : null) ?? (baseIndex > 0 ? itemAt(baseIndex - 1) : null) ?? getFirst();
+      }
+      if (!(nextTab == null ? void 0 : nextTab.element)) return;
+      if (removedWasSelected && !menuOpen && !getVisibleSelectedTab(tabstripRef.current, removedId)) {
+        activeTab.current = { id: nextTab.id, value: nextTab.value };
+        setSelected(null, nextTab.value);
+      }
+      focusElementWithRetry(() => {
+        if (removedWasSelected) {
+          return getSelectedTabElement() ?? (nextTab == null ? void 0 : nextTab.element);
+        }
+        return nextTab == null ? void 0 : nextTab.element;
+      });
+    };
+    if (!(targetWindow == null ? void 0 : targetWindow.requestAnimationFrame)) {
+      restoreFocus();
+      return;
+    }
+    targetWindow.requestAnimationFrame(() => {
+      targetWindow.requestAnimationFrame(() => {
+        restoreFocus();
+      });
+    });
+  });
+  React.useEffect(() => {
+    return () => {
+      if (removalRecoveryRafRef.current != null && targetWindow) {
+        targetWindow.cancelAnimationFrame(removalRecoveryRafRef.current);
+      }
+    };
+  }, [removalRecoveryRafRef, targetWindow]);
+  return handleTabRemoval;
+}
+
+exports.useTabRemovalHandler = useTabRemovalHandler;
+//# sourceMappingURL=useTabRemovalHandler.js.map

package/dist-cjs/tabs/internal/hooks/useTabRemovalHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabRemovalHandler.js","sources":["../src/tabs/internal/hooks/useTabRemovalHandler.ts"],"sourcesContent":["import {\n  type MutableRefObject,\n  type RefObject,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useEventCallback } from \"../../../utils/useEventCallback\";\nimport type { Item, TabsContextValue } from \"../contexts/TabsContext\";\nimport { isHTMLElement } from \"../utils/domUtils\";\n\ninterface RemovedItem {\n  id: string;\n  value: string;\n  staleIndex?: number;\n}\n\ninterface UseTabRemovalHandlerArgs {\n  activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n  focusElementWithRetry: (\n    getElement: () => HTMLElement | null | undefined,\n  ) => void;\n  getFirst: TabsContextValue[\"getFirst\"];\n  getIndex: TabsContextValue[\"getIndex\"];\n  getLast: TabsContextValue[\"getLast\"];\n  getRemovedItems: () => Map<string, RemovedItem>;\n  getRenderedTab: TabsContextValue[\"getRenderedTab\"];\n  getSelectedTabElement: () => HTMLElement | null | undefined;\n  item: TabsContextValue[\"item\"];\n  itemAt: TabsContextValue[\"itemAt\"];\n  maxRetryAttempts: number;\n  menuOpen: boolean;\n  overflowButtonRef: RefObject<HTMLButtonElement | null>;\n  overflowListRef: RefObject<HTMLDivElement | null>;\n  pendingRemovalRecoveryRef: MutableRefObject<boolean>;\n  pendingRemovalRecoveryRetriesRef: MutableRefObject<number>;\n  removalRecoveryRafRef: MutableRefObject<number | null>;\n  selected?: string;\n  setSelected: TabsContextValue[\"setSelected\"];\n  tabstripRef: RefObject<HTMLDivElement | null>;\n  targetWindow: Window | null | undefined;\n}\n\nfunction hasLostDocumentFocus(doc: Document) {\n  const activeElement = doc.activeElement;\n  return (\n    !activeElement ||\n    activeElement === doc.body ||\n    activeElement === doc.documentElement ||\n    !activeElement.isConnected\n  );\n}\n\nfunction getVisibleSelectedTab(\n  tabstrip: HTMLDivElement | null,\n  excludedId?: string,\n) {\n  if (!tabstrip) {\n    return null;\n  }\n\n  const tabs = tabstrip.querySelectorAll<HTMLElement>(\n    ':scope > [data-tabslot] [role=\"tab\"][aria-selected=\"true\"]',\n  );\n\n  return (\n    Array.from(tabs).find((tab) => {\n      if (excludedId && tab.id === excludedId) {\n        return false;\n      }\n\n      return tab.isConnected;\n    }) ?? null\n  );\n}\n\nexport function useTabRemovalHandler({\n  activeTab,\n  focusElementWithRetry,\n  getFirst,\n  getIndex,\n  getLast,\n  getRemovedItems,\n  getRenderedTab,\n  getSelectedTabElement,\n  item,\n  itemAt,\n  maxRetryAttempts,\n  menuOpen,\n  overflowButtonRef,\n  overflowListRef,\n  pendingRemovalRecoveryRef,\n  pendingRemovalRecoveryRetriesRef,\n  removalRecoveryRafRef,\n  selected,\n  setSelected,\n  tabstripRef,\n  targetWindow,\n}: UseTabRemovalHandlerArgs) {\n  const clearPendingRemovalRecovery = useCallback(() => {\n    pendingRemovalRecoveryRef.current = false;\n    pendingRemovalRecoveryRetriesRef.current = 0;\n  }, [pendingRemovalRecoveryRef, pendingRemovalRecoveryRetriesRef]);\n\n  const handleTabRemoval = useEventCallback(() => {\n    const doc = targetWindow?.document;\n    if (!doc) return;\n\n    const activeTabWasSelected = activeTab.current?.value === selected;\n\n    const shouldRecoverFocus = () => {\n      if (hasLostDocumentFocus(doc)) return true;\n\n      const activeElement = doc.activeElement;\n      if (!isHTMLElement(activeElement)) return false;\n\n      if (!menuOpen) {\n        if (activeElement === overflowButtonRef.current) {\n          return activeTabWasSelected;\n        }\n\n        return (\n          tabstripRef.current?.contains(activeElement) &&\n          activeElement.getAttribute(\"role\") !== \"tab\"\n        );\n      }\n\n      if (activeElement === overflowButtonRef.current) {\n        return true;\n      }\n\n      if (overflowListRef.current?.contains(activeElement)) {\n        // When closing tabs from the overflow menu, focus can remain within\n        // the floating UI rather than falling back to body.\n        return activeElement.getAttribute(\"role\") !== \"tab\";\n      }\n\n      return false;\n    };\n\n    // If focus was lost due to deletion, browsers may report body/html or a\n    // disconnected active element depending on browser behavior.\n    if (!shouldRecoverFocus()) {\n      if (\n        pendingRemovalRecoveryRef.current &&\n        removalRecoveryRafRef.current == null\n      ) {\n        if (pendingRemovalRecoveryRetriesRef.current < maxRetryAttempts) {\n          pendingRemovalRecoveryRetriesRef.current += 1;\n          if (!targetWindow?.requestAnimationFrame) {\n            handleTabRemoval();\n            return;\n          }\n\n          removalRecoveryRafRef.current = targetWindow.requestAnimationFrame(\n            () => {\n              removalRecoveryRafRef.current = null;\n              handleTabRemoval();\n            },\n          );\n        } else {\n          clearPendingRemovalRecovery();\n        }\n      }\n      return;\n    }\n\n    if (!activeTab.current) {\n      clearPendingRemovalRecovery();\n      return;\n    }\n\n    const removedItems = getRemovedItems();\n    const removed = removedItems.get(activeTab.current.id);\n    if (!removed) {\n      clearPendingRemovalRecovery();\n      return;\n    }\n\n    clearPendingRemovalRecovery();\n    const removedWasSelected = removed.value === selected;\n    const baseIndex = removed.staleIndex ?? -1;\n    const removedId = removed.id;\n\n    const restoreFocus = () => {\n      const restoredTab = item(removedId);\n      const restoredRenderedTab = getRenderedTab(removed.value);\n      const focusMovedToOverflowButton =\n        doc.activeElement === overflowButtonRef.current;\n\n      // Overflow menu updates can temporarily remount tabs. If the tab is\n      // back and focus was lost to a disconnected node, restore focus to the\n      // remounted tab rather than treating it as a real deletion.\n      if (\n        restoredTab?.element?.isConnected &&\n        restoredRenderedTab?.trigger === restoredTab.element &&\n        !(removedWasSelected && focusMovedToOverflowButton)\n      ) {\n        if (shouldRecoverFocus()) {\n          focusElementWithRetry(() => item(removedId)?.element);\n        }\n        return;\n      }\n\n      if (!shouldRecoverFocus()) {\n        return;\n      }\n\n      let nextTab =\n        (baseIndex >= 0 ? itemAt(baseIndex) : null) ??\n        (baseIndex > 0 ? itemAt(baseIndex - 1) : null) ??\n        getLast() ??\n        getFirst();\n\n      if (nextTab?.element === overflowButtonRef.current) {\n        const overflowIndex = getIndex(nextTab.id);\n        nextTab =\n          (overflowIndex > 0 ? itemAt(overflowIndex - 1) : null) ??\n          (baseIndex > 0 ? itemAt(baseIndex - 1) : null) ??\n          getFirst();\n      }\n\n      if (!nextTab?.element) return;\n\n      if (\n        removedWasSelected &&\n        !menuOpen &&\n        !getVisibleSelectedTab(tabstripRef.current, removedId)\n      ) {\n        activeTab.current = { id: nextTab.id, value: nextTab.value };\n        setSelected(null, nextTab.value);\n      }\n\n      focusElementWithRetry(() => {\n        if (removedWasSelected) {\n          return getSelectedTabElement() ?? nextTab?.element;\n        }\n\n        return nextTab?.element;\n      });\n    };\n\n    if (!targetWindow?.requestAnimationFrame) {\n      restoreFocus();\n      return;\n    }\n\n    targetWindow.requestAnimationFrame(() => {\n      targetWindow.requestAnimationFrame(() => {\n        restoreFocus();\n      });\n    });\n  });\n\n  useEffect(() => {\n    return () => {\n      if (removalRecoveryRafRef.current != null && targetWindow) {\n        targetWindow.cancelAnimationFrame(removalRecoveryRafRef.current);\n      }\n    };\n  }, [removalRecoveryRafRef, targetWindow]);\n\n  return handleTabRemoval;\n}\n"],"names":["useCallback","useEventCallback","_a","isHTMLElement","useEffect"],"mappings":"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"}

package/dist-cjs/tabs/internal/hooks/useTabSelectionFocus.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var domAccessibilityApi = require('dom-accessibility-api');
+var React = require('react');
+require('clsx');
+require('react/jsx-runtime');
+var useIsomorphicLayoutEffect = require('../../../utils/useIsomorphicLayoutEffect.js');
+require('../../../utils/useFloatingUI/useFloatingUI.js');
+require('../../../utils/useId.js');
+var usePrevious = require('../../../utils/usePrevious.js');
+require('../../../salt-provider/SaltProvider.js');
+require('../../../viewport/ViewportProvider.js');
+
+function hasLostDocumentFocus(doc) {
+  const activeElement = doc.activeElement;
+  return !activeElement || activeElement === doc.body || activeElement === doc.documentElement || !activeElement.isConnected;
+}
+function getTabAccessibleName(element) {
+  return domAccessibilityApi.computeAccessibleName(element).trim();
+}
+function useTabSelectionFocus({
+  announce,
+  focusElementWithRetry,
+  getRenderedTab,
+  getSelectedTabElement,
+  menuOpen,
+  resolvedOverflowActiveValue,
+  selected,
+  selectionFromOverflowValueRef,
+  targetWindow
+}) {
+  const previousSelected = usePrevious.usePrevious(selected, [selected]);
+  const focusSelectedTab = React.useCallback(() => {
+    focusElementWithRetry(getSelectedTabElement);
+  }, [focusElementWithRetry, getSelectedTabElement]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!menuOpen || !resolvedOverflowActiveValue) {
+      return;
+    }
+    focusElementWithRetry(
+      () => {
+        var _a;
+        return (_a = getRenderedTab(resolvedOverflowActiveValue)) == null ? void 0 : _a.trigger;
+      }
+    );
+  }, [
+    focusElementWithRetry,
+    getRenderedTab,
+    menuOpen,
+    resolvedOverflowActiveValue
+  ]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    const doc = targetWindow == null ? void 0 : targetWindow.document;
+    if (!doc || selected === void 0 || previousSelected === void 0 || selected === previousSelected) {
+      return;
+    }
+    if (!hasLostDocumentFocus(doc)) {
+      return;
+    }
+    focusSelectedTab();
+  }, [focusSelectedTab, previousSelected, selected, targetWindow]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    const selectedFromOverflow = selectionFromOverflowValueRef.current;
+    if (selectedFromOverflow == null || selected === void 0 || selected === previousSelected) {
+      return;
+    }
+    if (selected !== selectedFromOverflow) {
+      selectionFromOverflowValueRef.current = null;
+      return;
+    }
+    focusSelectedTab();
+    const selectedTab = getSelectedTabElement();
+    const selectedTabName = selectedTab ? getTabAccessibleName(selectedTab) || selected : selected;
+    announce(`${selectedTabName} moved to main tab list`, 100);
+    selectionFromOverflowValueRef.current = null;
+  }, [
+    announce,
+    getSelectedTabElement,
+    previousSelected,
+    focusSelectedTab,
+    selected,
+    selectionFromOverflowValueRef
+  ]);
+}
+
+exports.useTabSelectionFocus = useTabSelectionFocus;
+//# sourceMappingURL=useTabSelectionFocus.js.map

package/dist-cjs/tabs/internal/hooks/useTabSelectionFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabSelectionFocus.js","sources":["../src/tabs/internal/hooks/useTabSelectionFocus.ts"],"sourcesContent":["import { computeAccessibleName } from \"dom-accessibility-api\";\nimport type { MutableRefObject } from \"react\";\nimport { useCallback } from \"react\";\nimport { useIsomorphicLayoutEffect, usePrevious } from \"../../../utils\";\nimport type { TabsContextValue } from \"../contexts/TabsContext\";\n\nfunction hasLostDocumentFocus(doc: Document) {\n  const activeElement = doc.activeElement;\n  return (\n    !activeElement ||\n    activeElement === doc.body ||\n    activeElement === doc.documentElement ||\n    !activeElement.isConnected\n  );\n}\n\nfunction getTabAccessibleName(element: HTMLElement) {\n  return computeAccessibleName(element).trim();\n}\n\ninterface UseTabSelectionFocusArgs {\n  announce: (message: string, timeout?: number) => void;\n  focusElementWithRetry: (\n    getElement: () => HTMLElement | null | undefined,\n  ) => void;\n  getRenderedTab: TabsContextValue[\"getRenderedTab\"];\n  getSelectedTabElement: () => HTMLElement | null | undefined;\n  menuOpen: boolean;\n  resolvedOverflowActiveValue: string | null;\n  selected?: string;\n  selectionFromOverflowValueRef: MutableRefObject<string | null>;\n  targetWindow: Window | null | undefined;\n}\n\nexport function useTabSelectionFocus({\n  announce,\n  focusElementWithRetry,\n  getRenderedTab,\n  getSelectedTabElement,\n  menuOpen,\n  resolvedOverflowActiveValue,\n  selected,\n  selectionFromOverflowValueRef,\n  targetWindow,\n}: UseTabSelectionFocusArgs) {\n  const previousSelected = usePrevious(selected, [selected]);\n\n  const focusSelectedTab = useCallback(() => {\n    focusElementWithRetry(getSelectedTabElement);\n  }, [focusElementWithRetry, getSelectedTabElement]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!menuOpen || !resolvedOverflowActiveValue) {\n      return;\n    }\n\n    focusElementWithRetry(\n      () => getRenderedTab(resolvedOverflowActiveValue)?.trigger,\n    );\n  }, [\n    focusElementWithRetry,\n    getRenderedTab,\n    menuOpen,\n    resolvedOverflowActiveValue,\n  ]);\n\n  useIsomorphicLayoutEffect(() => {\n    const doc = targetWindow?.document;\n    if (\n      !doc ||\n      selected === undefined ||\n      previousSelected === undefined ||\n      selected === previousSelected\n    ) {\n      return;\n    }\n\n    if (!hasLostDocumentFocus(doc)) {\n      return;\n    }\n\n    focusSelectedTab();\n  }, [focusSelectedTab, previousSelected, selected, targetWindow]);\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedFromOverflow = selectionFromOverflowValueRef.current;\n    if (\n      selectedFromOverflow == null ||\n      selected === undefined ||\n      selected === previousSelected\n    ) {\n      return;\n    }\n\n    if (selected !== selectedFromOverflow) {\n      selectionFromOverflowValueRef.current = null;\n      return;\n    }\n\n    focusSelectedTab();\n\n    const selectedTab = getSelectedTabElement();\n    const selectedTabName = selectedTab\n      ? getTabAccessibleName(selectedTab) || selected\n      : selected;\n\n    announce(`${selectedTabName} moved to main tab list`, 100);\n    selectionFromOverflowValueRef.current = null;\n  }, [\n    announce,\n    getSelectedTabElement,\n    previousSelected,\n    focusSelectedTab,\n    selected,\n    selectionFromOverflowValueRef,\n  ]);\n}\n"],"names":["computeAccessibleName","usePrevious","useCallback","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;;;;AAMA,SAAS,qBAAqB,GAAA,EAAe;AAC3C,EAAA,MAAM,gBAAgB,GAAA,CAAI,aAAA;AAC1B,EAAA,OACE,CAAC,iBACD,aAAA,KAAkB,GAAA,CAAI,QACtB,aAAA,KAAkB,GAAA,CAAI,eAAA,IACtB,CAAC,aAAA,CAAc,WAAA;AAEnB;AAEA,SAAS,qBAAqB,OAAA,EAAsB;AAClD,EAAA,OAAOA,yCAAA,CAAsB,OAAO,CAAA,CAAE,IAAA,EAAK;AAC7C;AAgBO,SAAS,oBAAA,CAAqB;AAAA,EACnC,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,cAAA;AAAA,EACA,qBAAA;AAAA,EACA,QAAA;AAAA,EACA,2BAAA;AAAA,EACA,QAAA;AAAA,EACA,6BAAA;AAAA,EACA;AACF,CAAA,EAA6B;AAC3B,EAAA,MAAM,gBAAA,GAAmBC,uBAAA,CAAY,QAAA,EAAU,CAAC,QAAQ,CAAC,CAAA;AAEzD,EAAA,MAAM,gBAAA,GAAmBC,kBAAY,MAAM;AACzC,IAAA,qBAAA,CAAsB,qBAAqB,CAAA;AAAA,EAC7C,CAAA,EAAG,CAAC,qBAAA,EAAuB,qBAAqB,CAAC,CAAA;AAEjD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,2BAAA,EAA6B;AAC7C,MAAA;AAAA,IACF;AAEA,IAAA,qBAAA;AAAA,MACE,MAAG;AAzDT,QAAA,IAAA,EAAA;AAyDY,QAAA,OAAA,CAAA,EAAA,GAAA,cAAA,CAAe,2BAA2B,MAA1C,IAAA,GAAA,MAAA,GAAA,EAAA,CAA6C,OAAA;AAAA,MAAA;AAAA,KACrD;AAAA,EACF,CAAA,EAAG;AAAA,IACD,qBAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAAA,mDAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,MAAM,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,QAAA;AAC1B,IAAA,IACE,CAAC,GAAA,IACD,QAAA,KAAa,UACb,gBAAA,KAAqB,MAAA,IACrB,aAAa,gBAAA,EACb;AACA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,CAAC,oBAAA,CAAqB,GAAG,CAAA,EAAG;AAC9B,MAAA;AAAA,IACF;AAEA,IAAA,gBAAA,EAAiB;AAAA,EACnB,GAAG,CAAC,gBAAA,EAAkB,gBAAA,EAAkB,QAAA,EAAU,YAAY,CAAC,CAAA;AAE/D,EAAAA,mDAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,uBAAuB,6BAAA,CAA8B,OAAA;AAC3D,IAAA,IACE,oBAAA,IAAwB,IAAA,IACxB,QAAA,KAAa,MAAA,IACb,aAAa,gBAAA,EACb;AACA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,aAAa,oBAAA,EAAsB;AACrC,MAAA,6BAAA,CAA8B,OAAA,GAAU,IAAA;AACxC,MAAA;AAAA,IACF;AAEA,IAAA,gBAAA,EAAiB;AAEjB,IAAA,MAAM,cAAc,qBAAA,EAAsB;AAC1C,IAAA,MAAM,eAAA,GAAkB,WAAA,GACpB,oBAAA,CAAqB,WAAW,KAAK,QAAA,GACrC,QAAA;AAEJ,IAAA,QAAA,CAAS,CAAA,EAAG,eAAe,CAAA,uBAAA,CAAA,EAA2B,GAAG,CAAA;AACzD,IAAA,6BAAA,CAA8B,OAAA,GAAU,IAAA;AAAA,EAC1C,CAAA,EAAG;AAAA,IACD,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH;;;;"}

package/dist-cjs/tabs/internal/overflow/TabOverflowList.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTabOverflowList {\n  position: relative;\n}\n\n.saltTabOverflowList-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n  z-index: var(--salt-zIndex-flyover);\n}\n\n.saltTabOverflowList-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflowList-list .saltTab {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n@supports selector(:has(*)) {\n  .saltTabList:has([data-overflowbutton]) .saltTabOverflowList-list .saltTab {\n    max-width: unset;\n  }\n}\n\n.saltTabOverflowList-list .saltTab .saltTabTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflowList-list .saltTab::after {\n  display: none;\n}\n\n.saltTabOverflowList-list .saltTab-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltTabOverflowList-list .saltTab:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflowList-list .saltTab-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltTabOverflowList-list .saltTab-disabled:hover,\n.saltTabOverflowList-list .saltTab-disabled:active {\n  background: var(--salt-selectable-background);\n  box-shadow: none;\n}\n\n.saltTabOverflowList-list .saltTab:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TabOverflowList.css.js.map

package/dist-cjs/tabs/internal/overflow/TabOverflowList.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabOverflowList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/tabs/internal/overflow/TabOverflowList.js

@@ -0,0 +1,245 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var Button = require('../../../button/Button.js');
+var SemanticIconProvider = require('../../../semantic-icon-provider/SemanticIconProvider.js');
+var makePrefixer = require('../../../utils/makePrefixer.js');
+var useIsomorphicLayoutEffect = require('../../../utils/useIsomorphicLayoutEffect.js');
+var useFloatingUI = require('../../../utils/useFloatingUI/useFloatingUI.js');
+var useForkRef = require('../../../utils/useForkRef.js');
+var useId = require('../../../utils/useId.js');
+require('../../../salt-provider/SaltProvider.js');
+require('../../../viewport/ViewportProvider.js');
+var TabsContext = require('../contexts/TabsContext.js');
+var domUtils = require('../utils/domUtils.js');
+var TabOverflowList$1 = require('./TabOverflowList.css.js');
+var TabSlot = require('./TabSlot.js');
+var widthMeasurement = require('./widthMeasurement.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltTabOverflowList");
+const TabOverflowList = React.forwardRef(
+  function TabOverflowList2(props, ref) {
+    var _a, _b;
+    const {
+      buttonRef,
+      className,
+      hiddenValues,
+      order,
+      open,
+      setOpen,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tab-overflow-list",
+      css: TabOverflowList$1,
+      window: targetWindow
+    });
+    const overflowRef = React.useRef(null);
+    const hadOverflowItemsRef = React.useRef(false);
+    const { OverflowIcon } = SemanticIconProvider.useIcon();
+    const { registerTab, updateTab, activeTab } = TabsContext.useTabs();
+    const { refs, x, y, strategy, context, elements } = useFloatingUI.useFloatingUI({
+      open,
+      onOpenChange(open2, _, reason) {
+        var _a2;
+        setOpen(open2);
+        if (reason === "escape-key") {
+          (_a2 = overflowRef.current) == null ? void 0 : _a2.focus();
+        }
+      },
+      placement: "bottom-start",
+      middleware: [
+        react.offset(1),
+        react.size({
+          apply({ elements: elements2, availableHeight }) {
+            Object.assign(elements2.floating.style, {
+              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
+            });
+          }
+        }),
+        react.flip(),
+        react.shift({
+          padding: 8
+        })
+      ]
+    });
+    const { getFloatingProps, getReferenceProps } = react.useInteractions([
+      react.useClick(context),
+      react.useDismiss(context)
+    ]);
+    const handleListRef = useForkRef.useForkRef(ref, refs.setFloating);
+    const handleButtonRef = useForkRef.useForkRef(
+      buttonRef,
+      refs.setReference
+    );
+    const handleRef = useForkRef.useForkRef(handleButtonRef, overflowRef);
+    const { Component: FloatingComponent } = useFloatingUI.useFloatingComponent();
+    const overflowId = useId.useId();
+    const overlayId = useId.useId();
+    const handleFocus = () => {
+      if (overflowId) {
+        activeTab.current = { value: overflowId, id: overflowId };
+      }
+    };
+    const handleFloatingKeyDown = (event) => {
+      if (event.key !== "Tab") {
+        return;
+      }
+      if (event.shiftKey) {
+        event.preventDefault();
+        setOpen(false);
+        const scheduleFocus = targetWindow == null ? void 0 : targetWindow.requestAnimationFrame;
+        if (scheduleFocus) {
+          scheduleFocus(
+            () => {
+              var _a2;
+              return (_a2 = overflowRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
+            }
+          );
+          return;
+        }
+        queueMicrotask(
+          () => {
+            var _a2;
+            return (_a2 = overflowRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
+          }
+        );
+        return;
+      }
+    };
+    const overflowItemCount = hiddenValues.length;
+    const hasOverflowItems = overflowItemCount > 0;
+    const initialOrderRef = React.useRef(order);
+    React.useEffect(() => {
+      var _a2;
+      const tabList = (_a2 = overflowRef.current) == null ? void 0 : _a2.parentElement;
+      const resizeObserverCtor = targetWindow == null ? void 0 : targetWindow.ResizeObserver;
+      if (!open || !tabList || !resizeObserverCtor) {
+        return;
+      }
+      const observedElements = [tabList, tabList.parentElement].filter(
+        (element) => element != null
+      );
+      const widths = widthMeasurement.seedWidthMap(observedElements);
+      const resizeObserver = new resizeObserverCtor(
+        (entries) => {
+          for (const entry of entries) {
+            if (!domUtils.isHTMLElement(entry.target)) {
+              continue;
+            }
+            const nextWidth = entry.contentRect.width || widthMeasurement.getMeasuredWidth(entry.target);
+            if (widthMeasurement.updateWidthMap(widths, entry.target, nextWidth)) {
+              setOpen(false);
+              return;
+            }
+          }
+        }
+      );
+      for (const element of observedElements) {
+        resizeObserver.observe(element);
+      }
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [open, setOpen, targetWindow]);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      if (open && !hasOverflowItems) {
+        setOpen(false);
+      }
+    }, [hasOverflowItems, open, setOpen]);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      if (hasOverflowItems && !hadOverflowItemsRef.current) {
+        setOpen(false);
+      }
+      hadOverflowItemsRef.current = hasOverflowItems;
+    }, [hasOverflowItems, setOpen]);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      if (overflowId && overflowRef.current && hasOverflowItems) {
+        const item = {
+          id: overflowId,
+          value: overflowId,
+          element: overflowRef.current,
+          location: "main",
+          order: initialOrderRef.current
+        };
+        return registerTab(item);
+      }
+    }, [hasOverflowItems, overflowId, registerTab]);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      if (!overflowId || !hasOverflowItems) {
+        return;
+      }
+      updateTab(overflowId, {
+        element: overflowRef.current,
+        location: "main",
+        order
+      });
+    }, [hasOverflowItems, order, overflowId, updateTab]);
+    if (!hasOverflowItems) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          className: clsx.clsx(withBaseName(), className),
+          "data-overflowbutton": true,
+          appearance: "transparent",
+          sentiment: "neutral",
+          ...getReferenceProps({
+            onFocus: handleFocus
+          }),
+          ref: handleRef,
+          "aria-label": "Overflow",
+          "aria-expanded": open,
+          "aria-controls": overlayId,
+          role: "tab",
+          tabIndex: -1,
+          ...rest,
+          children: /* @__PURE__ */ jsxRuntime.jsx(OverflowIcon, { "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FloatingComponent,
+        {
+          ref: handleListRef,
+          ...getFloatingProps({
+            id: overlayId,
+            onKeyDown: handleFloatingKeyDown
+          }),
+          focusManagerProps: context ? {
+            context,
+            initialFocus: 0,
+            returnFocus: false,
+            modal: false,
+            closeOnFocusOut: true
+          } : void 0,
+          className: withBaseName("list"),
+          open,
+          left: x ?? 0,
+          top: y ?? 0,
+          position: strategy,
+          width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+          height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "tablist",
+              "aria-orientation": "vertical",
+              className: withBaseName("listContainer"),
+              "aria-label": "Overflow tab options",
+              children: hiddenValues.map((value) => /* @__PURE__ */ jsxRuntime.jsx(TabSlot.TabSlot, { slotId: `overflow:${value}`, value }, value))
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+
+exports.TabOverflowList = TabOverflowList;
+//# sourceMappingURL=TabOverflowList.js.map

package/dist-cjs/tabs/internal/overflow/TabOverflowList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabOverflowList.js","sources":["../src/tabs/internal/overflow/TabOverflowList.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  forwardRef,\n  type KeyboardEvent,\n  type Ref,\n  type SetStateAction,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../../../button\";\nimport { useIcon } from \"../../../semantic-icon-provider\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"../../../utils\";\nimport { useTabs } from \"../contexts/TabsContext\";\nimport { isHTMLElement } from \"../utils/domUtils\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\nimport { TabSlot } from \"./TabSlot\";\nimport {\n  getMeasuredWidth,\n  seedWidthMap,\n  updateWidthMap,\n} from \"./widthMeasurement\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n  buttonRef?: Ref<HTMLButtonElement>;\n  hiddenValues: string[];\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  order: number;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflowList\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n  function TabOverflowList(props, ref) {\n    const {\n      buttonRef,\n      className,\n      hiddenValues,\n      order,\n      open,\n      setOpen,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-overflow-list\",\n      css: tabOverflowListCss,\n      window: targetWindow,\n    });\n\n    const overflowRef = useRef<HTMLButtonElement>(null);\n    const hadOverflowItemsRef = useRef(false);\n\n    const { OverflowIcon } = useIcon();\n    const { registerTab, updateTab, activeTab } = useTabs();\n\n    const { refs, x, y, strategy, context, elements } = useFloatingUI({\n      open: open,\n      onOpenChange(open, _, reason) {\n        setOpen(open);\n\n        if (reason === \"escape-key\") {\n          overflowRef.current?.focus();\n        }\n      },\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    });\n\n    const { getFloatingProps, getReferenceProps } = useInteractions([\n      useClick(context),\n      useDismiss(context),\n    ]);\n\n    const handleListRef = useForkRef<HTMLDivElement>(ref, refs.setFloating);\n\n    const handleButtonRef = useForkRef<HTMLButtonElement>(\n      buttonRef,\n      refs.setReference,\n    );\n    const handleRef = useForkRef(handleButtonRef, overflowRef);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const overflowId = useId();\n    const overlayId = useId();\n\n    const handleFocus = () => {\n      if (overflowId) {\n        activeTab.current = { value: overflowId, id: overflowId };\n      }\n    };\n\n    const handleFloatingKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key !== \"Tab\") {\n        return;\n      }\n\n      if (event.shiftKey) {\n        event.preventDefault();\n        setOpen(false);\n        const scheduleFocus = targetWindow?.requestAnimationFrame;\n        if (scheduleFocus) {\n          scheduleFocus(() =>\n            overflowRef.current?.focus({ preventScroll: true }),\n          );\n          return;\n        }\n\n        queueMicrotask(() =>\n          overflowRef.current?.focus({ preventScroll: true }),\n        );\n        return;\n      }\n    };\n\n    const overflowItemCount = hiddenValues.length;\n    const hasOverflowItems = overflowItemCount > 0;\n    const initialOrderRef = useRef(order);\n\n    useEffect(() => {\n      const tabList = overflowRef.current?.parentElement;\n      const resizeObserverCtor = (\n        targetWindow as\n          | (Window & { ResizeObserver?: typeof ResizeObserver })\n          | undefined\n      )?.ResizeObserver;\n      if (!open || !tabList || !resizeObserverCtor) {\n        return;\n      }\n\n      const observedElements = [tabList, tabList.parentElement].filter(\n        (element): element is HTMLElement => element != null,\n      );\n      const widths = seedWidthMap(observedElements);\n\n      const resizeObserver = new resizeObserverCtor(\n        (entries: ResizeObserverEntry[]) => {\n          for (const entry of entries) {\n            if (!isHTMLElement(entry.target)) {\n              continue;\n            }\n\n            const nextWidth =\n              entry.contentRect.width || getMeasuredWidth(entry.target);\n            if (updateWidthMap(widths, entry.target, nextWidth)) {\n              setOpen(false);\n              return;\n            }\n          }\n        },\n      );\n\n      for (const element of observedElements) {\n        resizeObserver.observe(element);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [open, setOpen, targetWindow]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (open && !hasOverflowItems) {\n        setOpen(false);\n      }\n    }, [hasOverflowItems, open, setOpen]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (hasOverflowItems && !hadOverflowItemsRef.current) {\n        setOpen(false);\n      }\n\n      hadOverflowItemsRef.current = hasOverflowItems;\n    }, [hasOverflowItems, setOpen]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (overflowId && overflowRef.current && hasOverflowItems) {\n        const item = {\n          id: overflowId,\n          value: overflowId,\n          element: overflowRef.current,\n          location: \"main\" as const,\n          order: initialOrderRef.current,\n        };\n\n        return registerTab(item);\n      }\n    }, [hasOverflowItems, overflowId, registerTab]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!overflowId || !hasOverflowItems) {\n        return;\n      }\n\n      updateTab(overflowId, {\n        element: overflowRef.current,\n        location: \"main\",\n        order,\n      });\n    }, [hasOverflowItems, order, overflowId, updateTab]);\n\n    if (!hasOverflowItems) return null;\n\n    return (\n      <>\n        <Button\n          className={clsx(withBaseName(), className)}\n          data-overflowbutton\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          {...getReferenceProps({\n            onFocus: handleFocus,\n          })}\n          ref={handleRef}\n          aria-label=\"Overflow\"\n          aria-expanded={open}\n          aria-controls={overlayId}\n          role=\"tab\"\n          tabIndex={-1}\n          {...rest}\n        >\n          <OverflowIcon aria-hidden />\n        </Button>\n        <FloatingComponent\n          ref={handleListRef}\n          {...getFloatingProps({\n            id: overlayId,\n            onKeyDown: handleFloatingKeyDown,\n          })}\n          focusManagerProps={\n            context\n              ? {\n                  context,\n                  initialFocus: 0,\n                  returnFocus: false,\n                  modal: false,\n                  closeOnFocusOut: true,\n                }\n              : undefined\n          }\n          className={withBaseName(\"list\")}\n          open={open}\n          left={x ?? 0}\n          top={y ?? 0}\n          position={strategy}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n        >\n          <div\n            role=\"tablist\"\n            aria-orientation=\"vertical\"\n            className={withBaseName(\"listContainer\")}\n            aria-label=\"Overflow tab options\"\n          >\n            {hiddenValues.map((value) => (\n              <TabSlot key={value} slotId={`overflow:${value}`} value={value} />\n            ))}\n          </div>\n        </FloatingComponent>\n      </>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabOverflowList","useWindow","useComponentCssInjection","tabOverflowListCss","useRef","useIcon","useTabs","useFloatingUI","open","_a","offset","size","elements","flip","shift","useInteractions","useClick","useDismiss","useForkRef","useFloatingComponent","useId","useEffect","seedWidthMap","isHTMLElement","getMeasuredWidth","updateWidthMap","useIsomorphicLayoutEffect","jsxs","Fragment","jsx","Button","clsx","TabSlot"],"mappings":"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"}

package/dist-cjs/tabs/internal/overflow/TabSlot.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var TabSlotRegistryContext = require('../contexts/TabSlotRegistryContext.js');
+
+function TabSlot({ slotId, value, ...rest }) {
+  const slotRegistry = TabSlotRegistryContext.useTabSlotRegistry();
+  const handleRef = React.useCallback(
+    (element) => {
+      slotRegistry == null ? void 0 : slotRegistry.registerSlot(slotId, element);
+    },
+    [slotId, slotRegistry]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "presentation",
+      "data-tabslot": "",
+      "data-slotid": slotId,
+      "data-value": value,
+      ref: handleRef,
+      style: { display: "contents" },
+      ...rest
+    }
+  );
+}
+
+exports.TabSlot = TabSlot;
+//# sourceMappingURL=TabSlot.js.map

package/dist-cjs/tabs/internal/overflow/TabSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSlot.js","sources":["../src/tabs/internal/overflow/TabSlot.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, useCallback } from \"react\";\nimport { useTabSlotRegistry } from \"../contexts/TabSlotRegistryContext\";\n\nexport interface TabSlotProps extends ComponentPropsWithoutRef<\"div\"> {\n  slotId: string;\n  value: string;\n}\n\nexport function TabSlot({ slotId, value, ...rest }: TabSlotProps) {\n  const slotRegistry = useTabSlotRegistry();\n  const handleRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      slotRegistry?.registerSlot(slotId, element);\n    },\n    [slotId, slotRegistry],\n  );\n\n  return (\n    <div\n      role=\"presentation\"\n      data-tabslot=\"\"\n      data-slotid={slotId}\n      data-value={value}\n      ref={handleRef}\n      style={{ display: \"contents\" }}\n      {...rest}\n    />\n  );\n}\n"],"names":["useTabSlotRegistry","useCallback","jsx"],"mappings":";;;;;;AAQO,SAAS,QAAQ,EAAE,MAAA,EAAQ,KAAA,EAAO,GAAG,MAAK,EAAiB;AAChE,EAAA,MAAM,eAAeA,yCAAA,EAAmB;AACxC,EAAA,MAAM,SAAA,GAAYC,iBAAA;AAAA,IAChB,CAAC,OAAA,KAAmC;AAClC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,aAAa,MAAA,EAAQ,OAAA,CAAA;AAAA,IACrC,CAAA;AAAA,IACA,CAAC,QAAQ,YAAY;AAAA,GACvB;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,cAAA;AAAA,MACL,cAAA,EAAa,EAAA;AAAA,MACb,aAAA,EAAa,MAAA;AAAA,MACb,YAAA,EAAY,KAAA;AAAA,MACZ,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,EAAE,OAAA,EAAS,UAAA,EAAW;AAAA,MAC5B,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}