@televet/kibble-ui 4.0.0-beta.129 → 4.0.0-beta.13

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

@@ -1,599 +0,0 @@
-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-Br9jCpBx.js";
-import { I as oe } from "./icon.component-S_qFWBRf.js";
-import { W as z } from "./text.component-nhTe7fy0.js";
-import { F as y } from "./flex-smlF8uQG.js";
-import { W as qe } from "./textInput.component-GBvY3agL.js";
-import { S as Je } from "./spinner.component-vkhAVeU1.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-Wke7fO3F.js";
-import { c as N, i as g, a as w, k as W, j as Ye, u as Ze, b as et, d as tt, n as nt, s as re, l as se, m as ae, P as ot } from "./use-locale-context-DMynFc1_.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-DlJs9pM6.js";
-import { a1 as m } from "./index-1syExFDc.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-BPggXzkH.js.map