@televet/kibble-ui 5.0.2-beta.menu.2 → 5.0.2-beta.menu.4

package/dist/chunks/{menu.component-CFt2LRsh.js → menu.component-D_Fd8OGb.js}

@@ -1,5 +1,5 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import st, { forwardRef as h, useEffect as B, useId as Y, useRef as le, useCallback as j, useState as L, useMemo as D } from "react";
+import st, { forwardRef as h, useEffect as _, useId as Y, useRef as le, 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";
@@ -12,11 +12,11 @@ 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 { c as lt } from "./create-slot-recipe-context-D_FXDJGp.js";
 import { d as dt } from "./icons-CoSqruIn.js";
-import { a as G, 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 { 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] = G({
+const [ve, m] = O({
   name: "MenuContext",
   hookName: "useMenuContext",
   providerName: "<MenuProvider />",
@@ -31,16 +31,16 @@ const Ce = h((o, n) => {
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
 Ce.displayName = "MenuArrowTip";
-const [ne, Zt] = G({
+const [ne, Zt] = O({
   name: "MenuItemContext",
   hookName: "useMenuItemContext",
   providerName: "<MenuItemProvider />"
-}), [oe, Ie] = G({
+}), [oe, Ie] = O({
   name: "MenuItemPropsContext",
   hookName: "useMenuItemPropsContext",
   providerName: "<MenuItemPropsProvider />"
 }), be = h((o, n) => {
-  const [t, s] = _()(o, [
+  const [t, s] = $()(o, [
     "checked",
     "closeOnSelect",
     "disabled",
@@ -70,22 +70,22 @@ const we = h((o, n) => {
 });
 we.displayName = "MenuIndicator";
 const Ne = h((o, n) => {
-  const [t, s] = _()(o, [
+  const [t, s] = $()(o, [
     "closeOnSelect",
     "disabled",
     "value",
     "valueText",
     "onSelect"
   ]), c = m(), u = p(c.getItemProps(t), s), a = c.getItemState(t);
-  return B(() => 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] = G({
+const [ye, Ae] = O({
   name: "MenuItemGroupContext",
   hookName: "useMenuItemGroupContext",
   providerName: "<MenuItemGroupProvider />"
 }), Te = h((o, n) => {
-  const [t, s] = _()(o, ["id"]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps(a), s);
+  const [t, s] = $()(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 }) });
 });
 Te.displayName = "MenuItemGroup";
@@ -110,7 +110,7 @@ const $e = h((o, n) => {
 });
 $e.displayName = "MenuPositioner";
 const Re = h((o, n) => {
-  const [t, s] = _()(o, [
+  const [t, s] = $()(o, [
     "closeOnSelect",
     "disabled",
     "value",
@@ -125,7 +125,7 @@ const Re = h((o, n) => {
 });
 Re.displayName = "MenuRadioItem";
 const Le = h((o, n) => {
-  const [t, s] = _()(o, [
+  const [t, s] = $()(o, [
     "id",
     "onValueChange",
     "value"
@@ -135,9 +135,9 @@ const Le = h((o, n) => {
 Le.displayName = "MenuRadioItemGroup";
 const Be = (o) => {
   const n = le(o), t = le(!1);
-  B(() => {
+  _(() => {
     n.current = o;
-  }), B(() => {
+  }), _(() => {
     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] = G({
+}, [ze, Fe] = O({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
-}), [We, jt] = G({
+}), [We, jt] = O({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
 }), Ct = (o) => {
-  const [n, t] = fe(o), [s, c] = _()(t, [
+  const [n, t] = fe(o), [s, c] = $()(t, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -327,12 +327,12 @@ const Ke = ({
     ]
   }
 ), Gt = ({ tooltipProps: o, isMenuOpen: n, ...t }) => {
-  const [s, c] = L(!1), u = j(() => {
+  const [s, c] = B(!1), u = j(() => {
     n || c(!0);
   }, [n]), a = j(() => {
     n || c(!1);
   }, [n]);
-  return B(() => {
+  return _(() => {
     n && c(!1);
   }, [n]), /* @__PURE__ */ e.jsx(ge, { label: t.text || "", open: s && !n, ...o, children: /* @__PURE__ */ e.jsx(
     T,
@@ -355,7 +355,7 @@ const Ke = ({
   ["data-testid"]: a = "kibble-menu-item",
   ...i
 }) => {
-  const [f, N] = L(!1), y = j(() => {
+  const [f, N] = B(!1), y = j(() => {
     t && t(i.value);
   }, [t, i.value]);
   if (c === "submenu") {
@@ -520,7 +520,11 @@ const Ke = ({
     searchPlaceholder: qe = "Search...",
     shouldTruncateText: Je,
     ...se
-  } = n || {}, [Qe, Ue] = L(!1), [q, J] = L(""), [F, Q] = L(I), ce = D(() => {
+  } = n || {}, [Qe, Ue] = B(!1), [q, J] = B(""), [F, Q] = B(I);
+  _(() => {
+    console.log("positionerProps", t);
+  }, [t]);
+  const ce = D(() => {
     const r = {};
     return F?.forEach((l) => {
       const d = l.groupLabel || "default", P = l.type === "checkbox" ? "checkbox" : "default";
@@ -532,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]), O = D(() => I?.filter((r) => r.type === "checkbox") || [], [I]), U = j(
-    (r) => O.some((l) => l.value === r && l.checked),
-    [O]
-  ), b = D(() => O.filter((r) => r.checked), [O]), 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);
@@ -584,7 +588,7 @@ const Ke = ({
     },
     [I, a, b]
   );
-  return B(() => {
+  return _(() => {
     Q(w ? I : ue(q, I));
   }, [q, w, ue, I]), /* @__PURE__ */ e.jsxs(
     bt,
@@ -646,7 +650,7 @@ const Ke = ({
                   "data-testid": `${i}-checkbox-group-header`,
                   px: 3,
                   mt: K ? 1 : 2,
-                  children: y && !!O.length && /* @__PURE__ */ e.jsx(
+                  children: y && !!R.length && /* @__PURE__ */ e.jsx(
                     pe,
                     {
                       onToggle: ie,
@@ -657,8 +661,8 @@ 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(($) => $.value)?.some(
-                  ($) => b.some((E) => E.value === $ && E.checked)
+                const d = r === "default", P = Object.keys(l), v = d ? st.Fragment : yt, tt = 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: [
@@ -673,20 +677,23 @@ const Ke = ({
                     )
                   ] }) }),
                   Object.entries(l).map(
-                    ([$, E]) => E.map((R, nt) => {
-                      const { groupLabel: ot, ...rt } = R;
+                    ([L, E]) => E.map((G, nt) => {
+                      const { groupLabel: ot, ...rt } = G;
                       return /* @__PURE__ */ e.jsx(
                         _t,
                         {
                           ...rt,
                           shouldTruncateText: Je,
-                          ...R.type === "checkbox" && {
-                            checked: U(R.value)
+                          ...G.type === "checkbox" && {
+                            checked: U(G.value)
                           },
-                          "data-testid": `${i}-item-${R.label}`,
-                          onSelect: () => Xe(R)
+                          "data-testid": `${i}-item-${G.label}`,
+                          onSelect: () => Xe(G),
+                          ...G.type === "submenu" && {
+                            positionerProps: t
+                          }
                         },
-                        `menu-item-${ot}-${$}-${nt}`
+                        `menu-item-${ot}-${L}-${nt}`
                       );
                     })
                   )
@@ -702,4 +709,4 @@ const Ke = ({
 export {
   Ot as M
 };
-//# sourceMappingURL=menu.component-CFt2LRsh.js.map
+//# sourceMappingURL=menu.component-D_Fd8OGb.js.map