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

package/dist-cjs/tabs-next/TabOverflowList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n  FloatingTree,\n  flip,\n  offset,\n  size,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  Button,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n  buttonRef?: Ref<HTMLButtonElement>;\n  tabstripRef: RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  isMeasuring?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n  function TabOverflowList(props, ref) {\n    const {\n      buttonRef,\n      tabstripRef,\n      children,\n      isMeasuring,\n      open,\n      setOpen,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabs-next-overflow-list\",\n      css: tabOverflowListCss,\n      window: targetWindow,\n    });\n\n    const { OverflowIcon } = useIcon();\n\n    const { refs, x, y, strategy, context } = useFloatingUI({\n      open: open,\n      onOpenChange(open, _, reason) {\n        if (reason === \"escape-key\") {\n          queueMicrotask(() => {\n            const allTabs =\n              tabstripRef.current?.querySelectorAll<HTMLElement>(\n                '[role=\"tab\"]:not([aria-hidden])',\n              ) ?? [];\n            const numberOfTabsInOverflow =\n              listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n                .length ?? 0;\n\n            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n              preventScroll: true,\n            });\n          });\n        }\n\n        setOpen(open);\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      ],\n    });\n\n    const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const handleRootRef = useForkRef(rootRef, ref);\n    const listRef = useRef<HTMLDivElement>(null);\n    const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n    const handleFocusOutside = useCallback(() => {\n      setOpen(false);\n    }, [setOpen]);\n\n    useFocusOutside(\n      rootRef,\n      handleFocusOutside,\n      open,\n      \"[data-floating-ui-portal]\",\n    );\n\n    const handleClick = () => {\n      if (!open) {\n        listRef.current\n          ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n          ?.focus({ preventScroll: true });\n      } else {\n        setOpen(false);\n      }\n    };\n\n    const handleFocus = () => {\n      setOpen(true);\n    };\n\n    const handleButtonRef = useForkRef<HTMLButtonElement>(\n      buttonRef,\n      refs.setReference,\n    );\n\n    const listId = useId();\n\n    const childCount = Children.count(children);\n    if (childCount === 0 && !isMeasuring) return null;\n\n    return (\n      <div className={withBaseName()} ref={handleRootRef} data-overflow>\n        <Button\n          data-overflowbutton\n          tabIndex={-1}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleClick}\n          ref={handleButtonRef}\n          aria-label={`Overflow menu. ${childCount} tabs hidden`}\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-hidden=\"true\"\n          role=\"tab\"\n          aria-haspopup\n          {...rest}\n        >\n          <OverflowIcon aria-hidden />\n        </Button>\n        <FloatingTree>\n          <div\n            ref={handleListRef}\n            {...getFloatingProps({\n              onFocus: handleFocus,\n              role: \"presentation\",\n            })}\n            className={withBaseName(\"list\")}\n            data-hidden={!open}\n            style={\n              open\n                ? { left: x ?? 0, top: y ?? 0, position: strategy }\n                : undefined\n            }\n            id={listId}\n          >\n            <div className={withBaseName(\"listContainer\")}>{children}</div>\n          </div>\n        </FloatingTree>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabOverflowList","useWindow","useComponentCssInjection","tabOverflowListCss","useIcon","useFloatingUI","open","offset","size","flip","useInteractions","useDismiss","useRef","useForkRef","useCallback","useFocusOutside","useId","Children","jsxs","jsx","Button","FloatingTree"],"mappings":"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"}
+{"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  Button,\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useIcon,\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 Dispatch,\n  forwardRef,\n  type KeyboardEvent,\n  type Ref,\n  type SetStateAction,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { isHTMLElement } from \"./domUtils\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\nimport { TabSlot } from \"./TabSlot\";\nimport { useTabsNext } from \"./TabsNextContext\";\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(\"saltTabOverflow\");\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-tabs-next-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 } = useTabsNext();\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","useTabsNext","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-next/TabSlot.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var TabSlotRegistryContext = require('./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-next/TabSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSlot.js","sources":["../src/tabs-next/TabSlot.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, useCallback } from \"react\";\nimport { useTabSlotRegistry } from \"./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;;;;"}

package/dist-cjs/tabs-next/TabSlotRegistryContext.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const TabSlotRegistryContext = core.createContext(
+  "TabSlotRegistryContext",
+  null
+);
+function useTabSlotRegistry() {
+  return react.useContext(TabSlotRegistryContext);
+}
+
+exports.TabSlotRegistryContext = TabSlotRegistryContext;
+exports.useTabSlotRegistry = useTabSlotRegistry;
+//# sourceMappingURL=TabSlotRegistryContext.js.map

package/dist-cjs/tabs-next/TabSlotRegistryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSlotRegistryContext.js","sources":["../src/tabs-next/TabSlotRegistryContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\nexport interface TabSlotRegistryContextValue {\n  registerSlot: (slotId: string, element: HTMLDivElement | null) => void;\n}\n\nexport const TabSlotRegistryContext =\n  createContext<TabSlotRegistryContextValue | null>(\n    \"TabSlotRegistryContext\",\n    null,\n  );\n\nexport function useTabSlotRegistry() {\n  return useContext(TabSlotRegistryContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAOO,MAAM,sBAAA,GACXA,kBAAA;AAAA,EACE,wBAAA;AAAA,EACA;AACF;AAEK,SAAS,kBAAA,GAAqB;AACnC,EAAA,OAAOC,iBAAW,sBAAsB,CAAA;AAC1C;;;;;"}

package/dist-cjs/tabs-next/TabsNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltTabsNext {\n  min-width: 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TabsNext.css.js.map

package/dist-cjs/tabs-next/TabsNext.css.js.map

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

package/dist-cjs/tabs-next/TabsNext.js

@@ -2,93 +2,140 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
 var useCollection = require('./hooks/useCollection.js');
+var useOverflowSelectionState = require('./hooks/useOverflowSelectionState.js');
+var useRenderedTabsRegistry = require('./hooks/useRenderedTabsRegistry.js');
+var TabsNext$1 = require('./TabsNext.css.js');
 var TabsNextContext = require('./TabsNextContext.js');
 
 const withBaseName = core.makePrefixer("saltTabsNext");
+function setValueIdMapEntry(map, value, id) {
+  if (map.get(value) === id) {
+    return map;
+  }
+  const next = new Map(map);
+  next.set(value, id);
+  return next;
+}
+function removeValueIdMapEntry(map, value, id) {
+  if (map.get(value) !== id) {
+    return map;
+  }
+  const next = new Map(map);
+  next.delete(value);
+  return next;
+}
 const TabsNext = react.forwardRef(
   function TabsNext2(props, ref) {
     const { className, children, value, defaultValue, onChange, ...rest } = props;
-    const [valueToTabIdMap, setValueToIdMap] = react.useState({
-      map: /* @__PURE__ */ new Map()
-    });
-    const [valueToPanelIdMap, setValueToPanelIdMap] = react.useState({
-      map: /* @__PURE__ */ new Map()
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tabs-next",
+      css: TabsNext$1,
+      window: targetWindow
     });
+    const [valueToTabIdMap, setValueToIdMap] = react.useState(
+      () => /* @__PURE__ */ new Map()
+    );
+    const [valueToPanelIdMap, setValueToPanelIdMap] = react.useState(
+      () => /* @__PURE__ */ new Map()
+    );
+    const {
+      renderMode,
+      registerBootstrapTab,
+      setBootstrapTabReady,
+      setBootstrapOverflowReady,
+      registerRenderedTab,
+      updateRenderedTab,
+      getRenderedTab,
+      getRenderedTabOrder,
+      renderedTabs
+    } = useRenderedTabsRegistry.useRenderedTabsRegistry();
     const {
       registerItem,
+      updateItem,
       item,
       getNext,
       getPrevious,
       getFirst,
       getLast,
-      items
-    } = useCollection.useCollection({ wrap: true });
+      itemAt,
+      getIndex,
+      sortItems,
+      removalVersion,
+      getRemovedItems
+    } = useCollection.useCollection({ targetWindow, wrap: true });
     const activeTab = react.useRef();
-    const removedActiveTabRef = react.useRef(void 0);
     const [menuOpen, setMenuOpen] = react.useState(false);
     const [selected, setSelectedState] = core.useControlled({
       controlled: value,
       default: defaultValue,
-      name: "TabListNext",
+      name: "TabsNext",
       state: "selected"
     });
-    const setSelected = react.useCallback(
-      (event, value2) => {
-        setMenuOpen(false);
-        setSelectedState(value2);
-        onChange == null ? void 0 : onChange(event, value2);
+    const commitSelection = react.useCallback(
+      (event, newValue) => {
+        setSelectedState(newValue);
+        if (selected !== newValue) {
+          onChange == null ? void 0 : onChange(event, newValue);
+        }
       },
-      [onChange]
+      [onChange, selected]
     );
-    const registerTab = core.useEventCallback((item2) => {
-      const cleanup = registerItem(item2);
-      setValueToIdMap(({ map }) => {
-        map.set(item2.value, item2.id);
-        return { map };
-      });
-      return () => {
-        var _a;
-        cleanup();
-        setValueToIdMap(({ map }) => {
-          map.delete(item2.value);
-          return { map };
-        });
-        if (((_a = activeTab.current) == null ? void 0 : _a.value) !== item2.value) {
-          return;
-        }
-        removedActiveTabRef.current = item2.value;
-      };
+    const { selectionFromOverflowValueRef, setSelected } = useOverflowSelectionState.useOverflowSelectionState({
+      commitSelection,
+      menuOpen,
+      selected,
+      setMenuOpen
     });
+    const registerTab = react.useCallback(
+      (tab) => {
+        const cleanup = registerItem(tab);
+        setValueToIdMap((map) => setValueIdMapEntry(map, tab.value, tab.id));
+        return () => {
+          cleanup();
+          setValueToIdMap(
+            (map) => removeValueIdMapEntry(map, tab.value, tab.id)
+          );
+        };
+      },
+      [registerItem]
+    );
     const registerPanel = react.useCallback((id, value2) => {
-      setValueToPanelIdMap(({ map }) => {
-        map.set(value2, id);
-        return { map };
-      });
+      setValueToPanelIdMap((map) => setValueIdMapEntry(map, value2, id));
       return () => {
-        setValueToIdMap(({ map }) => {
-          map.delete(value2);
-          return { map };
-        });
+        setValueToPanelIdMap((map) => removeValueIdMapEntry(map, value2, id));
       };
     }, []);
     const getPanelId = react.useCallback(
       (value2) => {
-        return valueToPanelIdMap.map.get(value2);
+        return valueToPanelIdMap.get(value2);
       },
       [valueToPanelIdMap]
     );
     const getTabId = react.useCallback(
       (value2) => {
-        return valueToTabIdMap.map.get(value2);
+        return valueToTabIdMap.get(value2);
       },
       [valueToTabIdMap]
     );
     const context = react.useMemo(
       () => ({
+        renderMode,
+        registerBootstrapTab,
+        setBootstrapTabReady,
+        setBootstrapOverflowReady,
         registerTab,
+        updateTab: updateItem,
+        registerRenderedTab,
+        updateRenderedTab,
+        getRenderedTab,
+        getRenderedTabOrder,
+        renderedTabs,
         registerPanel,
         getPanelId,
         getTabId,
@@ -99,15 +146,29 @@ const TabsNext = react.forwardRef(
         getPrevious,
         getFirst,
         getLast,
-        items,
         activeTab,
+        selectionFromOverflowValueRef,
         menuOpen,
         setMenuOpen,
-        removedActiveTabRef
+        itemAt,
+        getIndex,
+        sortItems,
+        removalVersion,
+        getRemovedItems
       }),
       [
+        renderMode,
+        registerBootstrapTab,
+        setBootstrapTabReady,
+        setBootstrapOverflowReady,
         registerPanel,
         registerTab,
+        updateItem,
+        registerRenderedTab,
+        updateRenderedTab,
+        getRenderedTab,
+        getRenderedTabOrder,
+        renderedTabs,
         getPanelId,
         getTabId,
         selected,
@@ -117,8 +178,13 @@ const TabsNext = react.forwardRef(
         getPrevious,
         getFirst,
         getLast,
-        items,
-        menuOpen
+        menuOpen,
+        itemAt,
+        getIndex,
+        sortItems,
+        removalVersion,
+        getRemovedItems,
+        selectionFromOverflowValueRef
       ]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(TabsNextContext.TabsNextContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children }) });

package/dist-cjs/tabs-next/TabsNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsNext.js","sources":["../src/tabs-next/TabsNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useEventCallback } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useCollection } from \"./hooks/useCollection\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\n\nexport interface TabsNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  children?: ReactNode;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string;\n  /**\n   * Callback fired when the selection changes. The event will be null when selection is moved automatically.\n   */\n  onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n  function TabsNext(props, ref) {\n    const { className, children, value, defaultValue, onChange, ...rest } =\n      props;\n\n    const [valueToTabIdMap, setValueToIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n\n    const {\n      registerItem,\n      item,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n    } = useCollection({ wrap: true });\n\n    const activeTab = useRef<Pick<Item, \"id\" | \"value\">>();\n    const removedActiveTabRef = useRef<string | undefined>(undefined);\n\n    const [menuOpen, setMenuOpen] = useState(false);\n\n    const [selected, setSelectedState] = useControlled({\n      controlled: value,\n      default: defaultValue,\n      name: \"TabListNext\",\n      state: \"selected\",\n    });\n\n    const setSelected = useCallback(\n      (event: SyntheticEvent | null, value: string) => {\n        setMenuOpen(false);\n        setSelectedState(value);\n        onChange?.(event, value);\n      },\n      [onChange],\n    );\n\n    const registerTab = useEventCallback((item: Item) => {\n      const cleanup = registerItem(item);\n      setValueToIdMap(({ map }) => {\n        map.set(item.value, item.id);\n        return { map };\n      });\n\n      return () => {\n        cleanup();\n        setValueToIdMap(({ map }) => {\n          map.delete(item.value);\n          return { map };\n        });\n\n        if (activeTab.current?.value !== item.value) {\n          return;\n        }\n\n        removedActiveTabRef.current = item.value;\n      };\n    });\n\n    const registerPanel = useCallback((id: string, value: string) => {\n      setValueToPanelIdMap(({ map }) => {\n        map.set(value, id);\n        return { map };\n      });\n      return () => {\n        setValueToIdMap(({ map }) => {\n          map.delete(value);\n          return { map };\n        });\n      };\n    }, []);\n\n    const getPanelId = useCallback(\n      (value: string) => {\n        return valueToPanelIdMap.map.get(value);\n      },\n      [valueToPanelIdMap],\n    );\n\n    const getTabId = useCallback(\n      (value: string) => {\n        return valueToTabIdMap.map.get(value);\n      },\n      [valueToTabIdMap],\n    );\n\n    const context = useMemo(\n      () => ({\n        registerTab,\n        registerPanel,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        activeTab,\n        menuOpen,\n        setMenuOpen,\n        removedActiveTabRef,\n      }),\n      [\n        registerPanel,\n        registerTab,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        menuOpen,\n      ],\n    );\n\n    return (\n      <TabsNextContext.Provider value={context}>\n        <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n          {children}\n        </div>\n      </TabsNextContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabsNext","useState","useCollection","useRef","useControlled","useCallback","value","useEventCallback","item","useMemo","TabsNextContext","clsx"],"mappings":"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"}
+{"version":3,"file":"TabsNext.js","sources":["../src/tabs-next/TabsNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled } 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 ReactNode,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useCollection } from \"./hooks/useCollection\";\nimport { useOverflowSelectionState } from \"./hooks/useOverflowSelectionState\";\nimport { useRenderedTabsRegistry } from \"./hooks/useRenderedTabsRegistry\";\nimport tabsNextCss from \"./TabsNext.css\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\n\nexport interface TabsNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  children?: ReactNode;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string;\n  /**\n   * Callback fired when the selection changes. The event will be null when\n   * selection is moved automatically.\n   */\n  onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nfunction setValueIdMapEntry(\n  map: Map<string, string>,\n  value: string,\n  id: string,\n) {\n  if (map.get(value) === id) {\n    return map;\n  }\n\n  const next = new Map(map);\n  next.set(value, id);\n  return next;\n}\n\nfunction removeValueIdMapEntry(\n  map: Map<string, string>,\n  value: string,\n  id: string,\n) {\n  if (map.get(value) !== id) {\n    return map;\n  }\n\n  const next = new Map(map);\n  next.delete(value);\n  return next;\n}\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n  function TabsNext(props, ref) {\n    const { className, children, value, defaultValue, onChange, ...rest } =\n      props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabs-next\",\n      css: tabsNextCss,\n      window: targetWindow,\n    });\n\n    const [valueToTabIdMap, setValueToIdMap] = useState(\n      () => new Map<string, string>(),\n    );\n    const [valueToPanelIdMap, setValueToPanelIdMap] = useState(\n      () => new Map<string, string>(),\n    );\n    const {\n      renderMode,\n      registerBootstrapTab,\n      setBootstrapTabReady,\n      setBootstrapOverflowReady,\n      registerRenderedTab,\n      updateRenderedTab,\n      getRenderedTab,\n      getRenderedTabOrder,\n      renderedTabs,\n    } = useRenderedTabsRegistry();\n\n    const {\n      registerItem,\n      updateItem,\n      item,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      itemAt,\n      getIndex,\n      sortItems,\n      removalVersion,\n      getRemovedItems,\n    } = useCollection({ targetWindow, wrap: true });\n\n    const activeTab = useRef<Pick<Item, \"id\" | \"value\">>();\n\n    const [menuOpen, setMenuOpen] = useState(false);\n\n    const [selected, setSelectedState] = useControlled({\n      controlled: value,\n      default: defaultValue,\n      name: \"TabsNext\",\n      state: \"selected\",\n    });\n\n    const commitSelection = useCallback(\n      (event: SyntheticEvent | null, newValue: string) => {\n        setSelectedState(newValue);\n        if (selected !== newValue) {\n          onChange?.(event, newValue);\n        }\n      },\n      [onChange, selected],\n    );\n    const { selectionFromOverflowValueRef, setSelected } =\n      useOverflowSelectionState({\n        commitSelection,\n        menuOpen,\n        selected,\n        setMenuOpen,\n      });\n\n    const registerTab = useCallback(\n      (tab: Item) => {\n        const cleanup = registerItem(tab);\n        setValueToIdMap((map) => setValueIdMapEntry(map, tab.value, tab.id));\n\n        return () => {\n          cleanup();\n          setValueToIdMap((map) =>\n            removeValueIdMapEntry(map, tab.value, tab.id),\n          );\n        };\n      },\n      [registerItem],\n    );\n\n    const registerPanel = useCallback((id: string, value: string) => {\n      setValueToPanelIdMap((map) => setValueIdMapEntry(map, value, id));\n      return () => {\n        setValueToPanelIdMap((map) => removeValueIdMapEntry(map, value, id));\n      };\n    }, []);\n\n    const getPanelId = useCallback(\n      (value: string) => {\n        return valueToPanelIdMap.get(value);\n      },\n      [valueToPanelIdMap],\n    );\n\n    const getTabId = useCallback(\n      (value: string) => {\n        return valueToTabIdMap.get(value);\n      },\n      [valueToTabIdMap],\n    );\n\n    const context = useMemo(\n      () => ({\n        renderMode,\n        registerBootstrapTab,\n        setBootstrapTabReady,\n        setBootstrapOverflowReady,\n        registerTab,\n        updateTab: updateItem,\n        registerRenderedTab,\n        updateRenderedTab,\n        getRenderedTab,\n        getRenderedTabOrder,\n        renderedTabs,\n        registerPanel,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        activeTab,\n        selectionFromOverflowValueRef,\n        menuOpen,\n        setMenuOpen,\n        itemAt,\n        getIndex,\n        sortItems,\n        removalVersion,\n        getRemovedItems,\n      }),\n      [\n        renderMode,\n        registerBootstrapTab,\n        setBootstrapTabReady,\n        setBootstrapOverflowReady,\n        registerPanel,\n        registerTab,\n        updateItem,\n        registerRenderedTab,\n        updateRenderedTab,\n        getRenderedTab,\n        getRenderedTabOrder,\n        renderedTabs,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        menuOpen,\n        itemAt,\n        getIndex,\n        sortItems,\n        removalVersion,\n        getRemovedItems,\n        selectionFromOverflowValueRef,\n      ],\n    );\n\n    return (\n      <TabsNextContext.Provider value={context}>\n        <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n          {children}\n        </div>\n      </TabsNextContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabsNext","useWindow","useComponentCssInjection","tabsNextCss","useState","useRenderedTabsRegistry","useCollection","useRef","useControlled","useCallback","useOverflowSelectionState","value","useMemo","TabsNextContext","clsx"],"mappings":"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"}

package/dist-cjs/tabs-next/TabsNextContext.js

@@ -11,17 +11,31 @@ const TabsNextContext = core.createContext(
     getNext: () => null,
     getPrevious: () => null,
     item: () => null,
-    items: [],
+    getIndex: () => -1,
+    itemAt: () => null,
+    sortItems: () => void 0,
+    renderMode: "inline",
+    registerBootstrapTab: () => () => void 0,
+    setBootstrapTabReady: () => void 0,
+    setBootstrapOverflowReady: () => void 0,
     selected: void 0,
     registerTab: () => () => void 0,
+    updateTab: () => void 0,
+    registerRenderedTab: () => () => void 0,
+    updateRenderedTab: () => void 0,
+    getRenderedTab: () => void 0,
+    getRenderedTabOrder: () => -1,
+    renderedTabs: [],
     registerPanel: () => () => void 0,
     getPanelId: () => void 0,
     getTabId: () => void 0,
     setSelected: () => void 0,
     activeTab: { current: void 0 },
-    removedActiveTabRef: { current: void 0 },
+    selectionFromOverflowValueRef: { current: null },
     menuOpen: false,
-    setMenuOpen: () => void 0
+    setMenuOpen: () => void 0,
+    removalVersion: 0,
+    getRemovedItems: () => /* @__PURE__ */ new Map()
   }
 );
 function useTabsNext() {

package/dist-cjs/tabs-next/TabsNextContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsNextContext.js","sources":["../src/tabs-next/TabsNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport type { useCollection } from \"./hooks/useCollection\";\n\nexport interface Item {\n  id: string;\n  value: string;\n  element: HTMLElement;\n}\n\nexport interface TabsNextContextValue\n  extends Omit<ReturnType<typeof useCollection>, \"registerItem\"> {\n  registerTab: (item: Item) => () => void;\n  registerPanel: (id: string, value: string) => () => void;\n  getPanelId: (value: string) => string | undefined;\n  getTabId: (value: string) => string | undefined;\n  selected?: string;\n  setSelected: (event: SyntheticEvent, value: string) => void;\n  activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n  removedActiveTabRef: MutableRefObject<string | undefined>;\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport const TabsNextContext = createContext<TabsNextContextValue>(\n  \"TabsNextContext\",\n  {\n    getFirst: () => null,\n    getLast: () => null,\n    getNext: () => null,\n    getPrevious: () => null,\n    item: () => null,\n    items: [],\n    selected: undefined,\n    registerTab: () => () => undefined,\n    registerPanel: () => () => undefined,\n    getPanelId: () => undefined,\n    getTabId: () => undefined,\n    setSelected: () => undefined,\n    activeTab: { current: undefined },\n    removedActiveTabRef: { current: undefined },\n    menuOpen: false,\n    setMenuOpen: () => undefined,\n  },\n);\n\nexport function useTabsNext() {\n  return useContext(TabsNextContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AA8BO,MAAM,eAAA,GAAkBA,kBAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AAAA,IACE,UAAU,MAAM,IAAA;AAAA,IAChB,SAAS,MAAM,IAAA;AAAA,IACf,SAAS,MAAM,IAAA;AAAA,IACf,aAAa,MAAM,IAAA;AAAA,IACnB,MAAM,MAAM,IAAA;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAA,EAAU,MAAA;AAAA,IACV,WAAA,EAAa,MAAM,MAAM,MAAA;AAAA,IACzB,aAAA,EAAe,MAAM,MAAM,MAAA;AAAA,IAC3B,YAAY,MAAM,MAAA;AAAA,IAClB,UAAU,MAAM,MAAA;AAAA,IAChB,aAAa,MAAM,MAAA;AAAA,IACnB,SAAA,EAAW,EAAE,OAAA,EAAS,MAAA,EAAU;AAAA,IAChC,mBAAA,EAAqB,EAAE,OAAA,EAAS,MAAA,EAAU;AAAA,IAC1C,QAAA,EAAU,KAAA;AAAA,IACV,aAAa,MAAM;AAAA;AAEvB;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,OAAOC,iBAAW,eAAe,CAAA;AACnC;;;;;"}
+{"version":3,"file":"TabsNextContext.js","sources":["../src/tabs-next/TabsNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport type { useCollection } from \"./hooks/useCollection\";\n\nexport interface Item {\n  id: string;\n  value: string;\n  element: HTMLElement | null;\n  location?: \"hidden\" | \"main\" | \"overflow\";\n  order?: number;\n}\n\nexport interface RenderedTab {\n  host: HTMLDivElement;\n  id: string;\n  marker: HTMLElement | null;\n  root: HTMLElement | null;\n  trigger: HTMLButtonElement | null;\n  value: string;\n  width: number;\n}\n\nexport type TabsNextRenderMode = \"inline\" | \"portal\";\n\nexport interface TabsNextContextValue\n  extends Omit<\n    ReturnType<typeof useCollection>,\n    \"registerItem\" | \"updateItem\"\n  > {\n  renderMode: TabsNextRenderMode;\n  registerBootstrapTab: (value: string) => () => void;\n  setBootstrapTabReady: (value: string, ready: boolean) => void;\n  setBootstrapOverflowReady: (ready: boolean) => void;\n  registerTab: (item: Item) => () => void;\n  updateTab: (id: string, updates: Partial<Omit<Item, \"id\" | \"value\">>) => void;\n  registerRenderedTab: (tab: RenderedTab) => () => void;\n  updateRenderedTab: (\n    value: string,\n    updates: Partial<Omit<RenderedTab, \"value\">>,\n  ) => void;\n  getRenderedTab: (value: string) => RenderedTab | undefined;\n  getRenderedTabOrder: (value: string) => number;\n  renderedTabs: RenderedTab[];\n  registerPanel: (id: string, value: string) => () => void;\n  getPanelId: (value: string) => string | undefined;\n  getTabId: (value: string) => string | undefined;\n  selected?: string;\n  setSelected: (\n    event: SyntheticEvent | null,\n    value: string,\n    source?: \"main\" | \"overflow\",\n  ) => void;\n  activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n  selectionFromOverflowValueRef: MutableRefObject<string | null>;\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport const TabsNextContext = createContext<TabsNextContextValue>(\n  \"TabsNextContext\",\n  {\n    getFirst: () => null,\n    getLast: () => null,\n    getNext: () => null,\n    getPrevious: () => null,\n    item: () => null,\n    getIndex: () => -1,\n    itemAt: () => null,\n    sortItems: () => undefined,\n    renderMode: \"inline\",\n    registerBootstrapTab: () => () => undefined,\n    setBootstrapTabReady: () => undefined,\n    setBootstrapOverflowReady: () => undefined,\n    selected: undefined,\n    registerTab: () => () => undefined,\n    updateTab: () => undefined,\n    registerRenderedTab: () => () => undefined,\n    updateRenderedTab: () => undefined,\n    getRenderedTab: () => undefined,\n    getRenderedTabOrder: () => -1,\n    renderedTabs: [],\n    registerPanel: () => () => undefined,\n    getPanelId: () => undefined,\n    getTabId: () => undefined,\n    setSelected: () => undefined,\n    activeTab: { current: undefined },\n    selectionFromOverflowValueRef: { current: null },\n    menuOpen: false,\n    setMenuOpen: () => undefined,\n    removalVersion: 0,\n    getRemovedItems: () => new Map(),\n  },\n);\n\nexport function useTabsNext() {\n  return useContext(TabsNextContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAgEO,MAAM,eAAA,GAAkBA,kBAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AAAA,IACE,UAAU,MAAM,IAAA;AAAA,IAChB,SAAS,MAAM,IAAA;AAAA,IACf,SAAS,MAAM,IAAA;AAAA,IACf,aAAa,MAAM,IAAA;AAAA,IACnB,MAAM,MAAM,IAAA;AAAA,IACZ,UAAU,MAAM,EAAA;AAAA,IAChB,QAAQ,MAAM,IAAA;AAAA,IACd,WAAW,MAAM,MAAA;AAAA,IACjB,UAAA,EAAY,QAAA;AAAA,IACZ,oBAAA,EAAsB,MAAM,MAAM,MAAA;AAAA,IAClC,sBAAsB,MAAM,MAAA;AAAA,IAC5B,2BAA2B,MAAM,MAAA;AAAA,IACjC,QAAA,EAAU,MAAA;AAAA,IACV,WAAA,EAAa,MAAM,MAAM,MAAA;AAAA,IACzB,WAAW,MAAM,MAAA;AAAA,IACjB,mBAAA,EAAqB,MAAM,MAAM,MAAA;AAAA,IACjC,mBAAmB,MAAM,MAAA;AAAA,IACzB,gBAAgB,MAAM,MAAA;AAAA,IACtB,qBAAqB,MAAM,EAAA;AAAA,IAC3B,cAAc,EAAC;AAAA,IACf,aAAA,EAAe,MAAM,MAAM,MAAA;AAAA,IAC3B,YAAY,MAAM,MAAA;AAAA,IAClB,UAAU,MAAM,MAAA;AAAA,IAChB,aAAa,MAAM,MAAA;AAAA,IACnB,SAAA,EAAW,EAAE,OAAA,EAAS,MAAA,EAAU;AAAA,IAChC,6BAAA,EAA+B,EAAE,OAAA,EAAS,IAAA,EAAK;AAAA,IAC/C,QAAA,EAAU,KAAA;AAAA,IACV,aAAa,MAAM,MAAA;AAAA,IACnB,cAAA,EAAgB,CAAA;AAAA,IAChB,eAAA,EAAiB,sBAAM,IAAI,GAAA;AAAI;AAEnC;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,OAAOC,iBAAW,eAAe,CAAA;AACnC;;;;;"}

package/dist-cjs/tabs-next/domUtils.js

@@ -0,0 +1,13 @@
+'use strict';
+
+function isHTMLElement(node) {
+  if (!node || typeof node !== "object") {
+    return false;
+  }
+  const ownerDocument = node.ownerDocument;
+  const defaultView = ownerDocument == null ? void 0 : ownerDocument.defaultView;
+  return !!defaultView && node instanceof defaultView.HTMLElement;
+}
+
+exports.isHTMLElement = isHTMLElement;
+//# sourceMappingURL=domUtils.js.map

package/dist-cjs/tabs-next/domUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domUtils.js","sources":["../src/tabs-next/domUtils.ts"],"sourcesContent":["export function isHTMLElement(node: unknown): node is HTMLElement {\n  if (!node || typeof node !== \"object\") {\n    return false;\n  }\n\n  const ownerDocument = (node as { ownerDocument?: Document | null })\n    .ownerDocument;\n  const defaultView = ownerDocument?.defaultView;\n\n  return !!defaultView && node instanceof defaultView.HTMLElement;\n}\n"],"names":[],"mappings":";;AAAO,SAAS,cAAc,IAAA,EAAoC;AAChE,EAAA,IAAI,CAAC,IAAA,IAAQ,OAAO,IAAA,KAAS,QAAA,EAAU;AACrC,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,gBAAiB,IAAA,CACpB,aAAA;AACH,EAAA,MAAM,cAAc,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,WAAA;AAEnC,EAAA,OAAO,CAAC,CAAC,WAAA,IAAe,IAAA,YAAgB,WAAA,CAAY,WAAA;AACtD;;;;"}

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

@@ -0,0 +1,86 @@
+'use strict';
+
+const MIN_TRUSTED_TAB_WIDTH = 0.5;
+function calculateVisibleCount({
+  gap,
+  maxWidth: initialMaxWidth,
+  overflowWidth,
+  pinnedValue,
+  tabs
+}) {
+  let maxWidth = initialMaxWidth;
+  let currentWidth = 0;
+  let nextVisibleCount = 0;
+  const visibleItems = [];
+  while (nextVisibleCount < tabs.length) {
+    const item = tabs[nextVisibleCount];
+    if (!item) {
+      break;
+    }
+    if (item.width == null) {
+      return null;
+    }
+    const itemWidth = item.width + gap;
+    if (currentWidth + itemWidth > maxWidth) {
+      break;
+    }
+    currentWidth += itemWidth;
+    visibleItems.push(item);
+    nextVisibleCount += 1;
+  }
+  const allTabsFit = nextVisibleCount >= tabs.length;
+  if (allTabsFit) {
+    return nextVisibleCount;
+  }
+  maxWidth -= overflowWidth;
+  while (currentWidth > maxWidth) {
+    const removed = visibleItems.pop();
+    if (!removed) {
+      break;
+    }
+    if (removed.width == null) {
+      return null;
+    }
+    currentWidth -= removed.width + gap;
+    nextVisibleCount -= 1;
+  }
+  const pinnedItem = pinnedValue == null ? null : tabs.find((item) => item.value === pinnedValue) ?? null;
+  if (pinnedItem && !visibleItems.includes(pinnedItem)) {
+    if (pinnedItem.width == null) {
+      return null;
+    }
+    const pinnedWidth = pinnedItem.width + gap;
+    while (currentWidth + pinnedWidth > maxWidth) {
+      const removed = visibleItems.pop();
+      if (!removed) {
+        break;
+      }
+      if (removed.width == null) {
+        return null;
+      }
+      currentWidth -= removed.width + gap;
+      nextVisibleCount -= 1;
+    }
+  }
+  return Math.max(0, nextVisibleCount);
+}
+function partitionVisibleValues(orderedValues, visibleCount, pinnedValue) {
+  let visibleValues = orderedValues.slice(0, visibleCount);
+  let hiddenValues = orderedValues.slice(visibleCount);
+  const hiddenPinnedIndex = pinnedValue != null ? hiddenValues.indexOf(pinnedValue) : -1;
+  if (hiddenPinnedIndex !== -1) {
+    const pinnedHiddenValue = hiddenValues[hiddenPinnedIndex];
+    hiddenValues = hiddenValues.filter(
+      (_, index) => index !== hiddenPinnedIndex
+    );
+    if (pinnedHiddenValue !== void 0) {
+      visibleValues = [...visibleValues, pinnedHiddenValue];
+    }
+  }
+  return { visibleValues, hiddenValues };
+}
+
+exports.MIN_TRUSTED_TAB_WIDTH = MIN_TRUSTED_TAB_WIDTH;
+exports.calculateVisibleCount = calculateVisibleCount;
+exports.partitionVisibleValues = partitionVisibleValues;
+//# sourceMappingURL=overflowMath.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overflowMath.js","sources":["../src/tabs-next/hooks/overflowMath.ts"],"sourcesContent":["export const MIN_TRUSTED_TAB_WIDTH = 0.5;\n\nexport interface MeasuredOverflowTab {\n  value: string;\n  width: number | null;\n}\n\ninterface CalculateVisibleCountProps {\n  gap: number;\n  maxWidth: number;\n  overflowWidth: number;\n  pinnedValue?: string;\n  tabs: MeasuredOverflowTab[];\n}\n\nexport function calculateVisibleCount({\n  gap,\n  maxWidth: initialMaxWidth,\n  overflowWidth,\n  pinnedValue,\n  tabs,\n}: CalculateVisibleCountProps) {\n  let maxWidth = initialMaxWidth;\n  let currentWidth = 0;\n  let nextVisibleCount = 0;\n  const visibleItems: MeasuredOverflowTab[] = [];\n\n  while (nextVisibleCount < tabs.length) {\n    const item = tabs[nextVisibleCount];\n    if (!item) {\n      break;\n    }\n\n    if (item.width == null) {\n      return null;\n    }\n\n    const itemWidth = item.width + gap;\n    if (currentWidth + itemWidth > maxWidth) {\n      break;\n    }\n\n    currentWidth += itemWidth;\n    visibleItems.push(item);\n    nextVisibleCount += 1;\n  }\n\n  const allTabsFit = nextVisibleCount >= tabs.length;\n  if (allTabsFit) {\n    return nextVisibleCount;\n  }\n\n  maxWidth -= overflowWidth;\n\n  while (currentWidth > maxWidth) {\n    const removed = visibleItems.pop();\n    if (!removed) {\n      break;\n    }\n    if (removed.width == null) {\n      return null;\n    }\n    currentWidth -= removed.width + gap;\n    nextVisibleCount -= 1;\n  }\n\n  const pinnedItem =\n    pinnedValue == null\n      ? null\n      : (tabs.find((item) => item.value === pinnedValue) ?? null);\n\n  if (pinnedItem && !visibleItems.includes(pinnedItem)) {\n    if (pinnedItem.width == null) {\n      return null;\n    }\n\n    const pinnedWidth = pinnedItem.width + gap;\n    while (currentWidth + pinnedWidth > maxWidth) {\n      const removed = visibleItems.pop();\n      if (!removed) {\n        break;\n      }\n      if (removed.width == null) {\n        return null;\n      }\n      currentWidth -= removed.width + gap;\n      nextVisibleCount -= 1;\n    }\n  }\n\n  return Math.max(0, nextVisibleCount);\n}\n\nexport function partitionVisibleValues(\n  orderedValues: string[],\n  visibleCount: number,\n  pinnedValue?: string,\n) {\n  let visibleValues = orderedValues.slice(0, visibleCount);\n  let hiddenValues = orderedValues.slice(visibleCount);\n\n  const hiddenPinnedIndex =\n    pinnedValue != null ? hiddenValues.indexOf(pinnedValue) : -1;\n\n  if (hiddenPinnedIndex !== -1) {\n    const pinnedHiddenValue = hiddenValues[hiddenPinnedIndex];\n    hiddenValues = hiddenValues.filter(\n      (_, index) => index !== hiddenPinnedIndex,\n    );\n    if (pinnedHiddenValue !== undefined) {\n      visibleValues = [...visibleValues, pinnedHiddenValue];\n    }\n  }\n\n  return { visibleValues, hiddenValues };\n}\n"],"names":[],"mappings":"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"}