@televet/kibble-ui 5.0.2-beta.menu.3 → 5.0.2-beta.menu.5

package/dist/chunks/{menu.component-DgJSzOB8.js → menu.component-Di6p2OQm.js}

@@ -1,46 +1,46 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import st, { forwardRef as h, useEffect as G, useId as Y, useRef as le, useCallback as j, useState as B, useMemo as D } from "react";
+import st, { forwardRef as h, useEffect as _, useId as Y, useRef as de, useCallback as j, useState as B, useMemo as D } from "react";
 import { B as T } from "./index-9BerxEcw.js";
 import { B as Z } from "./button.component-BO6oee_V.js";
-import { I as he } from "./icon.component-PV_nHBId.js";
+import { I as ge } from "./icon.component-PV_nHBId.js";
 import { W as ee } from "./text.component-CdTyTFds.js";
-import { T as ge } from "./tooltip.component-C_NS-AoH.js";
+import { T as fe } from "./tooltip.component-C_NS-AoH.js";
 import { F as z } from "./flex-CX-8gE9T.js";
 import { W as ct } from "./textInput.component-BC0Hi8R_.js";
 import { S as at } from "./spinner.component-B3dkvoO9.js";
 import { u as it } from "./usePortalContentRef-DO_jc4W9.js";
-import { u as te, s as fe, c as Me, d as Pe, P as ut } from "./index-C9UYIjEB.js";
+import { u as te, s as Me, c as Pe, d as ve, P as ut } from "./index-C9UYIjEB.js";
 import { c as lt } from "./create-slot-recipe-context-D_FXDJGp.js";
 import { d as dt } from "./icons-CoSqruIn.js";
-import { a as _, d as g, b as O, e as pt, u as mt, f as xt, g as ht, n as gt } from "./use-locale-context-Bw4Gg9Z0.js";
+import { a as O, d as g, b as $, e as pt, u as mt, f as xt, g as ht, n as gt } from "./use-locale-context-Bw4Gg9Z0.js";
 import { m as ft, c as Mt } from "./index-CbVKVxMW.js";
 import { a6 as p } from "./index-fHSGm2nC.js";
 import { W as Pt } from "./checkbox.component-DE35wBj-.js";
