@salt-ds/core 1.59.1 → 1.61.0

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabSlot.js","sources":["../src/tabs/internal/overflow/TabSlot.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, useCallback } from \"react\";\nimport { useTabSlotRegistry } from \"../contexts/TabSlotRegistryContext\";\n\nexport interface TabSlotProps extends ComponentPropsWithoutRef<\"div\"> {\n  slotId: string;\n  value: string;\n}\n\nexport function TabSlot({ slotId, value, ...rest }: TabSlotProps) {\n  const slotRegistry = useTabSlotRegistry();\n  const handleRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      slotRegistry?.registerSlot(slotId, element);\n    },\n    [slotId, slotRegistry],\n  );\n\n  return (\n    <div\n      role=\"presentation\"\n      data-tabslot=\"\"\n      data-slotid={slotId}\n      data-value={value}\n      ref={handleRef}\n      style={{ display: \"contents\" }}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAQO,SAAS,QAAQ,EAAE,MAAA,EAAQ,KAAA,EAAO,GAAG,MAAK,EAAiB;AAChE,EAAA,MAAM,eAAe,kBAAA,EAAmB;AACxC,EAAA,MAAM,SAAA,GAAY,WAAA;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,uBACE,GAAA;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-es/tabs/internal/overflow/overflowMath.js

@@ -0,0 +1,82 @@
+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 };
+}
+
+export { MIN_TRUSTED_TAB_WIDTH, calculateVisibleCount, partitionVisibleValues };
+//# sourceMappingURL=overflowMath.js.map

package/dist-es/tabs/internal/overflow/overflowMath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflowMath.js","sources":["../src/tabs/internal/overflow/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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"}

package/dist-es/tabs/internal/overflow/useOverflow.js

