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

package/dist-cjs/tabs-next/hooks/useOverflowSelectionState.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+function useOverflowSelectionState({
+  commitSelection,
+  menuOpen,
+  selected,
+  setMenuOpen
+}) {
+  const previousSelected = core.usePrevious(selected, [selected]);
+  const selectionFromOverflowValueRef = react.useRef(null);
+  const pendingOverflowSelectionRef = react.useRef(
+    null
+  );
+  const setSelected = react.useCallback(
+    (event, value, source = "main") => {
+      const selectedFromOverflow = source === "overflow";
+      selectionFromOverflowValueRef.current = selectedFromOverflow ? value : null;
+      if (selectedFromOverflow) {
+        pendingOverflowSelectionRef.current = { event, value };
+        setMenuOpen(false);
+        return;
+      }
+      pendingOverflowSelectionRef.current = null;
+      setMenuOpen(false);
+      commitSelection(event, value);
+    },
+    [commitSelection, setMenuOpen]
+  );
+  core.useIsomorphicLayoutEffect(() => {
+    if (menuOpen) {
+      return;
+    }
+    const pendingSelection = pendingOverflowSelectionRef.current;
+    if (!pendingSelection) {
+      return;
+    }
+    pendingOverflowSelectionRef.current = null;
+    commitSelection(pendingSelection.event, pendingSelection.value);
+  }, [commitSelection, menuOpen]);
+  react.useEffect(() => {
+    const selectedFromOverflow = selectionFromOverflowValueRef.current;
+    if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {
+      return;
+    }
+    if (selected === selectedFromOverflow && selected !== previousSelected) {
+      return;
+    }
+    selectionFromOverflowValueRef.current = null;
+  }, [previousSelected, selected]);
+  return {
+    selectionFromOverflowValueRef,
+    setSelected
+  };
+}
+
+exports.useOverflowSelectionState = useOverflowSelectionState;
+//# sourceMappingURL=useOverflowSelectionState.js.map

