@televet/kibble-ui 4.0.0-beta.9 → 4.0.0-beta.91

package/dist/chunks/menu.component-D38vU6MX.js

@@ -0,0 +1,599 @@
+import { j as e } from "./jsx-runtime-C5mzlN2N.js";
+import Ke, { forwardRef as x, useEffect as _, useId as F, useRef as Y, useCallback as C, useState as Z, useMemo as G } from "react";
+import { B as V } from "./button.component-DOAhnxbj.js";
+import { I as oe } from "./icon.component-DszmCnE4.js";
+import { W as z } from "./text.component-DJW--Vty.js";
+import { F as y } from "./flex-smlF8uQG.js";
+import { W as qe } from "./textInput.component-evu71Hys.js";
+import { S as Je } from "./spinner.component-CzTRzWbL.js";
+import { B as O } from "./box-Ck9I7FYv.js";
+import { u as Qe } from "./usePortalContentRef-DO_jc4W9.js";
+import { W as Ue, u as Xe } from "./checkbox.component-BpSGOInE.js";
+import { c as N, f as g, a as w, u as W, h as Ye, i as Ze, j as et, k as tt, n as nt, s as re, l as se, m as ae, P as ot } from "./use-locale-context-BiiNTYMT.js";
+import { c as rt } from "./create-slot-recipe-context-BJmsuxih.js";
+import { b as st } from "./icons-BXxdrBrf.js";
+import { m as at, c as ct } from "./index-Cbkb_94C.js";
+import { a1 as m } from "./index-YtNA0Ueo.js";
+const [ce, p] = N({
+  name: "MenuContext",
+  hookName: "useMenuContext",
+  providerName: "<MenuProvider />",
+  strict: !1
+}), ue = x((n, o) => {
+  const t = p(), r = m(t.getArrowProps(), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
+});
+ue.displayName = "MenuArrow";
+const ie = x((n, o) => {
+  const t = p(), r = m(t.getArrowTipProps(), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
+});
+ie.displayName = "MenuArrowTip";
+const [D, Wt] = N({
+  name: "MenuItemContext",
+  hookName: "useMenuItemContext",
+  providerName: "<MenuItemProvider />"
+}), [le, de] = N({
+  name: "MenuOptionItemPropsContext",
+  hookName: "useMenuOptionItemPropsContext",
+  providerName: "<MenuOptionItemPropsProvider />"
+}), me = x((n, o) => {
+  const [t, r] = w()(n, [
+    "checked",
+    "closeOnSelect",
+    "disabled",
+    "onCheckedChange",
+    "value",
+    "valueText"
+  ]), s = {
+    ...t,
+    type: "checkbox"
+  }, u = p(), c = m(u.getOptionItemProps(s), r), l = u.getOptionItemState(s);
+  return /* @__PURE__ */ e.jsx(le, { value: s, children: /* @__PURE__ */ e.jsx(D, { value: l, children: /* @__PURE__ */ e.jsx(g.div, { ...c, ref: o }) }) });
+});
+me.displayName = "MenuCheckboxItem";
+const pe = x((n, o) => {
+  const t = p(), r = W(), s = m(t.getContentProps(), r.getPresenceProps(), n);
+  return r.unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...s, ref: Ye(r.ref, o) });
+});
+pe.displayName = "MenuContent";
+const he = x((n, o) => {
+  const t = p(), r = m(t.getContextTriggerProps(), n);
+  return /* @__PURE__ */ e.jsx(g.button, { ...r, ref: o });
+});
+he.displayName = "MenuContextTrigger";
+const xe = x((n, o) => {
+  const t = p(), r = m(t.getIndicatorProps(), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
+});
+xe.displayName = "MenuIndicator";
+const ge = x((n, o) => {
+  const [t, r] = w()(n, [
+    "closeOnSelect",
+    "disabled",
+    "value",
+    "valueText",
+    "onSelect"
+  ]), s = p(), u = m(s.getItemProps(t), r), c = s.getItemState(t);
+  return _(() => s.addItemListener({ id: c.id, onSelect: t.onSelect }), [c.id, t.onSelect]), /* @__PURE__ */ e.jsx(D, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...u, ref: o }) });
+});
+ge.displayName = "MenuItem";
+const [Me, fe] = N({
+  name: "MenuItemGroupContext",
+  hookName: "useMenuItemGroupContext",
+  providerName: "<MenuItemGroupProvider />"
+}), Pe = x((n, o) => {
+  const [t, r] = w()(n, ["id"]), s = p(), c = { id: F(), ...t }, l = m(s.getItemGroupProps(c), r);
+  return /* @__PURE__ */ e.jsx(Me, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: o }) });
+});
+Pe.displayName = "MenuItemGroup";
+const ve = x((n, o) => {
+  const t = p(), r = fe(), s = m(t.getItemGroupLabelProps({ htmlFor: r.id }), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: o });
+});
+ve.displayName = "MenuItemGroupLabel";
+const Ie = x((n, o) => {
+  const t = p(), r = de(), s = m(t.getItemIndicatorProps(r), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: o });
+});
+Ie.displayName = "MenuItemIndicator";
+const Ce = x((n, o) => {
+  const t = p(), r = de(), s = m(t.getItemTextProps(r), n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...s, ref: o });
+});
+Ce.displayName = "MenuItemText";
+const je = x((n, o) => {
+  const t = p(), r = m(t.getPositionerProps(), n);
+  return W().unmounted ? null : /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
+});
+je.displayName = "MenuPositioner";
+const be = x((n, o) => {
+  const [t, r] = w()(n, [
+    "closeOnSelect",
+    "disabled",
+    "value",
+    "valueText"
+  ]), s = p(), u = fe(), c = {
+    ...t,
+    checked: u.value === t.value,
+    type: "radio",
+    onCheckedChange: () => u.onValueChange?.({ value: t.value })
+  }, l = m(s.getOptionItemProps(c), r), M = s.getOptionItemState(c);
+  return /* @__PURE__ */ e.jsx(le, { value: c, children: /* @__PURE__ */ e.jsx(D, { value: M, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: o }) }) });
+});
+be.displayName = "MenuRadioItem";
+const ke = x((n, o) => {
+  const [t, r] = w()(n, [
+    "id",
+    "onValueChange",
+    "value"
+  ]), s = p(), c = { id: F(), ...t }, l = m(s.getItemGroupProps({ id: c.id }), r);
+  return /* @__PURE__ */ e.jsx(Me, { value: c, children: /* @__PURE__ */ e.jsx(g.div, { ...l, ref: o }) });
+});
+ke.displayName = "MenuRadioItemGroup";
+const Se = (n) => {
+  const o = Y(n), t = Y(!1);
+  _(() => {
+    o.current = n;
+  }), _(() => {
+    t.current !== !0 && (t.current = !0, o.current());
+  }, []);
+}, ut = (n) => {
+  const o = F(), { getRootNode: t } = Ze(), { dir: r } = et(), s = {
+    id: o,
+    dir: r,
+    getRootNode: t,
+    ...n
+  }, u = tt(at, s);
+  return { api: ct(u, nt), service: u };
+}, [Ne, we] = N({
+  name: "MenuMachineContext",
+  hookName: "useMenuMachineContext",
+  providerName: "<MenuMachineProvider />",
+  strict: !1
+}), [Te, it] = N({
+  name: "MenuMachineContext",
+  hookName: "useMenuMachineContext",
+  providerName: "<MenuMachineProvider />",
+  strict: !1
+}), lt = (n) => {
+  const [o, t] = re(n), [r, s] = w()(t, [
+    "anchorPoint",
+    "aria-label",
+    "closeOnSelect",
+    "composite",
+    "defaultHighlightedValue",
+    "defaultOpen",
+    "highlightedValue",
+    "id",
+    "ids",
+    "loopFocus",
+    "navigate",
+    "onEscapeKeyDown",
+    "onFocusOutside",
+    "onHighlightChange",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onSelect",
+    "open",
+    "positioning",
+    "typeahead"
+  ]), u = p(), c = we(), { api: l, service: M } = ut(r), P = se(m({ present: l.open }, o));
+  Se(() => {
+    c && u && (u.setChild(M), l.setParent(c));
+  });
+  const b = C(() => u?.getTriggerItemProps(l), [l, u]);
+  return /* @__PURE__ */ e.jsx(Te, { value: b, children: /* @__PURE__ */ e.jsx(Ne, { value: M, children: /* @__PURE__ */ e.jsx(ce, { value: l, children: /* @__PURE__ */ e.jsx(ae, { value: P, ...s }) }) }) });
+}, dt = (n) => {
+  const o = p(), t = we(), [r, { value: s, children: u }] = re(n), { api: c, service: l } = s, M = se(m({ present: c.open }, r));
+  Se(() => {
+    t && o && (o.setChild(l), c.setParent(t));
+  });
+  const P = C(() => o?.getTriggerItemProps(c), [c, o]);
+  return /* @__PURE__ */ e.jsx(Te, { value: P, children: /* @__PURE__ */ e.jsx(Ne, { value: l, children: /* @__PURE__ */ e.jsx(ce, { value: c, children: /* @__PURE__ */ e.jsx(ae, { value: M, children: u }) }) }) });
+}, ye = x((n, o) => {
+  const t = p(), r = m(t.getSeparatorProps(), n);
+  return /* @__PURE__ */ e.jsx(g.hr, { ...r, ref: o });
+});
+ye.displayName = "MenuSeparator";
+const Ae = x((n, o) => {
+  const t = p(), r = W(), s = m(
+    {
+      ...t.getTriggerProps(),
+      "aria-controls": r.unmounted ? void 0 : t.getTriggerProps()["aria-controls"]
+    },
+    n
+  );
+  return /* @__PURE__ */ e.jsx(g.button, { ...s, ref: o });
+});
+Ae.displayName = "MenuTrigger";
+const Ge = x((n, o) => {
+  const t = it(), r = m(t?.() ?? {}, n);
+  return /* @__PURE__ */ e.jsx(g.div, { ...r, ref: o });
+});
+Ge.displayName = "MenuTriggerItem";
+const {
+  withRootProvider: Oe,
+  withContext: h
+} = rt({ key: "menu" });
+Oe(
+  dt
+);
+const mt = Oe(lt, {
+  defaultProps: { lazyMount: !0, unmountOnExit: !0 }
+}), pt = h(
+  Ae,
+  "trigger",
+  { forwardAsChild: !0 }
+);
+h(he, "contextTrigger", { forwardAsChild: !0 });
+const ht = h(
+  je,
+  "positioner",
+  { forwardAsChild: !0 }
+);
+h(
+  ye,
+  "separator",
+  { forwardAsChild: !0 }
+);
+const xt = h(
+  pe,
+  "content",
+  { forwardAsChild: !0 }
+), gt = h(
+  ie,
+  "arrowTip",
+  { forwardAsChild: !0 }
+);
+h(
+  ue,
+  "arrow",
+  { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(gt, {}) } }
+);
+h(
+  xe,
+  "indicator",
+  { forwardAsChild: !0 }
+);
+const Mt = h(
+  Pe,
+  "itemGroup",
+  { forwardAsChild: !0 }
+), ft = h(ve, "itemGroupLabel", { forwardAsChild: !0 }), Pt = h(
+  ge,
+  "item",
+  { forwardAsChild: !0 }
+), vt = h(Ge, "item", { forwardAsChild: !0 });
+h(
+  Ce,
+  "itemText",
+  { forwardAsChild: !0 }
+);
+h(
+  "kbd",
+  "itemCommand"
+);
+h(Ie, "itemIndicator", {
+  forwardAsChild: !0,
+  defaultProps: { children: /* @__PURE__ */ e.jsx(st, { boxSize: "4" }) }
+});
+const It = h(me, "item", { forwardAsChild: !0 });
+h(ke, "itemGroup", { forwardAsChild: !0 });
+h(
+  be,
+  "item",
+  { forwardAsChild: !0 }
+);
+const Ct = ({
+  hideCaret: n = !1,
+  size: o = "md",
+  text: t,
+  textProps: r,
+  variant: s,
+  ...u
+}) => /* @__PURE__ */ e.jsxs(
+  V,
+  {
+    className: "Menu__Button",
+    "data-testid": "kibble-menu-button",
+    size: o,
+    variant: s,
+    ...u,
+    ...!t && n && { paddingInline: 0, paddingBlock: 0 },
+    children: [
+      t && /* @__PURE__ */ e.jsx(
+        z,
+        {
+          className: "Menu__ButtonText",
+          "data-testid": "kibble-menu-button-text",
+          fontWeight: "semibold",
+          size: o,
+          color: s ? "inherit" : r?.color || "text.contrast",
+          truncate: !0,
+          ...r,
+          children: t
+        }
+      ),
+      !n && /* @__PURE__ */ e.jsx(y, { className: "Menu__ButtonCaret", "data-testid": "kibble-menu-button-caret", children: /* @__PURE__ */ e.jsx(oe, { name: "chevronDown", size: o === "lg" ? "sm" : "xs" }) })
+    ]
+  }
+), jt = ({
+  label: n,
+  leftElement: o,
+  onSelect: t,
+  shouldTruncateText: r,
+  type: s = "default",
+  variant: u,
+  ...c
+}) => {
+  const l = C(() => {
+    t && t(c.value);
+  }, [t, c.value]);
+  if (s === "submenu") {
+    const { valueText: M, listProps: P } = c;
+    return /* @__PURE__ */ e.jsx(
+      bt,
+      {
+        submenuTrigger: /* @__PURE__ */ e.jsxs(
+          vt,
+          {
+            className: "Menu__Item--Submenu",
+            "data-testid": "kibble-menu-item-submenu",
+            justifyContent: "space-between",
+            "aria-valuetext": M,
+            children: [
+              /* @__PURE__ */ e.jsx(
+                L,
+                {
+                  label: n,
+                  leftElement: o,
+                  shouldTruncateText: r,
+                  variant: u
+                }
+              ),
+              /* @__PURE__ */ e.jsx(oe, { name: "chevronRight", size: "sm" })
+            ]
+          }
+        ),
+        portalled: !0,
+        listProps: P
+      }
+    );
+  }
+  if (s === "checkbox") {
+    const { checked: M, value: P, closeOnSelect: b, ...I } = c;
+    return /* @__PURE__ */ e.jsxs(
+      It,
+      {
+        className: "Menu__Item--Checkbox",
+        "data-testid": "kibble-menu-item-checkbox",
+        value: P,
+        checked: !!M,
+        onCheckedChange: l,
+        closeOnSelect: b || !1,
+        gap: 3,
+        ...I,
+        children: [
+          /* @__PURE__ */ e.jsx(Ue, { checked: !!M, size: "md", fullWidth: !1 }),
+          /* @__PURE__ */ e.jsx(
+            L,
+            {
+              label: n,
+              leftElement: o,
+              shouldTruncateText: r,
+              variant: u
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (s === "default") {
+    const { selected: M = !1, value: P, ...b } = c;
+    return /* @__PURE__ */ e.jsx(
+      Pt,
+      {
+        className: "Menu__Item--Default",
+        "data-testid": "kibble-menu-item-default",
+        value: P,
+        onSelect: l,
+        ...M && { bgColor: "background.secondaryAlpha.hover" },
+        ...b,
+        children: /* @__PURE__ */ e.jsx(
+          L,
+          {
+            label: n,
+            leftElement: o,
+            shouldTruncateText: r,
+            variant: M ? "info" : u
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ e.jsx(e.Fragment, {});
+}, L = ({
+  label: n,
+  leftElement: o,
+  shouldTruncateText: t,
+  variant: r
+}) => /* @__PURE__ */ e.jsxs(y, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
+  o,
+  typeof n == "string" ? /* @__PURE__ */ e.jsx(z, { size: "sm", truncated: t, variant: r, children: n }) : n
+] }), ee = ({
+  groupName: n,
+  hasSelectedItems: o = !1,
+  onToggle: t
+}) => {
+  const r = !!n;
+  return /* @__PURE__ */ e.jsx(
+    O,
+    {
+      className: "Menu__ToggleButtons",
+      "data-testid": "kibble-menu-toggle-buttons",
+      ...r ? { textAlign: "right", w: "50%" } : { mt: 2 },
+      children: r ? /* @__PURE__ */ e.jsx(e.Fragment, { children: o ? /* @__PURE__ */ e.jsx(ne, { hasSelectedItems: o, groupName: n, onToggle: t }) : /* @__PURE__ */ e.jsx(te, { groupName: n, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(y, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ e.jsx(te, { groupName: n, onToggle: t }),
+        /* @__PURE__ */ e.jsx(ne, { hasSelectedItems: o, groupName: n, onToggle: t })
+      ] })
+    }
+  );
+}, te = ({ groupName: n, onToggle: o }) => /* @__PURE__ */ e.jsx(V, { variant: "ghost", size: "xs", onClick: () => o({ groupName: n, clear: !1 }), children: "Select All" }), ne = ({ hasSelectedItems: n, groupName: o, onToggle: t }) => /* @__PURE__ */ e.jsx(
+  V,
+  {
+    variant: "ghostNeutral",
+    iconName: "arrowCircle",
+    size: "xs",
+    disabled: !n,
+    onClick: () => t({ groupName: o, clear: !0 }),
+    children: "Clear All"
+  }
+), bt = ({
+  buttonProps: n,
+  listProps: o,
+  portalled: t = !1,
+  submenuTrigger: r,
+  ...s
+}) => {
+  const { contentRef: u } = Qe(), {
+    canSelectAll: c,
+    canSelectGroups: l,
+    emptyStateText: M = "No results found",
+    loading: P,
+    maxH: b = "480px",
+    menuItems: I = [],
+    minW: _e = "240px",
+    onSearch: j,
+    onSelect: E,
+    onSelectAll: H,
+    searchable: K,
+    searchPlaceholder: Re = "Search...",
+    shouldTruncateText: Be,
+    ...$e
+  } = o || {}, [R, B] = Z(""), [q, $] = Z(I), J = G(() => {
+    const a = {};
+    return q?.forEach((i) => {
+      const d = i.groupLabel || "default", f = i.type === "checkbox" ? "checkbox" : "default";
+      a[d] || (a[d] = {}), a[d][f] || (a[d][f] = []), a[d][f].push(i);
+    }), a;
+  }, [q]), Q = G(() => Object.entries(J), [J]), S = G(() => I?.filter((a) => a.type === "checkbox") || [], [I]), Le = G(() => (S?.filter((i) => i.checked) || []).map((i) => i.value), [S]), v = Xe({
+    defaultValue: Le
+  }), U = C((a, i) => a === "" || !a ? i : i.filter((d) => !!(typeof d.label == "string" ? d.label : d.valueText)?.toLowerCase().includes(a.toLowerCase())), []);
+  _(() => {
+    $(j ? I : U(R, I));
+  }, [R, j, U, I]);
+  const Fe = C(
+    (a) => {
+      const i = a.target.value;
+      B(i), j && j(a);
+    },
+    [j]
+  ), Ve = C(() => {
+    B(""), j && j({
+      target: { value: "" }
+    });
+  }, [j]), X = C(
+    ({ groupName: a, clear: i }) => {
+      let d = [];
+      if (a) {
+        const f = S.filter((k) => k.groupLabel === a).map((k) => k.value);
+        d = i ? v.value.filter((k) => !f.includes(k)) : [...v.value, ...f];
+      } else
+        d = i ? [] : S.map((f) => f.value);
+      H?.(d), v.setValue(d);
+    },
+    [S, H, v]
+  ), ze = C(
+    (a) => {
+      a.onSelect?.(a.value);
+      const i = v.value, d = v.isChecked(a.value);
+      E?.(
+        a.value,
+        d ? i.filter((f) => f !== a.value) : [...i, a.value]
+      ), a.type === "checkbox" && v.toggleValue(a.value);
+    },
+    [E, v]
+  ), We = C(
+    (a) => {
+      a || (B(""), $(I));
+    },
+    [I]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    mt,
+    {
+      ...s,
+      onOpenChange: (a) => {
+        We(a.open), s.onOpenChange?.(a);
+      },
+      children: [
+        r || /* @__PURE__ */ e.jsx(pt, { asChild: !0, className: "Menu__Trigger", "data-testid": "kibble-menu-trigger", children: /* @__PURE__ */ e.jsx(Ct, { ...n }) }),
+        /* @__PURE__ */ e.jsx(ot, { disabled: !t, container: u || void 0, children: /* @__PURE__ */ e.jsx(ht, { className: "Menu", "data-testid": "kibble-menu", children: /* @__PURE__ */ e.jsxs(
+          xt,
+          {
+            className: "Menu__Content",
+            "data-testid": "kibble-menu-content",
+            maxH: b,
+            minW: _e,
+            ...$e,
+            children: [
+              (K || c) && /* @__PURE__ */ e.jsxs(O, { className: "Menu__Header", "data-testid": "kibble-menu-header", m: "0 12px 8px", children: [
+                K && /* @__PURE__ */ e.jsx(
+                  qe,
+                  {
+                    className: "Menu__SearchBar",
+                    "data-testid": "kibble-menu-search-bar",
+                    placeholder: Re,
+                    onChange: Fe,
+                    size: "sm",
+                    value: R,
+                    clearable: !0,
+                    onClear: Ve,
+                    formControlStyle: { mt: 1 }
+                  }
+                ),
+                c && !!S.length && /* @__PURE__ */ e.jsx(ee, { onToggle: X, hasSelectedItems: !!v.value.length })
+              ] }),
+              P ? /* @__PURE__ */ e.jsx(y, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(Je, {}) }) : /* @__PURE__ */ e.jsx(O, { className: "Menu__List", "data-testid": "kibble-menu-list", children: Q.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Q.map(([a, i]) => {
+                const d = a === "default", f = Object.keys(i), k = d ? Ke.Fragment : Mt, De = i.checkbox?.map((T) => T.value)?.some((T) => v.value.includes(T));
+                return /* @__PURE__ */ e.jsxs(k, { children: [
+                  !d && /* @__PURE__ */ e.jsx(ft, { children: /* @__PURE__ */ e.jsxs(y, { alignItems: "center", justifyContent: "space-between", children: [
+                    a,
+                    l && f.includes("checkbox") && /* @__PURE__ */ e.jsx(
+                      ee,
+                      {
+                        groupName: a,
+                        onToggle: X,
+                        hasSelectedItems: De
+                      }
+                    )
+                  ] }) }),
+                  Object.entries(i).map(
+                    ([T, Ee]) => Ee.map((A, He) => /* @__PURE__ */ e.jsx(
+                      jt,
+                      {
+                        ...A,
+                        shouldTruncateText: Be,
+                        ...A.type === "checkbox" && {
+                          checked: v.isChecked(A.value)
+                        },
+                        onSelect: () => ze(A)
+                      },
+                      `menu-item-${a}-${T}-${He}`
+                    ))
+                  )
+                ] }, a);
+              }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(O, { textAlign: "center", p: 3, children: /* @__PURE__ */ e.jsx(z, { size: "sm", variant: "subtle", children: M }) }) }) })
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  bt as M
+};
+//# sourceMappingURL=menu.component-D38vU6MX.js.map