-const [ve, m] = _({
+const [je, m] = O({
   name: "MenuContext",
   hookName: "useMenuContext",
   providerName: "<MenuProvider />",
   strict: !1
-}), je = h((o, n) => {
+}), Ce = h((o, n) => {
   const t = m(), s = p(t.getArrowProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-je.displayName = "MenuArrow";
-const Ce = h((o, n) => {
+Ce.displayName = "MenuArrow";
+const Ie = h((o, n) => {
   const t = m(), s = p(t.getArrowTipProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-Ce.displayName = "MenuArrowTip";
-const [ne, Zt] = _({
+Ie.displayName = "MenuArrowTip";
+const [ne, Zt] = O({
   name: "MenuItemContext",
   hookName: "useMenuItemContext",
   providerName: "<MenuItemProvider />"
-}), [oe, Ie] = _({
+}), [oe, be] = O({
   name: "MenuItemPropsContext",
   hookName: "useMenuItemPropsContext",
   providerName: "<MenuItemPropsProvider />"
-}), be = h((o, n) => {
-  const [t, s] = O()(o, [
+}), ke = h((o, n) => {
+  const [t, s] = $()(o, [
     "checked",
     "closeOnSelect",
     "disabled",
@@ -53,69 +53,69 @@ const [ne, Zt] = _({
   }, u = m(), a = p(u.getOptionItemProps(c), s), i = u.getOptionItemState(c);
   return /* @__PURE__ */ e.jsx(oe, { value: c, children: /* @__PURE__ */ e.jsx(ne, { value: i, children: /* @__PURE__ */ e.jsx(g.div, { ...a, ref: n }) }) });
 });
-be.displayName = "MenuCheckboxItem";
-const ke = h((o, n) => {
+ke.displayName = "MenuCheckboxItem";
+const Se = h((o, n) => {
   const t = m(), s = te(), c = p(t.getContentProps(), s.getPresenceProps(), o);
   return s.unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...c, ref: pt(s.ref, n) });
 });
-ke.displayName = "MenuContent";
-const Se = h((o, n) => {
+Se.displayName = "MenuContent";
+const we = h((o, n) => {
   const t = m(), s = p(t.getContextTriggerProps(), o);
   return /* @__PURE__ */ e.jsx(g.button, { ...s, ref: n });
 });
-Se.displayName = "MenuContextTrigger";
-const we = h((o, n) => {
+we.displayName = "MenuContextTrigger";
+const Ne = h((o, n) => {
   const t = m(), s = p(t.getIndicatorProps(), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-we.displayName = "MenuIndicator";
-const Ne = h((o, n) => {
-  const [t, s] = O()(o, [
+Ne.displayName = "MenuIndicator";
+const ye = h((o, n) => {
+  const [t, s] = $()(o, [
     "closeOnSelect",
     "disabled",
     "value",
     "valueText",
     "onSelect"
   ]), c = m(), u = p(c.getItemProps(t), s), a = c.getItemState(t);
-  return G(() => c.addItemListener({ id: a.id, onSelect: t.onSelect }), [a.id, t.onSelect]), /* @__PURE__ */ e.jsx(oe, { value: t, children: /* @__PURE__ */ e.jsx(ne, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) }) });
+  return _(() => c.addItemListener({ id: a.id, onSelect: t.onSelect }), [a.id, t.onSelect]), /* @__PURE__ */ e.jsx(oe, { value: t, children: /* @__PURE__ */ e.jsx(ne, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: n }) }) });
 });
-Ne.displayName = "MenuItem";
-const [ye, Ae] = _({
+ye.displayName = "MenuItem";
+const [Ae, Te] = O({
   name: "MenuItemGroupContext",
   hookName: "useMenuItemGroupContext",
   providerName: "<MenuItemGroupProvider />"
-}), Te = h((o, n) => {
-  const [t, s] = O()(o, ["id"]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps(a), s);
-  return /* @__PURE__ */ e.jsx(ye, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
+}), Ge = h((o, n) => {
+  const [t, s] = $()(o, ["id"]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps(a), s);
+  return /* @__PURE__ */ e.jsx(Ae, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
 });
-Te.displayName = "MenuItemGroup";
-const Ge = h((o, n) => {
-  const t = m(), s = Ae(), c = p(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
-  return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
-});
-Ge.displayName = "MenuItemGroupLabel";
+Ge.displayName = "MenuItemGroup";
 const _e = h((o, n) => {
-  const t = m(), s = Ie(), c = p(t.getItemIndicatorProps(s), o);
+  const t = m(), s = Te(), c = p(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
-_e.displayName = "MenuItemIndicator";
+_e.displayName = "MenuItemGroupLabel";
 const Oe = h((o, n) => {
-  const t = m(), s = Ie(), c = p(t.getItemTextProps(s), o);
+  const t = m(), s = be(), c = p(t.getItemIndicatorProps(s), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
-Oe.displayName = "MenuItemText";
+Oe.displayName = "MenuItemIndicator";
 const $e = h((o, n) => {
+  const t = m(), s = be(), c = p(t.getItemTextProps(s), o);
+  return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
+});
+$e.displayName = "MenuItemText";
+const Re = h((o, n) => {
   const t = m(), s = p(t.getPositionerProps(), o);
   return te().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-$e.displayName = "MenuPositioner";
-const Re = h((o, n) => {
-  const [t, s] = O()(o, [
+Re.displayName = "MenuPositioner";
+const Le = h((o, n) => {
+  const [t, s] = $()(o, [
     "closeOnSelect",
     "disabled",
     "value",
     "valueText"
-  ]), c = m(), u = Ae(), a = {
+  ]), c = m(), u = Te(), a = {
     ...t,
     checked: u.value === t.value,
     type: "radio",
@@ -123,21 +123,21 @@ const Re = h((o, n) => {
   }, i = p(c.getOptionItemProps(a), s), f = c.getOptionItemState(a);
   return /* @__PURE__ */ e.jsx(oe, { value: a, children: /* @__PURE__ */ e.jsx(ne, { value: f, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) }) });
 });
-Re.displayName = "MenuRadioItem";
-const Le = h((o, n) => {
-  const [t, s] = O()(o, [
+Le.displayName = "MenuRadioItem";
+const Be = h((o, n) => {
+  const [t, s] = $()(o, [
     "id",
     "onValueChange",
     "value"
   ]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps({ id: a.id }), s);
-  return /* @__PURE__ */ e.jsx(ye, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
+  return /* @__PURE__ */ e.jsx(Ae, { value: a, children: /* @__PURE__ */ e.jsx(g.div, { ...i, ref: n }) });
 });
-Le.displayName = "MenuRadioItemGroup";
-const Be = (o) => {
-  const n = le(o), t = le(!1);
-  G(() => {
+Be.displayName = "MenuRadioItemGroup";
+const ze = (o) => {
+  const n = de(o), t = de(!1);
+  _(() => {
     n.current = o;
-  }), G(() => {
+  }), _(() => {
     t.current !== !0 && (t.current = !0, n.current());
   }, []);
 }, vt = (o) => {
@@ -148,18 +148,18 @@ const Be = (o) => {
     ...o
   }, u = ht(ft, c);
   return { api: Mt(u, gt), service: u };
-}, [ze, Fe] = _({
+}, [Fe, We] = O({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
-}), [We, jt] = _({
+}), [Ee, jt] = O({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
 }), Ct = (o) => {
-  const [n, t] = fe(o), [s, c] = O()(t, [
+  const [n, t] = Me(o), [s, c] = $()(t, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -181,25 +181,25 @@ const Be = (o) => {
     "open",
     "positioning",
     "typeahead"
-  ]), u = m(), a = Fe(), { api: i, service: f } = vt(s), N = Me(p({ present: i.open }, n));
-  Be(() => {
+  ]), u = m(), a = We(), { api: i, service: f } = vt(s), N = Pe(p({ present: i.open }, n));
+  ze(() => {
     a && u && (u.setChild(f), i.setParent(a));
   });
   const y = j(() => u?.getTriggerItemProps(i), [i, u]);
-  return /* @__PURE__ */ e.jsx(We, { value: y, children: /* @__PURE__ */ e.jsx(ze, { value: f, children: /* @__PURE__ */ e.jsx(ve, { value: i, children: /* @__PURE__ */ e.jsx(Pe, { value: N, ...c }) }) }) });
+  return /* @__PURE__ */ e.jsx(Ee, { value: y, children: /* @__PURE__ */ e.jsx(Fe, { value: f, children: /* @__PURE__ */ e.jsx(je, { value: i, children: /* @__PURE__ */ e.jsx(ve, { value: N, ...c }) }) }) });
 }, It = (o) => {
-  const n = m(), t = Fe(), [s, { value: c, children: u }] = fe(o), { api: a, service: i } = c, f = Me(p({ present: a.open }, s));
-  Be(() => {
+  const n = m(), t = We(), [s, { value: c, children: u }] = Me(o), { api: a, service: i } = c, f = Pe(p({ present: a.open }, s));
+  ze(() => {
     t && n && (n.setChild(i), a.setParent(t));
   });
   const N = j(() => n?.getTriggerItemProps(a), [a, n]);
-  return /* @__PURE__ */ e.jsx(We, { value: N, children: /* @__PURE__ */ e.jsx(ze, { value: i, children: /* @__PURE__ */ e.jsx(ve, { value: a, children: /* @__PURE__ */ e.jsx(Pe, { value: f, children: u }) }) }) });
-}, Ee = h((o, n) => {
+  return /* @__PURE__ */ e.jsx(Ee, { value: N, children: /* @__PURE__ */ e.jsx(Fe, { value: i, children: /* @__PURE__ */ e.jsx(je, { value: a, children: /* @__PURE__ */ e.jsx(ve, { value: f, children: u }) }) }) });
+}, De = h((o, n) => {
   const t = m(), s = p(t.getSeparatorProps(), o);
   return /* @__PURE__ */ e.jsx(g.hr, { ...s, ref: n });
 });
-Ee.displayName = "MenuSeparator";
-const De = h((o, n) => {
+De.displayName = "MenuSeparator";
+const Ve = h((o, n) => {
   const t = m(), s = te(), c = p(
     {
       ...t.getTriggerProps(),
@@ -209,67 +209,67 @@ const De = h((o, n) => {
   );
   return /* @__PURE__ */ e.jsx(g.button, { ...c, ref: n });
 });
-De.displayName = "MenuTrigger";
-const Ve = h((o, n) => {
+Ve.displayName = "MenuTrigger";
+const He = h((o, n) => {
   const t = jt(), s = p(t?.() ?? {}, o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
-Ve.displayName = "MenuTriggerItem";
+He.displayName = "MenuTriggerItem";
 const {
-  withRootProvider: He,
+  withRootProvider: Ke,
   withContext: x
 } = lt({ key: "menu" });
-He(
+Ke(
   It
 );
-const bt = He(Ct, {
+const bt = Ke(Ct, {
   defaultProps: { lazyMount: !0, unmountOnExit: !0 }
 }), kt = x(
-  De,
+  Ve,
   "trigger",
   { forwardAsChild: !0 }
 );
-x(Se, "contextTrigger", { forwardAsChild: !0 });
+x(we, "contextTrigger", { forwardAsChild: !0 });
 const St = x(
-  $e,
+  Re,
   "positioner",
   { forwardAsChild: !0 }
 );
 x(
-  Ee,
+  De,
   "separator",
   { forwardAsChild: !0 }
 );
 const wt = x(
-  ke,
+  Se,
   "content",
   { forwardAsChild: !0 }
 ), Nt = x(
-  Ce,
+  Ie,
   "arrowTip",
   { forwardAsChild: !0 }
 );
 x(
-  je,
+  Ce,
   "arrow",
   { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(Nt, {}) } }
 );
 x(
-  we,
+  Ne,
   "indicator",
   { forwardAsChild: !0 }
 );
 const yt = x(
-  Te,
+  Ge,
   "itemGroup",
   { forwardAsChild: !0 }
-), At = x(Ge, "itemGroupLabel", { forwardAsChild: !0 }), de = x(
-  Ne,
+), At = x(_e, "itemGroupLabel", { forwardAsChild: !0 }), pe = x(
+  ye,
   "item",
   { forwardAsChild: !0 }
-), Tt = x(Ve, "item", { forwardAsChild: !0 });
+), Tt = x(He, "item", { forwardAsChild: !0 });
 x(
-  Oe,
+  $e,
   "itemText",
   { forwardAsChild: !0 }
 );
@@ -277,18 +277,18 @@ x(
   "kbd",
   "itemCommand"
 );
-x(_e, "itemIndicator", {
+x(Oe, "itemIndicator", {
   forwardAsChild: !0,
   defaultProps: { children: /* @__PURE__ */ e.jsx(dt, { boxSize: "4" }) }
 });
-x(be, "item", { forwardAsChild: !0 });
-x(Le, "itemGroup", { forwardAsChild: !0 });
+x(ke, "item", { forwardAsChild: !0 });
+x(Be, "itemGroup", { forwardAsChild: !0 });
 x(
-  Re,
+  Le,
   "item",
   { forwardAsChild: !0 }
 );
-const Ke = ({
+const qe = ({
   hideCaret: o = !1,
   size: n = "md",
   text: t,
@@ -323,7 +323,7 @@ const Ke = ({
           children: t
         }
       ),
-      !o && /* @__PURE__ */ e.jsx(z, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(he, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
+      !o && /* @__PURE__ */ e.jsx(z, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(ge, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
     ]
   }
 ), Gt = ({ tooltipProps: o, isMenuOpen: n, ...t }) => {
@@ -332,9 +332,9 @@ const Ke = ({
   }, [n]), a = j(() => {
     n || c(!1);
   }, [n]);
-  return G(() => {
+  return _(() => {
     n && c(!1);
-  }, [n]), /* @__PURE__ */ e.jsx(ge, { label: t.text || "", open: s && !n, ...o, children: /* @__PURE__ */ e.jsx(
+  }, [n]), /* @__PURE__ */ e.jsx(fe, { label: t.text || "", open: s && !n, ...o, children: /* @__PURE__ */ e.jsx(
     T,
     {
       onClick: (i) => {
@@ -342,7 +342,7 @@ const Ke = ({
       },
       onMouseEnter: u,
       onMouseLeave: a,
-      children: /* @__PURE__ */ e.jsx(Ke, { ...t })
+      children: /* @__PURE__ */ e.jsx(qe, { ...t })
     }
   ) });
 }, _t = ({
@@ -368,7 +368,7 @@ const Ke = ({
       lazyMount: I = !0,
       unmountOnExit: V = !0
     } = i;
-    return console.log("positionerProps", M), /* @__PURE__ */ e.jsx(
+    return console.log("positionerProps inside menu item", M), /* @__PURE__ */ e.jsx(
       Ot,
       {
         lazyMount: I,
@@ -394,7 +394,7 @@ const Ke = ({
                   variant: u
                 }
               ),
-              /* @__PURE__ */ e.jsx(he, { name: "chevronRight", size: "sm" })
+              /* @__PURE__ */ e.jsx(ge, { name: "chevronRight", size: "sm" })
             ]
           }
         ),
@@ -408,7 +408,7 @@ const Ke = ({
   if (c === "checkbox") {
     const { checked: S, value: C, disabled: M, tooltipLabel: A, ...k } = i;
     return /* @__PURE__ */ e.jsxs(
-      de,
+      pe,
       {
         className: "Menu__Item--Checkbox",
         "data-testid": `${a}-checkbox`,
@@ -437,7 +437,7 @@ const Ke = ({
   if (c === "default") {
     const { selected: S = !1, disabled: C, value: M, tooltipLabel: A, ...k } = i;
     return /* @__PURE__ */ e.jsx(
-      de,
+      pe,
       {
         className: "Menu__Item--Default",
         "data-testid": `${a}-default`,
@@ -471,19 +471,19 @@ const Ke = ({
     n,
     typeof o == "string" ? /* @__PURE__ */ e.jsx(ee, { size: "sm", truncated: t, variant: s, children: o }) : o
   ] });
-  return c ? /* @__PURE__ */ e.jsx(ge, { label: c, children: u }) : u;
-}, pe = ({
+  return c ? /* @__PURE__ */ e.jsx(fe, { label: c, children: u }) : u;
+}, me = ({
   groupName: o,
   hasSelectedItems: n = !1,
   onToggle: t,
   ["data-testid"]: s = "kibble-menu-toggle-buttons"
 }) => {
   const c = !!o;
-  return /* @__PURE__ */ e.jsx(T, { className: "Menu__ToggleButtons", "data-testid": s, ...c && { textAlign: "right", w: "50%" }, children: c ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(xe, { hasSelectedItems: n, groupName: o, onToggle: t }) : /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(z, { justifyContent: "space-between", children: [
-    /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }),
-    /* @__PURE__ */ e.jsx(xe, { hasSelectedItems: n, groupName: o, onToggle: t })
+  return /* @__PURE__ */ e.jsx(T, { className: "Menu__ToggleButtons", "data-testid": s, ...c && { textAlign: "right", w: "50%" }, children: c ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(he, { hasSelectedItems: n, groupName: o, onToggle: t }) : /* @__PURE__ */ e.jsx(xe, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(z, { justifyContent: "space-between", children: [
+    /* @__PURE__ */ e.jsx(xe, { groupName: o, onToggle: t }),
+    /* @__PURE__ */ e.jsx(he, { hasSelectedItems: n, groupName: o, onToggle: t })
   ] }) });
-}, me = ({ groupName: o, onToggle: n }) => /* @__PURE__ */ e.jsx(Z, { variant: "ghost", size: "xs", onClick: () => n({ groupName: o, clear: !1 }), children: "Select All" }), xe = ({ hasSelectedItems: o, groupName: n, onToggle: t }) => /* @__PURE__ */ e.jsx(
+}, xe = ({ groupName: o, onToggle: n }) => /* @__PURE__ */ e.jsx(Z, { variant: "ghost", size: "xs", onClick: () => n({ groupName: o, clear: !1 }), children: "Select All" }), he = ({ hasSelectedItems: o, groupName: n, onToggle: t }) => /* @__PURE__ */ e.jsx(
   Z,
   {
     variant: "ghostNeutral",
@@ -517,12 +517,12 @@ const Ke = ({
     onSelect: H,
     onSelectAll: re,
     searchable: K,
-    searchPlaceholder: qe = "Search...",
-    shouldTruncateText: Je,
+    searchPlaceholder: Je = "Search...",
+    shouldTruncateText: Qe,
     ...se
-  } = n || {}, [Qe, Ue] = B(!1), [q, J] = B(""), [F, Q] = B(I);
-  G(() => {
-    console.log("positionerProps", t);
+  } = n || {}, [Ue, Xe] = B(!1), [q, J] = B(""), [F, Q] = B(I);
+  _(() => {
+    console.log("positionerProps at root menu level", t);
   }, [t]);
   const ce = D(() => {
     const r = {};
@@ -536,10 +536,10 @@ const Ke = ({
       const P = M.indexOf(l), v = M.indexOf(d);
       return P !== -1 && v !== -1 ? P - v : P !== -1 ? -1 : v !== -1 ? 1 : 0;
     });
-  }, [ce, M]), $ = D(() => I?.filter((r) => r.type === "checkbox") || [], [I]), U = j(
-    (r) => $.some((l) => l.value === r && l.checked),
-    [$]
-  ), b = D(() => $.filter((r) => r.checked), [$]), ie = j(
+  }, [ce, M]), R = D(() => I?.filter((r) => r.type === "checkbox") || [], [I]), U = j(
+    (r) => R.some((l) => l.value === r && l.checked),
+    [R]
+  ), b = D(() => R.filter((r) => r.checked), [R]), ie = j(
     ({ groupName: r, clear: l }) => {
       let d;
       const P = F.filter((v) => v.type === "checkbox" && !v.disabled);
@@ -554,7 +554,7 @@ const Ke = ({
       re?.({ allSelectedItems: d });
     },
     [re, F, b]
-  ), Xe = j(
+  ), Ye = j(
     (r) => {
       if (r.type === "checkbox") {
         const l = U(r.value) ? b.filter((d) => d.value !== r.value) : [...b, r];
@@ -572,23 +572,23 @@ const Ke = ({
       H?.({ item: r, allSelectedItems: [r] });
     },
     [H, U, b]
-  ), ue = j((r, l) => r === "" || !r ? l : l.filter((d) => !!(typeof d.label == "string" ? d.label : d.valueText)?.toLowerCase().includes(r.toLowerCase())), []), Ye = j(
+  ), ue = j((r, l) => r === "" || !r ? l : l.filter((d) => !!(typeof d.label == "string" ? d.label : d.valueText)?.toLowerCase().includes(r.toLowerCase())), []), Ze = j(
     (r) => {
       const l = r.target.value;
       J(l), w && w(r);
     },
     [w]
-  ), Ze = j(() => {
+  ), et = j(() => {
     J(""), w && w({
       target: { value: "" }
     });
-  }, [w]), et = j(
+  }, [w]), tt = j(
     (r) => {
-      Ue(r), r || (J(""), Q(I)), a && a({ open: r, allSelectedItems: b });
+      Xe(r), r || (J(""), Q(I)), a && a({ open: r, allSelectedItems: b });
     },
     [I, a, b]
   );
-  return G(() => {
+  return _(() => {
     Q(w ? I : ue(q, I));
   }, [q, w, ue, I]), /* @__PURE__ */ e.jsxs(
     bt,
@@ -596,11 +596,11 @@ const Ke = ({
       lazyMount: u,
       unmountOnExit: u,
       onOpenChange: (r) => {
-        et(r.open);
+        tt(r.open);
       },
       ...f,
       children: [
-        c || /* @__PURE__ */ e.jsx(kt, { asChild: !0, className: "Menu__Trigger", "data-testid": `${i}-trigger`, children: o?.showTooltip ? /* @__PURE__ */ e.jsx(Gt, { isMenuOpen: Qe, ...o }) : /* @__PURE__ */ e.jsx(Ke, { ...o }) }),
+        c || /* @__PURE__ */ e.jsx(kt, { asChild: !0, className: "Menu__Trigger", "data-testid": `${i}-trigger`, children: o?.showTooltip ? /* @__PURE__ */ e.jsx(Gt, { isMenuOpen: Ue, ...o }) : /* @__PURE__ */ e.jsx(qe, { ...o }) }),
         /* @__PURE__ */ e.jsx(ut, { disabled: !s, container: N || void 0, children: /* @__PURE__ */ e.jsx(St, { className: "Menu", "data-testid": i, ...t, children: /* @__PURE__ */ e.jsxs(
           wt,
           {
@@ -630,12 +630,12 @@ const Ke = ({
                     {
                       className: "Menu__SearchBar",
                       "data-testid": `${i}-search-bar`,
-                      placeholder: qe,
-                      onChange: Ye,
+                      placeholder: Je,
+                      onChange: Ze,
                       size: "sm",
                       value: q,
                       clearable: !0,
-                      onClear: Ze,
+                      onClear: et,
                       onKeyDown: (r) => {
                         r.code === "Space" && r.stopPropagation();
                       }
@@ -650,8 +650,8 @@ const Ke = ({
                   "data-testid": `${i}-checkbox-group-header`,
                   px: 3,
                   mt: K ? 1 : 2,
-                  children: y && !!$.length && /* @__PURE__ */ e.jsx(
-                    pe,
+                  children: y && !!R.length && /* @__PURE__ */ e.jsx(
+                    me,
                     {
                       onToggle: ie,
                       hasSelectedItems: !!b.length
@@ -661,36 +661,39 @@ const Ke = ({
               ),
               A && /* @__PURE__ */ e.jsx(z, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(at, { fullScreen: !0 }) }),
               /* @__PURE__ */ e.jsx(T, { className: "Menu__List", "data-testid": `${i}-list`, children: ae.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ae.map(([r, l]) => {
-                const d = r === "default", P = Object.keys(l), v = d ? st.Fragment : yt, tt = l.checkbox?.map((R) => R.value)?.some(
-                  (R) => b.some((E) => E.value === R && E.checked)
+                const d = r === "default", P = Object.keys(l), v = d ? st.Fragment : yt, nt = l.checkbox?.map((L) => L.value)?.some(
+                  (L) => b.some((E) => E.value === L && E.checked)
                 );
                 return /* @__PURE__ */ e.jsxs(v, { children: [
                   !d && /* @__PURE__ */ e.jsx(At, { children: /* @__PURE__ */ e.jsxs(z, { alignItems: "center", justifyContent: "space-between", children: [
                     r,
                     S && P.includes("checkbox") && /* @__PURE__ */ e.jsx(
-                      pe,
+                      me,
                       {
                         groupName: r,
                         onToggle: ie,
-                        hasSelectedItems: tt
+                        hasSelectedItems: nt
                       }
                     )
                   ] }) }),
                   Object.entries(l).map(
-                    ([R, E]) => E.map((L, nt) => {
-                      const { groupLabel: ot, ...rt } = L;
-                      return /* @__PURE__ */ e.jsx(
+                    ([L, E]) => E.map((G, ot) => {
+                      const { groupLabel: rt, ...le } = G;
+                      return console.log("item props", le), console.log("positionerProps inside menu item", t), /* @__PURE__ */ e.jsx(
                         _t,
                         {
-                          ...rt,
-                          shouldTruncateText: Je,
-                          ...L.type === "checkbox" && {
-                            checked: U(L.value)
+                          ...le,
+                          shouldTruncateText: Qe,
+                          ...G.type === "checkbox" && {
+                            checked: U(G.value)
                           },
-                          "data-testid": `${i}-item-${L.label}`,
-                          onSelect: () => Xe(L)
+                          "data-testid": `${i}-item-${G.label}`,
+                          onSelect: () => Ye(G),
+                          ...G.type === "submenu" && {
+                            positionerProps: t
+                          }
                         },
-                        `menu-item-${ot}-${R}-${nt}`
+                        `menu-item-${rt}-${L}-${ot}`
                       );
                     })
                   )
@@ -706,4 +709,4 @@ const Ke = ({
 export {
   Ot as M
 };
-//# sourceMappingURL=menu.component-DgJSzOB8.js.map
+//# sourceMappingURL=menu.component-Di6p2OQm.js.map