@salt-ds/lab 1.0.0-alpha.96 → 1.0.0-alpha.98

package/dist-cjs/toolbar-next/ToolbarNextOverflow.js

@@ -1,706 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var clsx = require('clsx');
-var computeScrollIntoView = require('compute-scroll-into-view');
-var react = require('react');
-var ReactDOM = require('react-dom');
-var ToolbarContentNext = require('./ToolbarContentNext.js');
-var ToolbarNextOverflow = require('./ToolbarNextOverflow.css.js');
-var ToolbarNextOverflowFloatingBoundary = require('./ToolbarNextOverflowFloatingBoundary.js');
-var toolbarNextKeyboardUtils = require('./toolbarNextKeyboardUtils.js');
-var toolbarNextUtils = require('./toolbarNextUtils.js');
-var useToolbarNextKeyboardNavigation = require('./useToolbarNextKeyboardNavigation.js');
-
-const withBaseName = core.makePrefixer("saltToolbarNextOverflow");
-const toolbarNextStatefulFocusRootSelector = [
-  ".saltComboBox-focused",
-  ".saltDateInput-focused",
-  ".saltInput-focused"
-].join(", ");
-const toolbarNextOverflowFocusScrollRootSelector = [
-  ".saltComboBox",
-  ".saltDateInput",
-  ".saltDropdown",
-  ".saltInput",
-  ".saltSwitch"
-].join(", ");
-function createToolbarNextFocusEvent(eventName, target, relatedTarget) {
-  var _a;
-  const FocusEventCtor = (_a = target.ownerDocument.defaultView) == null ? void 0 : _a.FocusEvent;
-  const eventInit = {
-    bubbles: eventName === "focusout",
-    relatedTarget
-  };
-  return FocusEventCtor ? new FocusEventCtor(eventName, eventInit) : new Event(eventName, eventInit);
-}
-function notifyToolbarNextReparentedFocusLoss(mountNode) {
-  const activeElement = mountNode.ownerDocument.activeElement;
-  if (mountNode.contains(activeElement)) {
-    return;
-  }
-  const staleFocusTargets = Array.from(
-    mountNode.querySelectorAll(
-      toolbarNextStatefulFocusRootSelector
-    )
-  ).map(
-    (root) => root.querySelector("input") ?? root.querySelector(toolbarNextKeyboardUtils.toolbarNextFocusableSelector)
-  ).filter((target) => target != null);
-  for (const target of staleFocusTargets) {
-    const relatedTarget = activeElement instanceof Element ? activeElement : null;
-    target.dispatchEvent(
-      createToolbarNextFocusEvent("blur", target, relatedTarget)
-    );
-    target.dispatchEvent(
-      createToolbarNextFocusEvent("focusout", target, relatedTarget)
-    );
-  }
-}
-function getToolbarNextOverflowFocusScrollTarget(target) {
-  const itemRoot = target.closest(`[${toolbarNextKeyboardUtils.TOOLBAR_NEXT_ITEM_ATTR}]`);
-  const controlRoot = target.closest(
-    toolbarNextOverflowFocusScrollRootSelector
-  );
-  return controlRoot && (itemRoot == null ? void 0 : itemRoot.contains(controlRoot)) ? controlRoot : target;
-}
-function getToolbarNextOverflowPanelInlinePadding(target) {
-  var _a;
-  const panelContent = target.closest(
-    `[${toolbarNextKeyboardUtils.TOOLBAR_NEXT_SCOPE_ROOT_ATTR}]`
-  );
-  const styles = (_a = panelContent == null ? void 0 : panelContent.ownerDocument.defaultView) == null ? void 0 : _a.getComputedStyle(panelContent);
-  return {
-    left: Number.parseFloat((styles == null ? void 0 : styles.paddingLeft) ?? "0") || 0,
-    right: Number.parseFloat((styles == null ? void 0 : styles.paddingRight) ?? "0") || 0
-  };
-}
-function scrollToolbarNextOverflowTargetIntoView(panel, target) {
-  if (!panel || !panel.contains(target)) {
-    return;
-  }
-  const scrollTarget = getToolbarNextOverflowFocusScrollTarget(target);
-  const actions = computeScrollIntoView.compute(scrollTarget, {
-    block: "nearest",
-    boundary: panel,
-    inline: "nearest",
-    scrollMode: "if-needed"
-  });
-  for (const { el, left, top } of actions) {
-    if (el === panel) {
-      const targetRect = scrollTarget.getBoundingClientRect();
-      const panelRect = panel.getBoundingClientRect();
-      const viewportLeft = panelRect.left + panel.clientLeft;
-      const viewportRight = viewportLeft + panel.clientWidth;
-      const padding = getToolbarNextOverflowPanelInlinePadding(scrollTarget);
-      const nextLeft = targetRect.left < viewportLeft + padding.left ? left - padding.left : targetRect.right > viewportRight - padding.right ? left + padding.right : left;
-      el.scrollLeft = Math.max(0, nextLeft);
-    } else {
-      el.scrollLeft = left;
-    }
-    el.scrollTop = top;
-  }
-}
-function canSeedOverflowFocusMemory(focusMemory, group) {
-  return (focusMemory == null ? void 0 : focusMemory.type) === "item" && group.items.some((item) => item.id === focusMemory.itemId);
-}
-function ToolbarNextOverflowItemOwner({
-  host,
-  item
-}) {
-  const targetWindow = window.useWindow();
-  const [mountNode, setMountNode] = react.useState(null);
-  const mainToolbarTabIndexMemoryRef = react.useRef(
-    /* @__PURE__ */ new WeakMap()
-  );
-  const lastOverflowBoundaryKeyRef = react.useRef(null);
-  const currentOverflowBoundaryKey = ToolbarNextOverflowFloatingBoundary.getToolbarNextOverflowBoundaryKey(host);
-  if (host) {
-    lastOverflowBoundaryKeyRef.current = currentOverflowBoundaryKey;
-  }
-  const boundaryKey = host ? currentOverflowBoundaryKey : lastOverflowBoundaryKeyRef.current;
-  core.useIsomorphicLayoutEffect(() => {
-    const nextMountNode = targetWindow == null ? void 0 : targetWindow.document.createElement("div");
-    if (!nextMountNode) {
-      return;
-    }
-    nextMountNode.className = withBaseName("contentHost");
-    setMountNode(nextMountNode);
-    return () => {
-      var _a;
-      (_a = nextMountNode.parentElement) == null ? void 0 : _a.removeChild(nextMountNode);
-    };
-  }, [targetWindow]);
-  core.useIsomorphicLayoutEffect(() => {
-    var _a, _b;
-    if (!mountNode) {
-      return;
-    }
-    if (host) {
-      if (mountNode.parentElement !== host) {
-        host.appendChild(mountNode);
-        notifyToolbarNextReparentedFocusLoss(mountNode);
-      }
-      const isMainToolbarHost = ((_a = host.closest(`[${toolbarNextKeyboardUtils.TOOLBAR_NEXT_SCOPE_ROOT_ATTR}]`)) == null ? void 0 : _a.getAttribute(toolbarNextKeyboardUtils.TOOLBAR_NEXT_SCOPE_ROOT_ATTR)) === "main";
-      if (isMainToolbarHost) {
-        const focusableElements = Array.from(
-          mountNode.querySelectorAll(toolbarNextKeyboardUtils.toolbarNextFocusableSelector)
-        );
-        for (const element of focusableElements) {
-          const rememberedTabIndex = mainToolbarTabIndexMemoryRef.current.get(element);
-          if (rememberedTabIndex !== void 0) {
-            if (rememberedTabIndex == null) {
-              element.removeAttribute("tabindex");
-            } else {
-              element.setAttribute("tabindex", rememberedTabIndex);
-            }
-          }
-        }
-        for (const element of focusableElements) {
-          mainToolbarTabIndexMemoryRef.current.set(
-            element,
-            element.getAttribute("tabindex")
-          );
-        }
-      }
-      return;
-    }
-    notifyToolbarNextReparentedFocusLoss(mountNode);
-    (_b = mountNode.parentElement) == null ? void 0 : _b.removeChild(mountNode);
-  }, [host, mountNode]);
-  if (!mountNode) {
-    return null;
-  }
-  const clonedItem = react.cloneElement(
-    item.element,
-    {
-      [toolbarNextKeyboardUtils.TOOLBAR_NEXT_GROUP_KEY_ATTR]: item.overflowGroupKey,
-      [toolbarNextKeyboardUtils.TOOLBAR_NEXT_ITEM_ATTR]: item.id
-    }
-  );
-  const itemContent = /* @__PURE__ */ jsxRuntime.jsx(ToolbarNextOverflowFloatingBoundary.ToolbarNextOverflowFloatingComponentProvider, { boundaryKey, children: clonedItem });
-  return ReactDOM.createPortal(itemContent, mountNode);
-}
-function ToolbarNextOverflowOwners({
-  hostNodes,
-  items
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-    ToolbarNextOverflowItemOwner,
-    {
-      host: hostNodes[item.id] ?? null,
-      item
-    },
-    item.id
-  )) });
-}
-function cloneDecorations(itemId, decorations, slot) {
-  return react.Children.toArray(decorations).flatMap((decoration) => {
-    if (!react.isValidElement(decoration)) {
-      return [];
-    }
-    return [
-      react.cloneElement(decoration, {
-        key: `${itemId}-${slot}-${String(
-          decoration.key ?? (typeof decoration.type === "string" ? decoration.type : "decoration")
-        )}`
-      })
-    ];
-  });
-}
-function ToolbarNextOverflowTriggerContent({
-  label,
-  named
-}) {
-  const { OverflowIcon } = core.useIcon();
-  if (named) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: label });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(OverflowIcon, { "aria-hidden": true });
-}
-function getOverflowTriggerLabel(group) {
-  return group.named ? `${group.label} overflow. Hidden controls.` : "Overflow. Hidden controls.";
-}
-function ToolbarNextOverflowMenu({
-  focusMemoryRef,
-  getItemHostRef,
-  group,
-  onItemFocus
-}) {
-  var _a, _b;
-  const panelId = core.useId();
-  const [open, setOpen] = react.useState(false);
-  const triggerRef = react.useRef(null);
-  const panelRef = react.useRef(null);
-  const panelContentRef = react.useRef(null);
-  const [panelContentNode, setPanelContentNode] = react.useState(null);
-  const wasOpenRef = react.useRef(false);
-  const focusedOpenPanelRef = react.useRef(false);
-  const openModalityRef = react.useRef(null);
-  const floatingBoundary = ToolbarNextOverflowFloatingBoundary.useToolbarNextOverflowFloatingBoundary();
-  const {
-    focusEntryTarget,
-    handleScopeBlur,
-    handleScopeFocus,
-    handleScopeKeyDown,
-    handleScopePointerDown,
-    rememberedFocusRef
-  } = useToolbarNextKeyboardNavigation.useToolbarNextKeyboardNavigation({
-    includeTabIndexMinusOne: true,
-    items: group.items,
-    scopeRef: panelContentRef
-  });
-  const { refs, x, y, strategy, context, elements } = core.useFloatingUI({
-    open,
-    onOpenChange(nextOpen, _, reason) {
-      setOpen(nextOpen);
-      if (!nextOpen) {
-        openModalityRef.current = null;
-      }
-      if (!nextOpen && reason === "escape-key") {
-        toolbarNextKeyboardUtils.scheduleToolbarNextFocus(triggerRef.current);
-      }
-    },
-    placement: "bottom-end",
-    middleware: [
-      react$1.offset(1),
-      react$1.size({
-        apply({ elements: elements2, availableHeight }) {
-          Object.assign(elements2.floating.style, {
-            maxHeight: `${availableHeight}px`
-          });
-        }
-      }),
-      react$1.flip(),
-      react$1.shift({
-        padding: 8
-      })
-    ]
-  });
-  const { getFloatingProps, getReferenceProps } = react$1.useInteractions([
-    react$1.useClick(context),
-    react$1.useDismiss(context, {
-      escapeKey: false,
-      outsidePress(event) {
-        return !ToolbarNextOverflowFloatingBoundary.isTargetInsideOverflowBoundary(
-          panelContentRef.current,
-          floatingBoundary,
-          group.key,
-          event.target
-        );
-      }
-    })
-  ]);
-  const handleTriggerKeyDown = react.useCallback(
-    (event) => {
-      if (!open && ["Enter", " "].includes(event.key)) {
-        event.preventDefault();
-        openModalityRef.current = "keyboard";
-        setOpen(true);
-        return;
-      }
-      if (open && event.key === "Escape") {
-        event.preventDefault();
-        setOpen(false);
-        toolbarNextKeyboardUtils.scheduleToolbarNextFocus(triggerRef.current);
-      }
-    },
-    [open]
-  );
-  const handleTriggerPointerDown = react.useCallback(
-    (event) => {
-      if (!open && event.button === 0) {
-        openModalityRef.current = "pointer";
-      }
-    },
-    [open]
-  );
-  const handleTriggerMouseDown = react.useCallback(
-    (event) => {
-      if (!open && event.button === 0) {
-        openModalityRef.current = "pointer";
-      }
-    },
-    [open]
-  );
-  const handlePanelKeyDown = react.useCallback((event) => {
-    var _a2;
-    if (event.key === "Tab") {
-      const panelContent = panelContentRef.current;
-      const target = event.target;
-      if (panelContent && target instanceof HTMLElement && toolbarNextKeyboardUtils.shouldToolbarNextPreserveNativeTab(target)) {
-        const focusableElements = toolbarNextKeyboardUtils.getDocumentFocusableElements(
-          panelContent.ownerDocument
-        );
-        const currentIndex = focusableElements.indexOf(target);
-        const nextFocusTarget = focusableElements[currentIndex + (event.shiftKey ? -1 : 1)];
-        if (currentIndex !== -1 && nextFocusTarget && panelContent.contains(nextFocusTarget)) {
-          return;
-        }
-      }
-    }
-    if (event.key === "Tab" && !event.shiftKey) {
-      const toolbarRoot = (_a2 = triggerRef.current) == null ? void 0 : _a2.closest(
-        `[${toolbarNextKeyboardUtils.TOOLBAR_NEXT_SCOPE_ROOT_ATTR}]`
-      );
-      const nextFocusTarget = toolbarRoot ? toolbarNextKeyboardUtils.getToolbarNextTabMoveTarget(toolbarRoot, false) : null;
-      if (nextFocusTarget) {
-        event.preventDefault();
-        event.stopPropagation();
-        setOpen(false);
-        toolbarNextKeyboardUtils.scheduleToolbarNextFocus(nextFocusTarget);
-      }
-      return;
-    }
-    if (event.key === "Tab" && event.shiftKey) {
-      event.preventDefault();
-      event.stopPropagation();
-      setOpen(false);
-      toolbarNextKeyboardUtils.scheduleToolbarNextFocus(triggerRef.current);
-      return;
-    }
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      setOpen(false);
-      toolbarNextKeyboardUtils.scheduleToolbarNextFocus(triggerRef.current);
-    }
-  }, []);
-  const handleTriggerRef = core.useForkRef(
-    triggerRef,
-    refs.setReference
-  );
-  const handlePanelRef = core.useForkRef(panelRef, refs.setFloating);
-  const handlePanelContentRef = core.useForkRef(
-    panelContentRef,
-    setPanelContentNode
-  );
-  const handlePanelFocus = react.useCallback(
-    (event) => {
-      handleScopeFocus(event);
-      const panelContent = panelContentRef.current;
-      const target = event.target;
-      if (!panelContent || !(target instanceof HTMLElement)) {
-        return;
-      }
-      const focusMemory = toolbarNextKeyboardUtils.getToolbarNextFocusMemory(panelContent, target, {
-        includeTabIndexMinusOne: true
-      });
-      if ((focusMemory == null ? void 0 : focusMemory.type) !== "item") {
-        return;
-      }
-      scrollToolbarNextOverflowTargetIntoView(panelRef.current, target);
-      onItemFocus == null ? void 0 : onItemFocus(focusMemory.itemId, focusMemory.controlIndex);
-    },
-    [handleScopeFocus, onItemFocus]
-  );
-  const { Component: FloatingComponent } = core.useFloatingComponent();
-  react.useEffect(() => {
-    if (open && !wasOpenRef.current) {
-      const externalFocusMemory = focusMemoryRef == null ? void 0 : focusMemoryRef.current;
-      if (canSeedOverflowFocusMemory(externalFocusMemory, group)) {
-        rememberedFocusRef.current = externalFocusMemory;
-      }
-      if (openModalityRef.current !== "pointer") {
-        focusEntryTarget();
-      }
-    }
-    wasOpenRef.current = open;
-  }, [focusEntryTarget, focusMemoryRef, group, open, rememberedFocusRef]);
-  react.useEffect(() => {
-    if (!open || !panelContentNode) {
-      return;
-    }
-    const handleFocusIn = (event) => {
-      handlePanelFocus(event);
-    };
-    const handleFocusOut = (event) => {
-      if (ToolbarNextOverflowFloatingBoundary.isTargetInsideOverflowBoundary(
-        panelContentRef.current,
-        floatingBoundary,
-        group.key,
-        event.relatedTarget
-      )) {
-        return;
-      }
-      handleScopeBlur(event);
-    };
-    const handleKeyDownCapture = (event) => {
-      handleScopeKeyDown(event);
-    };
-    const handlePointerDownCapture = (event) => {
-      handleScopePointerDown(event);
-    };
-    const handleKeyDown = (event) => {
-      if (!event.defaultPrevented) {
-        handlePanelKeyDown(event);
-      }
-    };
-    panelContentNode.addEventListener("focusin", handleFocusIn);
-    panelContentNode.addEventListener("focusout", handleFocusOut);
-    panelContentNode.addEventListener("keydown", handleKeyDownCapture, true);
-    panelContentNode.addEventListener(
-      "pointerdown",
-      handlePointerDownCapture,
-      true
-    );
-    panelContentNode.addEventListener("keydown", handleKeyDown);
-    return () => {
-      panelContentNode.removeEventListener("focusin", handleFocusIn);
-      panelContentNode.removeEventListener("focusout", handleFocusOut);
-      panelContentNode.removeEventListener(
-        "keydown",
-        handleKeyDownCapture,
-        true
-      );
-      panelContentNode.removeEventListener(
-        "pointerdown",
-        handlePointerDownCapture,
-        true
-      );
-      panelContentNode.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [
-    handlePanelFocus,
-    handlePanelKeyDown,
-    handleScopeBlur,
-    handleScopeKeyDown,
-    handleScopePointerDown,
-    floatingBoundary,
-    group.key,
-    open,
-    panelContentNode
-  ]);
-  core.useIsomorphicLayoutEffect(() => {
-    if (!open) {
-      focusedOpenPanelRef.current = false;
-      return;
-    }
-    if (!panelContentNode || focusedOpenPanelRef.current || openModalityRef.current === "pointer") {
-      return;
-    }
-    const getPanelFocusables = () => toolbarNextKeyboardUtils.getToolbarNextScopeFocusableElements(panelContentNode, {
-      includeTabIndexMinusOne: true
-    });
-    const focusEntryWhenReady = () => {
-      const panelFocusables = getPanelFocusables();
-      if (panelFocusables.length === 0) {
-        return false;
-      }
-      focusedOpenPanelRef.current = true;
-      focusEntryTarget();
-      return true;
-    };
-    if (focusEntryWhenReady()) {
-      return;
-    }
-    const panelWindow = panelContentNode.ownerDocument.defaultView;
-    const mutationObserverCtor = panelWindow == null ? void 0 : panelWindow.MutationObserver;
-    const resizeObserverCtor = panelWindow == null ? void 0 : panelWindow.ResizeObserver;
-    let mutationObserver = null;
-    let resizeObserver = null;
-    mutationObserver = mutationObserverCtor != null ? new mutationObserverCtor(() => {
-      if (focusEntryWhenReady()) {
-        mutationObserver == null ? void 0 : mutationObserver.disconnect();
-        resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      }
-    }) : null;
-    resizeObserver = resizeObserverCtor != null ? new resizeObserverCtor(() => {
-      if (focusEntryWhenReady()) {
-        mutationObserver == null ? void 0 : mutationObserver.disconnect();
-        resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      }
-    }) : null;
-    mutationObserver == null ? void 0 : mutationObserver.observe(panelContentNode, {
-      childList: true,
-      subtree: true
-    });
-    resizeObserver == null ? void 0 : resizeObserver.observe(panelContentNode);
-    return () => {
-      mutationObserver == null ? void 0 : mutationObserver.disconnect();
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-    };
-  }, [focusEntryTarget, open, panelContentNode]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: withBaseName("menu"),
-      "data-overflowgroup": group.overflowGroup,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Button,
-          {
-            appearance: "transparent",
-            "aria-controls": panelId,
-            "aria-expanded": open,
-            "aria-label": getOverflowTriggerLabel(group),
-            className: withBaseName("trigger"),
-            ...{
-              [toolbarNextKeyboardUtils.TOOLBAR_NEXT_GROUP_KEY_ATTR]: group.key,
-              [toolbarNextKeyboardUtils.TOOLBAR_NEXT_OVERFLOW_TRIGGER_ATTR]: ""
-            },
-            ...getReferenceProps({
-              onKeyDown: handleTriggerKeyDown,
-              onMouseDown: handleTriggerMouseDown,
-              onPointerDown: handleTriggerPointerDown
-            }),
-            ref: handleTriggerRef,
-            sentiment: "neutral",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              ToolbarNextOverflowTriggerContent,
-              {
-                label: group.label,
-                named: group.named
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          FloatingComponent,
-          {
-            ...getFloatingProps({
-              role: "presentation"
-            }),
-            className: withBaseName("panel"),
-            focusManagerProps: context ? {
-              context,
-              initialFocus: -1,
-              returnFocus: false,
-              modal: false,
-              closeOnFocusOut: false
-            } : void 0,
-            id: panelId,
-            left: x ?? 0,
-            open,
-            position: strategy,
-            ref: handlePanelRef,
-            top: y ?? 0,
-            width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
-            height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                "aria-label": `${group.label} overflow`,
-                "aria-orientation": "horizontal",
-                className: withBaseName("panelContent"),
-                ...{ [toolbarNextKeyboardUtils.TOOLBAR_NEXT_SCOPE_ROOT_ATTR]: group.key },
-                role: "toolbar",
-                ref: handlePanelContentRef,
-                children: group.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: withBaseName("panelItem"),
-                    children: [
-                      index > 0 && item.leadingDecorations.length > 0 && cloneDecorations(item.id, item.leadingDecorations, "leading"),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: withBaseName("itemHost"),
-                          ref: open ? getItemHostRef(item.id, "overflow") : null
-                        }
-                      ),
-                      cloneDecorations(item.id, item.trailingDecorations, "trailing")
-                    ]
-                  },
-                  `${group.id}-${item.id}`
-                ))
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function ToolbarNextOverflowContent({
-  content,
-  focusMemoryRef,
-  getItemHostRef,
-  getItemRef,
-  getNamedTriggerRef,
-  getContentRef,
-  onItemFocus,
-  overflowGroups,
-  overflowedIds
-}) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-toolbar-next-overflow",
-    css: ToolbarNextOverflow,
-    window: targetWindow
-  });
-  const { className, ...contentProps } = content.props;
-  const handleContentRef = core.useForkRef(content.ref, getContentRef(content.key));
-  const overflowGroupByKey = new Map(
-    overflowGroups.map((group) => [group.key, group])
-  );
-  const renderSlots = toolbarNextUtils.buildContentOverflowRenderSlots(
-    content.items,
-    overflowedIds,
-    new Set(overflowGroups.map((group) => group.key))
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToolbarContentNext.ToolbarContentNext,
-    {
-      ...contentProps,
-      "data-implicit": content.implicit || void 0,
-      className: clsx.clsx(className, withBaseName("content")),
-      position: content.position,
-      ref: handleContentRef,
-      children: renderSlots.map(
-        ({
-          item,
-          overflowed,
-          showLeadingDecorations,
-          showTrailingDecorations,
-          triggerGroupKey
-        }) => {
-          const triggerGroup = triggerGroupKey != null ? overflowGroupByKey.get(triggerGroupKey) : void 0;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: withBaseName("slot"),
-              "data-align": item.align,
-              "data-priority": item.overflowPriority,
-              ref: triggerGroup ? getNamedTriggerRef(item.id) : getItemRef(item.id),
-              children: [
-                showLeadingDecorations ? cloneDecorations(item.id, item.leadingDecorations, "leading") : null,
-                !overflowed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("item"), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: withBaseName("itemHost"),
-                    ref: getItemHostRef(item.id, "main")
-                  }
-                ) }) : null,
-                triggerGroup ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("item"), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  ToolbarNextOverflowMenu,
-                  {
-                    focusMemoryRef,
-                    getItemHostRef,
-                    group: triggerGroup,
-                    onItemFocus
-                  }
-                ) }) : null,
-                showTrailingDecorations ? cloneDecorations(
-                  item.id,
-                  item.trailingDecorations,
-                  "trailing"
-                ) : null
-              ]
-            },
-            triggerGroup ? `${content.key}-${triggerGroup.id}-anchor-${item.id}` : item.id
-          );
-        }
-      )
-    }
-  );
-}
-
-exports.ToolbarNextOverflowContent = ToolbarNextOverflowContent;
-exports.ToolbarNextOverflowMenu = ToolbarNextOverflowMenu;
-exports.ToolbarNextOverflowOwners = ToolbarNextOverflowOwners;
-exports.ToolbarNextOverflowTriggerContent = ToolbarNextOverflowTriggerContent;
-//# sourceMappingURL=ToolbarNextOverflow.js.map