@salt-ds/core 1.64.0 → 1.65.0

package/dist-cjs/toolbar/ToolbarOverflow.js

@@ -0,0 +1,712 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+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 Button = require('../button/Button.js');
+var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
+var useFloatingUI = require('../utils/useFloatingUI/useFloatingUI.js');
+var useForkRef = require('../utils/useForkRef.js');
+var useId = require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var ToolbarContent = require('./ToolbarContent.js');
+var ToolbarOverflow = require('./ToolbarOverflow.css.js');
+var ToolbarOverflowFloatingBoundary = require('./ToolbarOverflowFloatingBoundary.js');
+var toolbarKeyboardUtils = require('./toolbarKeyboardUtils.js');
+var toolbarUtils = require('./toolbarUtils.js');
+var useToolbarKeyboardNavigation = require('./useToolbarKeyboardNavigation.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltToolbarOverflow");
+const toolbarStatefulFocusRootSelector = [
+  ".saltComboBox-focused",
+  ".saltDateInput-focused",
+  ".saltInput-focused"
+].join(", ");
+const toolbarOverflowFocusScrollRootSelector = [
+  ".saltComboBox",
+  ".saltDateInput",
+  ".saltDropdown",
+  ".saltInput",
+  ".saltSwitch"
+].join(", ");
+function createToolbarFocusEvent(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 notifyToolbarReparentedFocusLoss(mountNode) {
+  const activeElement = mountNode.ownerDocument.activeElement;
+  if (mountNode.contains(activeElement)) {
+    return;
+  }
+  const staleFocusTargets = Array.from(
+    mountNode.querySelectorAll(toolbarStatefulFocusRootSelector)
+  ).map(
+    (root) => root.querySelector("input") ?? root.querySelector(toolbarKeyboardUtils.toolbarFocusableSelector)
+  ).filter((target) => target != null);
+  for (const target of staleFocusTargets) {
+    const relatedTarget = activeElement instanceof Element ? activeElement : null;
+    target.dispatchEvent(
+      createToolbarFocusEvent("blur", target, relatedTarget)
+    );
+    target.dispatchEvent(
+      createToolbarFocusEvent("focusout", target, relatedTarget)
+    );
+  }
+}
+function getToolbarOverflowFocusScrollTarget(target) {
+  const itemRoot = target.closest(`[${toolbarKeyboardUtils.TOOLBAR_ITEM_ATTR}]`);
+  const controlRoot = target.closest(
+    toolbarOverflowFocusScrollRootSelector
+  );
+  return controlRoot && (itemRoot == null ? void 0 : itemRoot.contains(controlRoot)) ? controlRoot : target;
+}
+function getToolbarOverflowPanelInlinePadding(target) {
+  var _a;
+  const panelContent = target.closest(
+    `[${toolbarKeyboardUtils.TOOLBAR_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 scrollToolbarOverflowTargetIntoView(panel, target) {
+  if (!panel || !panel.contains(target)) {
+    return;
+  }
+  const scrollTarget = getToolbarOverflowFocusScrollTarget(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 = getToolbarOverflowPanelInlinePadding(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 ToolbarOverflowItemOwner({
+  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 = ToolbarOverflowFloatingBoundary.getToolbarOverflowBoundaryKey(host);
+  if (host) {
+    lastOverflowBoundaryKeyRef.current = currentOverflowBoundaryKey;
+  }
+  const boundaryKey = host ? currentOverflowBoundaryKey : lastOverflowBoundaryKeyRef.current;
+  useIsomorphicLayoutEffect.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]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    if (!mountNode) {
+      return;
+    }
+    if (host) {
+      if (mountNode.parentElement !== host) {
+        host.appendChild(mountNode);
+        notifyToolbarReparentedFocusLoss(mountNode);
+      }
+      const isMainToolbarHost = ((_a = host.closest(`[${toolbarKeyboardUtils.TOOLBAR_SCOPE_ROOT_ATTR}]`)) == null ? void 0 : _a.getAttribute(toolbarKeyboardUtils.TOOLBAR_SCOPE_ROOT_ATTR)) === "main";
+      if (isMainToolbarHost) {
+        const focusableElements = Array.from(
+          mountNode.querySelectorAll(toolbarKeyboardUtils.toolbarFocusableSelector)
+        );
+        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;
+    }
+    notifyToolbarReparentedFocusLoss(mountNode);
+    (_b = mountNode.parentElement) == null ? void 0 : _b.removeChild(mountNode);
+  }, [host, mountNode]);
+  if (!mountNode) {
+    return null;
+  }
+  const clonedItem = React.cloneElement(
+    item.element,
+    {
+      [toolbarKeyboardUtils.TOOLBAR_GROUP_KEY_ATTR]: item.overflowGroupKey,
+      [toolbarKeyboardUtils.TOOLBAR_ITEM_ATTR]: item.id
+    }
+  );
+  const itemContent = /* @__PURE__ */ jsxRuntime.jsx(ToolbarOverflowFloatingBoundary.ToolbarOverflowFloatingComponentProvider, { boundaryKey, children: clonedItem });
+  return reactDom.createPortal(itemContent, mountNode);
+}
+function ToolbarOverflowOwners({
+  hostNodes,
+  items
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+    ToolbarOverflowItemOwner,
+    {
+      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 ToolbarOverflowTriggerContent({
+  label,
+  named
+}) {
+  const { OverflowIcon } = SemanticIconProvider.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 ToolbarOverflowMenu({
+  focusMemoryRef,
+  getItemHostRef,
+  group,
+  onItemFocus
+}) {
+  var _a, _b;
+  const panelId = useId.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 = ToolbarOverflowFloatingBoundary.useToolbarOverflowFloatingBoundary();
+  const {
+    focusEntryTarget,
+    handleScopeBlur,
+    handleScopeFocus,
+    handleScopeKeyDown,
+    handleScopePointerDown,
+    rememberedFocusRef
+  } = useToolbarKeyboardNavigation.useToolbarKeyboardNavigation({
+    includeTabIndexMinusOne: true,
+    items: group.items,
+    scopeRef: panelContentRef
+  });
+  const { refs, x, y, strategy, context, elements } = useFloatingUI.useFloatingUI({
+    open,
+    onOpenChange(nextOpen, _, reason) {
+      setOpen(nextOpen);
+      if (!nextOpen) {
+        openModalityRef.current = null;
+      }
+      if (!nextOpen && reason === "escape-key") {
+        toolbarKeyboardUtils.scheduleToolbarFocus(triggerRef.current);
+      }
+    },
+    placement: "bottom-end",
+    middleware: [
+      react.offset(1),
+      react.size({
+        apply({ elements: elements2, availableHeight }) {
+          Object.assign(elements2.floating.style, {
+            maxHeight: `${availableHeight}px`
+          });
+        }
+      }),
+      react.flip(),
+      react.shift({
+        padding: 8
+      })
+    ]
+  });
+  const { getFloatingProps, getReferenceProps } = react.useInteractions([
+    react.useClick(context),
+    react.useDismiss(context, {
+      escapeKey: false,
+      outsidePress(event) {
+        return !ToolbarOverflowFloatingBoundary.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);
+        toolbarKeyboardUtils.scheduleToolbarFocus(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 && toolbarKeyboardUtils.shouldToolbarPreserveNativeTab(target)) {
+        const focusableElements = toolbarKeyboardUtils.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(
+        `[${toolbarKeyboardUtils.TOOLBAR_SCOPE_ROOT_ATTR}]`
+      );
+      const nextFocusTarget = toolbarRoot ? toolbarKeyboardUtils.getToolbarTabMoveTarget(toolbarRoot, false) : null;
+      if (nextFocusTarget) {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        toolbarKeyboardUtils.scheduleToolbarFocus(nextFocusTarget);
+      }
+      return;
+    }
+    if (event.key === "Tab" && event.shiftKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      toolbarKeyboardUtils.scheduleToolbarFocus(triggerRef.current);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      toolbarKeyboardUtils.scheduleToolbarFocus(triggerRef.current);
+    }
+  }, []);
+  const handleTriggerRef = useForkRef.useForkRef(
+    triggerRef,
+    refs.setReference
+  );
+  const handlePanelRef = useForkRef.useForkRef(panelRef, refs.setFloating);
+  const handlePanelContentRef = useForkRef.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 = toolbarKeyboardUtils.getToolbarFocusMemory(panelContent, target, {
+        includeTabIndexMinusOne: true
+      });
+      if ((focusMemory == null ? void 0 : focusMemory.type) !== "item") {
+        return;
+      }
+      scrollToolbarOverflowTargetIntoView(panelRef.current, target);
+      onItemFocus == null ? void 0 : onItemFocus(focusMemory.itemId, focusMemory.controlIndex);
+    },
+    [handleScopeFocus, onItemFocus]
+  );
+  const { Component: FloatingComponent } = useFloatingUI.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 (ToolbarOverflowFloatingBoundary.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
+  ]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!open) {
+      focusedOpenPanelRef.current = false;
+      return;
+    }
+    if (!panelContentNode || focusedOpenPanelRef.current || openModalityRef.current === "pointer") {
+      return;
+    }
+    const getPanelFocusables = () => toolbarKeyboardUtils.getToolbarScopeFocusableElements(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(
+          Button.Button,
+          {
+            appearance: "transparent",
+            "aria-controls": panelId,
+            "aria-expanded": open,
+            "aria-label": getOverflowTriggerLabel(group),
+            className: withBaseName("trigger"),
+            ...{
+              [toolbarKeyboardUtils.TOOLBAR_GROUP_KEY_ATTR]: group.key,
+              [toolbarKeyboardUtils.TOOLBAR_OVERFLOW_TRIGGER_ATTR]: ""
+            },
+            ...getReferenceProps({
+              onKeyDown: handleTriggerKeyDown,
+              onMouseDown: handleTriggerMouseDown,
+              onPointerDown: handleTriggerPointerDown
+            }),
+            ref: handleTriggerRef,
+            sentiment: "neutral",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ToolbarOverflowTriggerContent,
+              {
+                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"),
+                ...{ [toolbarKeyboardUtils.TOOLBAR_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 ToolbarOverflowContent({
+  content,
+  focusMemoryRef,
+  getItemHostRef,
+  getItemRef,
+  getNamedTriggerRef,
+  getContentRef,
+  onItemFocus,
+  overflowGroups,
+  overflowedIds
+}) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-toolbar-overflow",
+    css: ToolbarOverflow,
+    window: targetWindow
+  });
+  const { className, ...contentProps } = content.props;
+  const handleContentRef = useForkRef.useForkRef(content.ref, getContentRef(content.key));
+  const overflowGroupByKey = new Map(
+    overflowGroups.map((group) => [group.key, group])
+  );
+  const renderSlots = toolbarUtils.buildContentOverflowRenderSlots(
+    content.items,
+    overflowedIds,
+    new Set(overflowGroups.map((group) => group.key))
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolbarContent.ToolbarContent,
+    {
+      ...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(
+                  ToolbarOverflowMenu,
+                  {
+                    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.ToolbarOverflowContent = ToolbarOverflowContent;
+exports.ToolbarOverflowMenu = ToolbarOverflowMenu;
+exports.ToolbarOverflowOwners = ToolbarOverflowOwners;
+exports.ToolbarOverflowTriggerContent = ToolbarOverflowTriggerContent;
+//# sourceMappingURL=ToolbarOverflow.js.map