package/dist-cjs/tabs-next/hooks/useOverflowSelectionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowSelectionState.js","sources":["../src/tabs-next/hooks/useOverflowSelectionState.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect, usePrevious } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\n\ninterface PendingOverflowSelection {\n  event: SyntheticEvent | null;\n  value: string;\n}\n\ninterface UseOverflowSelectionStateArgs {\n  commitSelection: (event: SyntheticEvent | null, value: string) => void;\n  menuOpen: boolean;\n  selected?: string;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\ninterface UseOverflowSelectionStateResult {\n  selectionFromOverflowValueRef: MutableRefObject<string | null>;\n  setSelected: (\n    event: SyntheticEvent | null,\n    value: string,\n    source?: \"main\" | \"overflow\",\n  ) => void;\n}\n\nexport function useOverflowSelectionState({\n  commitSelection,\n  menuOpen,\n  selected,\n  setMenuOpen,\n}: UseOverflowSelectionStateArgs): UseOverflowSelectionStateResult {\n  const previousSelected = usePrevious(selected, [selected]);\n  const selectionFromOverflowValueRef = useRef<string | null>(null);\n  const pendingOverflowSelectionRef = useRef<PendingOverflowSelection | null>(\n    null,\n  );\n\n  const setSelected = useCallback(\n    (\n      event: SyntheticEvent | null,\n      value: string,\n      source: \"main\" | \"overflow\" = \"main\",\n    ) => {\n      const selectedFromOverflow = source === \"overflow\";\n      selectionFromOverflowValueRef.current = selectedFromOverflow\n        ? value\n        : null;\n\n      if (selectedFromOverflow) {\n        pendingOverflowSelectionRef.current = { event, value };\n        setMenuOpen(false);\n        return;\n      }\n\n      pendingOverflowSelectionRef.current = null;\n      setMenuOpen(false);\n      commitSelection(event, value);\n    },\n    [commitSelection, setMenuOpen],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (menuOpen) {\n      return;\n    }\n\n    const pendingSelection = pendingOverflowSelectionRef.current;\n    if (!pendingSelection) {\n      return;\n    }\n\n    pendingOverflowSelectionRef.current = null;\n    commitSelection(pendingSelection.event, pendingSelection.value);\n  }, [commitSelection, menuOpen]);\n\n  useEffect(() => {\n    const selectedFromOverflow = selectionFromOverflowValueRef.current;\n    if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {\n      return;\n    }\n\n    if (selected === selectedFromOverflow && selected !== previousSelected) {\n      return;\n    }\n\n    selectionFromOverflowValueRef.current = null;\n  }, [previousSelected, selected]);\n\n  return {\n    selectionFromOverflowValueRef,\n    setSelected,\n  };\n}\n"],"names":["usePrevious","useRef","useCallback","useIsomorphicLayoutEffect","useEffect"],"mappings":";;;;;AAgCO,SAAS,yBAAA,CAA0B;AAAA,EACxC,eAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAmE;AACjE,EAAA,MAAM,gBAAA,GAAmBA,gBAAA,CAAY,QAAA,EAAU,CAAC,QAAQ,CAAC,CAAA;AACzD,EAAA,MAAM,6BAAA,GAAgCC,aAAsB,IAAI,CAAA;AAChE,EAAA,MAAM,2BAAA,GAA8BA,YAAA;AAAA,IAClC;AAAA,GACF;AAEA,EAAA,MAAM,WAAA,GAAcC,iBAAA;AAAA,IAClB,CACE,KAAA,EACA,KAAA,EACA,MAAA,GAA8B,MAAA,KAC3B;AACH,MAAA,MAAM,uBAAuB,MAAA,KAAW,UAAA;AACxC,MAAA,6BAAA,CAA8B,OAAA,GAAU,uBACpC,KAAA,GACA,IAAA;AAEJ,MAAA,IAAI,oBAAA,EAAsB;AACxB,QAAA,2BAAA,CAA4B,OAAA,GAAU,EAAE,KAAA,EAAO,KAAA,EAAM;AACrD,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA;AAAA,MACF;AAEA,MAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAmB,2BAAA,CAA4B,OAAA;AACrD,IAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,MAAA;AAAA,IACF;AAEA,IAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,IAAA,eAAA,CAAgB,gBAAA,CAAiB,KAAA,EAAO,gBAAA,CAAiB,KAAK,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,eAAA,EAAiB,QAAQ,CAAC,CAAA;AAE9B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,uBAAuB,6BAAA,CAA8B,OAAA;AAC3D,IAAA,IAAI,oBAAA,IAAwB,IAAA,IAAQ,2BAAA,CAA4B,OAAA,EAAS;AACvE,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,QAAA,KAAa,oBAAA,IAAwB,QAAA,KAAa,gBAAA,EAAkB;AACtE,MAAA;AAAA,IACF;AAEA,IAAA,6BAAA,CAA8B,OAAA,GAAU,IAAA;AAAA,EAC1C,CAAA,EAAG,CAAC,gBAAA,EAAkB,QAAQ,CAAC,CAAA;AAE/B,EAAA,OAAO;AAAA,IACL,6BAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/tabs-next/hooks/useRenderedTabWidth.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var react = require('react');
+var widthMeasurement = require('../widthMeasurement.js');
+
+const MIN_TRUSTED_RENDERED_TAB_WIDTH = 0.5;
+function isSecondaryMeasurementContext(element) {
+  return element.closest(".saltTabOverflow-list") || element.closest(".saltTabListNext-measureContainer");
+}
+function useRenderedTabWidth({
+  hostElement,
+  renderMode,
+  tabRootRef,
+  targetWindow,
+  updateRenderedTab,
+  value
+}) {
+  react.useEffect(() => {
+    if (!hostElement) {
+      return;
+    }
+    const element = tabRootRef.current;
+    const resizeObserverCtor = targetWindow == null ? void 0 : targetWindow.ResizeObserver;
+    const mutationObserverCtor = targetWindow == null ? void 0 : targetWindow.MutationObserver;
+    if (!element || !resizeObserverCtor) {
+      return;
+    }
+    const updateWidth = (allowSecondaryMeasurementContext = false) => {
+      if (!element.isConnected) {
+        return;
+      }
+      if (!allowSecondaryMeasurementContext && isSecondaryMeasurementContext(element)) {
+        return;
+      }
+      const width = widthMeasurement.getIntrinsicMeasuredWidth(element);
+      if (width <= MIN_TRUSTED_RENDERED_TAB_WIDTH) {
+        return;
+      }
+      updateRenderedTab(value, {
+        width
+      });
+    };
+    let animationFrameId = null;
+    const scheduleWidthUpdate = (allowSecondaryMeasurementContext = false) => {
+      if (!(targetWindow == null ? void 0 : targetWindow.requestAnimationFrame)) {
+        updateWidth(allowSecondaryMeasurementContext);
+        return;
+      }
+      if (animationFrameId != null) {
+        targetWindow.cancelAnimationFrame(animationFrameId);
+      }
+      animationFrameId = targetWindow.requestAnimationFrame(() => {
+        animationFrameId = null;
+        updateWidth(allowSecondaryMeasurementContext);
+      });
+    };
+    if (renderMode === "portal") {
+      scheduleWidthUpdate(true);
+    } else {
+      updateWidth(true);
+    }
+    const resizeObserver = new resizeObserverCtor(() => {
+      updateWidth();
+    });
+    resizeObserver.observe(element);
+    const mutationObserver = mutationObserverCtor ? new mutationObserverCtor(() => {
+      scheduleWidthUpdate();
+    }) : null;
+    mutationObserver == null ? void 0 : mutationObserver.observe(element, {
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    return () => {
+      if (animationFrameId != null && targetWindow) {
+        targetWindow.cancelAnimationFrame(animationFrameId);
+      }
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [
+    hostElement,
+    renderMode,
+    tabRootRef,
+    targetWindow,
+    updateRenderedTab,
+    value
+  ]);
+}
+
+exports.useRenderedTabWidth = useRenderedTabWidth;
+//# sourceMappingURL=useRenderedTabWidth.js.map

package/dist-cjs/tabs-next/hooks/useRenderedTabWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderedTabWidth.js","sources":["../src/tabs-next/hooks/useRenderedTabWidth.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\nimport type {\n  TabsNextContextValue,\n  TabsNextRenderMode,\n} from \"../TabsNextContext\";\nimport { getIntrinsicMeasuredWidth } from \"../widthMeasurement\";\n\nconst MIN_TRUSTED_RENDERED_TAB_WIDTH = 0.5;\n\ninterface UseRenderedTabWidthProps {\n  hostElement: HTMLDivElement | null;\n  renderMode: TabsNextRenderMode;\n  tabRootRef: RefObject<HTMLDivElement>;\n  targetWindow: Window | null | undefined;\n  updateRenderedTab: TabsNextContextValue[\"updateRenderedTab\"];\n  value: string;\n}\n\nfunction isSecondaryMeasurementContext(element: HTMLElement) {\n  return (\n    element.closest(\".saltTabOverflow-list\") ||\n    element.closest(\".saltTabListNext-measureContainer\")\n  );\n}\n\nexport function useRenderedTabWidth({\n  hostElement,\n  renderMode,\n  tabRootRef,\n  targetWindow,\n  updateRenderedTab,\n  value,\n}: UseRenderedTabWidthProps) {\n  useEffect(() => {\n    if (!hostElement) {\n      return;\n    }\n\n    const element = tabRootRef.current;\n    const resizeObserverCtor = (\n      targetWindow as\n        | (Window & { ResizeObserver?: typeof ResizeObserver })\n        | undefined\n    )?.ResizeObserver;\n    const mutationObserverCtor = (\n      targetWindow as\n        | (Window & { MutationObserver?: typeof MutationObserver })\n        | undefined\n    )?.MutationObserver;\n    if (!element || !resizeObserverCtor) {\n      return;\n    }\n\n    const updateWidth = (allowSecondaryMeasurementContext = false) => {\n      if (!element.isConnected) {\n        return;\n      }\n\n      // Preserve the strip width while a tab is rendered in the overflow menu.\n      // Overflow items stretch to the menu width, and hidden measurement tabs\n      // can collapse to a different intrinsic size. Neither width is suitable\n      // for deciding whether the tab fits back in the main strip once the tab\n      // is already established. A one-time seeded width is still useful for\n      // newly mounted tabs before they have ever appeared in the main strip.\n      if (\n        !allowSecondaryMeasurementContext &&\n        isSecondaryMeasurementContext(element)\n      ) {\n        return;\n      }\n\n      const width = getIntrinsicMeasuredWidth(element);\n      if (width <= MIN_TRUSTED_RENDERED_TAB_WIDTH) {\n        return;\n      }\n\n      updateRenderedTab(value, {\n        width,\n      });\n    };\n\n    let animationFrameId: number | null = null;\n    const scheduleWidthUpdate = (allowSecondaryMeasurementContext = false) => {\n      if (!targetWindow?.requestAnimationFrame) {\n        updateWidth(allowSecondaryMeasurementContext);\n        return;\n      }\n\n      if (animationFrameId != null) {\n        targetWindow.cancelAnimationFrame(animationFrameId);\n      }\n\n      animationFrameId = targetWindow.requestAnimationFrame(() => {\n        animationFrameId = null;\n        updateWidth(allowSecondaryMeasurementContext);\n      });\n    };\n\n    if (renderMode === \"portal\") {\n      scheduleWidthUpdate(true);\n    } else {\n      updateWidth(true);\n    }\n\n    const resizeObserver = new resizeObserverCtor(() => {\n      updateWidth();\n    });\n\n    resizeObserver.observe(element);\n    const mutationObserver = mutationObserverCtor\n      ? new mutationObserverCtor(() => {\n          scheduleWidthUpdate();\n        })\n      : null;\n\n    mutationObserver?.observe(element, {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n\n    return () => {\n      if (animationFrameId != null && targetWindow) {\n        targetWindow.cancelAnimationFrame(animationFrameId);\n      }\n      mutationObserver?.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [\n    hostElement,\n    renderMode,\n    tabRootRef,\n    targetWindow,\n    updateRenderedTab,\n    value,\n  ]);\n}\n"],"names":["useEffect","getIntrinsicMeasuredWidth"],"mappings":";;;;;AAOA,MAAM,8BAAA,GAAiC,GAAA;AAWvC,SAAS,8BAA8B,OAAA,EAAsB;AAC3D,EAAA,OACE,QAAQ,OAAA,CAAQ,uBAAuB,CAAA,IACvC,OAAA,CAAQ,QAAQ,mCAAmC,CAAA;AAEvD;AAEO,SAAS,mBAAA,CAAoB;AAAA,EAClC,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAA,EAA6B;AAC3B,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,WAAA,EAAa;AAChB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAC3B,IAAA,MAAM,qBACJ,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAGC,cAAA;AACH,IAAA,MAAM,uBACJ,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAGC,gBAAA;AACH,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,kBAAA,EAAoB;AACnC,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,gCAAA,GAAmC,KAAA,KAAU;AAChE,MAAA,IAAI,CAAC,QAAQ,WAAA,EAAa;AACxB,QAAA;AAAA,MACF;AAQA,MAAA,IACE,CAAC,gCAAA,IACD,6BAAA,CAA8B,OAAO,CAAA,EACrC;AACA,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,KAAA,GAAQC,2CAA0B,OAAO,CAAA;AAC/C,MAAA,IAAI,SAAS,8BAAA,EAAgC;AAC3C,QAAA;AAAA,MACF;AAEA,MAAA,iBAAA,CAAkB,KAAA,EAAO;AAAA,QACvB;AAAA,OACD,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,IAAI,gBAAA,GAAkC,IAAA;AACtC,IAAA,MAAM,mBAAA,GAAsB,CAAC,gCAAA,GAAmC,KAAA,KAAU;AACxE,MAAA,IAAI,EAAC,6CAAc,qBAAA,CAAA,EAAuB;AACxC,QAAA,WAAA,CAAY,gCAAgC,CAAA;AAC5C,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,oBAAoB,IAAA,EAAM;AAC5B,QAAA,YAAA,CAAa,qBAAqB,gBAAgB,CAAA;AAAA,MACpD;AAEA,MAAA,gBAAA,GAAmB,YAAA,CAAa,sBAAsB,MAAM;AAC1D,QAAA,gBAAA,GAAmB,IAAA;AACnB,QAAA,WAAA,CAAY,gCAAgC,CAAA;AAAA,MAC9C,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,IAAI,eAAe,QAAA,EAAU;AAC3B,MAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,IAC1B,CAAA,MAAO;AACL,MAAA,WAAA,CAAY,IAAI,CAAA;AAAA,IAClB;AAEA,IAAA,MAAM,cAAA,GAAiB,IAAI,kBAAA,CAAmB,MAAM;AAClD,MAAA,WAAA,EAAY;AAAA,IACd,CAAC,CAAA;AAED,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAC9B,IAAA,MAAM,gBAAA,GAAmB,oBAAA,GACrB,IAAI,oBAAA,CAAqB,MAAM;AAC7B,MAAA,mBAAA,EAAoB;AAAA,IACtB,CAAC,CAAA,GACD,IAAA;AAEJ,IAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,QAAQ,OAAA,EAAS;AAAA,MACjC,SAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAe,IAAA;AAAA,MACf,OAAA,EAAS;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAA,IAAoB,QAAQ,YAAA,EAAc;AAC5C,QAAA,YAAA,CAAa,qBAAqB,gBAAgB,CAAA;AAAA,MACpD;AACA,MAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,UAAA,EAAA;AAClB,MAAA,cAAA,CAAe,UAAA,EAAW;AAAA,IAC5B,CAAA;AAAA,EACF,CAAA,EAAG;AAAA,IACD,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH;;;;"}

package/dist-cjs/tabs-next/hooks/useRenderedTabsRegistry.js

@@ -0,0 +1,200 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+var widthMeasurement = require('../widthMeasurement.js');
+
+function sortRenderedTabs(tabs) {
+  return [...tabs].sort((tabA, tabB) => {
+    if (tabA.marker === tabB.marker) {
+      return 0;
+    }
+    if (!tabA.marker || !tabB.marker) {
+      return 0;
+    }
+    const position = tabA.marker.compareDocumentPosition(tabB.marker);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  });
+}
+function useRenderedTabsRegistry() {
+  const [renderedTabMap, setRenderedTabMap] = react.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [renderMode, setRenderMode] = react.useState("inline");
+  const [bootstrapTabs, setBootstrapTabs] = react.useState(() => /* @__PURE__ */ new Set());
+  const [readyBootstrapTabs, setReadyBootstrapTabs] = react.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [bootstrapOverflowReady, setBootstrapOverflowReadyState] = react.useState(false);
+  const registerBootstrapTab = react.useCallback((tabValue) => {
+    setBootstrapTabs((currentTabs) => {
+      if (currentTabs.has(tabValue)) {
+        return currentTabs;
+      }
+      const nextTabs = new Set(currentTabs);
+      nextTabs.add(tabValue);
+      return nextTabs;
+    });
+    return () => {
+      setBootstrapTabs((currentTabs) => {
+        if (!currentTabs.has(tabValue)) {
+          return currentTabs;
+        }
+        const nextTabs = new Set(currentTabs);
+        nextTabs.delete(tabValue);
+        return nextTabs;
+      });
+      setReadyBootstrapTabs((currentTabs) => {
+        if (!currentTabs.has(tabValue)) {
+          return currentTabs;
+        }
+        const nextTabs = new Set(currentTabs);
+        nextTabs.delete(tabValue);
+        return nextTabs;
+      });
+    };
+  }, []);
+  const setBootstrapTabReady = react.useCallback(
+    (tabValue, ready) => {
+      setReadyBootstrapTabs((currentTabs) => {
+        const hasTab = currentTabs.has(tabValue);
+        if (ready === hasTab) {
+          return currentTabs;
+        }
+        const nextTabs = new Set(currentTabs);
+        if (ready) {
+          nextTabs.add(tabValue);
+        } else {
+          nextTabs.delete(tabValue);
+        }
+        return nextTabs;
+      });
+    },
+    []
+  );
+  const setBootstrapOverflowReady = react.useCallback((ready) => {
+    setBootstrapOverflowReadyState((currentReady) => {
+      if (currentReady === ready) {
+        return currentReady;
+      }
+      return ready;
+    });
+  }, []);
+  core.useIsomorphicLayoutEffect(() => {
+    if (renderMode === "portal" || bootstrapTabs.size < 1) {
+      return;
+    }
+    if (!bootstrapOverflowReady) {
+      return;
+    }
+    for (const tabValue of bootstrapTabs) {
+      if (!readyBootstrapTabs.has(tabValue)) {
+        return;
+      }
+      const renderedTab = renderedTabMap.get(tabValue);
+      if (!renderedTab || widthMeasurement.getMeasuredWidth(renderedTab.root) <= 0) {
+        return;
+      }
+    }
+    setRenderMode("portal");
+  }, [
+    bootstrapOverflowReady,
+    bootstrapTabs,
+    readyBootstrapTabs,
+    renderMode,
+    renderedTabMap
+  ]);
+  const registerRenderedTab = react.useCallback((tab) => {
+    setRenderedTabMap((map) => {
+      const existing = map.get(tab.value);
+      if (process.env.NODE_ENV !== "production" && existing && existing.id !== tab.id) {
+        console.warn(
+          `TabsNext received duplicate tab value "${tab.value}". Tab values must be unique within a TabsNext instance.`
+        );
+      }
+      if (existing === tab) {
+        return map;
+      }
+      const next = new Map(map);
+      next.set(tab.value, tab);
+      return next;
+    });
+    return () => {
+      setRenderedTabMap((map) => {
+        const existing = map.get(tab.value);
+        if (!existing || existing.id !== tab.id) {
+          return map;
+        }
+        const next = new Map(map);
+        next.delete(tab.value);
+        return next;
+      });
+    };
+  }, []);
+  const updateRenderedTab = react.useCallback(
+    (value, updates) => {
+      setRenderedTabMap((map) => {
+        const existing = map.get(value);
+        if (!existing) {
+          return map;
+        }
+        let changed = false;
+        const nextRecord = { ...existing };
+        for (const [key, nextValue] of Object.entries(updates)) {
+          const typedKey = key;
+          if (nextRecord[typedKey] !== nextValue) {
+            changed = true;
+            nextRecord[typedKey] = nextValue;
+          }
+        }
+        if (!changed) {
+          return map;
+        }
+        const next = new Map(map);
+        next.set(value, nextRecord);
+        return next;
+      });
+    },
+    []
+  );
+  const getRenderedTab = react.useCallback(
+    (value) => {
+      return renderedTabMap.get(value);
+    },
+    [renderedTabMap]
+  );
+  const renderedTabs = react.useMemo(() => {
+    return sortRenderedTabs(Array.from(renderedTabMap.values()));
+  }, [renderedTabMap]);
+  const renderedTabOrderMap = react.useMemo(() => {
+    return new Map(
+      renderedTabs.map((tab, index) => [tab.value, index])
+    );
+  }, [renderedTabs]);
+  const getRenderedTabOrder = react.useCallback(
+    (value) => {
+      return renderedTabOrderMap.get(value) ?? -1;
+    },
+    [renderedTabOrderMap]
+  );
+  return {
+    renderMode,
+    registerBootstrapTab,
+    setBootstrapTabReady,
+    setBootstrapOverflowReady,
+    registerRenderedTab,
+    updateRenderedTab,
+    getRenderedTab,
+    getRenderedTabOrder,
+    renderedTabs
+  };
+}
+
+exports.useRenderedTabsRegistry = useRenderedTabsRegistry;
+//# sourceMappingURL=useRenderedTabsRegistry.js.map

package/dist-cjs/tabs-next/hooks/useRenderedTabsRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderedTabsRegistry.js","sources":["../src/tabs-next/hooks/useRenderedTabsRegistry.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { RenderedTab, TabsNextRenderMode } from \"../TabsNextContext\";\nimport { getMeasuredWidth } from \"../widthMeasurement\";\n\nfunction sortRenderedTabs(tabs: RenderedTab[]) {\n  return [...tabs].sort((tabA, tabB) => {\n    if (tabA.marker === tabB.marker) {\n      return 0;\n    }\n    if (!tabA.marker || !tabB.marker) {\n      return 0;\n    }\n\n    const position = tabA.marker.compareDocumentPosition(tabB.marker);\n    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {\n      return -1;\n    }\n    if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n      return 1;\n    }\n    return 0;\n  });\n}\n\nexport function useRenderedTabsRegistry() {\n  const [renderedTabMap, setRenderedTabMap] = useState(\n    () => new Map<string, RenderedTab>(),\n  );\n  const [renderMode, setRenderMode] = useState<TabsNextRenderMode>(\"inline\");\n  const [bootstrapTabs, setBootstrapTabs] = useState(() => new Set<string>());\n  const [readyBootstrapTabs, setReadyBootstrapTabs] = useState(\n    () => new Set<string>(),\n  );\n  const [bootstrapOverflowReady, setBootstrapOverflowReadyState] =\n    useState(false);\n\n  const registerBootstrapTab = useCallback((tabValue: string) => {\n    setBootstrapTabs((currentTabs) => {\n      if (currentTabs.has(tabValue)) {\n        return currentTabs;\n      }\n\n      const nextTabs = new Set(currentTabs);\n      nextTabs.add(tabValue);\n      return nextTabs;\n    });\n\n    return () => {\n      setBootstrapTabs((currentTabs) => {\n        if (!currentTabs.has(tabValue)) {\n          return currentTabs;\n        }\n\n        const nextTabs = new Set(currentTabs);\n        nextTabs.delete(tabValue);\n        return nextTabs;\n      });\n      setReadyBootstrapTabs((currentTabs) => {\n        if (!currentTabs.has(tabValue)) {\n          return currentTabs;\n        }\n\n        const nextTabs = new Set(currentTabs);\n        nextTabs.delete(tabValue);\n        return nextTabs;\n      });\n    };\n  }, []);\n\n  const setBootstrapTabReady = useCallback(\n    (tabValue: string, ready: boolean) => {\n      setReadyBootstrapTabs((currentTabs) => {\n        const hasTab = currentTabs.has(tabValue);\n        if (ready === hasTab) {\n          return currentTabs;\n        }\n\n        const nextTabs = new Set(currentTabs);\n        if (ready) {\n          nextTabs.add(tabValue);\n        } else {\n          nextTabs.delete(tabValue);\n        }\n        return nextTabs;\n      });\n    },\n    [],\n  );\n\n  const setBootstrapOverflowReady = useCallback((ready: boolean) => {\n    setBootstrapOverflowReadyState((currentReady) => {\n      if (currentReady === ready) {\n        return currentReady;\n      }\n\n      return ready;\n    });\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (renderMode === \"portal\" || bootstrapTabs.size < 1) {\n      return;\n    }\n\n    if (!bootstrapOverflowReady) {\n      return;\n    }\n\n    for (const tabValue of bootstrapTabs) {\n      if (!readyBootstrapTabs.has(tabValue)) {\n        return;\n      }\n\n      const renderedTab = renderedTabMap.get(tabValue);\n      if (!renderedTab || getMeasuredWidth(renderedTab.root) <= 0) {\n        return;\n      }\n    }\n\n    setRenderMode(\"portal\");\n  }, [\n    bootstrapOverflowReady,\n    bootstrapTabs,\n    readyBootstrapTabs,\n    renderMode,\n    renderedTabMap,\n  ]);\n\n  const registerRenderedTab = useCallback((tab: RenderedTab) => {\n    setRenderedTabMap((map) => {\n      const existing = map.get(tab.value);\n      if (\n        process.env.NODE_ENV !== \"production\" &&\n        existing &&\n        existing.id !== tab.id\n      ) {\n        console.warn(\n          `TabsNext received duplicate tab value \"${tab.value}\". Tab values must be unique within a TabsNext instance.`,\n        );\n      }\n\n      if (existing === tab) {\n        return map;\n      }\n\n      const next = new Map(map);\n      next.set(tab.value, tab);\n      return next;\n    });\n\n    return () => {\n      setRenderedTabMap((map) => {\n        const existing = map.get(tab.value);\n        if (!existing || existing.id !== tab.id) {\n          return map;\n        }\n\n        const next = new Map(map);\n        next.delete(tab.value);\n        return next;\n      });\n    };\n  }, []);\n\n  const updateRenderedTab = useCallback(\n    (value: string, updates: Partial<Omit<RenderedTab, \"value\">>) => {\n      setRenderedTabMap((map) => {\n        const existing = map.get(value);\n        if (!existing) {\n          return map;\n        }\n\n        let changed = false;\n        const nextRecord = { ...existing };\n        for (const [key, nextValue] of Object.entries(updates)) {\n          const typedKey = key as keyof Omit<RenderedTab, \"value\">;\n          if (nextRecord[typedKey] !== nextValue) {\n            changed = true;\n            nextRecord[typedKey] = nextValue as never;\n          }\n        }\n\n        if (!changed) {\n          return map;\n        }\n\n        const next = new Map(map);\n        next.set(value, nextRecord);\n        return next;\n      });\n    },\n    [],\n  );\n\n  const getRenderedTab = useCallback(\n    (value: string) => {\n      return renderedTabMap.get(value);\n    },\n    [renderedTabMap],\n  );\n\n  const renderedTabs = useMemo(() => {\n    return sortRenderedTabs(Array.from(renderedTabMap.values()));\n  }, [renderedTabMap]);\n\n  const renderedTabOrderMap = useMemo(() => {\n    return new Map(\n      renderedTabs.map((tab, index) => [tab.value, index] as const),\n    );\n  }, [renderedTabs]);\n\n  const getRenderedTabOrder = useCallback(\n    (value: string) => {\n      return renderedTabOrderMap.get(value) ?? -1;\n    },\n    [renderedTabOrderMap],\n  );\n\n  return {\n    renderMode,\n    registerBootstrapTab,\n    setBootstrapTabReady,\n    setBootstrapOverflowReady,\n    registerRenderedTab,\n    updateRenderedTab,\n    getRenderedTab,\n    getRenderedTabOrder,\n    renderedTabs,\n  };\n}\n"],"names":["useState","useCallback","useIsomorphicLayoutEffect","getMeasuredWidth","useMemo"],"mappings":"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"}

package/dist-cjs/tabs-next/hooks/useTabListRecovery.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var react = require('react');
+var domUtils = require('../domUtils.js');
+
+function useTabListRecovery({
+  removalVersion,
+  targetWindow,
+  tabstripRef,
+  overflowListRef,
+  handleTabRemoval,
+  pendingRemovalRecoveryRef,
+  pendingRemovalRecoveryRetriesRef
+}) {
+  react.useEffect(() => {
+    if (removalVersion < 1) {
+      return;
+    }
+    pendingRemovalRecoveryRef.current = true;
+    pendingRemovalRecoveryRetriesRef.current = 0;
+    const raf = targetWindow == null ? void 0 : targetWindow.requestAnimationFrame(() => {
+      handleTabRemoval();
+    });
+    return () => {
+      if (raf != null) {
+        targetWindow == null ? void 0 : targetWindow.cancelAnimationFrame(raf);
+      }
+    };
+  }, [
+    handleTabRemoval,
+    pendingRemovalRecoveryRef,
+    pendingRemovalRecoveryRetriesRef,
+    removalVersion,
+    targetWindow
+  ]);
+  react.useEffect(() => {
+    const isInTabList = (node) => {
+      var _a, _b;
+      if (!node) {
+        return false;
+      }
+      return (((_a = tabstripRef.current) == null ? void 0 : _a.contains(node)) ?? false) || (((_b = overflowListRef.current) == null ? void 0 : _b.contains(node)) ?? false);
+    };
+    const handleFocusOut = (event) => {
+      if (!pendingRemovalRecoveryRef.current) {
+        return;
+      }
+      const wasInTabList = domUtils.isHTMLElement(event.target) && isInTabList(event.target);
+      const stillInTabList = domUtils.isHTMLElement(event.relatedTarget) && isInTabList(event.relatedTarget);
+      if (wasInTabList && !stillInTabList) {
+        if (targetWindow == null ? void 0 : targetWindow.requestAnimationFrame) {
+          targetWindow.requestAnimationFrame(() => handleTabRemoval());
+        } else {
+          queueMicrotask(() => handleTabRemoval());
+        }
+      }
+    };
+    targetWindow == null ? void 0 : targetWindow.document.addEventListener("focusout", handleFocusOut, true);
+    return () => {
+      targetWindow == null ? void 0 : targetWindow.document.removeEventListener(
+        "focusout",
+        handleFocusOut,
+        true
+      );
+    };
+  }, [
+    handleTabRemoval,
+    overflowListRef,
+    pendingRemovalRecoveryRef,
+    tabstripRef,
+    targetWindow
+  ]);
+}
+
+exports.useTabListRecovery = useTabListRecovery;
+//# sourceMappingURL=useTabListRecovery.js.map

package/dist-cjs/tabs-next/hooks/useTabListRecovery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabListRecovery.js","sources":["../src/tabs-next/hooks/useTabListRecovery.ts"],"sourcesContent":["import { type MutableRefObject, type RefObject, useEffect } from \"react\";\nimport { isHTMLElement } from \"../domUtils\";\n\ninterface UseTabListRecoveryArgs {\n  removalVersion: number;\n  targetWindow: Window | null | undefined;\n  tabstripRef: RefObject<HTMLDivElement | null>;\n  overflowListRef: RefObject<HTMLDivElement | null>;\n  handleTabRemoval: () => void;\n  pendingRemovalRecoveryRef: MutableRefObject<boolean>;\n  pendingRemovalRecoveryRetriesRef: MutableRefObject<number>;\n}\n\nexport function useTabListRecovery({\n  removalVersion,\n  targetWindow,\n  tabstripRef,\n  overflowListRef,\n  handleTabRemoval,\n  pendingRemovalRecoveryRef,\n  pendingRemovalRecoveryRetriesRef,\n}: UseTabListRecoveryArgs) {\n  useEffect(() => {\n    if (removalVersion < 1) {\n      return;\n    }\n\n    pendingRemovalRecoveryRef.current = true;\n    pendingRemovalRecoveryRetriesRef.current = 0;\n\n    const raf = targetWindow?.requestAnimationFrame(() => {\n      handleTabRemoval();\n    });\n\n    return () => {\n      if (raf != null) {\n        targetWindow?.cancelAnimationFrame(raf);\n      }\n    };\n  }, [\n    handleTabRemoval,\n    pendingRemovalRecoveryRef,\n    pendingRemovalRecoveryRetriesRef,\n    removalVersion,\n    targetWindow,\n  ]);\n\n  useEffect(() => {\n    const isInTabList = (node: HTMLElement | null) => {\n      if (!node) {\n        return false;\n      }\n\n      return (\n        (tabstripRef.current?.contains(node) ?? false) ||\n        (overflowListRef.current?.contains(node) ?? false)\n      );\n    };\n\n    const handleFocusOut = (event: FocusEvent) => {\n      if (!pendingRemovalRecoveryRef.current) {\n        return;\n      }\n\n      const wasInTabList =\n        isHTMLElement(event.target) && isInTabList(event.target);\n      const stillInTabList =\n        isHTMLElement(event.relatedTarget) && isInTabList(event.relatedTarget);\n\n      if (wasInTabList && !stillInTabList) {\n        if (targetWindow?.requestAnimationFrame) {\n          targetWindow.requestAnimationFrame(() => handleTabRemoval());\n        } else {\n          queueMicrotask(() => handleTabRemoval());\n        }\n      }\n    };\n\n    targetWindow?.document.addEventListener(\"focusout\", handleFocusOut, true);\n\n    return () => {\n      targetWindow?.document.removeEventListener(\n        \"focusout\",\n        handleFocusOut,\n        true,\n      );\n    };\n  }, [\n    handleTabRemoval,\n    overflowListRef,\n    pendingRemovalRecoveryRef,\n    tabstripRef,\n    targetWindow,\n  ]);\n}\n"],"names":["useEffect","isHTMLElement"],"mappings":";;;;;AAaO,SAAS,kBAAA,CAAmB;AAAA,EACjC,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,yBAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAiB,CAAA,EAAG;AACtB,MAAA;AAAA,IACF;AAEA,IAAA,yBAAA,CAA0B,OAAA,GAAU,IAAA;AACpC,IAAA,gCAAA,CAAiC,OAAA,GAAU,CAAA;AAE3C,IAAA,MAAM,GAAA,GAAM,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,qBAAA,CAAsB,MAAM;AACpD,MAAA,gBAAA,EAAiB;AAAA,IACnB,CAAA,CAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAO,IAAA,EAAM;AACf,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAA,CAAqB,GAAA,CAAA;AAAA,MACrC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG;AAAA,IACD,gBAAA;AAAA,IACA,yBAAA;AAAA,IACA,gCAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAA,GAAc,CAAC,IAAA,KAA6B;AAhDtD,MAAA,IAAA,EAAA,EAAA,EAAA;AAiDM,MAAA,IAAI,CAAC,IAAA,EAAM;AACT,QAAA,OAAO,KAAA;AAAA,MACT;AAEA,MAAA,OAAA,CAAA,CAAA,CACG,EAAA,GAAA,WAAA,CAAY,OAAA,KAAZ,IAAA,GAAA,MAAA,GAAA,EAAA,CAAqB,QAAA,CAAS,IAAA,CAAA,KAAS,aACvC,EAAA,GAAA,eAAA,CAAgB,OAAA,KAAhB,IAAA,GAAA,MAAA,GAAA,EAAA,CAAyB,QAAA,CAAS,IAAA,CAAA,KAAS,KAAA,CAAA;AAAA,IAEhD,CAAA;AAEA,IAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAAsB;AAC5C,MAAA,IAAI,CAAC,0BAA0B,OAAA,EAAS;AACtC,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,eACJC,sBAAA,CAAc,KAAA,CAAM,MAAM,CAAA,IAAK,WAAA,CAAY,MAAM,MAAM,CAAA;AACzD,MAAA,MAAM,iBACJA,sBAAA,CAAc,KAAA,CAAM,aAAa,CAAA,IAAK,WAAA,CAAY,MAAM,aAAa,CAAA;AAEvE,MAAA,IAAI,YAAA,IAAgB,CAAC,cAAA,EAAgB;AACnC,QAAA,IAAI,6CAAc,qBAAA,EAAuB;AACvC,UAAA,YAAA,CAAa,qBAAA,CAAsB,MAAM,gBAAA,EAAkB,CAAA;AAAA,QAC7D,CAAA,MAAO;AACL,UAAA,cAAA,CAAe,MAAM,kBAAkB,CAAA;AAAA,QACzC;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,QAAA,CAAS,gBAAA,CAAiB,UAAA,EAAY,cAAA,EAAgB,IAAA,CAAA;AAEpE,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,QAAA,CAAS,mBAAA;AAAA,QACrB,UAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OAAA;AAAA,IAEJ,CAAA;AAAA,EACF,CAAA,EAAG;AAAA,IACD,gBAAA;AAAA,IACA,eAAA;AAAA,IACA,yBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH;;;;"}

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

@@ -0,0 +1,165 @@
+'use strict';
+
+var react = require('react');
+var useEventCallback = require('../../utils/useEventCallback.js');
+var domUtils = require('../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