overflow-toolbar 0.1.6 → 0.1.7

package/dist/components/MuiOverflow/MuiOverflowMenu.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import i from "@mui/material/Menu";
 import l from "../Overflow/OverflowMenu.js";
-function M({ opener: r, children: n }) {
-  return /* @__PURE__ */ e(l, { opener: r, renderMenu: ({ anchorEl: o, open: u, onClose: t, children: f }) => /* @__PURE__ */ e(i, { anchorEl: o, open: u, onClose: t, children: f }), children: n });
+function M({ opener: n, children: o }) {
+  return /* @__PURE__ */ r(l, { opener: n, renderMenu: ({ anchorEl: u, open: t, onClose: e, children: f }) => /* @__PURE__ */ r(i, { anchorEl: u, open: t, onClose: e, onClick: e, children: f }), children: o });
 }
 const a = Object.assign(M, { overflowRole: "menu" });
 export {

package/dist/components/MuiOverflow/MuiOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MuiOverflowMenu.js","sources":["../../../src/components/MuiOverflow/MuiOverflowMenu.tsx"],"sourcesContent":["import Menu from '@mui/material/Menu';\nimport type { ReactNode } from 'react';\nimport { OverflowMenu, type RenderMenuProps } from '../Overflow';\n\ninterface MuiOverflowMenuProps {\n  opener: ReactNode;\n  children: ReactNode;\n}\n\nfunction MuiOverflowMenu({ opener, children }: MuiOverflowMenuProps) {\n  const renderMenu = ({ anchorEl, open, onClose, children: menuChildren }: RenderMenuProps) => (\n    <Menu anchorEl={anchorEl} open={open} onClose={onClose}>\n      {menuChildren}\n    </Menu>\n  );\n\n  return (\n    <OverflowMenu opener={opener} renderMenu={renderMenu}>\n      {children}\n    </OverflowMenu>\n  );\n}\n\nexport default Object.assign(MuiOverflowMenu, { overflowRole: 'menu' as const });\n"],"names":["MuiOverflowMenu","opener","children","jsx","OverflowMenu","anchorEl","open","onClose","menuChildren","Menu","MuiOverflowMenu_default"],"mappings":";;;AASA,SAASA,EAAgB,EAAE,QAAAC,GAAQ,UAAAC,KAAkC;AAOnE,SACE,gBAAAC,EAACC,GAAA,EAAa,QAAAH,GAAgB,YAPb,CAAC,EAAE,UAAAI,GAAU,MAAAC,GAAM,SAAAC,GAAS,UAAUC,EAAA,MACvD,gBAAAL,EAACM,GAAA,EAAK,UAAAJ,GAAoB,MAAAC,GAAY,SAAAC,GACnC,UAAAC,GACH,GAKG,UAAAN,EAAA,CACH;AAEJ;AAEA,MAAAQ,IAAe,OAAO,OAAOV,GAAiB,EAAE,cAAc,QAAiB;"}
+{"version":3,"file":"MuiOverflowMenu.js","sources":["../../../src/components/MuiOverflow/MuiOverflowMenu.tsx"],"sourcesContent":["import Menu from '@mui/material/Menu';\nimport type { ReactNode } from 'react';\nimport { OverflowMenu, type RenderMenuProps } from '../Overflow';\n\ninterface MuiOverflowMenuProps {\n  opener: ReactNode;\n  children: ReactNode;\n}\n\nfunction MuiOverflowMenu({ opener, children }: MuiOverflowMenuProps) {\n  const renderMenu = ({ anchorEl, open, onClose, children: menuChildren }: RenderMenuProps) => (\n    <Menu anchorEl={anchorEl} open={open} onClose={onClose} onClick={onClose}>\n      {menuChildren}\n    </Menu>\n  );\n\n  return (\n    <OverflowMenu opener={opener} renderMenu={renderMenu}>\n      {children}\n    </OverflowMenu>\n  );\n}\n\nexport default Object.assign(MuiOverflowMenu, { overflowRole: 'menu' as const });\n"],"names":["MuiOverflowMenu","opener","children","jsx","OverflowMenu","anchorEl","open","onClose","menuChildren","Menu","MuiOverflowMenu_default"],"mappings":";;;AASA,SAASA,EAAgB,EAAE,QAAAC,GAAQ,UAAAC,KAAkC;AAOnE,SACE,gBAAAC,EAACC,GAAA,EAAa,QAAAH,GAAgB,YAPb,CAAC,EAAE,UAAAI,GAAU,MAAAC,GAAM,SAAAC,GAAS,UAAUC,QACvD,gBAAAL,EAACM,KAAK,UAAAJ,GAAoB,MAAAC,GAAY,SAAAC,GAAkB,SAASA,GAC9D,UAAAC,GACH,GAKG,UAAAN,EAAA,CACH;AAEJ;AAEA,MAAAQ,IAAe,OAAO,OAAOV,GAAiB,EAAE,cAAc,QAAiB;"}

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,EAA6D,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAI/H,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,2CAqExE;;;;AAED,wBAA8E"}
+{"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"}

package/dist/components/Overflow/OverflowMenu.js

@@ -1,36 +1,38 @@
-import { jsxs as M, Fragment as j, jsx as x } from "react/jsx-runtime";
-import { useState as H, useRef as b, useEffect as R, Children as $, isValidElement as l, cloneElement as m } from "react";
-import { useOverflow as A } from "./OverflowContext.js";
-function B({ opener: s, children: f, renderMenu: h }) {
-  const { hiddenMap: i } = A(), [c, t] = H(null), p = !!c, n = [...i.values()].some((e) => e === "hidden"), d = b(n);
-  R(() => {
-    d.current && !n && t(null), d.current = n;
+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 v = (e) => {
-    t(e.currentTarget);
-  }, u = () => {
+  const p = () => {
+    const e = o.current?.firstElementChild;
+    t(e ?? o.current);
+  }, v = () => {
     t(null);
   }, r = [];
-  $.forEach(f, (e) => {
-    l(e) && r.push({ menuid: e.props.menuid, content: e.props.children });
+  x.forEach(m, (e) => {
+    y(e) && r.push({ menuid: e.props.menuid, content: e.props.children });
   });
-  const C = r.filter(({ menuid: e }) => e === void 0 ? !0 : i.get(e) === "hidden"), E = r.some(({ menuid: e }) => e === void 0), a = !n && !E, O = l(s) ? m(s, { onClick: v }) : s, g = C.map(({ menuid: e, content: o }, w) => {
-    const k = e ?? `menu-item-${w}`;
-    return l(o) ? m(o, {
-      key: k,
-      onClick: (...y) => {
-        const I = o.props.onClick;
-        I?.(...y), u();
+  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(
+      "li",
+      {
+        ref: o,
+        className: "overflow-opener",
+        "data-state": c ? "hidden" : void 0,
+        style: c ? { display: "none" } : void 0,
+        onClick: p,
+        children: a
       }
-    }) : o;
-  });
-  return /* @__PURE__ */ M(j, { children: [
-    /* @__PURE__ */ x("li", { className: "overflow-opener", "data-state": a ? "hidden" : void 0, style: a ? { display: "none" } : void 0, children: O }),
-    h({ anchorEl: c, open: p, onClose: u, children: g })
+    ),
+    f({ anchorEl: l, open: h, onClose: v, children: O })
   ] });
 }
-const T = Object.assign(B, { overflowRole: "menu" });
+const B = Object.assign(R, { overflowRole: "menu" });
 export {
-  T as default
+  B as default
 };
 //# sourceMappingURL=OverflowMenu.js.map

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

@@ -1 +1 @@
-{"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\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 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 = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\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  // Clone opener to attach click handler\n  const openerElement = isValidElement<Record<string, unknown>>(opener)\n    ? cloneElement(opener as ReactElement<{ onClick?: (e: React.MouseEvent<HTMLElement>) => void }>, { onClick: handleOpen })\n    : opener;\n\n  const menuChildren = visibleItems.map(({ menuid, content }, i) => {\n    // Wrap each menu item's content and attach close-on-click\n    const key = menuid ?? `menu-item-${i}`;\n    if (isValidElement<{ onClick?: () => void }>(content)) {\n      return cloneElement(content as ReactElement<{ onClick?: () => void }>, {\n        key,\n        onClick: (...args: unknown[]) => {\n          const original = (content as ReactElement<{ onClick?: (...a: unknown[]) => void }>).props.onClick;\n          original?.(...args);\n          handleClose();\n        },\n      });\n    }\n    return content;\n  });\n\n  return (\n    <>\n      <li className=\"overflow-opener\" data-state={hidden ? 'hidden' : undefined} style={hidden ? { display: 'none' } : undefined}>\n        {openerElement}\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","open","hasHiddenItems","s","prevHasHidden","useRef","useEffect","handleOpen","event","handleClose","menuItems","Children","child","isValidElement","visibleItems","menuid","hasMenuOnlyItems","hidden","openerElement","cloneElement","menuChildren","content","i","key","args","original","jsxs","Fragment","jsx","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,IAAO,EAAQH,GAEfI,IAAiB,CAAC,GAAGN,EAAU,OAAA,CAAQ,EAAE,KAAK,CAAAO,MAAKA,MAAM,QAAQ,GACjEC,IAAgBC,EAAOH,CAAc;AAG3C,EAAAI,EAAU,MAAM;AACd,IAAIF,EAAc,WAAW,CAACF,KAC5BH,EAAY,IAAI,GAElBK,EAAc,UAAUF;AAAA,EAC1B,GAAG,CAACA,CAAc,CAAC;AAEnB,QAAMK,IAAa,CAACC,MAAyC;AAC3D,IAAAT,EAAYS,EAAM,aAAa;AAAA,EACjC,GAEMC,IAAc,MAAM;AACxB,IAAAV,EAAY,IAAI;AAAA,EAClB,GAGMW,IAAkE,CAAA;AACxE,EAAAC,EAAS,QAAQjB,GAAU,CAACkB,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,KAC1BnB,EAAU,IAAImB,CAAM,MAAM,QAClC,GAEKC,IAAmBN,EAAU,KAAK,CAAC,EAAE,QAAAK,EAAA,MAAaA,MAAW,MAAS,GACtEE,IAAS,CAACf,KAAkB,CAACc,GAG7BE,IAAgBL,EAAwCpB,CAAM,IAChE0B,EAAa1B,GAAkF,EAAE,SAASc,EAAA,CAAY,IACtHd,GAEE2B,IAAeN,EAAa,IAAI,CAAC,EAAE,QAAAC,GAAQ,SAAAM,EAAA,GAAWC,MAAM;AAEhE,UAAMC,IAAMR,KAAU,aAAaO,CAAC;AACpC,WAAIT,EAAyCQ,CAAO,IAC3CF,EAAaE,GAAmD;AAAA,MACrE,KAAAE;AAAA,MACA,SAAS,IAAIC,MAAoB;AAC/B,cAAMC,IAAYJ,EAAkE,MAAM;AAC1F,QAAAI,IAAW,GAAGD,CAAI,GAClBf,EAAA;AAAA,MACF;AAAA,IAAA,CACD,IAEIY;AAAA,EACT,CAAC;AAED,SACE,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,mBAAkB,cAAYX,IAAS,WAAW,QAAW,OAAOA,IAAS,EAAE,SAAS,OAAA,IAAW,QAC9G,UAAAC,GACH;AAAA,IACCvB,EAAW,EAAE,UAAAG,GAAU,MAAAG,GAAM,SAASQ,GAAa,UAAUW,GAAc;AAAA,EAAA,GAC9E;AAEJ;AAEA,MAAAS,IAAe,OAAO,OAAOrC,GAAc,EAAE,cAAc,QAAiB;"}
+{"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;"}

package/dist/components/RxOverflow/RxOverflowMenu.js

@@ -3,17 +3,17 @@ 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: i, open: t, onClose: u, children: l }) => /* @__PURE__ */ e(m, { anchorEl: i, open: t, onClose: u, children: l }), 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 });
 }
 const v = Object.assign(d, { overflowRole: "menu" });
-function m({ anchorEl: n, open: o, onClose: f, children: i }) {
+function m({ anchorEl: n, open: o, onClose: i, children: u }) {
   const t = s({
     getBoundingClientRect: () => new DOMRect()
   });
   return n && (t.current = {
     getBoundingClientRect: () => n.getBoundingClientRect()
-  }), /* @__PURE__ */ c(r.Root, { open: o, onOpenChange: (u) => {
-    u || f();
+  }), /* @__PURE__ */ c(r.Root, { open: o, onOpenChange: (f) => {
+    f || i();
   }, children: [
     /* @__PURE__ */ e(r.Anchor, { virtualRef: t }),
     /* @__PURE__ */ e(r.Portal, { children: /* @__PURE__ */ e(
@@ -22,7 +22,8 @@ function m({ anchorEl: n, open: o, onClose: f, children: i }) {
         className: "rx-menu-panel",
         sideOffset: 4,
         align: "start",
-        children: i
+        onClick: i,
+        children: u
       }
     ) })
   ] });

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        >\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,QAEL,UAAAX;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, 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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overflow-toolbar",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "description": "Responsive toolbar overflow component — items automatically collapse into a dropdown menu as the container shrinks. Supports visible, icon-only (min), and hidden states. Ships with React (Radix UI), MUI, and vanilla JS implementations.",
   "license": "MIT",