@@ -0,0 +1,271 @@
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import 'clsx';
+import { ownerWindow } from '../../../utils/ownerWindow.js';
+import 'react/jsx-runtime';
+import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
+import '../../../utils/useFloatingUI/useFloatingUI.js';
+import '../../../utils/useId.js';
+import '../../../salt-provider/SaltProvider.js';
+import '../../../viewport/ViewportProvider.js';
+import { isHTMLElement } from '../utils/domUtils.js';
+import { calculateVisibleCount, MIN_TRUSTED_TAB_WIDTH, partitionVisibleValues } from './overflowMath.js';
+import { seedWidthMap, updateWidthMap, getMeasuredWidth, getGapValue } from './widthMeasurement.js';
+
+function getTabWidth(tab) {
+  const width = tab.width || getMeasuredWidth(tab.root);
+  return width > MIN_TRUSTED_TAB_WIDTH ? width : null;
+}
+function getAvailableWidth(element) {
+  const parent = element.parentElement;
+  if (!parent) {
+    return getMeasuredWidth(element);
+  }
+  const parentWidth = getMeasuredWidth(parent);
+  const parentStyles = ownerWindow(parent).getComputedStyle(parent);
+  const parentGap = getGapValue(parentStyles);
+  const siblings = Array.from(parent.children).filter(
+    (child) => {
+      if (!isHTMLElement(child) || child === element) {
+        return false;
+      }
+      return ownerWindow(child).getComputedStyle(child).display !== "none";
+    }
+  );
+  const siblingWidth = siblings.reduce((width, sibling) => {
+    return width + getMeasuredWidth(sibling);
+  }, 0);
+  const gapCount = siblings.length > 0 ? siblings.length : 0;
+  const availableWidth = Math.max(
+    0,
+    parentWidth - siblingWidth - gapCount * parentGap
+  );
+  return availableWidth;
+}
+function isSelectedValueHidden(selected, hiddenValues) {
+  return selected !== void 0 && hiddenValues.includes(selected);
+}
+function getPinnedSelectionValue(selected, selectedIsHidden, pinnedSelectionRef) {
+  return selectedIsHidden ? selected : pinnedSelectionRef.current;
+}
+function useOverflow({
+  container,
+  overflowButton,
+  tabs,
+  selected,
+  menuOpen
+}) {
+  const orderedValues = useMemo(() => tabs.map((tab) => tab.value), [tabs]);
+  const measurementInputKey = useMemo(() => {
+    return tabs.map((tab) => `${tab.value}:${tab.width.toFixed(2)}`).join("\0");
+  }, [tabs]);
+  const [visibleCount, setVisibleCount] = useState(0);
+  const [isMeasuring, setIsMeasuring] = useState(true);
+  const [measureRetryVersion, setMeasureRetryVersion] = useState(0);
+  const pinnedSelectionRef = useRef(selected);
+  const previousOverflowButtonWidthRef = useRef(0);
+  const previousMeasurementInputKeyRef = useRef(measurementInputKey);
+  const previousMenuOpenRef = useRef(menuOpen);
+  const measureRetryFrameRef = useRef(null);
+  const measureRetryCountRef = useRef(0);
+  const baseHiddenValues = orderedValues.slice(visibleCount);
+  const selectedIsHidden = isSelectedValueHidden(selected, baseHiddenValues);
+  const pinnedValue = getPinnedSelectionValue(
+    selected,
+    selectedIsHidden,
+    pinnedSelectionRef
+  );
+  const getCurrentPinnedValue = useCallback(() => {
+    return getPinnedSelectionValue(
+      selected,
+      selectedIsHidden,
+      pinnedSelectionRef
+    );
+  }, [selected, selectedIsHidden]);
+  const markMeasurementStale = useCallback(() => {
+    setIsMeasuring(true);
+  }, []);
+  const measureVisibleCount = useCallback(
+    (pinnedValue2) => {
+      const element = container.current;
+      if (!element) {
+        return null;
+      }
+      const maxWidth = getAvailableWidth(element);
+      const styles = ownerWindow(element).getComputedStyle(element);
+      const gap = getGapValue(styles);
+      const overflowWidth = overflowButton.current ? overflowButton.current.offsetWidth + gap : 0;
+      const measuredTabs = tabs.map((tab) => ({
+        value: tab.value,
+        width: getTabWidth(tab)
+      }));
+      return calculateVisibleCount({
+        gap,
+        maxWidth,
+        overflowWidth,
+        pinnedValue: pinnedValue2,
+        tabs: measuredTabs
+      });
+    },
+    [container, overflowButton, tabs]
+  );
+  const clearMeasureRetry = useCallback(() => {
+    const element = container.current;
+    const frame = measureRetryFrameRef.current;
+    if (element && frame != null) {
+      ownerWindow(element).cancelAnimationFrame(frame);
+    }
+    measureRetryFrameRef.current = null;
+    measureRetryCountRef.current = 0;
+  }, [container]);
+  useEffect(() => {
+    return clearMeasureRetry;
+  }, [clearMeasureRetry]);
+  useIsomorphicLayoutEffect(() => {
+    if (selected !== void 0 && selectedIsHidden) {
+      pinnedSelectionRef.current = selected;
+      const nextVisibleCount = measureVisibleCount(selected);
+      if (nextVisibleCount == null) {
+        markMeasurementStale();
+        return;
+      }
+      if (nextVisibleCount !== visibleCount) {
+        setVisibleCount(nextVisibleCount);
+      }
+      if (isMeasuring) {
+        setIsMeasuring(false);
+      }
+    }
+  }, [
+    isMeasuring,
+    markMeasurementStale,
+    measureVisibleCount,
+    selected,
+    selectedIsHidden,
+    visibleCount
+  ]);
+  useEffect(() => {
+    const element = container.current;
+    if (!element || menuOpen || isMeasuring) {
+      return;
+    }
+    const observedElements = [element];
+    const parent = element.parentElement;
+    if (parent) {
+      observedElements.push(parent);
+      for (const child of Array.from(parent.children)) {
+        if (isHTMLElement(child) && child !== element) {
+          observedElements.push(child);
+        }
+      }
+    }
+    const widths = seedWidthMap(observedElements);
+    const resizeObserverCtor = ownerWindow(element).ResizeObserver;
+    if (!resizeObserverCtor) {
+      return;
+    }
+    const resizeObserver = new resizeObserverCtor(
+      (entries) => {
+        for (const entry of entries) {
+          if (!isHTMLElement(entry.target)) {
+            continue;
+          }
+          const nextWidth = entry.contentRect.width;
+          if (updateWidthMap(widths, entry.target, nextWidth)) {
+            const nextVisibleCount = measureVisibleCount(
+              getCurrentPinnedValue()
+            );
+            if (nextVisibleCount != null && nextVisibleCount === visibleCount) {
+              continue;
+            }
+            markMeasurementStale();
+            return;
+          }
+        }
+      }
+    );
+    for (const observedElement of observedElements) {
+      resizeObserver.observe(observedElement);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    container,
+    getCurrentPinnedValue,
+    isMeasuring,
+    markMeasurementStale,
+    measureVisibleCount,
+    menuOpen,
+    visibleCount
+  ]);
+  useIsomorphicLayoutEffect(() => {
+    if (previousMenuOpenRef.current && !menuOpen) {
+      markMeasurementStale();
+    }
+    previousMenuOpenRef.current = menuOpen;
+  }, [markMeasurementStale, menuOpen]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    const nextOverflowButtonWidth = ((_a = overflowButton.current) == null ? void 0 : _a.offsetWidth) ?? 0;
+    if (previousOverflowButtonWidthRef.current === nextOverflowButtonWidth) {
+      return;
+    }
+    previousOverflowButtonWidthRef.current = nextOverflowButtonWidth;
+    if (visibleCount < tabs.length) {
+      markMeasurementStale();
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (previousMeasurementInputKeyRef.current !== measurementInputKey) {
+      previousMeasurementInputKeyRef.current = measurementInputKey;
+      markMeasurementStale();
+    }
+  }, [markMeasurementStale, measurementInputKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (!isMeasuring || menuOpen) {
+      return;
+    }
+    const nextVisibleCount = measureVisibleCount(getCurrentPinnedValue());
+    if (nextVisibleCount == null) {
+      if (measureRetryFrameRef.current != null) {
+        return;
+      }
+      const element = container.current;
+      if (!element || getMeasuredWidth(element) <= MIN_TRUSTED_TAB_WIDTH) {
+        measureRetryCountRef.current = 0;
+        return;
+      }
+      if (measureRetryCountRef.current >= 5) {
+        return;
+      }
+      measureRetryCountRef.current += 1;
+      measureRetryFrameRef.current = ownerWindow(element).requestAnimationFrame(
+        () => {
+          measureRetryFrameRef.current = null;
+          setMeasureRetryVersion((currentVersion) => currentVersion + 1);
+        }
+      );
+      return;
+    }
+    clearMeasureRetry();
+    setVisibleCount(nextVisibleCount);
+    setIsMeasuring(false);
+  }, [
+    clearMeasureRetry,
+    container.current,
+    getCurrentPinnedValue,
+    isMeasuring,
+    measureRetryVersion,
+    measureVisibleCount,
+    menuOpen
+  ]);
+  const { visibleValues, hiddenValues } = partitionVisibleValues(
+    orderedValues,
+    visibleCount,
+    pinnedValue
+  );
+  return [visibleValues, hiddenValues, isMeasuring];
+}
+
+export { useOverflow };
+//# sourceMappingURL=useOverflow.js.map