overflow-toolbar 0.1.7 → 0.2.0

package/dist/components/Overflow/OverflowItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowItem.js","sources":["../../../src/components/Overflow/OverflowItem.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useOverflow } from './OverflowContext';\n\nexport interface OverflowItemProps {\n  children: ReactNode;\n  menuid?: string;\n  minStateWidth?: string;\n}\n\nfunction OverflowItem({ children, menuid, minStateWidth }: OverflowItemProps) {\n  const { hiddenMap } = useOverflow();\n\n  let style: CSSProperties | undefined;\n  let className: string | undefined;\n  if (menuid !== undefined) {\n    const state = hiddenMap.get(menuid);\n    if (state === 'hidden') {\n      style = { display: 'none' };\n    } else if (state === 'min' && minStateWidth !== undefined) {\n      style = { minWidth: minStateWidth, width: minStateWidth, maxWidth: minStateWidth, overflow: 'hidden' };\n      className = 'overflow-item-min';\n    }\n  }\n\n  const dataState = menuid !== undefined ? (hiddenMap.get(menuid) ?? 'visible') : undefined;\n\n  return (\n    <li style={style} className={className} data-state={dataState}>\n      {children}\n    </li>\n  );\n}\n\nexport default Object.assign(OverflowItem, { overflowRole: 'item' as const });\n"],"names":["OverflowItem","children","menuid","minStateWidth","hiddenMap","useOverflow","style","className","state","dataState","OverflowItem$1"],"mappings":";;AASA,SAASA,EAAa,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,KAAoC;AAC5E,QAAM,EAAE,WAAAC,EAAA,IAAcC,EAAA;AAEtB,MAAIC,GACAC;AACJ,MAAIL,MAAW,QAAW;AACxB,UAAMM,IAAQJ,EAAU,IAAIF,CAAM;AAClC,IAAIM,MAAU,WACZF,IAAQ,EAAE,SAAS,OAAA,IACVE,MAAU,SAASL,MAAkB,WAC9CG,IAAQ,EAAE,UAAUH,GAAe,OAAOA,GAAe,UAAUA,GAAe,UAAU,SAAA,GAC5FI,IAAY;AAAA,EAEhB;AAEA,QAAME,IAAYP,MAAW,SAAaE,EAAU,IAAIF,CAAM,KAAK,YAAa;AAEhF,2BACG,MAAA,EAAG,OAAAI,GAAc,WAAAC,GAAsB,cAAYE,GACjD,UAAAR,GACH;AAEJ;AAEA,MAAAS,IAAe,OAAO,OAAOV,GAAc,EAAE,cAAc,QAAiB;"}
+{"version":3,"file":"OverflowItem.js","sources":["../../../src/components/Overflow/OverflowItem.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useOverflow } from './OverflowContext';\n\n/** Props for the OverflowItem component. */\nexport interface OverflowItemProps {\n  /** The item content (typically a button or link). */\n  children: ReactNode;\n  /** Links this toolbar item to its menu counterpart. Items with matching menuIds are shown/hidden together. */\n  menuId?: string;\n  /** CSS width value for the min (icon-only) state. When set, the item shrinks to this width before being fully hidden. */\n  minStateWidth?: string;\n}\n\nfunction OverflowItem({ children, menuId, minStateWidth }: OverflowItemProps) {\n  const { hiddenMap } = useOverflow();\n\n  let style: CSSProperties | undefined;\n  let className: string | undefined;\n  if (menuId !== undefined) {\n    const state = hiddenMap.get(menuId);\n    if (state === 'hidden') {\n      style = { display: 'none' };\n    } else if (state === 'min' && minStateWidth !== undefined) {\n      style = { minWidth: minStateWidth, width: minStateWidth, maxWidth: minStateWidth, overflow: 'hidden' };\n      className = 'overflow-item-min';\n    }\n  }\n\n  const dataState = menuId !== undefined ? (hiddenMap.get(menuId) ?? 'visible') : undefined;\n\n  const snapStyle = minStateWidth !== undefined\n    ? { '--min-state-width': minStateWidth } as CSSProperties\n    : undefined;\n\n  return (\n    <li\n      style={{ ...snapStyle, ...style }}\n      className={className}\n      data-state={dataState}\n      data-can-min={minStateWidth !== undefined || undefined}\n    >\n      {children}\n    </li>\n  );\n}\n\nOverflowItem.overflowRole = 'item' as const;\nexport default OverflowItem;\n"],"names":["OverflowItem","children","menuId","minStateWidth","hiddenMap","useOverflow","style","className","state","dataState","jsx"],"mappings":";;AAaA,SAASA,EAAa,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,KAAoC;AAC5E,QAAM,EAAE,WAAAC,EAAA,IAAcC,EAAA;AAEtB,MAAIC,GACAC;AACJ,MAAIL,MAAW,QAAW;AACxB,UAAMM,IAAQJ,EAAU,IAAIF,CAAM;AAClC,IAAIM,MAAU,WACZF,IAAQ,EAAE,SAAS,OAAA,IACVE,MAAU,SAASL,MAAkB,WAC9CG,IAAQ,EAAE,UAAUH,GAAe,OAAOA,GAAe,UAAUA,GAAe,UAAU,SAAA,GAC5FI,IAAY;AAAA,EAEhB;AAEA,QAAME,IAAYP,MAAW,SAAaE,EAAU,IAAIF,CAAM,KAAK,YAAa;AAMhF,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,GANKP,MAAkB,SAChC,EAAE,qBAAqBA,MACvB,QAIuB,GAAGG,EAAA;AAAA,MAC1B,WAAAC;AAAA,MACA,cAAYE;AAAA,MACZ,gBAAcN,MAAkB,UAAa;AAAA,MAE5C,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAD,EAAa,eAAe;"}

package/dist/components/Overflow/OverflowMenu.d.ts

@@ -1,18 +1,30 @@
 import { type ReactNode } from 'react';
+/** Props passed to the `renderMenu` callback to render a framework-specific dropdown. */
 export interface RenderMenuProps {
+    /** The DOM element to anchor the menu to (null when closed). */
     anchorEl: HTMLElement | null;
+    /** Whether the menu is currently open. */
     open: boolean;
+    /** Call to close the menu. */
     onClose: () => void;
+    /** The menu item elements to render inside the dropdown. */
     children: ReactNode;
 }
