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

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

@@ -1,8 +1,8 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import st, { forwardRef as x, 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 G, 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 xe } from "./icon.component-PV_nHBId.js";
+import { I as he } 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 { F as z } from "./flex-CX-8gE9T.js";
@@ -12,35 +12,35 @@ 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 ht, g as xt, n as gt } from "./use-locale-context-Bw4Gg9Z0.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 { 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] = _({
   name: "MenuContext",
   hookName: "useMenuContext",
   providerName: "<MenuProvider />",
   strict: !1
-}), je = x((o, n) => {
+}), je = 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 = x((o, n) => {
+const Ce = 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] = G({
+const [ne, Zt] = _({
   name: "MenuItemContext",
   hookName: "useMenuItemContext",
   providerName: "<MenuItemProvider />"
-}), [oe, Ie] = G({
+}), [oe, Ie] = _({
   name: "MenuItemPropsContext",
   hookName: "useMenuItemPropsContext",
   providerName: "<MenuItemPropsProvider />"
-}), be = x((o, n) => {
-  const [t, s] = _()(o, [
+}), be = h((o, n) => {
+  const [t, s] = O()(o, [
     "checked",
     "closeOnSelect",
     "disabled",
@@ -54,63 +54,63 @@ const [ne, Zt] = G({
   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 = x((o, n) => {
+const ke = 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 = x((o, n) => {
+const Se = 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 = x((o, n) => {
+const we = 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 = x((o, n) => {
-  const [t, s] = _()(o, [
+const Ne = h((o, n) => {
+  const [t, s] = O()(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 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 }) }) });
 });
 Ne.displayName = "MenuItem";
-const [ye, Ae] = G({
+const [ye, Ae] = _({
   name: "MenuItemGroupContext",
   hookName: "useMenuItemGroupContext",
   providerName: "<MenuItemGroupProvider />"
-}), Te = x((o, n) => {
-  const [t, s] = _()(o, ["id"]), c = m(), a = { id: Y(), ...t }, i = p(c.getItemGroupProps(a), s);
+}), 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 }) });
 });
 Te.displayName = "MenuItemGroup";
-const Ge = x((o, n) => {
+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";
-const _e = x((o, n) => {
+const _e = h((o, n) => {
   const t = m(), s = Ie(), c = p(t.getItemIndicatorProps(s), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
 _e.displayName = "MenuItemIndicator";
-const Oe = x((o, n) => {
+const Oe = h((o, n) => {
   const t = m(), s = Ie(), c = p(t.getItemTextProps(s), o);
   return /* @__PURE__ */ e.jsx(g.div, { ...c, ref: n });
 });
 Oe.displayName = "MenuItemText";
-const $e = x((o, n) => {
+const $e = 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 = x((o, n) => {
-  const [t, s] = _()(o, [
+const Re = h((o, n) => {
+  const [t, s] = O()(o, [
     "closeOnSelect",
     "disabled",
     "value",
@@ -124,8 +124,8 @@ const Re = x((o, n) => {
   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 = x((o, n) => {
-  const [t, s] = _()(o, [
+const Le = h((o, n) => {
+  const [t, s] = O()(o, [
     "id",
     "onValueChange",
     "value"
@@ -135,31 +135,31 @@ const Le = x((o, n) => {
 Le.displayName = "MenuRadioItemGroup";
 const Be = (o) => {
   const n = le(o), t = le(!1);
-  B(() => {
+  G(() => {
     n.current = o;
-  }), B(() => {
+  }), G(() => {
     t.current !== !0 && (t.current = !0, n.current());
   }, []);
 }, vt = (o) => {
-  const n = Y(), { getRootNode: t } = mt(), { dir: s } = ht(), c = {
+  const n = Y(), { getRootNode: t } = mt(), { dir: s } = xt(), c = {
     id: n,
     dir: s,
     getRootNode: t,
     ...o
-  }, u = xt(ft, c);
+  }, u = ht(ft, c);
   return { api: Mt(u, gt), service: u };
-}, [ze, Fe] = G({
+}, [ze, Fe] = _({
   name: "MenuMachineContext",
   hookName: "useMenuMachineContext",
   providerName: "<MenuMachineProvider />",
   strict: !1
-}), [We, jt] = G({
+}), [We, jt] = _({
   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] = O()(t, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -194,12 +194,12 @@ const Be = (o) => {
   });
   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 = x((o, n) => {
+}, Ee = 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 = x((o, n) => {
+const De = h((o, n) => {
   const t = m(), s = te(), c = p(
     {
       ...t.getTriggerProps(),
@@ -210,80 +210,80 @@ const De = x((o, n) => {
   return /* @__PURE__ */ e.jsx(g.button, { ...c, ref: n });
 });
 De.displayName = "MenuTrigger";
-const Ve = x((o, n) => {
+const Ve = h((o, n) => {
   const t = jt(), s = p(t?.() ?? {}, o);
   return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: n });
 });
 Ve.displayName = "MenuTriggerItem";
 const {
   withRootProvider: He,
-  withContext: h
+  withContext: x
 } = lt({ key: "menu" });
 He(
   It
 );
 const bt = He(Ct, {
   defaultProps: { lazyMount: !0, unmountOnExit: !0 }
-}), kt = h(
+}), kt = x(
   De,
   "trigger",
   { forwardAsChild: !0 }
 );
-h(Se, "contextTrigger", { forwardAsChild: !0 });
-const St = h(
+x(Se, "contextTrigger", { forwardAsChild: !0 });
+const St = x(
   $e,
   "positioner",
   { forwardAsChild: !0 }
 );
-h(
+x(
   Ee,
   "separator",
   { forwardAsChild: !0 }
 );
-const wt = h(
+const wt = x(
   ke,
   "content",
   { forwardAsChild: !0 }
-), Nt = h(
+), Nt = x(
   Ce,
   "arrowTip",
   { forwardAsChild: !0 }
 );
-h(
+x(
   je,
   "arrow",
   { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(Nt, {}) } }
 );
-h(
+x(
   we,
   "indicator",
   { forwardAsChild: !0 }
 );
-const yt = h(
+const yt = x(
   Te,
   "itemGroup",
   { forwardAsChild: !0 }
-), At = h(Ge, "itemGroupLabel", { forwardAsChild: !0 }), de = h(
+), At = x(Ge, "itemGroupLabel", { forwardAsChild: !0 }), de = x(
   Ne,
   "item",
   { forwardAsChild: !0 }
-), Tt = h(Ve, "item", { forwardAsChild: !0 });
-h(
+), Tt = x(Ve, "item", { forwardAsChild: !0 });
+x(
   Oe,
   "itemText",
   { forwardAsChild: !0 }
 );
-h(
+x(
   "kbd",
   "itemCommand"
 );
-h(_e, "itemIndicator", {
+x(_e, "itemIndicator", {
   forwardAsChild: !0,
   defaultProps: { children: /* @__PURE__ */ e.jsx(dt, { boxSize: "4" }) }
 });
-h(be, "item", { forwardAsChild: !0 });
-h(Le, "itemGroup", { forwardAsChild: !0 });
-h(
+x(be, "item", { forwardAsChild: !0 });
+x(Le, "itemGroup", { forwardAsChild: !0 });
+x(
   Re,
   "item",
   { forwardAsChild: !0 }
@@ -323,16 +323,16 @@ const Ke = ({
           children: t
         }
       ),
-      !o && /* @__PURE__ */ e.jsx(z, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(xe, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
+      !o && /* @__PURE__ */ e.jsx(z, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(he, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
     ]
   }
 ), 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 G(() => {
     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") {
@@ -368,7 +368,7 @@ const Ke = ({
       lazyMount: I = !0,
       unmountOnExit: V = !0
     } = i;
-    return /* @__PURE__ */ e.jsx(
+    return console.log("positionerProps", M), /* @__PURE__ */ e.jsx(
       Ot,
       {
         lazyMount: I,
@@ -394,7 +394,7 @@ const Ke = ({
                   variant: u
                 }
               ),
-              /* @__PURE__ */ e.jsx(xe, { name: "chevronRight", size: "sm" })
+              /* @__PURE__ */ e.jsx(he, { name: "chevronRight", size: "sm" })
             ]
           }
         ),
@@ -479,11 +479,11 @@ const Ke = ({
   ["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(he, { hasSelectedItems: n, groupName: o, onToggle: t }) : /* @__PURE__ */ e.jsx(me, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(z, { justifyContent: "space-between", children: [
+  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(he, { hasSelectedItems: n, groupName: o, onToggle: t })
+    /* @__PURE__ */ e.jsx(xe, { 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" }), he = ({ hasSelectedItems: o, groupName: n, onToggle: t }) => /* @__PURE__ */ e.jsx(
+}, 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(
   Z,
   {
     variant: "ghostNeutral",
@@ -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);
+  G(() => {
+    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]), $ = 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(
     ({ groupName: r, clear: l }) => {
       let d;
       const P = F.filter((v) => v.type === "checkbox" && !v.disabled);
@@ -547,7 +551,7 @@ const Ke = ({
         );
       } else
         d = l ? [] : P.map((v) => ({ ...v, checked: !0 }));
-      console.log("newSelectedItems", d), re?.({ allSelectedItems: d });
+      re?.({ allSelectedItems: d });
     },
     [re, F, b]
   ), Xe = j(
@@ -570,9 +574,8 @@ const Ke = ({
     [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(
     (r) => {
-      console.log("e.target.value", r.target.value);
       const l = r.target.value;
-      console.log("searchInput", l), J(l), w && w(r);
+      J(l), w && w(r);
     },
     [w]
   ), Ze = j(() => {
@@ -585,7 +588,7 @@ const Ke = ({
     },
     [I, a, b]
   );
-  return B(() => {
+  return G(() => {
     Q(w ? I : ue(q, I));
   }, [q, w, ue, I]), /* @__PURE__ */ e.jsxs(
     bt,
@@ -647,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 && !!$.length && /* @__PURE__ */ e.jsx(
                     pe,
                     {
                       onToggle: ie,
@@ -658,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((R) => R.value)?.some(
+                  (R) => b.some((E) => E.value === R && E.checked)
                 );
                 return /* @__PURE__ */ e.jsxs(v, { children: [
                   !d && /* @__PURE__ */ e.jsx(At, { children: /* @__PURE__ */ e.jsxs(z, { alignItems: "center", justifyContent: "space-between", children: [
@@ -674,20 +677,20 @@ const Ke = ({
                     )
                   ] }) }),
                   Object.entries(l).map(
-                    ([$, E]) => E.map((R, nt) => {
-                      const { groupLabel: ot, ...rt } = R;
+                    ([R, E]) => E.map((L, nt) => {
+                      const { groupLabel: ot, ...rt } = L;
                       return /* @__PURE__ */ e.jsx(
                         _t,
                         {
                           ...rt,
                           shouldTruncateText: Je,
-                          ...R.type === "checkbox" && {
-                            checked: U(R.value)
+                          ...L.type === "checkbox" && {
+                            checked: U(L.value)
                           },
-                          "data-testid": `${i}-item-${R.label}`,
-                          onSelect: () => Xe(R)
+                          "data-testid": `${i}-item-${L.label}`,
+                          onSelect: () => Xe(L)
                         },
-                        `menu-item-${ot}-${$}-${nt}`
+                        `menu-item-${ot}-${R}-${nt}`
                       );
                     })
                   )
@@ -703,4 +706,4 @@ const Ke = ({
 export {
   Ot as M
 };
-//# sourceMappingURL=menu.component-Dd4ePEAs.js.map
+//# sourceMappingURL=menu.component-DgJSzOB8.js.map