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

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

@@ -20,39 +20,54 @@ const TabNextPanel = forwardRef(
     });
     const id = useId(idProp);
     const { registerPanel, getTabId, selected } = useTabsNext();
+    const hidden = selected !== value;
     const panelRef = useRef(null);
     const handleRef = useForkRef(panelRef, ref);
     useIsomorphicLayoutEffect(() => {
-      if (value && id) {
+      if (id) {
         return registerPanel(id, value);
       }
     }, [value, id, registerPanel]);
     const [hasFocusableChildren, setHasFocusableChildren] = useState(false);
     useEffect(() => {
-      if (!panelRef.current) return;
+      const element = panelRef.current;
+      const mutationObserverCtor = targetWindow == null ? void 0 : targetWindow.MutationObserver;
+      if (!element || hidden) return;
+      let rafId = null;
       const detectFocusableChildren = () => {
-        requestAnimationFrame(() => {
-          if (!panelRef.current) return;
-          const elements = tabbable(panelRef.current);
-          setHasFocusableChildren(elements.length > 0);
+        rafId = null;
+        const elements = tabbable(element);
+        const nextHasFocusableChildren = elements.length > 0;
+        setHasFocusableChildren((prev) => {
+          return prev === nextHasFocusableChildren ? prev : nextHasFocusableChildren;
         });
       };
-      const observer = new MutationObserver(() => {
-        detectFocusableChildren();
-      });
-      requestAnimationFrame(() => {
-        detectFocusableChildren();
-      });
-      observer.observe(panelRef.current, {
+      const scheduleDetectFocusableChildren = () => {
+        if (rafId != null && targetWindow) {
+          targetWindow.cancelAnimationFrame(rafId);
+        }
+        if (!(targetWindow == null ? void 0 : targetWindow.requestAnimationFrame)) {
+          detectFocusableChildren();
+          return;
+        }
+        rafId = targetWindow.requestAnimationFrame(detectFocusableChildren);
+      };
+      const observer = mutationObserverCtor ? new mutationObserverCtor(() => {
+        scheduleDetectFocusableChildren();
+      }) : null;
+      scheduleDetectFocusableChildren();
+      observer == null ? void 0 : observer.observe(element, {
         childList: true,
         subtree: true,
         attributes: true
       });
       return () => {
-        observer.disconnect();
+        observer == null ? void 0 : observer.disconnect();
+        if (rafId != null && targetWindow) {
+          targetWindow.cancelAnimationFrame(rafId);
+        }
       };
-    }, []);
-    const hidden = selected !== value;
+    }, [hidden, targetWindow]);
     const tabId = getTabId(value);
     return /* @__PURE__ */ jsx(
       "div",

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

@@ -1 +1 @@
-{"version":3,"file":"TabNextPanel.js","sources":["../src/tabs-next/TabNextPanel.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport tabPanelCss from \"./TabNextPanel.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the panel, this should map to the corresponding tab.\n   */\n  value: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextPanel\");\n\nexport const TabNextPanel = forwardRef<HTMLDivElement, TabNextPanelProps>(\n  function TabNextPanel(props, ref) {\n    const { className, children, id: idProp, value, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next-panel\",\n      css: tabPanelCss,\n      window: targetWindow,\n    });\n    const id = useId(idProp);\n    const { registerPanel, getTabId, selected } = useTabsNext();\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(panelRef, ref);\n\n    useIsomorphicLayoutEffect(() => {\n      if (value && id) {\n        return registerPanel(id, value);\n      }\n    }, [value, id, registerPanel]);\n\n    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);\n    useEffect(() => {\n      if (!panelRef.current) return;\n\n      const detectFocusableChildren = () => {\n        requestAnimationFrame(() => {\n          if (!panelRef.current) return;\n          const elements = tabbable(panelRef.current);\n          setHasFocusableChildren(elements.length > 0);\n        });\n      };\n\n      const observer = new MutationObserver(() => {\n        detectFocusableChildren();\n      });\n\n      requestAnimationFrame(() => {\n        detectFocusableChildren();\n      });\n\n      observer.observe(panelRef.current, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      });\n\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const hidden = selected !== value;\n    const tabId = getTabId(value);\n\n    return (\n      <div\n        id={id}\n        ref={handleRef}\n        role=\"tabpanel\"\n        aria-labelledby={tabId}\n        className={clsx(withBaseName(), className)}\n        hidden={hidden || undefined}\n        tabIndex={hidden || hasFocusableChildren ? undefined : 0}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["TabNextPanel","tabPanelCss"],"mappings":";;;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM,EAAE,WAAW,QAAA,EAAU,EAAA,EAAI,QAAQ,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAC5D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,aAAA,EAAe,QAAA,EAAU,QAAA,KAAa,WAAA,EAAY;AAE1D,IAAA,MAAM,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,SAAS,EAAA,EAAI;AACf,QAAA,OAAO,aAAA,CAAc,IAAI,KAAK,CAAA;AAAA,MAChC;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,EAAA,EAAI,aAAa,CAAC,CAAA;AAE7B,IAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,SAAS,KAAK,CAAA;AACtE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,OAAA,EAAS;AAEvB,MAAA,MAAM,0BAA0B,MAAM;AACpC,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAA,IAAI,CAAC,SAAS,OAAA,EAAS;AACvB,UAAA,MAAM,QAAA,GAAW,QAAA,CAAS,QAAA,CAAS,OAAO,CAAA;AAC1C,UAAA,uBAAA,CAAwB,QAAA,CAAS,SAAS,CAAC,CAAA;AAAA,QAC7C,CAAC,CAAA;AAAA,MACH,CAAA;AAEA,MAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM;AAC1C,QAAA,uBAAA,EAAwB;AAAA,MAC1B,CAAC,CAAA;AAED,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,uBAAA,EAAwB;AAAA,MAC1B,CAAC,CAAA;AAED,MAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,OAAA,EAAS;AAAA,QACjC,SAAA,EAAW,IAAA;AAAA,QACX,OAAA,EAAS,IAAA;AAAA,QACT,UAAA,EAAY;AAAA,OACb,CAAA;AAED,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,UAAA,EAAW;AAAA,MACtB,CAAA;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,SAAS,QAAA,KAAa,KAAA;AAC5B,IAAA,MAAM,KAAA,GAAQ,SAAS,KAAK,CAAA;AAE5B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,GAAA,EAAK,SAAA;AAAA,QACL,IAAA,EAAK,UAAA;AAAA,QACL,iBAAA,EAAiB,KAAA;AAAA,QACjB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,QAAQ,MAAA,IAAU,MAAA;AAAA,QAClB,QAAA,EAAU,MAAA,IAAU,oBAAA,GAAuB,MAAA,GAAY,CAAA;AAAA,QACtD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"TabNextPanel.js","sources":["../src/tabs-next/TabNextPanel.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport tabPanelCss from \"./TabNextPanel.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the panel. This should map to the corresponding tab and must\n   * be unique within a `TabsNext` instance.\n   */\n  value: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextPanel\");\n\nexport const TabNextPanel = forwardRef<HTMLDivElement, TabNextPanelProps>(\n  function TabNextPanel(props, ref) {\n    const { className, children, id: idProp, value, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next-panel\",\n      css: tabPanelCss,\n      window: targetWindow,\n    });\n    const id = useId(idProp);\n    const { registerPanel, getTabId, selected } = useTabsNext();\n    const hidden = selected !== value;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(panelRef, ref);\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerPanel(id, value);\n      }\n    }, [value, id, registerPanel]);\n\n    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);\n    useEffect(() => {\n      const element = panelRef.current;\n      const mutationObserverCtor = (\n        targetWindow as\n          | (Window & { MutationObserver?: typeof MutationObserver })\n          | undefined\n      )?.MutationObserver;\n      if (!element || hidden) return;\n\n      let rafId: number | null = null;\n\n      const detectFocusableChildren = () => {\n        rafId = null;\n        const elements = tabbable(element);\n        const nextHasFocusableChildren = elements.length > 0;\n        setHasFocusableChildren((prev) => {\n          return prev === nextHasFocusableChildren\n            ? prev\n            : nextHasFocusableChildren;\n        });\n      };\n\n      const scheduleDetectFocusableChildren = () => {\n        if (rafId != null && targetWindow) {\n          targetWindow.cancelAnimationFrame(rafId);\n        }\n\n        if (!targetWindow?.requestAnimationFrame) {\n          detectFocusableChildren();\n          return;\n        }\n\n        rafId = targetWindow.requestAnimationFrame(detectFocusableChildren);\n      };\n\n      const observer = mutationObserverCtor\n        ? new mutationObserverCtor(() => {\n            scheduleDetectFocusableChildren();\n          })\n        : null;\n\n      scheduleDetectFocusableChildren();\n\n      observer?.observe(element, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      });\n\n      return () => {\n        observer?.disconnect();\n        if (rafId != null && targetWindow) {\n          targetWindow.cancelAnimationFrame(rafId);\n        }\n      };\n    }, [hidden, targetWindow]);\n\n    const tabId = getTabId(value);\n\n    return (\n      <div\n        id={id}\n        ref={handleRef}\n        role=\"tabpanel\"\n        aria-labelledby={tabId}\n        className={clsx(withBaseName(), className)}\n        hidden={hidden || undefined}\n        tabIndex={hidden || hasFocusableChildren ? undefined : 0}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["TabNextPanel","tabPanelCss"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useRef } from 'react';
+import { useTabListLayout } from './TabListLayoutContext.js';
 import { useTabNext } from './TabNextContext.js';
 import css_248z from './TabNextTrigger.css.js';
 import { useTabsNext } from './TabsNextContext.js';
@@ -20,37 +21,135 @@ function getAriaDescription(count) {
 }
 const ariaActionSupported = typeof HTMLElement !== "undefined" && "ariaActions" in HTMLElement.prototype;
 const TabNextTrigger = forwardRef(function TabNextTrigger2(props, ref) {
-  const { children, onClick, onKeyDown, ...rest } = props;
+  const { children, onClick, onKeyDown, onFocus, ...rest } = props;
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-tab-next-trigger",
     css: css_248z,
     window: targetWindow
   });
-  const { setSelected, registerTab, getPanelId } = useTabsNext();
+  const {
+    setSelected,
+    registerTab,
+    updateTab,
+    updateRenderedTab,
+    getRenderedTabOrder,
+    getPanelId,
+    getTabId,
+    selected: selectedValue,
+    activeTab,
+    menuOpen,
+    setMenuOpen
+  } = useTabsNext();
   const { selected, value, focused, disabled, tabId, actions } = useTabNext();
+  const tabListLayout = useTabListLayout();
   const tabRef = useRef(null);
+  const location = (tabListLayout == null ? void 0 : tabListLayout.getLocation(value)) ?? "main";
+  const selectionSource = location === "overflow" ? "overflow" : "main";
+  const hidden = location === "hidden";
+  const overflowOpen = location === "overflow" && menuOpen;
+  const renderOrder = getRenderedTabOrder(value);
+  const order = renderOrder >= 0 ? renderOrder : void 0;
+  const initialLocationRef = useRef(location);
+  const initialOrderRef = useRef(order);
   const id = tabId;
   useIsomorphicLayoutEffect(() => {
-    if (value && id && tabRef.current) {
-      return registerTab({ id, value, element: tabRef.current });
+    if (id && tabRef.current) {
+      const item = {
+        id,
+        value,
+        element: tabRef.current,
+        location: initialLocationRef.current,
+        order: initialOrderRef.current
+      };
+      return registerTab(item);
     }
-  }, [value, id, registerTab]);
+  }, [id, registerTab, value]);
+  useIsomorphicLayoutEffect(() => {
+    if (!id) {
+      return;
+    }
+    updateTab(id, {
+      element: tabRef.current,
+      location,
+      order
+    });
+  }, [id, location, order, updateTab]);
+  useIsomorphicLayoutEffect(() => {
+    updateRenderedTab(value, {
+      trigger: tabRef.current
+    });
+  }, [updateRenderedTab, value]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (!overflowOpen || (tabListLayout == null ? void 0 : tabListLayout.overflowActiveValue) !== value) {
+      return;
+    }
+    (_a = tabRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+  }, [overflowOpen, tabListLayout == null ? void 0 : tabListLayout.overflowActiveValue, value]);
   const handleClick = (event) => {
     onClick == null ? void 0 : onClick(event);
-    setSelected(event, value);
+    setSelected(event, value, selectionSource);
   };
   const handleKeyDown = (event) => {
     onKeyDown == null ? void 0 : onKeyDown(event);
+    if (location === "overflow" && event.key === "Tab" && event.shiftKey) {
+      event.preventDefault();
+      setMenuOpen(false);
+      const doc = event.currentTarget.ownerDocument;
+      const overflowTrigger = doc.querySelector(
+        "[data-overflowbutton]"
+      );
+      const scheduleFocus = targetWindow == null ? void 0 : targetWindow.requestAnimationFrame;
+      if (scheduleFocus) {
+        scheduleFocus(() => overflowTrigger == null ? void 0 : overflowTrigger.focus({ preventScroll: true }));
+      } else {
+        queueMicrotask(() => overflowTrigger == null ? void 0 : overflowTrigger.focus({ preventScroll: true }));
+      }
+      return;
+    }
+    if (location === "overflow" && tabListLayout && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End")) {
+      const moved = tabListLayout.moveOverflowFocus(event.key, value);
+      if (moved) {
+        event.preventDefault();
+        return;
+      }
+    }
+    if (disabled) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+      }
+      return;
+    }
     if (event.key === "Enter" || event.key === " ") {
-      setSelected(event, value);
+      event.preventDefault();
+      setSelected(event, value, selectionSource);
+    }
+  };
+  const handleFocus = (event) => {
+    var _a;
+    onFocus == null ? void 0 : onFocus(event);
+    if (id) {
+      activeTab.current = { value, id };
+    }
+    if (location === "overflow") {
+      tabListLayout == null ? void 0 : tabListLayout.setOverflowActiveValue(value);
     }
+    (_a = event.currentTarget.parentElement) == null ? void 0 : _a.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
   };
   const handleRef = useForkRef(tabRef, ref);
   const panelId = getPanelId(value);
   const ariaActionsProps = ariaActionSupported ? {
     "aria-actions": clsx(actions) || void 0
   } : {};
+  const active = location === "overflow" && (tabListLayout == null ? void 0 : tabListLayout.overflowActiveValue) === value;
+  const hasSelectedTab = selectedValue !== void 0 && getTabId(selectedValue) != null;
+  const fallbackTabStop = !hasSelectedTab && location === "main" && order === 0;
+  const isTabStop = !hidden && (focused || selected || active || fallbackTabStop);
+  const shouldHandleKeyDown = location === "overflow" || !disabled;
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -59,14 +158,16 @@ const TabNextTrigger = forwardRef(function TabNextTrigger2(props, ref) {
       "aria-controls": panelId,
       ...ariaActionsProps,
       "aria-description": getAriaDescription(actions.length),
-      tabIndex: focused || selected ? void 0 : -1,
+      tabIndex: isTabStop ? 0 : -1,
       role: "tab",
       type: "button",
       onClick: !disabled ? handleClick : void 0,
-      onKeyDown: !disabled ? handleKeyDown : void 0,
+      onKeyDown: shouldHandleKeyDown ? handleKeyDown : void 0,
+      onFocus: handleFocus,
       className: withBaseName(),
       id,
       ref: handleRef,
+      "data-value": value,
       ...rest,
       children
     }

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

@@ -1 +1 @@
-{"version":3,"file":"TabNextTrigger.js","sources":["../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"id\"> {}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n  if (count < 1) {\n    return undefined;\n  }\n\n  if (count === 1) {\n    return \"1 action available\";\n  }\n\n  return `${count} actions available`;\n}\n\nconst ariaActionSupported =\n  typeof HTMLElement !== \"undefined\" && \"ariaActions\" in HTMLElement.prototype;\n\nexport const TabNextTrigger = forwardRef<\n  HTMLButtonElement,\n  TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n  const { children, onClick, onKeyDown, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next-trigger\",\n    css: tabTriggerCss,\n    window: targetWindow,\n  });\n\n  const { setSelected, registerTab, getPanelId } = useTabsNext();\n  const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n  const tabRef = useRef<HTMLButtonElement>(null);\n\n  const id = tabId;\n\n  useIsomorphicLayoutEffect(() => {\n    if (value && id && tabRef.current) {\n      return registerTab({ id, value, element: tabRef.current });\n    }\n  }, [value, id, registerTab]);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    setSelected(event, value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      setSelected(event, value);\n    }\n  };\n\n  const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n  const panelId = getPanelId(value);\n\n  // Applying aria-actions this way avoid React warnings about unknown props\n  const ariaActionsProps = ariaActionSupported\n    ? {\n        \"aria-actions\": clsx(actions) || undefined,\n      }\n    : {};\n\n  return (\n    <button\n      aria-selected={selected}\n      aria-disabled={disabled}\n      aria-controls={panelId}\n      {...ariaActionsProps}\n      aria-description={getAriaDescription(actions.length)}\n      tabIndex={focused || selected ? undefined : -1}\n      role=\"tab\"\n      type=\"button\"\n      onClick={!disabled ? handleClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n      className={withBaseName()}\n      id={id}\n      ref={handleRef}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["TabNextTrigger","tabTriggerCss"],"mappings":"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"}
+{"version":3,"file":"TabNextTrigger.js","sources":["../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport { useTabListLayout } from \"./TabListLayoutContext\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"id\"> {}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n  if (count < 1) {\n    return undefined;\n  }\n\n  if (count === 1) {\n    return \"1 action available\";\n  }\n\n  return `${count} actions available`;\n}\n\nconst ariaActionSupported =\n  typeof HTMLElement !== \"undefined\" && \"ariaActions\" in HTMLElement.prototype;\n\nexport const TabNextTrigger = forwardRef<\n  HTMLButtonElement,\n  TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n  const { children, onClick, onKeyDown, onFocus, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next-trigger\",\n    css: tabTriggerCss,\n    window: targetWindow,\n  });\n\n  const {\n    setSelected,\n    registerTab,\n    updateTab,\n    updateRenderedTab,\n    getRenderedTabOrder,\n    getPanelId,\n    getTabId,\n    selected: selectedValue,\n    activeTab,\n    menuOpen,\n    setMenuOpen,\n  } = useTabsNext();\n  const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n  const tabListLayout = useTabListLayout();\n\n  const tabRef = useRef<HTMLButtonElement>(null);\n\n  const location = tabListLayout?.getLocation(value) ?? \"main\";\n  const selectionSource = location === \"overflow\" ? \"overflow\" : \"main\";\n  const hidden = location === \"hidden\";\n  const overflowOpen = location === \"overflow\" && menuOpen;\n  const renderOrder = getRenderedTabOrder(value);\n  const order = renderOrder >= 0 ? renderOrder : undefined;\n  const initialLocationRef = useRef(location);\n  const initialOrderRef = useRef(order);\n\n  const id = tabId;\n\n  useIsomorphicLayoutEffect(() => {\n    if (id && tabRef.current) {\n      const item = {\n        id,\n        value,\n        element: tabRef.current,\n        location: initialLocationRef.current,\n        order: initialOrderRef.current,\n      };\n\n      return registerTab(item);\n    }\n  }, [id, registerTab, value]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!id) {\n      return;\n    }\n\n    updateTab(id, {\n      element: tabRef.current,\n      location,\n      order,\n    });\n  }, [id, location, order, updateTab]);\n\n  useIsomorphicLayoutEffect(() => {\n    updateRenderedTab(value, {\n      trigger: tabRef.current,\n    });\n  }, [updateRenderedTab, value]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!overflowOpen || tabListLayout?.overflowActiveValue !== value) {\n      return;\n    }\n\n    tabRef.current?.focus({ preventScroll: true });\n  }, [overflowOpen, tabListLayout?.overflowActiveValue, value]);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    setSelected(event, value, selectionSource);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (location === \"overflow\" && event.key === \"Tab\" && event.shiftKey) {\n      event.preventDefault();\n      setMenuOpen(false);\n\n      const doc = event.currentTarget.ownerDocument;\n      const overflowTrigger = doc.querySelector<HTMLElement>(\n        \"[data-overflowbutton]\",\n      );\n      const scheduleFocus = targetWindow?.requestAnimationFrame;\n\n      if (scheduleFocus) {\n        scheduleFocus(() => overflowTrigger?.focus({ preventScroll: true }));\n      } else {\n        queueMicrotask(() => overflowTrigger?.focus({ preventScroll: true }));\n      }\n\n      return;\n    }\n\n    if (\n      location === \"overflow\" &&\n      tabListLayout &&\n      (event.key === \"ArrowDown\" ||\n        event.key === \"ArrowUp\" ||\n        event.key === \"Home\" ||\n        event.key === \"End\")\n    ) {\n      const moved = tabListLayout.moveOverflowFocus(event.key, value);\n      if (moved) {\n        event.preventDefault();\n        return;\n      }\n    }\n\n    if (disabled) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n      }\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setSelected(event, value, selectionSource);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    onFocus?.(event);\n\n    if (id) {\n      activeTab.current = { value, id };\n    }\n\n    if (location === \"overflow\") {\n      tabListLayout?.setOverflowActiveValue(value);\n    }\n\n    // Ensures the associated tab is in view.\n    event.currentTarget.parentElement?.scrollIntoView({\n      block: \"nearest\",\n      inline: \"nearest\",\n    });\n  };\n\n  const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n  const panelId = getPanelId(value);\n\n  // Applying aria-actions this way avoids React warnings about unknown props\n  const ariaActionsProps = ariaActionSupported\n    ? {\n        \"aria-actions\": clsx(actions) || undefined,\n      }\n    : {};\n\n  const active =\n    location === \"overflow\" && tabListLayout?.overflowActiveValue === value;\n  const hasSelectedTab =\n    selectedValue !== undefined && getTabId(selectedValue) != null;\n  const fallbackTabStop = !hasSelectedTab && location === \"main\" && order === 0;\n  const isTabStop =\n    !hidden && (focused || selected || active || fallbackTabStop);\n  const shouldHandleKeyDown = location === \"overflow\" || !disabled;\n\n  return (\n    <button\n      aria-selected={selected}\n      aria-disabled={disabled}\n      aria-controls={panelId}\n      {...ariaActionsProps}\n      aria-description={getAriaDescription(actions.length)}\n      tabIndex={isTabStop ? 0 : -1}\n      role=\"tab\"\n      type=\"button\"\n      onClick={!disabled ? handleClick : undefined}\n      onKeyDown={shouldHandleKeyDown ? handleKeyDown : undefined}\n      onFocus={handleFocus}\n      className={withBaseName()}\n      id={id}\n      ref={handleRef}\n      data-value={value}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["TabNextTrigger","tabTriggerCss"],"mappings":"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"}

package/dist-es/tabs-next/TabOverflowList.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list[data-hidden=\"true\"] {\n  opacity: 0;\n  pointer-events: none;\n  /* Avoid causing page to overflow with the hidden elements */\n  width: 1px;\n  height: 1px;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n@supports selector(:has(*)) {\n  .saltTabListNext:has([data-overflowbutton]) .saltTabOverflow-list .saltTabNext {\n    max-width: unset;\n  }\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
+var css_248z = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n  z-index: var(--salt-zIndex-flyover);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n@supports selector(:has(*)) {\n  .saltTabListNext:has([data-overflowbutton]) .saltTabOverflow-list .saltTabNext {\n    max-width: unset;\n  }\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TabOverflowList.css.js.map

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

@@ -1,20 +1,25 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { offset, size, flip, useInteractions, useDismiss, FloatingTree } from '@floating-ui/react';
-import { makePrefixer, useIcon, useFloatingUI, useForkRef, useId, Button } from '@salt-ds/core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { offset, size, flip, shift, useInteractions, useClick, useDismiss } from '@floating-ui/react';
+import { makePrefixer, useIcon, useFloatingUI, useForkRef, useFloatingComponent, useId, useIsomorphicLayoutEffect, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { forwardRef, useRef, useCallback, Children } from 'react';
-import { useFocusOutside } from './hooks/useFocusOutside.js';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useEffect } from 'react';
+import { isHTMLElement } from './domUtils.js';
 import css_248z from './TabOverflowList.css.js';
+import { TabSlot } from './TabSlot.js';
+import { useTabsNext } from './TabsNextContext.js';
+import { seedWidthMap, getMeasuredWidth, updateWidthMap } from './widthMeasurement.js';
 
 const withBaseName = makePrefixer("saltTabOverflow");
 const TabOverflowList = forwardRef(
   function TabOverflowList2(props, ref) {
+    var _a, _b;
     const {
       buttonRef,
-      tabstripRef,
-      children,
-      isMeasuring,
+      className,
+      hiddenValues,
+      order,
       open,
       setOpen,
       ...rest
@@ -25,104 +30,203 @@ const TabOverflowList = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const overflowRef = useRef(null);
+    const hadOverflowItemsRef = useRef(false);
     const { OverflowIcon } = useIcon();
-    const { refs, x, y, strategy, context } = useFloatingUI({
+    const { registerTab, updateTab, activeTab } = useTabsNext();
+    const { refs, x, y, strategy, context, elements } = useFloatingUI({
       open,
       onOpenChange(open2, _, reason) {
+        var _a2;
+        setOpen(open2);
         if (reason === "escape-key") {
-          queueMicrotask(() => {
-            var _a, _b, _c;
-            const allTabs = ((_a = tabstripRef.current) == null ? void 0 : _a.querySelectorAll(
-              '[role="tab"]:not([aria-hidden])'
-            )) ?? [];
-            const numberOfTabsInOverflow = ((_b = listRef.current) == null ? void 0 : _b.querySelectorAll('[role="tab"]').length) ?? 0;
-            (_c = allTabs[allTabs.length - numberOfTabsInOverflow - 1]) == null ? void 0 : _c.focus({
-              preventScroll: true
-            });
-          });
+          (_a2 = overflowRef.current) == null ? void 0 : _a2.focus();
         }
-        setOpen(open2);
       },
       placement: "bottom-start",
       middleware: [
         offset(1),
         size({
-          apply({ elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
+          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()
+        flip(),
+        shift({
+          padding: 8
+        })
       ]
     });
-    const { getFloatingProps } = useInteractions([useDismiss(context)]);
-    const rootRef = useRef(null);
-    const handleRootRef = useForkRef(rootRef, ref);
-    const listRef = useRef(null);
-    const handleListRef = useForkRef(listRef, refs.setFloating);
-    const handleFocusOutside = useCallback(() => {
-      setOpen(false);
-    }, [setOpen]);
-    useFocusOutside(
-      rootRef,
-      handleFocusOutside,
-      open,
-      "[data-floating-ui-portal]"
-    );
-    const handleClick = () => {
-      var _a, _b;
-      if (!open) {
-        (_b = (_a = listRef.current) == null ? void 0 : _a.querySelectorAll('[role="tab"]')[0]) == null ? void 0 : _b.focus({ preventScroll: true });
-      } else {
-        setOpen(false);
-      }
-    };
-    const handleFocus = () => {
-      setOpen(true);
-    };
+    const { getFloatingProps, getReferenceProps } = useInteractions([
+      useClick(context),
+      useDismiss(context)
+    ]);
+    const handleListRef = useForkRef(ref, refs.setFloating);
     const handleButtonRef = useForkRef(
       buttonRef,
       refs.setReference
     );
-    const listId = useId();
-    const childCount = Children.count(children);
-    if (childCount === 0 && !isMeasuring) return null;
-    return /* @__PURE__ */ jsxs("div", { className: withBaseName(), ref: handleRootRef, "data-overflow": true, children: [
+    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,
-          tabIndex: -1,
           appearance: "transparent",
           sentiment: "neutral",
-          onClick: handleClick,
-          ref: handleButtonRef,
-          "aria-label": `Overflow menu. ${childCount} tabs hidden`,
+          ...getReferenceProps({
+            onFocus: handleFocus
+          }),
+          ref: handleRef,
+          "aria-label": "Overflow",
           "aria-expanded": open,
-          "aria-controls": listId,
-          "aria-hidden": "true",
+          "aria-controls": overlayId,
           role: "tab",
-          "aria-haspopup": true,
+          tabIndex: -1,
           ...rest,
           children: /* @__PURE__ */ jsx(OverflowIcon, { "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
-        "div",
+      /* @__PURE__ */ jsx(
+        FloatingComponent,
         {
           ref: handleListRef,
           ...getFloatingProps({
-            onFocus: handleFocus,
-            role: "presentation"
+            id: overlayId,
+            onKeyDown: handleFloatingKeyDown
           }),
+          focusManagerProps: context ? {
+            context,
+            initialFocus: 0,
+            returnFocus: false,
+            modal: false,
+            closeOnFocusOut: true
+          } : void 0,
           className: withBaseName("list"),
-          "data-hidden": !open,
-          style: open ? { left: x ?? 0, top: y ?? 0, position: strategy } : void 0,
-          id: listId,
-          children: /* @__PURE__ */ jsx("div", { className: withBaseName("listContainer"), children })
+          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))
+            }
+          )
         }
-      ) })
+      )
     ] });
   }
 );