overflow-toolbar 0.1.5 → 0.1.7

package/README.md

@@ -156,6 +156,30 @@ Framework-agnostic controller class for building custom implementations.
 | `disconnect()` | Stop observing and clear all applied styles/attributes |
 | `update()` | Re-scan children and restart (call after DOM changes) |
 
+## Important: No Wrapper Elements
+
+`OverflowItem` and `OverflowMenu` components **must** be direct children of the `Overflow` container. Do not wrap them in `<div>`, `<span>`, layout components, or any other intermediate elements.
+
+The overflow engine scans immediate children for internal role markers to measure, track, and transition items between states. Wrapper elements break this scan, causing items to never collapse, never appear in the menu, or fail to transition between visible/min/hidden states.
+
+```tsx
+{/* WRONG — wrapper breaks overflow behavior */}
+<RxOverflow>
+  <div className="group">
+    <RxOverflowItem menuid="a"><button>A</button></RxOverflowItem>
+    <RxOverflowItem menuid="b"><button>B</button></RxOverflowItem>
+  </div>
+</RxOverflow>
+
+{/* CORRECT — items are direct children */}
+<RxOverflow>
+  <RxOverflowItem menuid="a"><button>A</button></RxOverflowItem>
+  <RxOverflowItem menuid="b"><button>B</button></RxOverflowItem>
+</RxOverflow>
+```
+
+The same rule applies to the vanilla JS variant — `<li>` elements with `data-overflow-role` must be direct children of the `<ul>` container.
+
 ## Modes
 
 ### Compact Mode

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.5",
+  "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",
@@ -110,7 +110,11 @@
     "test:unit": "vitest run --project unit",
     "test:coverage": "vitest run --project unit --coverage",
     "typecheck": "tsc -p tsconfig.build.json --noEmit",
-    "deploy": "pnpm run build:lib && npm publish --access public"
+    "prepublishOnly": "pnpm run build:lib && pnpm run test:unit",
+    "release:patch": "npm version patch && npm publish --access public",
+    "release:minor": "npm version minor && npm publish --access public",
+    "release:major": "npm version major && npm publish --access public",
+    "prepare": "husky"
   },
   "dependencies": {
     "clsx": "^2.0.0",
@@ -167,6 +171,7 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "eslint-plugin-storybook": "^10.2.14",
     "globals": "^16.5.0",
+    "husky": "^9.1.7",
     "jsdom": "^28.1.0",
     "lucide-react": "^0.576.0",
     "playwright": "^1.58.2",