-interface OverflowMenuProps {
+/** Props for controlling the menu open/close state externally. */
+export interface OverflowMenuControlProps {
+    /** Controlled open state. When provided, you manage open/close. */
+    open?: boolean;
+    /** Called when the menu opens or closes. Use alone for notifications, or with `open` for full control. */
+    onOpenChange?: (open: boolean) => void;
+}
+interface OverflowMenuProps extends OverflowMenuControlProps {
     opener: ReactNode;
     children: ReactNode;
     renderMenu: (props: RenderMenuProps) => ReactNode;
 }
-declare function OverflowMenu({ opener, children, renderMenu }: OverflowMenuProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof OverflowMenu & {
-    overflowRole: "menu";
-};
-export default _default;
+declare function OverflowMenu({ opener, children, renderMenu, open: controlledOpen, onOpenChange }: OverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace OverflowMenu {
+    var overflowRole: "menu";
+}
+export default OverflowMenu;
 //# sourceMappingURL=OverflowMenu.d.ts.map

package/dist/components/Overflow/OverflowMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/OverflowMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxG,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,iBAAiB;IACzB,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CACnD;AAED,iBAAS,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,iBAAiB,2CA4DxE;;;;AAED,wBAA8E"}
+{"version":3,"file":"OverflowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/OverflowMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6D,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAI/H,yFAAyF;AACzF,MAAM,WAAW,eAAe;IAC9B,gEAAgE;IAChE,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,0CAA0C;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,8BAA8B;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,kEAAkE;AAClE,MAAM,WAAW,wBAAwB;IACvC,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0GAA0G;IAC1G,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,UAAU,iBAAkB,SAAQ,wBAAwB;IAC1D,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CACnD;AAED,iBAAS,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAgG5G;kBAhGQ,YAAY;;;AAmGrB,eAAe,YAAY,CAAC"}

package/dist/components/Overflow/OverflowMenu.js

@@ -1,37 +1,48 @@
-import { jsx as d, jsxs as I, Fragment as M } from "react/jsx-runtime";
-import { useState as b, useRef as u, useEffect as j, Children as x, isValidElement as y, Fragment as F } from "react";
-import { useOverflow as H } from "./OverflowContext.js";
-function R({ opener: a, children: m, renderMenu: f }) {
-  const { hiddenMap: s } = H(), [l, t] = b(null), o = u(null), h = !!l, n = [...s.values()].some((e) => e === "hidden"), i = u(n);
-  j(() => {
-    i.current && !n && t(null), i.current = n;
-  }, [n]);
-  const p = () => {
-    const e = o.current?.firstElementChild;
-    t(e ?? o.current);
-  }, v = () => {
-    t(null);
-  }, r = [];
-  x.forEach(m, (e) => {
-    y(e) && r.push({ menuid: e.props.menuid, content: e.props.children });
+import { jsxs as q, Fragment as A, jsx as H } from "react/jsx-runtime";
+import { useState as R, useRef as p, useEffect as a, Children as v, isValidElement as E, cloneElement as j } from "react";
+import { useOverflow as S } from "./OverflowContext.js";
+function B({ opener: l, children: b, renderMenu: y, open: r, onOpenChange: s }) {
+  const { hiddenMap: d } = S(), [f, i] = R(null), n = p(null), u = r !== void 0, t = u ? r : !!f, o = [...d.values()].some((e) => e === "hidden"), m = p(o);
+  a(() => {
+    m.current && !o && t && queueMicrotask(() => {
+      i(null), s?.(!1);
+    }), m.current = o;
+  }, [o, t, s]), a(() => {
+    u && !r && queueMicrotask(() => i(null));
+  }, [u, r]), a(() => {
+    !t && n.current && n.current.querySelector('button, [role="button"]')?.focus();
+  }, [t]);
+  const I = () => {
+    const e = n.current?.firstElementChild;
+    i(e ?? n.current), t || s?.(!0);
+  }, M = () => {
+    u || i(null), s?.(!1);
+  }, c = [];
+  v.forEach(b, (e) => {
+    E(e) && c.push({ menuId: e.props.menuId, content: e.props.children });
   });
-  const C = r.filter(({ menuid: e }) => e === void 0 ? !0 : s.get(e) === "hidden"), E = r.some(({ menuid: e }) => e === void 0), c = !n && !E, O = C.map(({ menuid: e, content: g }, w) => /* @__PURE__ */ d(F, { children: g }, e ?? `menu-item-${w}`));
-  return /* @__PURE__ */ I(M, { children: [
-    /* @__PURE__ */ d(
+  const w = c.filter(({ menuId: e }) => e === void 0 ? !0 : d.get(e) === "hidden"), x = c.some(({ menuId: e }) => e === void 0), h = !o && !x, C = v.toArray(
+    w.map(({ content: e }) => e)
+  ), k = E(l) ? j(l, {
+    "aria-haspopup": "menu",
+    "aria-expanded": t
+  }) : l;
+  return /* @__PURE__ */ q(A, { children: [
+    /* @__PURE__ */ H(
       "li",
       {
-        ref: o,
+        ref: n,
         className: "overflow-opener",
-        "data-state": c ? "hidden" : void 0,
-        style: c ? { display: "none" } : void 0,
-        onClick: p,
-        children: a
+        "data-state": h ? "hidden" : void 0,
+        style: h ? { display: "none" } : void 0,
+        onClick: I,
+        children: k
       }
     ),
-    f({ anchorEl: l, open: h, onClose: v, children: O })
+    y({ anchorEl: f, open: t, onClose: M, children: C })
   ] });
 }
-const B = Object.assign(R, { overflowRole: "menu" });
+B.overflowRole = "menu";
 export {
   B as default
 };

package/dist/components/Overflow/OverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowMenu.js","sources":["../../../src/components/Overflow/OverflowMenu.tsx"],"sourcesContent":["import { Children, Fragment, isValidElement, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useOverflow } from './OverflowContext';\nimport type { OverflowItemProps } from './OverflowItem';\n\nexport interface RenderMenuProps {\n  anchorEl: HTMLElement | null;\n  open: boolean;\n  onClose: () => void;\n  children: ReactNode;\n}\n\ninterface OverflowMenuProps {\n  opener: ReactNode;\n  children: ReactNode;\n  renderMenu: (props: RenderMenuProps) => ReactNode;\n}\n\nfunction OverflowMenu({ opener, children, renderMenu }: OverflowMenuProps) {\n  const { hiddenMap } = useOverflow();\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const openerRef = useRef<HTMLLIElement>(null);\n  const open = Boolean(anchorEl);\n\n  const hasHiddenItems = [...hiddenMap.values()].some(s => s === 'hidden');\n  const prevHasHidden = useRef(hasHiddenItems);\n\n  // Auto-close when no items are fully hidden\n  useEffect(() => {\n    if (prevHasHidden.current && !hasHiddenItems) {\n      setAnchorEl(null);\n    }\n    prevHasHidden.current = hasHiddenItems;\n  }, [hasHiddenItems]);\n\n  const handleOpen = () => {\n    const button = openerRef.current?.firstElementChild as HTMLElement | null;\n    setAnchorEl(button ?? openerRef.current);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  // Collect menuid set from children to determine which are \"menu-only\"\n  const menuItems: { menuid: string | undefined; content: ReactNode }[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<OverflowItemProps>(child)) return;\n    menuItems.push({ menuid: child.props.menuid, content: child.props.children });\n  });\n\n  // Determine visible menu items: show when fully hidden or menu-only\n  const visibleItems = menuItems.filter(({ menuid }) => {\n    if (menuid === undefined) return true; // no menuid = always shown in menu\n    return hiddenMap.get(menuid) === 'hidden'; // shown when fully hidden in toolbar\n  });\n\n  const hasMenuOnlyItems = menuItems.some(({ menuid }) => menuid === undefined);\n  const hidden = !hasHiddenItems && !hasMenuOnlyItems;\n\n  const menuChildren = visibleItems.map(({ menuid, content }, i) => (\n    <Fragment key={menuid ?? `menu-item-${i}`}>{content}</Fragment>\n  ));\n\n  return (\n    <>\n      <li\n        ref={openerRef}\n        className=\"overflow-opener\"\n        data-state={hidden ? 'hidden' : undefined}\n        style={hidden ? { display: 'none' } : undefined}\n        onClick={handleOpen}\n      >\n        {opener}\n      </li>\n      {renderMenu({ anchorEl, open, onClose: handleClose, children: menuChildren })}\n    </>\n  );\n}\n\nexport default Object.assign(OverflowMenu, { overflowRole: 'menu' as const });\n"],"names":["OverflowMenu","opener","children","renderMenu","hiddenMap","useOverflow","anchorEl","setAnchorEl","useState","openerRef","useRef","open","hasHiddenItems","s","prevHasHidden","useEffect","handleOpen","button","handleClose","menuItems","Children","child","isValidElement","visibleItems","menuid","hasMenuOnlyItems","hidden","menuChildren","content","i","jsx","Fragment","jsxs","OverflowMenu$1"],"mappings":";;;AAiBA,SAASA,EAAa,EAAE,QAAAC,GAAQ,UAAAC,GAAU,YAAAC,KAAiC;AACzE,QAAM,EAAE,WAAAC,EAAA,IAAcC,EAAA,GAChB,CAACC,GAAUC,CAAW,IAAIC,EAA6B,IAAI,GAC3DC,IAAYC,EAAsB,IAAI,GACtCC,IAAO,EAAQL,GAEfM,IAAiB,CAAC,GAAGR,EAAU,OAAA,CAAQ,EAAE,KAAK,CAAAS,MAAKA,MAAM,QAAQ,GACjEC,IAAgBJ,EAAOE,CAAc;AAG3C,EAAAG,EAAU,MAAM;AACd,IAAID,EAAc,WAAW,CAACF,KAC5BL,EAAY,IAAI,GAElBO,EAAc,UAAUF;AAAA,EAC1B,GAAG,CAACA,CAAc,CAAC;AAEnB,QAAMI,IAAa,MAAM;AACvB,UAAMC,IAASR,EAAU,SAAS;AAClC,IAAAF,EAAYU,KAAUR,EAAU,OAAO;AAAA,EACzC,GAEMS,IAAc,MAAM;AACxB,IAAAX,EAAY,IAAI;AAAA,EAClB,GAGMY,IAAkE,CAAA;AACxE,EAAAC,EAAS,QAAQlB,GAAU,CAACmB,MAAU;AACpC,IAAKC,EAAkCD,CAAK,KAC5CF,EAAU,KAAK,EAAE,QAAQE,EAAM,MAAM,QAAQ,SAASA,EAAM,MAAM,SAAA,CAAU;AAAA,EAC9E,CAAC;AAGD,QAAME,IAAeJ,EAAU,OAAO,CAAC,EAAE,QAAAK,QACnCA,MAAW,SAAkB,KAC1BpB,EAAU,IAAIoB,CAAM,MAAM,QAClC,GAEKC,IAAmBN,EAAU,KAAK,CAAC,EAAE,QAAAK,EAAA,MAAaA,MAAW,MAAS,GACtEE,IAAS,CAACd,KAAkB,CAACa,GAE7BE,IAAeJ,EAAa,IAAI,CAAC,EAAE,QAAAC,GAAQ,SAAAI,EAAA,GAAWC,MAC1D,gBAAAC,EAACC,GAAA,EAA2C,UAAAH,KAA7BJ,KAAU,aAAaK,CAAC,EAAa,CACrD;AAED,SACE,gBAAAG,EAAAD,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKrB;AAAA,QACL,WAAU;AAAA,QACV,cAAYiB,IAAS,WAAW;AAAA,QAChC,OAAOA,IAAS,EAAE,SAAS,WAAW;AAAA,QACtC,SAASV;AAAA,QAER,UAAAf;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFE,EAAW,EAAE,UAAAG,GAAU,MAAAK,GAAM,SAASO,GAAa,UAAUS,GAAc;AAAA,EAAA,GAC9E;AAEJ;AAEA,MAAAM,IAAe,OAAO,OAAOjC,GAAc,EAAE,cAAc,QAAiB;"}
+{"version":3,"file":"OverflowMenu.js","sources":["../../../src/components/Overflow/OverflowMenu.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, type ReactElement, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useOverflow } from './OverflowContext';\nimport type { OverflowItemProps } from './OverflowItem';\n\n/** Props passed to the `renderMenu` callback to render a framework-specific dropdown. */\nexport interface RenderMenuProps {\n  /** The DOM element to anchor the menu to (null when closed). */\n  anchorEl: HTMLElement | null;\n  /** Whether the menu is currently open. */\n  open: boolean;\n  /** Call to close the menu. */\n  onClose: () => void;\n  /** The menu item elements to render inside the dropdown. */\n  children: ReactNode;\n}\n\n/** Props for controlling the menu open/close state externally. */\nexport interface OverflowMenuControlProps {\n  /** Controlled open state. When provided, you manage open/close. */\n  open?: boolean;\n  /** Called when the menu opens or closes. Use alone for notifications, or with `open` for full control. */\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface OverflowMenuProps extends OverflowMenuControlProps {\n  opener: ReactNode;\n  children: ReactNode;\n  renderMenu: (props: RenderMenuProps) => ReactNode;\n}\n\nfunction OverflowMenu({ opener, children, renderMenu, open: controlledOpen, onOpenChange }: OverflowMenuProps) {\n  const { hiddenMap } = useOverflow();\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const openerRef = useRef<HTMLLIElement>(null);\n\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : Boolean(anchorEl);\n\n  const hasHiddenItems = [...hiddenMap.values()].some(s => s === 'hidden');\n  const prevHasHidden = useRef(hasHiddenItems);\n\n  // Auto-close when no items are fully hidden\n  useEffect(() => {\n    if (prevHasHidden.current && !hasHiddenItems && open) {\n      // Use a microtask to avoid synchronous setState in effect\n      queueMicrotask(() => {\n        setAnchorEl(null);\n        onOpenChange?.(false);\n      });\n    }\n    prevHasHidden.current = hasHiddenItems;\n  }, [hasHiddenItems, open, onOpenChange]);\n\n  // Sync anchorEl when controlled open changes to false\n  useEffect(() => {\n    if (isControlled && !controlledOpen) {\n      queueMicrotask(() => setAnchorEl(null));\n    }\n  }, [isControlled, controlledOpen]);\n\n  // Return focus to opener when menu closes\n  useEffect(() => {\n    if (!open && openerRef.current) {\n      const button = openerRef.current.querySelector('button, [role=\"button\"]') as HTMLElement | null;\n      button?.focus();\n    }\n  }, [open]);\n\n  const handleOpen = () => {\n    const button = openerRef.current?.firstElementChild as HTMLElement | null;\n    setAnchorEl(button ?? openerRef.current);\n    if (!open) {\n      onOpenChange?.(true);\n    }\n  };\n\n  const handleClose = () => {\n    if (!isControlled) {\n      setAnchorEl(null);\n    }\n    onOpenChange?.(false);\n  };\n\n  // Collect menuId set from children to determine which are \"menu-only\"\n  const menuItems: { menuId: string | undefined; content: ReactNode }[] = [];\n  Children.forEach(children, (child) => {\n    if (!isValidElement<OverflowItemProps>(child)) return;\n    menuItems.push({ menuId: child.props.menuId, content: child.props.children });\n  });\n\n  // Determine visible menu items: show when fully hidden or menu-only\n  const visibleItems = menuItems.filter(({ menuId }) => {\n    if (menuId === undefined) return true; // no menuId = always shown in menu\n    return hiddenMap.get(menuId) === 'hidden'; // shown when fully hidden in toolbar\n  });\n\n  const hasMenuOnlyItems = menuItems.some(({ menuId }) => menuId === undefined);\n  const hidden = !hasHiddenItems && !hasMenuOnlyItems;\n\n  const menuChildren = Children.toArray(\n    visibleItems.map(({ content }) => content)\n  );\n\n  // Clone opener to inject ARIA attributes\n  const openerWithAria = isValidElement(opener)\n    ? cloneElement(opener as ReactElement<Record<string, unknown>>, {\n        'aria-haspopup': 'menu',\n        'aria-expanded': open,\n      })\n    : opener;\n\n  return (\n    <>\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the opener child is an interactive button; the li is a structural wrapper */}\n      <li\n        ref={openerRef}\n        className=\"overflow-opener\"\n        data-state={hidden ? 'hidden' : undefined}\n        style={hidden ? { display: 'none' } : undefined}\n        onClick={handleOpen}\n      >\n        {openerWithAria}\n      </li>\n      {renderMenu({ anchorEl, open, onClose: handleClose, children: menuChildren })}\n    </>\n  );\n}\n\nOverflowMenu.overflowRole = 'menu' as const;\nexport default OverflowMenu;\n"],"names":["OverflowMenu","opener","children","renderMenu","controlledOpen","onOpenChange","hiddenMap","useOverflow","anchorEl","setAnchorEl","useState","openerRef","useRef","isControlled","open","hasHiddenItems","s","prevHasHidden","useEffect","handleOpen","button","handleClose","menuItems","Children","child","isValidElement","visibleItems","menuId","hasMenuOnlyItems","hidden","menuChildren","content","openerWithAria","cloneElement","jsxs","Fragment","jsx"],"mappings":";;;AA8BA,SAASA,EAAa,EAAE,QAAAC,GAAQ,UAAAC,GAAU,YAAAC,GAAY,MAAMC,GAAgB,cAAAC,KAAmC;AAC7G,QAAM,EAAE,WAAAC,EAAA,IAAcC,EAAA,GAChB,CAACC,GAAUC,CAAW,IAAIC,EAA6B,IAAI,GAC3DC,IAAYC,EAAsB,IAAI,GAEtCC,IAAeT,MAAmB,QAClCU,IAAOD,IAAeT,IAAiB,EAAQI,GAE/CO,IAAiB,CAAC,GAAGT,EAAU,OAAA,CAAQ,EAAE,KAAK,CAAAU,MAAKA,MAAM,QAAQ,GACjEC,IAAgBL,EAAOG,CAAc;AAG3C,EAAAG,EAAU,MAAM;AACd,IAAID,EAAc,WAAW,CAACF,KAAkBD,KAE9C,eAAe,MAAM;AACnB,MAAAL,EAAY,IAAI,GAChBJ,IAAe,EAAK;AAAA,IACtB,CAAC,GAEHY,EAAc,UAAUF;AAAA,EAC1B,GAAG,CAACA,GAAgBD,GAAMT,CAAY,CAAC,GAGvCa,EAAU,MAAM;AACd,IAAIL,KAAgB,CAACT,KACnB,eAAe,MAAMK,EAAY,IAAI,CAAC;AAAA,EAE1C,GAAG,CAACI,GAAcT,CAAc,CAAC,GAGjCc,EAAU,MAAM;AACd,IAAI,CAACJ,KAAQH,EAAU,WACNA,EAAU,QAAQ,cAAc,yBAAyB,GAChE,MAAA;AAAA,EAEZ,GAAG,CAACG,CAAI,CAAC;AAET,QAAMK,IAAa,MAAM;AACvB,UAAMC,IAAST,EAAU,SAAS;AAClC,IAAAF,EAAYW,KAAUT,EAAU,OAAO,GAClCG,KACHT,IAAe,EAAI;AAAA,EAEvB,GAEMgB,IAAc,MAAM;AACxB,IAAKR,KACHJ,EAAY,IAAI,GAElBJ,IAAe,EAAK;AAAA,EACtB,GAGMiB,IAAkE,CAAA;AACxE,EAAAC,EAAS,QAAQrB,GAAU,CAACsB,MAAU;AACpC,IAAKC,EAAkCD,CAAK,KAC5CF,EAAU,KAAK,EAAE,QAAQE,EAAM,MAAM,QAAQ,SAASA,EAAM,MAAM,SAAA,CAAU;AAAA,EAC9E,CAAC;AAGD,QAAME,IAAeJ,EAAU,OAAO,CAAC,EAAE,QAAAK,QACnCA,MAAW,SAAkB,KAC1BrB,EAAU,IAAIqB,CAAM,MAAM,QAClC,GAEKC,IAAmBN,EAAU,KAAK,CAAC,EAAE,QAAAK,EAAA,MAAaA,MAAW,MAAS,GACtEE,IAAS,CAACd,KAAkB,CAACa,GAE7BE,IAAeP,EAAS;AAAA,IAC5BG,EAAa,IAAI,CAAC,EAAE,SAAAK,EAAA,MAAcA,CAAO;AAAA,EAAA,GAIrCC,IAAiBP,EAAexB,CAAM,IACxCgC,EAAahC,GAAiD;AAAA,IAC5D,iBAAiB;AAAA,IACjB,iBAAiBa;AAAA,EAAA,CAClB,IACDb;AAEJ,SACE,gBAAAiC,EAAAC,GAAA,EAEE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKzB;AAAA,QACL,WAAU;AAAA,QACV,cAAYkB,IAAS,WAAW;AAAA,QAChC,OAAOA,IAAS,EAAE,SAAS,WAAW;AAAA,QACtC,SAASV;AAAA,QAER,UAAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF7B,EAAW,EAAE,UAAAK,GAAU,MAAAM,GAAM,SAASO,GAAa,UAAUS,GAAc;AAAA,EAAA,GAC9E;AAEJ;AAEA9B,EAAa,eAAe;"}

package/dist/components/Overflow/index.d.ts

@@ -1,9 +1,10 @@
+import './Overflow.css';
 export { default as Overflow } from './Overflow';
 export type { OverflowProps } from './Overflow';
 export { default as OverflowItem } from './OverflowItem';
 export type { OverflowItemProps } from './OverflowItem';
 export { default as OverflowMenu } from './OverflowMenu';
-export type { RenderMenuProps } from './OverflowMenu';
+export type { RenderMenuProps, OverflowMenuControlProps } from './OverflowMenu';
 export { default as OverflowContext, useOverflow } from './OverflowContext';
 export { OverflowController } from './OverflowController';
 export type { OverflowHost, ScanResult, ScannedItem, ScannedMenu, } from './OverflowController';

package/dist/components/Overflow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,GACZ,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,GACZ,MAAM,sBAAsB,CAAC"}

package/dist/components/Overflow/overflowSteps.d.ts

@@ -1,5 +1,5 @@
 export interface Step {
-    menuid: string;
+    menuId: string;
     step: 'min' | 'hidden';
 }
 export interface AppliedStep extends Step {
@@ -7,9 +7,9 @@ export interface AppliedStep extends Step {
 }
 /**
  * Build the ordered collapse sequence.
- * All min steps come first (in menuid order), then all hidden steps (in menuid order).
- * A menuid only gets a min step if it has a minStateWidth.
- * A menuid only gets a hidden step if it's represented in the menu.
+ * All min steps come first (in menuId order), then all hidden steps (in menuId order).
+ * A menuId only gets a min step if it has a minStateWidth.
+ * A menuId only gets a hidden step if it's represented in the menu.
  */
 export declare function buildOrderedSteps(menuIds: string[], inMenuIds: Set<string>, minWidthMenuIds: Set<string>): Step[];
 /**
@@ -20,7 +20,11 @@ export declare function buildOrderedSteps(menuIds: string[], inMenuIds: Set<stri
 export declare function computeNextSteps(prev: AppliedStep[], scrollWidth: number, clientWidth: number, orderedSteps: Step[]): AppliedStep[];
 /**
  * Derive the hiddenMap from appliedSteps.
- * Later steps for the same menuid overwrite earlier ones (e.g., min → hidden).
+ * Later steps for the same menuId overwrite earlier ones (e.g., min → hidden).
+ *
+ * When `snap` is true, hidden state is expanded: if any item is 'hidden',
+ * all menuIds in `inMenuIds` are also set to 'hidden'. Min state snap is
+ * handled purely via CSS (`.overflow-snap:has(> [data-state="min"])`).
  */
-export declare function deriveHiddenMap(appliedSteps: AppliedStep[]): Map<string, 'min' | 'hidden'>;
+export declare function deriveHiddenMap(appliedSteps: AppliedStep[], snap?: boolean, inMenuIds?: Set<string>): Map<string, 'min' | 'hidden'>;
 //# sourceMappingURL=overflowSteps.d.ts.map

package/dist/components/Overflow/overflowSteps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflowSteps.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/overflowSteps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI;IACvC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EAAE,EACjB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,EACtB,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,GAC3B,IAAI,EAAE,CAaR;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EAAE,EACnB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,IAAI,EAAE,GACnB,WAAW,EAAE,CAef;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,WAAW,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,KAAK,GAAG,QAAQ,CAAC,CAM1F"}
+{"version":3,"file":"overflowSteps.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/overflowSteps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI;IACvC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EAAE,EACjB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,EACtB,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,GAC3B,IAAI,EAAE,CAaR;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EAAE,EACnB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,IAAI,EAAE,GACnB,WAAW,EAAE,CAef;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,WAAW,EAAE,EAC3B,IAAI,CAAC,EAAE,OAAO,EACd,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GACtB,GAAG,CAAC,MAAM,EAAE,KAAK,GAAG,QAAQ,CAAC,CAiB/B"}

package/dist/components/Overflow/overflowSteps.js

@@ -1,32 +1,43 @@
-function i(t, o, e) {
-  const s = [];
-  for (const n of t)
-    e.has(n) && s.push({ menuid: n, step: "min" });
-  for (const n of t)
-    o.has(n) && s.push({ menuid: n, step: "hidden" });
-  return s;
+function i(e, o, s) {
+  const n = [];
+  for (const t of e)
+    s.has(t) && n.push({ menuId: t, step: "min" });
+  for (const t of e)
+    o.has(t) && n.push({ menuId: t, step: "hidden" });
+  return n;
 }
-function f(t, o, e, s) {
-  if (o > e) {
-    const n = s[t.length];
-    return n ? [...t, { ...n, width: e }] : t;
+function d(e, o, s, n) {
+  if (o > s) {
+    const t = n[e.length];
+    return t ? [...e, { ...t, width: s }] : e;
   }
-  if (t.length > 0) {
-    const n = t[t.length - 1];
-    if (e > n.width)
-      return t.slice(0, -1);
+  if (e.length > 0) {
+    const t = e[e.length - 1];
+    if (s > t.width)
+      return e.slice(0, -1);
   }
-  return t;
+  return e;
 }
-function u(t) {
-  const o = /* @__PURE__ */ new Map();
-  for (const { menuid: e, step: s } of t)
-    o.set(e, s);
-  return o;
+function r(e, o, s) {
+  const n = /* @__PURE__ */ new Map();
+  for (const { menuId: t, step: f } of e)
+    n.set(t, f);
+  if (o && s) {
+    let t = !1;
+    for (const f of n.values())
+      if (f === "hidden") {
+        t = !0;
+        break;
+      }
+    if (t)
+      for (const f of s)
+        n.set(f, "hidden");
+  }
+  return n;
 }
 export {
   i as buildOrderedSteps,
-  f as computeNextSteps,
-  u as deriveHiddenMap
+  d as computeNextSteps,
+  r as deriveHiddenMap
 };
 //# sourceMappingURL=overflowSteps.js.map

package/dist/components/Overflow/overflowSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflowSteps.js","sources":["../../../src/components/Overflow/overflowSteps.ts"],"sourcesContent":["export interface Step {\n  menuid: string;\n  step: 'min' | 'hidden';\n}\n\nexport interface AppliedStep extends Step {\n  width: number;\n}\n\n/**\n * Build the ordered collapse sequence.\n * All min steps come first (in menuid order), then all hidden steps (in menuid order).\n * A menuid only gets a min step if it has a minStateWidth.\n * A menuid only gets a hidden step if it's represented in the menu.\n */\nexport function buildOrderedSteps(\n  menuIds: string[],\n  inMenuIds: Set<string>,\n  minWidthMenuIds: Set<string>,\n): Step[] {\n  const steps: Step[] = [];\n  for (const menuid of menuIds) {\n    if (minWidthMenuIds.has(menuid)) {\n      steps.push({ menuid, step: 'min' });\n    }\n  }\n  for (const menuid of menuIds) {\n    if (inMenuIds.has(menuid)) {\n      steps.push({ menuid, step: 'hidden' });\n    }\n  }\n  return steps;\n}\n\n/**\n * Compute the next appliedSteps state given a resize event.\n * On overflow: push the next step from orderedSteps.\n * On space available: pop the last step if the container is wider than when it was applied.\n */\nexport function computeNextSteps(\n  prev: AppliedStep[],\n  scrollWidth: number,\n  clientWidth: number,\n  orderedSteps: Step[],\n): AppliedStep[] {\n  if (scrollWidth > clientWidth) {\n    const nextStep = orderedSteps[prev.length];\n    if (!nextStep) return prev;\n    return [...prev, { ...nextStep, width: clientWidth }];\n  }\n\n  if (prev.length > 0) {\n    const lastStep = prev[prev.length - 1];\n    if (clientWidth > lastStep.width) {\n      return prev.slice(0, -1);\n    }\n  }\n\n  return prev;\n}\n\n/**\n * Derive the hiddenMap from appliedSteps.\n * Later steps for the same menuid overwrite earlier ones (e.g., min → hidden).\n */\nexport function deriveHiddenMap(appliedSteps: AppliedStep[]): Map<string, 'min' | 'hidden'> {\n  const map = new Map<string, 'min' | 'hidden'>();\n  for (const { menuid, step } of appliedSteps) {\n    map.set(menuid, step);\n  }\n  return map;\n}\n"],"names":["buildOrderedSteps","menuIds","inMenuIds","minWidthMenuIds","steps","menuid","computeNextSteps","prev","scrollWidth","clientWidth","orderedSteps","nextStep","lastStep","deriveHiddenMap","appliedSteps","map","step"],"mappings":"AAeO,SAASA,EACdC,GACAC,GACAC,GACQ;AACR,QAAMC,IAAgB,CAAA;AACtB,aAAWC,KAAUJ;AACnB,IAAIE,EAAgB,IAAIE,CAAM,KAC5BD,EAAM,KAAK,EAAE,QAAAC,GAAQ,MAAM,OAAO;AAGtC,aAAWA,KAAUJ;AACnB,IAAIC,EAAU,IAAIG,CAAM,KACtBD,EAAM,KAAK,EAAE,QAAAC,GAAQ,MAAM,UAAU;AAGzC,SAAOD;AACT;AAOO,SAASE,EACdC,GACAC,GACAC,GACAC,GACe;AACf,MAAIF,IAAcC,GAAa;AAC7B,UAAME,IAAWD,EAAaH,EAAK,MAAM;AACzC,WAAKI,IACE,CAAC,GAAGJ,GAAM,EAAE,GAAGI,GAAU,OAAOF,GAAa,IAD9BF;AAAA,EAExB;AAEA,MAAIA,EAAK,SAAS,GAAG;AACnB,UAAMK,IAAWL,EAAKA,EAAK,SAAS,CAAC;AACrC,QAAIE,IAAcG,EAAS;AACzB,aAAOL,EAAK,MAAM,GAAG,EAAE;AAAA,EAE3B;AAEA,SAAOA;AACT;AAMO,SAASM,EAAgBC,GAA4D;AAC1F,QAAMC,wBAAU,IAAA;AAChB,aAAW,EAAE,QAAAV,GAAQ,MAAAW,EAAA,KAAUF;AAC7B,IAAAC,EAAI,IAAIV,GAAQW,CAAI;AAEtB,SAAOD;AACT;"}
+{"version":3,"file":"overflowSteps.js","sources":["../../../src/components/Overflow/overflowSteps.ts"],"sourcesContent":["export interface Step {\n  menuId: string;\n  step: 'min' | 'hidden';\n}\n\nexport interface AppliedStep extends Step {\n  width: number;\n}\n\n/**\n * Build the ordered collapse sequence.\n * All min steps come first (in menuId order), then all hidden steps (in menuId order).\n * A menuId only gets a min step if it has a minStateWidth.\n * A menuId only gets a hidden step if it's represented in the menu.\n */\nexport function buildOrderedSteps(\n  menuIds: string[],\n  inMenuIds: Set<string>,\n  minWidthMenuIds: Set<string>,\n): Step[] {\n  const steps: Step[] = [];\n  for (const menuId of menuIds) {\n    if (minWidthMenuIds.has(menuId)) {\n      steps.push({ menuId, step: 'min' });\n    }\n  }\n  for (const menuId of menuIds) {\n    if (inMenuIds.has(menuId)) {\n      steps.push({ menuId, step: 'hidden' });\n    }\n  }\n  return steps;\n}\n\n/**\n * Compute the next appliedSteps state given a resize event.\n * On overflow: push the next step from orderedSteps.\n * On space available: pop the last step if the container is wider than when it was applied.\n */\nexport function computeNextSteps(\n  prev: AppliedStep[],\n  scrollWidth: number,\n  clientWidth: number,\n  orderedSteps: Step[],\n): AppliedStep[] {\n  if (scrollWidth > clientWidth) {\n    const nextStep = orderedSteps[prev.length];\n    if (!nextStep) return prev;\n    return [...prev, { ...nextStep, width: clientWidth }];\n  }\n\n  if (prev.length > 0) {\n    const lastStep = prev[prev.length - 1];\n    if (clientWidth > lastStep.width) {\n      return prev.slice(0, -1);\n    }\n  }\n\n  return prev;\n}\n\n/**\n * Derive the hiddenMap from appliedSteps.\n * Later steps for the same menuId overwrite earlier ones (e.g., min → hidden).\n *\n * When `snap` is true, hidden state is expanded: if any item is 'hidden',\n * all menuIds in `inMenuIds` are also set to 'hidden'. Min state snap is\n * handled purely via CSS (`.overflow-snap:has(> [data-state=\"min\"])`).\n */\nexport function deriveHiddenMap(\n  appliedSteps: AppliedStep[],\n  snap?: boolean,\n  inMenuIds?: Set<string>,\n): Map<string, 'min' | 'hidden'> {\n  const map = new Map<string, 'min' | 'hidden'>();\n  for (const { menuId, step } of appliedSteps) {\n    map.set(menuId, step);\n  }\n  if (snap && inMenuIds) {\n    let hasHidden = false;\n    for (const v of map.values()) {\n      if (v === 'hidden') { hasHidden = true; break; }\n    }\n    if (hasHidden) {\n      for (const id of inMenuIds) {\n        map.set(id, 'hidden');\n      }\n    }\n  }\n  return map;\n}\n"],"names":["buildOrderedSteps","menuIds","inMenuIds","minWidthMenuIds","steps","menuId","computeNextSteps","prev","scrollWidth","clientWidth","orderedSteps","nextStep","lastStep","deriveHiddenMap","appliedSteps","snap","map","step","hasHidden","v","id"],"mappings":"AAeO,SAASA,EACdC,GACAC,GACAC,GACQ;AACR,QAAMC,IAAgB,CAAA;AACtB,aAAWC,KAAUJ;AACnB,IAAIE,EAAgB,IAAIE,CAAM,KAC5BD,EAAM,KAAK,EAAE,QAAAC,GAAQ,MAAM,OAAO;AAGtC,aAAWA,KAAUJ;AACnB,IAAIC,EAAU,IAAIG,CAAM,KACtBD,EAAM,KAAK,EAAE,QAAAC,GAAQ,MAAM,UAAU;AAGzC,SAAOD;AACT;AAOO,SAASE,EACdC,GACAC,GACAC,GACAC,GACe;AACf,MAAIF,IAAcC,GAAa;AAC7B,UAAME,IAAWD,EAAaH,EAAK,MAAM;AACzC,WAAKI,IACE,CAAC,GAAGJ,GAAM,EAAE,GAAGI,GAAU,OAAOF,GAAa,IAD9BF;AAAA,EAExB;AAEA,MAAIA,EAAK,SAAS,GAAG;AACnB,UAAMK,IAAWL,EAAKA,EAAK,SAAS,CAAC;AACrC,QAAIE,IAAcG,EAAS;AACzB,aAAOL,EAAK,MAAM,GAAG,EAAE;AAAA,EAE3B;AAEA,SAAOA;AACT;AAUO,SAASM,EACdC,GACAC,GACAb,GAC+B;AAC/B,QAAMc,wBAAU,IAAA;AAChB,aAAW,EAAE,QAAAX,GAAQ,MAAAY,EAAA,KAAUH;AAC7B,IAAAE,EAAI,IAAIX,GAAQY,CAAI;AAEtB,MAAIF,KAAQb,GAAW;AACrB,QAAIgB,IAAY;AAChB,eAAWC,KAAKH,EAAI;AAClB,UAAIG,MAAM,UAAU;AAAE,QAAAD,IAAY;AAAM;AAAA,MAAO;AAEjD,QAAIA;AACF,iBAAWE,KAAMlB;AACf,QAAAc,EAAI,IAAII,GAAI,QAAQ;AAAA,EAG1B;AACA,SAAOJ;AACT;"}

package/dist/components/Overflow/useResizer.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from "react";
-export declare function useResizer(ref: RefObject<HTMLElement | null>, onResize: (maxWidth: number, currentWidth: number) => void): void;
+export declare function useResizer(ref: RefObject<HTMLElement | null>, onResize: () => void): void;
 //# sourceMappingURL=useResizer.d.ts.map

package/dist/components/Overflow/useResizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizer.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/useResizer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,wBAAgB,UAAU,CACxB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,QAqB3D"}
+{"version":3,"file":"useResizer.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/useResizer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,wBAAgB,UAAU,CACxB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,QAAQ,EAAE,MAAM,IAAI,QAkBrB"}

package/dist/components/Overflow/useResizer.js

@@ -1,16 +1,16 @@
-import { useRef as o, useEffect as u } from "react";
-function f(r, t) {
-  const c = o(t);
-  c.current = t, u(() => {
-    const e = r.current;
-    if (!e) return;
-    const n = () => {
-      c.current(e.scrollWidth, e.clientWidth);
-    }, s = new ResizeObserver(n);
-    return s.observe(e), n(), () => {
-      s.disconnect();
+import { useRef as o, useEffect as s } from "react";
+function f(e, r) {
+  const t = o(r);
+  s(() => {
+    t.current = r;
+  }), s(() => {
+    const n = e.current;
+    if (!n) return;
+    const c = new ResizeObserver(() => t.current());
+    return c.observe(n), () => {
+      c.disconnect();
     };
-  }, [r]);
+  }, [e]);
 }
 export {
   f as useResizer

package/dist/components/Overflow/useResizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizer.js","sources":["../../../src/components/Overflow/useResizer.tsx"],"sourcesContent":["import { useEffect, useRef, type RefObject } from \"react\";\n\nexport function useResizer(\n  ref: RefObject<HTMLElement | null>,\n  onResize: (maxWidth: number, currentWidth: number) => void\n) {\n  const callbackRef = useRef(onResize);\n  callbackRef.current = onResize;\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const observe = () => {\n      callbackRef.current(element.scrollWidth, element.clientWidth);\n    };\n    const observer = new ResizeObserver(observe);\n\n    observer.observe(element);\n    observe(); // Trigger initial measurement\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [ref]);\n}"],"names":["useResizer","ref","onResize","callbackRef","useRef","useEffect","element","observe","observer"],"mappings":";AAEO,SAASA,EACdC,GACAC,GACA;AACA,QAAMC,IAAcC,EAAOF,CAAQ;AACnC,EAAAC,EAAY,UAAUD,GAEtBG,EAAU,MAAM;AACd,UAAMC,IAAUL,EAAI;AACpB,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAU,MAAM;AACpB,MAAAJ,EAAY,QAAQG,EAAQ,aAAaA,EAAQ,WAAW;AAAA,IAC9D,GACME,IAAW,IAAI,eAAeD,CAAO;AAE3C,WAAAC,EAAS,QAAQF,CAAO,GACxBC,EAAA,GAEO,MAAM;AACX,MAAAC,EAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAACP,CAAG,CAAC;AACV;"}
+{"version":3,"file":"useResizer.js","sources":["../../../src/components/Overflow/useResizer.tsx"],"sourcesContent":["import { useEffect, useRef, type RefObject } from \"react\";\n\nexport function useResizer(\n  ref: RefObject<HTMLElement | null>,\n  onResize: () => void\n) {\n  const callbackRef = useRef(onResize);\n  useEffect(() => {\n    callbackRef.current = onResize;\n  });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(() => callbackRef.current());\n    observer.observe(element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [ref]);\n}\n"],"names":["useResizer","ref","onResize","callbackRef","useRef","useEffect","element","observer"],"mappings":";AAEO,SAASA,EACdC,GACAC,GACA;AACA,QAAMC,IAAcC,EAAOF,CAAQ;AACnC,EAAAG,EAAU,MAAM;AACd,IAAAF,EAAY,UAAUD;AAAA,EACxB,CAAC,GAEDG,EAAU,MAAM;AACd,UAAMC,IAAUL,EAAI;AACpB,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAW,IAAI,eAAe,MAAMJ,EAAY,SAAS;AAC/D,WAAAI,EAAS,QAAQD,CAAO,GAEjB,MAAM;AACX,MAAAC,EAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAACN,CAAG,CAAC;AACV;"}

package/dist/components/RxOverflow/RxOverflow.d.ts

@@ -1,5 +1,4 @@
 import { type OverflowProps } from '../Overflow';
-import './rx.css';
 declare const RxOverflow: import("react").ForwardRefExoticComponent<OverflowProps & import("react").RefAttributes<HTMLUListElement>>;
 export default RxOverflow;
 //# sourceMappingURL=RxOverflow.d.ts.map

package/dist/components/RxOverflow/RxOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RxOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/RxOverflow/RxOverflow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,UAAU,CAAC;AAElB,QAAA,MAAM,UAAU,4GAEd,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RxOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/RxOverflow/RxOverflow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,QAAA,MAAM,UAAU,4GAEd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/components/RxOverflow/RxOverflow.js

@@ -1,7 +1,7 @@
+import '../Overflow/Overflow.css';
 import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
 import e from "../Overflow/Overflow.js";
-/* empty css       */
 const w = t(function(r, o) {
   return /* @__PURE__ */ f(e, { ref: o, ...r });
 });

package/dist/components/RxOverflow/RxOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RxOverflow.js","sources":["../../../src/components/RxOverflow/RxOverflow.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Overflow, type OverflowProps } from '../Overflow';\nimport './rx.css';\n\nconst RxOverflow = forwardRef<HTMLUListElement, OverflowProps>(function RxOverflow(props, ref) {\n  return <Overflow ref={ref} {...props} />;\n});\n\nexport default RxOverflow;\n"],"names":["RxOverflow","forwardRef","props","ref","jsx","Overflow"],"mappings":";;;;AAIA,MAAMA,IAAaC,EAA4C,SAAoBC,GAAOC,GAAK;AAC7F,SAAO,gBAAAC,EAACC,GAAA,EAAS,KAAAF,GAAW,GAAGD,EAAA,CAAO;AACxC,CAAC;"}
+{"version":3,"file":"RxOverflow.js","sources":["../../../src/components/RxOverflow/RxOverflow.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Overflow, type OverflowProps } from '../Overflow';\n\nconst RxOverflow = forwardRef<HTMLUListElement, OverflowProps>(function RxOverflow(props, ref) {\n  return <Overflow ref={ref} {...props} />;\n});\n\nexport default RxOverflow;\n"],"names":["RxOverflow","forwardRef","props","ref","jsx","Overflow"],"mappings":";;;;AAGA,MAAMA,IAAaC,EAA4C,SAAoBC,GAAOC,GAAK;AAC7F,SAAO,gBAAAC,EAACC,GAAA,EAAS,KAAAF,GAAW,GAAGD,EAAA,CAAO;AACxC,CAAC;"}

package/dist/components/RxOverflow/RxOverflowItem.d.ts

@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react';
 interface RxOverflowItemProps {
     children: ReactNode;
-    menuid?: string;
+    menuId?: string;
     minStateWidth?: string;
 }
-declare function RxOverflowItem({ children, menuid, minStateWidth }: RxOverflowItemProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof RxOverflowItem & {
-    overflowRole: "item";
-};
-export default _default;
+declare function RxOverflowItem({ children, menuId, minStateWidth }: RxOverflowItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RxOverflowItem {
+    var overflowRole: "item";
+}
+export default RxOverflowItem;
 //# sourceMappingURL=RxOverflowItem.d.ts.map

package/dist/components/RxOverflow/RxOverflowItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RxOverflowItem.d.ts","sourceRoot":"","sources":["../../../src/components/RxOverflow/RxOverflowItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CAM/E;;;;AAED,wBAAgF"}
+{"version":3,"file":"RxOverflowItem.d.ts","sourceRoot":"","sources":["../../../src/components/RxOverflow/RxOverflowItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CAM/E;kBANQ,cAAc;;;AASvB,eAAe,cAAc,CAAC"}

package/dist/components/RxOverflow/RxOverflowItem.js

@@ -1,10 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
-import f from "../Overflow/OverflowItem.js";
-function m({ children: e, menuid: o, minStateWidth: t }) {
-  return /* @__PURE__ */ r(f, { menuid: o, minStateWidth: t, children: e });
+import '../Overflow/Overflow.css';
+import { jsx as t } from "react/jsx-runtime";
+import m from "../Overflow/OverflowItem.js";
+function f({ children: o, menuId: r, minStateWidth: e }) {
+  return /* @__PURE__ */ t(m, { menuId: r, minStateWidth: e, children: o });
 }
-const n = Object.assign(m, { overflowRole: "item" });
+f.overflowRole = "item";
 export {
-  n as default
+  f as default
 };
 //# sourceMappingURL=RxOverflowItem.js.map

package/dist/components/RxOverflow/RxOverflowItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RxOverflowItem.js","sources":["../../../src/components/RxOverflow/RxOverflowItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { OverflowItem } from '../Overflow';\n\ninterface RxOverflowItemProps {\n  children: ReactNode;\n  menuid?: string;\n  minStateWidth?: string;\n}\n\nfunction RxOverflowItem({ children, menuid, minStateWidth }: RxOverflowItemProps) {\n  return (\n    <OverflowItem menuid={menuid} minStateWidth={minStateWidth}>\n      {children}\n    </OverflowItem>\n  );\n}\n\nexport default Object.assign(RxOverflowItem, { overflowRole: 'item' as const });\n"],"names":["RxOverflowItem","children","menuid","minStateWidth","jsx","OverflowItem","RxOverflowItem_default"],"mappings":";;AASA,SAASA,EAAe,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,KAAsC;AAChF,SACE,gBAAAC,EAACC,GAAA,EAAa,QAAAH,GAAgB,eAAAC,GAC3B,UAAAF,EAAA,CACH;AAEJ;AAEA,MAAAK,IAAe,OAAO,OAAON,GAAgB,EAAE,cAAc,QAAiB;"}
+{"version":3,"file":"RxOverflowItem.js","sources":["../../../src/components/RxOverflow/RxOverflowItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { OverflowItem } from '../Overflow';\n\ninterface RxOverflowItemProps {\n  children: ReactNode;\n  menuId?: string;\n  minStateWidth?: string;\n}\n\nfunction RxOverflowItem({ children, menuId, minStateWidth }: RxOverflowItemProps) {\n  return (\n    <OverflowItem menuId={menuId} minStateWidth={minStateWidth}>\n      {children}\n    </OverflowItem>\n  );\n}\n\nRxOverflowItem.overflowRole = 'item' as const;\nexport default RxOverflowItem;\n"],"names":["RxOverflowItem","children","menuId","minStateWidth","jsx","OverflowItem"],"mappings":";;;AASA,SAASA,EAAe,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,KAAsC;AAChF,SACE,gBAAAC,EAACC,GAAA,EAAa,QAAAH,GAAgB,eAAAC,GAC3B,UAAAF,EAAA,CACH;AAEJ;AAEAD,EAAe,eAAe;"}

package/dist/components/RxOverflow/RxOverflowMenu.d.ts

@@ -1,11 +1,12 @@
 import { type ReactNode } from 'react';
-interface RxOverflowMenuProps {
+import { type OverflowMenuControlProps } from '../Overflow';
+interface RxOverflowMenuProps extends OverflowMenuControlProps {
     opener: ReactNode;
     children: ReactNode;
 }
-declare function RxOverflowMenu({ opener, children }: RxOverflowMenuProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof RxOverflowMenu & {
-    overflowRole: "menu";
-};
-export default _default;
+declare function RxOverflowMenu({ opener, children, open, onOpenChange }: RxOverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RxOverflowMenu {
+    var overflowRole: "menu";
+}
+export default RxOverflowMenu;
 //# sourceMappingURL=RxOverflowMenu.d.ts.map

package/dist/components/RxOverflow/RxOverflowMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RxOverflowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/RxOverflow/RxOverflowMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAG/C,UAAU,mBAAmB;IAC3B,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAYhE;;;;AAED,wBAAgF"}
+{"version":3,"file":"RxOverflowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/RxOverflow/RxOverflowMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAgB,KAAK,wBAAwB,EAAwB,MAAM,aAAa,CAAC;AAEhG,UAAU,mBAAoB,SAAQ,wBAAwB;IAC5D,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,mBAAmB,2CAYpF;kBAZQ,cAAc;;;AAevB,eAAe,cAAc,CAAC"}

package/dist/components/RxOverflow/RxOverflowMenu.js

@@ -1,34 +1,37 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import '../Overflow/Overflow.css';
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-popover";
-import { useRef as s } from "react";
-import a from "../Overflow/OverflowMenu.js";
-function d({ opener: n, children: o }) {
-  return /* @__PURE__ */ e(a, { opener: n, renderMenu: ({ anchorEl: u, open: t, onClose: f, children: l }) => /* @__PURE__ */ e(m, { anchorEl: u, open: t, onClose: f, children: l }), children: o });
+import { useRef as p, useEffect as d } from "react";
+import R from "../Overflow/OverflowMenu.js";
+function a({ opener: e, children: o, open: t, onOpenChange: i }) {
+  return /* @__PURE__ */ n(R, { opener: e, renderMenu: ({ anchorEl: f, open: c, onClose: l, children: s }) => /* @__PURE__ */ n(g, { anchorEl: f, open: c, onClose: l, children: s }), open: t, onOpenChange: i, children: o });
 }
-const v = Object.assign(d, { overflowRole: "menu" });
-function m({ anchorEl: n, open: o, onClose: i, children: u }) {
-  const t = s({
+a.overflowRole = "menu";
+function g({ anchorEl: e, open: o, onClose: t, children: i }) {
+  const u = p({
     getBoundingClientRect: () => new DOMRect()
   });
-  return n && (t.current = {
-    getBoundingClientRect: () => n.getBoundingClientRect()
-  }), /* @__PURE__ */ c(r.Root, { open: o, onOpenChange: (f) => {
-    f || i();
+  return d(() => {
+    e && (u.current = {
+      getBoundingClientRect: () => e.getBoundingClientRect()
+    });
+  }, [e]), /* @__PURE__ */ m(r.Root, { open: o, onOpenChange: (f) => {
+    f || t();
   }, children: [
-    /* @__PURE__ */ e(r.Anchor, { virtualRef: t }),
-    /* @__PURE__ */ e(r.Portal, { children: /* @__PURE__ */ e(
+    /* @__PURE__ */ n(r.Anchor, { virtualRef: u }),
+    /* @__PURE__ */ n(r.Portal, { children: /* @__PURE__ */ n(
       r.Content,
       {
         className: "rx-menu-panel",
         sideOffset: 4,
         align: "start",
-        onClick: i,
-        children: u
+        onClick: t,
+        children: i
       }
     ) })
   ] });
 }
 export {
-  v as default
+  a as default
 };
 //# sourceMappingURL=RxOverflowMenu.js.map

package/dist/components/RxOverflow/RxOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"RxOverflowMenu.js","sources":["../../../src/components/RxOverflow/RxOverflowMenu.tsx"],"sourcesContent":["import * as Popover from '@radix-ui/react-popover';\nimport { type ReactNode, useRef } from 'react';\nimport { OverflowMenu, type RenderMenuProps } from '../Overflow';\n\ninterface RxOverflowMenuProps {\n  opener: ReactNode;\n  children: ReactNode;\n}\n\nfunction RxOverflowMenu({ opener, children }: RxOverflowMenuProps) {\n  const renderMenu = ({ anchorEl, open, onClose, children: menuChildren }: RenderMenuProps) => (\n    <RxPopoverMenu anchorEl={anchorEl} open={open} onClose={onClose}>\n      {menuChildren}\n    </RxPopoverMenu>\n  );\n\n  return (\n    <OverflowMenu opener={opener} renderMenu={renderMenu}>\n      {children}\n    </OverflowMenu>\n  );\n}\n\nexport default Object.assign(RxOverflowMenu, { overflowRole: 'menu' as const });\n\nfunction RxPopoverMenu({ anchorEl, open, onClose, children }: RenderMenuProps) {\n  const virtualRef = useRef<{ getBoundingClientRect: () => DOMRect }>({\n    getBoundingClientRect: () => new DOMRect(),\n  });\n\n  // Update synchronously during render so the popover positions correctly\n  // on the same frame it opens (useEffect would be one frame too late).\n  if (anchorEl) {\n    virtualRef.current = {\n      getBoundingClientRect: () => anchorEl.getBoundingClientRect(),\n    };\n  }\n\n  return (\n    <Popover.Root open={open} onOpenChange={(o) => { if (!o) onClose(); }}>\n      <Popover.Anchor virtualRef={virtualRef} />\n      <Popover.Portal>\n        <Popover.Content\n          className=\"rx-menu-panel\"\n          sideOffset={4}\n          align=\"start\"\n          onClick={onClose}\n        >\n          {children}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["RxOverflowMenu","opener","children","jsx","OverflowMenu","anchorEl","open","onClose","menuChildren","RxPopoverMenu","RxOverflowMenu_default","virtualRef","useRef","Popover","o"],"mappings":";;;;AASA,SAASA,EAAe,EAAE,QAAAC,GAAQ,UAAAC,KAAiC;AAOjE,SACE,gBAAAC,EAACC,GAAA,EAAa,QAAAH,GAAgB,YAPb,CAAC,EAAE,UAAAI,GAAU,MAAAC,GAAM,SAAAC,GAAS,UAAUC,EAAA,MACvD,gBAAAL,EAACM,GAAA,EAAc,UAAAJ,GAAoB,MAAAC,GAAY,SAAAC,GAC5C,UAAAC,GACH,GAKG,UAAAN,EAAA,CACH;AAEJ;AAEA,MAAAQ,IAAe,OAAO,OAAOV,GAAgB,EAAE,cAAc,QAAiB;AAE9E,SAASS,EAAc,EAAE,UAAAJ,GAAU,MAAAC,GAAM,SAAAC,GAAS,UAAAL,KAA6B;AAC7E,QAAMS,IAAaC,EAAiD;AAAA,IAClE,uBAAuB,MAAM,IAAI,QAAA;AAAA,EAAQ,CAC1C;AAID,SAAIP,MACFM,EAAW,UAAU;AAAA,IACnB,uBAAuB,MAAMN,EAAS,sBAAA;AAAA,EAAsB,sBAK7DQ,EAAQ,MAAR,EAAa,MAAAP,GAAY,cAAc,CAACQ,MAAM;AAAE,IAAKA,KAAGP,EAAA;AAAA,EAAW,GAClE,UAAA;AAAA,IAAA,gBAAAJ,EAACU,EAAQ,QAAR,EAAe,YAAAF,EAAA,CAAwB;AAAA,IACxC,gBAAAR,EAACU,EAAQ,QAAR,EACC,UAAA,gBAAAV;AAAA,MAACU,EAAQ;AAAA,MAAR;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAM;AAAA,QACN,SAASN;AAAA,QAER,UAAAL;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"RxOverflowMenu.js","sources":["../../../src/components/RxOverflow/RxOverflowMenu.tsx"],"sourcesContent":["import * as Popover from '@radix-ui/react-popover';\nimport { type ReactNode, useEffect, useRef } from 'react';\nimport { OverflowMenu, type OverflowMenuControlProps, type RenderMenuProps } from '../Overflow';\n\ninterface RxOverflowMenuProps extends OverflowMenuControlProps {\n  opener: ReactNode;\n  children: ReactNode;\n}\n\nfunction RxOverflowMenu({ opener, children, open, onOpenChange }: RxOverflowMenuProps) {\n  const renderMenu = ({ anchorEl, open, onClose, children: menuChildren }: RenderMenuProps) => (\n    <RxPopoverMenu anchorEl={anchorEl} open={open} onClose={onClose}>\n      {menuChildren}\n    </RxPopoverMenu>\n  );\n\n  return (\n    <OverflowMenu opener={opener} renderMenu={renderMenu} open={open} onOpenChange={onOpenChange}>\n      {children}\n    </OverflowMenu>\n  );\n}\n\nRxOverflowMenu.overflowRole = 'menu' as const;\nexport default RxOverflowMenu;\n\nfunction RxPopoverMenu({ anchorEl, open, onClose, children }: RenderMenuProps) {\n  const virtualRef = useRef<{ getBoundingClientRect: () => DOMRect }>({\n    getBoundingClientRect: () => new DOMRect(),\n  });\n\n  useEffect(() => {\n    if (anchorEl) {\n      virtualRef.current = {\n        getBoundingClientRect: () => anchorEl.getBoundingClientRect(),\n      };\n    }\n  }, [anchorEl]);\n\n  return (\n    <Popover.Root open={open} onOpenChange={(o) => { if (!o) onClose(); }}>\n      <Popover.Anchor virtualRef={virtualRef} />\n      <Popover.Portal>\n        <Popover.Content\n          className=\"rx-menu-panel\"\n          sideOffset={4}\n          align=\"start\"\n          onClick={onClose}\n        >\n          {children}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["RxOverflowMenu","opener","children","open","onOpenChange","OverflowMenu","anchorEl","onClose","menuChildren","RxPopoverMenu","virtualRef","useRef","useEffect","Popover","o","jsx"],"mappings":";;;;;AASA,SAASA,EAAe,EAAE,QAAAC,GAAQ,UAAAC,GAAU,MAAAC,GAAM,cAAAC,KAAqC;AAOrF,2BACGC,GAAA,EAAa,QAAAJ,GAAgB,YAPb,CAAC,EAAE,UAAAK,GAAU,MAAAH,GAAM,SAAAI,GAAS,UAAUC,EAAA,wBACtDC,GAAA,EAAc,UAAAH,GAAoB,MAAMH,GAAM,SAAAI,GAC5C,UAAAC,GACH,GAIsD,MAAAL,GAAY,cAAAC,GAC/D,UAAAF,GACH;AAEJ;AAEAF,EAAe,eAAe;AAG9B,SAASS,EAAc,EAAE,UAAAH,GAAU,MAAAH,GAAM,SAAAI,GAAS,UAAAL,KAA6B;AAC7E,QAAMQ,IAAaC,EAAiD;AAAA,IAClE,uBAAuB,MAAM,IAAI,QAAA;AAAA,EAAQ,CAC1C;AAED,SAAAC,EAAU,MAAM;AACd,IAAIN,MACFI,EAAW,UAAU;AAAA,MACnB,uBAAuB,MAAMJ,EAAS,sBAAA;AAAA,IAAsB;AAAA,EAGlE,GAAG,CAACA,CAAQ,CAAC,qBAGVO,EAAQ,MAAR,EAAa,MAAAV,GAAY,cAAc,CAACW,MAAM;AAAE,IAAKA,KAAGP,EAAA;AAAA,EAAW,GAClE,UAAA;AAAA,IAAA,gBAAAQ,EAACF,EAAQ,QAAR,EAAe,YAAAH,EAAA,CAAwB;AAAA,IACxC,gBAAAK,EAACF,EAAQ,QAAR,EACC,UAAA,gBAAAE;AAAA,MAACF,EAAQ;AAAA,MAAR;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAM;AAAA,QACN,SAASN;AAAA,QAER,UAAAL;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/RxOverflow/index.d.ts

@@ -1,3 +1,5 @@
+import '../Overflow/Overflow.css';
+import './rx.css';
 export { default as RxOverflow } from './RxOverflow';
 export { default as RxOverflowItem } from './RxOverflowItem';
 export { default as RxOverflowMenu } from './RxOverflowMenu';

package/dist/components/RxOverflow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RxOverflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RxOverflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC"}