@televet/kibble-ui 5.0.2-beta.menu.6 → 5.0.2-beta.menu.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/dist/chunks/{avatarGroup.component-BtMv6hWl.js → avatarGroup.component-DyozTOj5.js} +2 -2
  2. package/dist/chunks/{avatarGroup.component-BtMv6hWl.js.map → avatarGroup.component-DyozTOj5.js.map} +1 -1
  3. package/dist/chunks/{avatarGroup.component-B8TVZvFj.js → avatarGroup.component-FTLP0Jal.js} +2 -2
  4. package/dist/chunks/{avatarGroup.component-B8TVZvFj.js.map → avatarGroup.component-FTLP0Jal.js.map} +1 -1
  5. package/dist/chunks/{buttonGroup.component-BsvuFO8J.js → buttonGroup.component-B_9-EN21.js} +2 -2
  6. package/dist/chunks/{buttonGroup.component-BsvuFO8J.js.map → buttonGroup.component-B_9-EN21.js.map} +1 -1
  7. package/dist/chunks/{buttonGroup.component-DEaBDzIa.js → buttonGroup.component-DKGtj8kw.js} +2 -2
  8. package/dist/chunks/{buttonGroup.component-DEaBDzIa.js.map → buttonGroup.component-DKGtj8kw.js.map} +1 -1
  9. package/dist/chunks/{calendar.component-CKwY0qD7.js → calendar.component-CJ8NMtYi.js} +2 -2
  10. package/dist/chunks/{calendar.component-CKwY0qD7.js.map → calendar.component-CJ8NMtYi.js.map} +1 -1
  11. package/dist/chunks/{calendar.component-biqw1Dvi.js → calendar.component-CTOkkJ8O.js} +2 -2
  12. package/dist/chunks/{calendar.component-biqw1Dvi.js.map → calendar.component-CTOkkJ8O.js.map} +1 -1
  13. package/dist/chunks/{conversationCard.component-BNtsyxWI.js → conversationCard.component-BLR9RgKh.js} +2 -2
  14. package/dist/chunks/{conversationCard.component-BNtsyxWI.js.map → conversationCard.component-BLR9RgKh.js.map} +1 -1
  15. package/dist/chunks/{conversationCard.component-CtqjuJ23.js → conversationCard.component-CSh8fs-M.js} +2 -2
  16. package/dist/chunks/{conversationCard.component-CtqjuJ23.js.map → conversationCard.component-CSh8fs-M.js.map} +1 -1
  17. package/dist/chunks/{datePicker.component-Zw6oktPN.js → datePicker.component-CXt7RSQT.js} +2 -2
  18. package/dist/chunks/{datePicker.component-Zw6oktPN.js.map → datePicker.component-CXt7RSQT.js.map} +1 -1
  19. package/dist/chunks/{datePicker.component-GqXczD5i.js → datePicker.component-Ii07ufVf.js} +2 -2
  20. package/dist/chunks/{datePicker.component-GqXczD5i.js.map → datePicker.component-Ii07ufVf.js.map} +1 -1
  21. package/dist/chunks/{datePicker.provider-CMBqTY-y.js → datePicker.provider-6pNpL-zo.js} +2 -2
  22. package/dist/chunks/{datePicker.provider-CMBqTY-y.js.map → datePicker.provider-6pNpL-zo.js.map} +1 -1
  23. package/dist/chunks/{datePicker.provider-0NYqU17z.js → datePicker.provider-DaF-w-4X.js} +2 -2
  24. package/dist/chunks/{datePicker.provider-0NYqU17z.js.map → datePicker.provider-DaF-w-4X.js.map} +1 -1
  25. package/dist/chunks/{dateTimePicker.component-YQ2T3Rwt.js → dateTimePicker.component-Beqo7en9.js} +2 -2
  26. package/dist/chunks/{dateTimePicker.component-YQ2T3Rwt.js.map → dateTimePicker.component-Beqo7en9.js.map} +1 -1
  27. package/dist/chunks/{dateTimePicker.component-P2E3fvYb.js → dateTimePicker.component-m104dT6Q.js} +2 -2
  28. package/dist/chunks/{dateTimePicker.component-P2E3fvYb.js.map → dateTimePicker.component-m104dT6Q.js.map} +1 -1
  29. package/dist/chunks/menu.component-B5NMBVf4.js +708 -0
  30. package/dist/chunks/menu.component-B5NMBVf4.js.map +1 -0
  31. package/dist/chunks/menu.component-B9eZzXdR.js +2 -0
  32. package/dist/chunks/menu.component-B9eZzXdR.js.map +1 -0
  33. package/dist/chunks/{radioGroup.types-D4W2Gkw7.js → radioGroup.types-B7lXEvLu.js} +2 -2
  34. package/dist/chunks/{radioGroup.types-D4W2Gkw7.js.map → radioGroup.types-B7lXEvLu.js.map} +1 -1
  35. package/dist/chunks/{radioGroup.types-DESgrVjt.js → radioGroup.types-BGUjKomB.js} +2 -2
  36. package/dist/chunks/{radioGroup.types-DESgrVjt.js.map → radioGroup.types-BGUjKomB.js.map} +1 -1
  37. package/dist/chunks/{tagBlock.component-CdLWIWut.js → tagBlock.component-BdBKHAbN.js} +2 -2
  38. package/dist/chunks/{tagBlock.component-CdLWIWut.js.map → tagBlock.component-BdBKHAbN.js.map} +1 -1
  39. package/dist/chunks/{tagBlock.component-pMRnarH1.js → tagBlock.component-DtA4K6zn.js} +2 -2
  40. package/dist/chunks/{tagBlock.component-pMRnarH1.js.map → tagBlock.component-DtA4K6zn.js.map} +1 -1
  41. package/dist/cjs/components/AvatarGroup/index.cjs +1 -1
  42. package/dist/cjs/components/ButtonGroup/index.cjs +1 -1
  43. package/dist/cjs/components/Calendar/index.cjs +1 -1
  44. package/dist/cjs/components/ConversationCard/index.cjs +1 -1
  45. package/dist/cjs/components/DatePicker/index.cjs +1 -1
  46. package/dist/cjs/components/DateTimePicker/index.cjs +1 -1
  47. package/dist/cjs/components/Menu/index.cjs +1 -1
  48. package/dist/cjs/components/RadioGroup/index.cjs +1 -1
  49. package/dist/cjs/components/TagBlock/index.cjs +1 -1
  50. package/dist/cjs/components/index.cjs +1 -1
  51. package/dist/cjs/index.cjs +1 -1
  52. package/dist/esm/components/AvatarGroup/index.js +1 -1
  53. package/dist/esm/components/ButtonGroup/index.js +1 -1
  54. package/dist/esm/components/Calendar/index.js +1 -1
  55. package/dist/esm/components/ConversationCard/index.js +1 -1
  56. package/dist/esm/components/DatePicker/index.js +2 -2
  57. package/dist/esm/components/DateTimePicker/index.js +1 -1
  58. package/dist/esm/components/Menu/index.js +1 -1
  59. package/dist/esm/components/RadioGroup/index.js +1 -1
  60. package/dist/esm/components/TagBlock/index.js +1 -1
  61. package/dist/esm/components/index.js +10 -10
  62. package/dist/esm/index.js +10 -10
  63. package/dist/types/components/Menu/components/MenuItem/menuItem.component.d.ts +1 -3
  64. package/dist/types/components/Menu/menu.component.d.ts +1 -2
  65. package/package.json +1 -1
  66. package/dist/chunks/menu.component-Cdgw5Ad_.js +0 -714
  67. package/dist/chunks/menu.component-Cdgw5Ad_.js.map +0 -1
  68. package/dist/chunks/menu.component-DcRZ3_PR.js +0 -2
  69. package/dist/chunks/menu.component-DcRZ3_PR.js.map +0 -1
@@ -1,714 +0,0 @@
1
- import { j as e } from "./jsx-runtime-C5mzlN2N.js";
2
- import ct, { forwardRef as g, useEffect as G, useId as Z, useRef as pe, useCallback as j, useState as z, useMemo as D } from "react";
3
- import { B as A } from "./index-9BerxEcw.js";
4
- import { B as ee } from "./button.component-BO6oee_V.js";
5
- import { I as fe } from "./icon.component-PV_nHBId.js";
6
- import { W as te } from "./text.component-CdTyTFds.js";
7
- import { T as Me } from "./tooltip.component-C_NS-AoH.js";
8
- import { F } from "./flex-CX-8gE9T.js";
9
- import { W as at } from "./textInput.component-BC0Hi8R_.js";
10
- import { S as it } from "./spinner.component-B3dkvoO9.js";
11
- import { u as ut } from "./usePortalContentRef-DO_jc4W9.js";
12
- import { u as ne, s as Pe, c as ve, d as je, P as lt } from "./index-C9UYIjEB.js";
13
- import { c as dt } from "./create-slot-recipe-context-D_FXDJGp.js";
14
- import { d as pt } from "./icons-CoSqruIn.js";
15
- import { a as _, d as f, b as O, e as mt, u as xt, f as ht, g as gt, n as ft } from "./use-locale-context-Bw4Gg9Z0.js";
16
- import { m as Mt, c as Pt } from "./index-CbVKVxMW.js";
17
- import { a6 as m } from "./index-fHSGm2nC.js";
18
- import { W as vt } from "./checkbox.component-DE35wBj-.js";
19
- const [Ce, x] = _({
20
- name: "MenuContext",
21
- hookName: "useMenuContext",
22
- providerName: "<MenuProvider />",
23
- strict: !1
24
- }), Ie = g((o, n) => {
25
- const t = x(), s = m(t.getArrowProps(), o);
26
- return /* @__PURE__ */ e.jsx(f.div, { ...s, ref: n });
27
- });
28
- Ie.displayName = "MenuArrow";
29
- const be = g((o, n) => {
30
- const t = x(), s = m(t.getArrowTipProps(), o);
31
- return /* @__PURE__ */ e.jsx(f.div, { ...s, ref: n });
32
- });
33
- be.displayName = "MenuArrowTip";
34
- const [oe, en] = _({
35
- name: "MenuItemContext",
36
- hookName: "useMenuItemContext",
37
- providerName: "<MenuItemProvider />"
38
- }), [re, ke] = _({
39
- name: "MenuItemPropsContext",
40
- hookName: "useMenuItemPropsContext",
41
- providerName: "<MenuItemPropsProvider />"
42
- }), Se = g((o, n) => {
43
- const [t, s] = O()(o, [
44
- "checked",
45
- "closeOnSelect",
46
- "disabled",
47
- "onCheckedChange",
48
- "value",
49
- "valueText"
50
- ]), c = {
51
- ...t,
52
- type: "checkbox"
53
- }, i = x(), a = m(i.getOptionItemProps(c), s), u = i.getOptionItemState(c);
54
- return /* @__PURE__ */ e.jsx(re, { value: c, children: /* @__PURE__ */ e.jsx(oe, { value: u, children: /* @__PURE__ */ e.jsx(f.div, { ...a, ref: n }) }) });
55
- });
56
- Se.displayName = "MenuCheckboxItem";
57
- const Ne = g((o, n) => {
58
- const t = x(), s = ne(), c = m(t.getContentProps(), s.getPresenceProps(), o);
59
- return s.unmounted ? null : /* @__PURE__ */ e.jsx(f.div, { ...c, ref: mt(s.ref, n) });
60
- });
61
- Ne.displayName = "MenuContent";
62
- const ye = g((o, n) => {
63
- const t = x(), s = m(t.getContextTriggerProps(), o);
64
- return /* @__PURE__ */ e.jsx(f.button, { ...s, ref: n });
65
- });
66
- ye.displayName = "MenuContextTrigger";
67
- const we = g((o, n) => {
68
- const t = x(), s = m(t.getIndicatorProps(), o);
69
- return /* @__PURE__ */ e.jsx(f.div, { ...s, ref: n });
70
- });
71
- we.displayName = "MenuIndicator";
72
- const Ae = g((o, n) => {
73
- const [t, s] = O()(o, [
74
- "closeOnSelect",
75
- "disabled",
76
- "value",
77
- "valueText",
78
- "onSelect"
79
- ]), c = x(), i = m(c.getItemProps(t), s), a = c.getItemState(t);
80
- return G(() => c.addItemListener({ id: a.id, onSelect: t.onSelect }), [a.id, t.onSelect]), /* @__PURE__ */ e.jsx(re, { value: t, children: /* @__PURE__ */ e.jsx(oe, { value: a, children: /* @__PURE__ */ e.jsx(f.div, { ...i, ref: n }) }) });
81
- });
82
- Ae.displayName = "MenuItem";
83
- const [Te, Ge] = _({
84
- name: "MenuItemGroupContext",
85
- hookName: "useMenuItemGroupContext",
86
- providerName: "<MenuItemGroupProvider />"
87
- }), _e = g((o, n) => {
88
- const [t, s] = O()(o, ["id"]), c = x(), a = { id: Z(), ...t }, u = m(c.getItemGroupProps(a), s);
89
- return /* @__PURE__ */ e.jsx(Te, { value: a, children: /* @__PURE__ */ e.jsx(f.div, { ...u, ref: n }) });
90
- });
91
- _e.displayName = "MenuItemGroup";
92
- const Oe = g((o, n) => {
93
- const t = x(), s = Ge(), c = m(t.getItemGroupLabelProps({ htmlFor: s.id }), o);
94
- return /* @__PURE__ */ e.jsx(f.div, { ...c, ref: n });
95
- });
96
- Oe.displayName = "MenuItemGroupLabel";
97
- const $e = g((o, n) => {
98
- const t = x(), s = ke(), c = m(t.getItemIndicatorProps(s), o);
99
- return /* @__PURE__ */ e.jsx(f.div, { ...c, ref: n });
100
- });
101
- $e.displayName = "MenuItemIndicator";
102
- const Re = g((o, n) => {
103
- const t = x(), s = ke(), c = m(t.getItemTextProps(s), o);
104
- return /* @__PURE__ */ e.jsx(f.div, { ...c, ref: n });
105
- });
106
- Re.displayName = "MenuItemText";
107
- const Le = g((o, n) => {
108
- const t = x(), s = m(t.getPositionerProps(), o);
109
- return ne().unmounted ? null : /* @__PURE__ */ e.jsx(f.div, { ...s, ref: n });
110
- });
111
- Le.displayName = "MenuPositioner";
112
- const Be = g((o, n) => {
113
- const [t, s] = O()(o, [
114
- "closeOnSelect",
115
- "disabled",
116
- "value",
117
- "valueText"
118
- ]), c = x(), i = Ge(), a = {
119
- ...t,
120
- checked: i.value === t.value,
121
- type: "radio",
122
- onCheckedChange: () => i.onValueChange?.({ value: t.value })
123
- }, u = m(c.getOptionItemProps(a), s), d = c.getOptionItemState(a);
124
- return /* @__PURE__ */ e.jsx(re, { value: a, children: /* @__PURE__ */ e.jsx(oe, { value: d, children: /* @__PURE__ */ e.jsx(f.div, { ...u, ref: n }) }) });
125
- });
126
- Be.displayName = "MenuRadioItem";
127
- const ze = g((o, n) => {
128
- const [t, s] = O()(o, [
129
- "id",
130
- "onValueChange",
131
- "value"
132
- ]), c = x(), a = { id: Z(), ...t }, u = m(c.getItemGroupProps({ id: a.id }), s);
133
- return /* @__PURE__ */ e.jsx(Te, { value: a, children: /* @__PURE__ */ e.jsx(f.div, { ...u, ref: n }) });
134
- });
135
- ze.displayName = "MenuRadioItemGroup";
136
- const Fe = (o) => {
137
- const n = pe(o), t = pe(!1);
138
- G(() => {
139
- n.current = o;
140
- }), G(() => {
141
- t.current !== !0 && (t.current = !0, n.current());
142
- }, []);
143
- }, jt = (o) => {
144
- const n = Z(), { getRootNode: t } = xt(), { dir: s } = ht(), c = {
145
- id: n,
146
- dir: s,
147
- getRootNode: t,
148
- ...o
149
- }, i = gt(Mt, c);
150
- return { api: Pt(i, ft), service: i };
151
- }, [We, Ee] = _({
152
- name: "MenuMachineContext",
153
- hookName: "useMenuMachineContext",
154
- providerName: "<MenuMachineProvider />",
155
- strict: !1
156
- }), [Ve, Ct] = _({
157
- name: "MenuMachineContext",
158
- hookName: "useMenuMachineContext",
159
- providerName: "<MenuMachineProvider />",
160
- strict: !1
161
- }), It = (o) => {
162
- const [n, t] = Pe(o), [s, c] = O()(t, [
163
- "anchorPoint",
164
- "aria-label",
165
- "closeOnSelect",
166
- "composite",
167
- "defaultHighlightedValue",
168
- "defaultOpen",
169
- "highlightedValue",
170
- "id",
171
- "ids",
172
- "loopFocus",
173
- "navigate",
174
- "onEscapeKeyDown",
175
- "onFocusOutside",
176
- "onHighlightChange",
177
- "onInteractOutside",
178
- "onOpenChange",
179
- "onPointerDownOutside",
180
- "onSelect",
181
- "open",
182
- "positioning",
183
- "typeahead"
184
- ]), i = x(), a = Ee(), { api: u, service: d } = jt(s), S = ve(m({ present: u.open }, n));
185
- Fe(() => {
186
- a && i && (i.setChild(d), u.setParent(a));
187
- });
188
- const $ = j(() => i?.getTriggerItemProps(u), [u, i]);
189
- return /* @__PURE__ */ e.jsx(Ve, { value: $, children: /* @__PURE__ */ e.jsx(We, { value: d, children: /* @__PURE__ */ e.jsx(Ce, { value: u, children: /* @__PURE__ */ e.jsx(je, { value: S, ...c }) }) }) });
190
- }, bt = (o) => {
191
- const n = x(), t = Ee(), [s, { value: c, children: i }] = Pe(o), { api: a, service: u } = c, d = ve(m({ present: a.open }, s));
192
- Fe(() => {
193
- t && n && (n.setChild(u), a.setParent(t));
194
- });
195
- const S = j(() => n?.getTriggerItemProps(a), [a, n]);
196
- return /* @__PURE__ */ e.jsx(Ve, { value: S, children: /* @__PURE__ */ e.jsx(We, { value: u, children: /* @__PURE__ */ e.jsx(Ce, { value: a, children: /* @__PURE__ */ e.jsx(je, { value: d, children: i }) }) }) });
197
- }, De = g((o, n) => {
198
- const t = x(), s = m(t.getSeparatorProps(), o);
199
- return /* @__PURE__ */ e.jsx(f.hr, { ...s, ref: n });
200
- });
201
- De.displayName = "MenuSeparator";
202
- const He = g((o, n) => {
203
- const t = x(), s = ne(), c = m(
204
- {
205
- ...t.getTriggerProps(),
206
- "aria-controls": s.unmounted ? void 0 : t.getTriggerProps()["aria-controls"]
207
- },
208
- o
209
- );
210
- return /* @__PURE__ */ e.jsx(f.button, { ...c, ref: n });
211
- });
212
- He.displayName = "MenuTrigger";
213
- const Ke = g((o, n) => {
214
- const t = Ct(), s = m(t?.() ?? {}, o);
215
- return /* @__PURE__ */ e.jsx(f.div, { ...s, ref: n });
216
- });
217
- Ke.displayName = "MenuTriggerItem";
218
- const {
219
- withRootProvider: qe,
220
- withContext: h
221
- } = dt({ key: "menu" });
222
- qe(
223
- bt
224
- );
225
- const kt = qe(It, {
226
- defaultProps: { lazyMount: !0, unmountOnExit: !0 }
227
- }), St = h(
228
- He,
229
- "trigger",
230
- { forwardAsChild: !0 }
231
- );
232
- h(ye, "contextTrigger", { forwardAsChild: !0 });
233
- const Nt = h(
234
- Le,
235
- "positioner",
236
- { forwardAsChild: !0 }
237
- );
238
- h(
239
- De,
240
- "separator",
241
- { forwardAsChild: !0 }
242
- );
243
- const yt = h(
244
- Ne,
245
- "content",
246
- { forwardAsChild: !0 }
247
- ), wt = h(
248
- be,
249
- "arrowTip",
250
- { forwardAsChild: !0 }
251
- );
252
- h(
253
- Ie,
254
- "arrow",
255
- { forwardAsChild: !0, defaultProps: { children: /* @__PURE__ */ e.jsx(wt, {}) } }
256
- );
257
- h(
258
- we,
259
- "indicator",
260
- { forwardAsChild: !0 }
261
- );
262
- const At = h(
263
- _e,
264
- "itemGroup",
265
- { forwardAsChild: !0 }
266
- ), Tt = h(Oe, "itemGroupLabel", { forwardAsChild: !0 }), me = h(
267
- Ae,
268
- "item",
269
- { forwardAsChild: !0 }
270
- ), Gt = h(Ke, "item", { forwardAsChild: !0 });
271
- h(
272
- Re,
273
- "itemText",
274
- { forwardAsChild: !0 }
275
- );
276
- h(
277
- "kbd",
278
- "itemCommand"
279
- );
280
- h($e, "itemIndicator", {
281
- forwardAsChild: !0,
282
- defaultProps: { children: /* @__PURE__ */ e.jsx(pt, { boxSize: "4" }) }
283
- });
284
- h(Se, "item", { forwardAsChild: !0 });
285
- h(ze, "itemGroup", { forwardAsChild: !0 });
286
- h(
287
- Be,
288
- "item",
289
- { forwardAsChild: !0 }
290
- );
291
- const Je = ({
292
- hideCaret: o = !1,
293
- size: n = "md",
294
- text: t,
295
- textProps: s,
296
- variant: c,
297
- onClick: i,
298
- ["data-testid"]: a = "kibble-menu-button",
299
- ...u
300
- }) => /* @__PURE__ */ e.jsxs(
301
- ee,
302
- {
303
- className: "Menu__Button",
304
- "data-testid": a,
305
- size: n,
306
- variant: c,
307
- ...u,
308
- ...!t && o && { paddingInline: 0, paddingBlock: 0 },
309
- onClick: (d) => {
310
- d.stopPropagation(), i?.(d);
311
- },
312
- children: [
313
- t && /* @__PURE__ */ e.jsx(
314
- te,
315
- {
316
- className: "Menu__ButtonText",
317
- "data-testid": `${a}-text`,
318
- fontWeight: "semibold",
319
- size: n,
320
- color: c ? "inherit" : s?.color || "text.contrast",
321
- truncated: !0,
322
- ...s,
323
- children: t
324
- }
325
- ),
326
- !o && /* @__PURE__ */ e.jsx(F, { className: "Menu__ButtonCaret", "data-testid": `${a}-caret`, children: /* @__PURE__ */ e.jsx(fe, { name: "chevronDown", size: n === "lg" ? "sm" : "xs" }) })
327
- ]
328
- }
329
- ), _t = ({ tooltipProps: o, isMenuOpen: n, ...t }) => {
330
- const [s, c] = z(!1), i = j(() => {
331
- n || c(!0);
332
- }, [n]), a = j(() => {
333
- n || c(!1);
334
- }, [n]);
335
- return G(() => {
336
- n && c(!1);
337
- }, [n]), /* @__PURE__ */ e.jsx(Me, { label: t.text || "", open: s && !n, ...o, children: /* @__PURE__ */ e.jsx(
338
- A,
339
- {
340
- onClick: (u) => {
341
- u.preventDefault(), u.stopPropagation(), c(!1);
342
- },
343
- onMouseEnter: i,
344
- onMouseLeave: a,
345
- children: /* @__PURE__ */ e.jsx(Je, { ...t })
346
- }
347
- ) });
348
- }, Ot = ({
349
- label: o,
350
- leftElement: n,
351
- onSelect: t,
352
- shouldTruncateText: s,
353
- type: c = "default",
354
- variant: i,
355
- ["data-testid"]: a = "kibble-menu-item",
356
- tempShowDebugInfo: u = !1,
357
- ...d
358
- }) => {
359
- const [S, $] = z(!1), R = j(() => {
360
- t && t(d.value);
361
- }, [t, d.value]);
362
- if (c === "submenu") {
363
- const {
364
- valueText: N,
365
- listProps: C,
366
- positionerProps: M,
367
- portalled: w = !0,
368
- open: k,
369
- lazyMount: I = !0,
370
- unmountOnExit: H = !0
371
- } = d;
372
- return u && console.log("positionerProps inside menu item", M), /* @__PURE__ */ e.jsx(
373
- $t,
374
- {
375
- lazyMount: I,
376
- unmountOnExit: H,
377
- submenuTrigger: /* @__PURE__ */ e.jsxs(
378
- Gt,
379
- {
380
- className: "Menu__Item--Submenu",
381
- "data-testid": `${a}-submenu`,
382
- justifyContent: "space-between",
383
- "aria-valuetext": N,
384
- position: "relative",
385
- onClick: () => {
386
- k !== void 0 && t ? t(d.value) : $(!S);
387
- },
388
- children: [
389
- /* @__PURE__ */ e.jsx(
390
- Y,
391
- {
392
- label: o,
393
- leftElement: n,
394
- shouldTruncateText: s,
395
- variant: i
396
- }
397
- ),
398
- /* @__PURE__ */ e.jsx(fe, { name: "chevronRight", size: "sm" })
399
- ]
400
- }
401
- ),
402
- portalled: w,
403
- open: k !== void 0 ? k : S,
404
- listProps: C,
405
- positionerProps: M
406
- }
407
- );
408
- }
409
- if (c === "checkbox") {
410
- const { checked: N, value: C, disabled: M, tooltipLabel: w, ...k } = d;
411
- return /* @__PURE__ */ e.jsxs(
412
- me,
413
- {
414
- className: "Menu__Item--Checkbox",
415
- "data-testid": `${a}-checkbox`,
416
- value: C,
417
- closeOnSelect: !1,
418
- onSelect: M ? void 0 : R,
419
- gap: 3,
420
- disabled: M,
421
- ...k,
422
- children: [
423
- /* @__PURE__ */ e.jsx(vt, { checked: !!N, disabled: M, size: "md", fullWidth: !1 }),
424
- /* @__PURE__ */ e.jsx(
425
- Y,
426
- {
427
- label: o,
428
- leftElement: n,
429
- shouldTruncateText: s,
430
- variant: i,
431
- tooltipLabel: w
432
- }
433
- )
434
- ]
435
- }
436
- );
437
- }
438
- if (c === "default") {
439
- const { selected: N = !1, disabled: C, value: M, tooltipLabel: w, ...k } = d;
440
- return /* @__PURE__ */ e.jsx(
441
- me,
442
- {
443
- className: "Menu__Item--Default",
444
- "data-testid": `${a}-default`,
445
- value: M,
446
- onSelect: C ? void 0 : R,
447
- disabled: C,
448
- ...N && { bgColor: "background.secondaryAlpha.hover" },
449
- ...k,
450
- children: /* @__PURE__ */ e.jsx(
451
- Y,
452
- {
453
- label: o,
454
- leftElement: n,
455
- shouldTruncateText: s,
456
- variant: N ? "info" : i,
457
- tooltipLabel: w
458
- }
459
- )
460
- }
461
- );
462
- }
463
- return /* @__PURE__ */ e.jsx(e.Fragment, {});
464
- }, Y = ({
465
- label: o,
466
- leftElement: n,
467
- shouldTruncateText: t,
468
- variant: s,
469
- tooltipLabel: c
470
- }) => {
471
- const i = /* @__PURE__ */ e.jsxs(F, { className: "Menu__ItemLabel", alignItems: "center", gap: 3, children: [
472
- n,
473
- typeof o == "string" ? /* @__PURE__ */ e.jsx(te, { size: "sm", truncated: t, variant: s, children: o }) : o
474
- ] });
475
- return c ? /* @__PURE__ */ e.jsx(Me, { label: c, children: i }) : i;
476
- }, xe = ({
477
- groupName: o,
478
- hasSelectedItems: n = !1,
479
- onToggle: t,
480
- ["data-testid"]: s = "kibble-menu-toggle-buttons"
481
- }) => {
482
- const c = !!o;
483
- return /* @__PURE__ */ e.jsx(A, { className: "Menu__ToggleButtons", "data-testid": s, ...c && { textAlign: "right", w: "50%" }, children: c ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n ? /* @__PURE__ */ e.jsx(ge, { hasSelectedItems: n, groupName: o, onToggle: t }) : /* @__PURE__ */ e.jsx(he, { groupName: o, onToggle: t }) }) : /* @__PURE__ */ e.jsxs(F, { justifyContent: "space-between", children: [
484
- /* @__PURE__ */ e.jsx(he, { groupName: o, onToggle: t }),
485
- /* @__PURE__ */ e.jsx(ge, { hasSelectedItems: n, groupName: o, onToggle: t })
486
- ] }) });
487
- }, he = ({ groupName: o, onToggle: n }) => /* @__PURE__ */ e.jsx(ee, { variant: "ghost", size: "xs", onClick: () => n({ groupName: o, clear: !1 }), children: "Select All" }), ge = ({ hasSelectedItems: o, groupName: n, onToggle: t }) => /* @__PURE__ */ e.jsx(
488
- ee,
489
- {
490
- variant: "ghostNeutral",
491
- iconName: "arrowCircle",
492
- size: "xs",
493
- disabled: !o,
494
- onClick: () => t({ groupName: n, clear: !0 }),
495
- children: "Clear All"
496
- }
497
- ), $t = ({
498
- buttonProps: o,
499
- listProps: n,
500
- positionerProps: t,
501
- portalled: s = !1,
502
- submenuTrigger: c,
503
- lazyMount: i = !0,
504
- onOpenChange: a,
505
- ["data-testid"]: u = "kibble-menu",
506
- tempShowDebugInfo: d = !1,
507
- ...S
508
- }) => {
509
- const { contentRef: $ } = ut(), {
510
- canSelectAll: R,
511
- canSelectGroups: N,
512
- emptyState: C = "No results found",
513
- groupSortOrder: M,
514
- loading: w,
515
- maxH: k = "480px",
516
- menuItems: I = [],
517
- minW: H = "240px",
518
- onSearch: y,
519
- onSelect: K,
520
- onSelectAll: se,
521
- searchable: q,
522
- searchPlaceholder: Qe = "Search...",
523
- shouldTruncateText: Ue,
524
- ...ce
525
- } = n || {}, [Xe, Ye] = z(!1), [J, Q] = z(""), [W, U] = z(I);
526
- G(() => {
527
- d && console.log("positionerProps at root menu level", t);
528
- }, [t, d]);
529
- const ae = D(() => {
530
- const r = {};
531
- return W?.forEach((l) => {
532
- const p = l.groupLabel || "default", P = l.type === "checkbox" ? "checkbox" : "default";
533
- r[p] || (r[p] = {}), r[p][P] || (r[p][P] = []), r[p][P].push(l);
534
- }), r;
535
- }, [W]), ie = D(() => {
536
- const r = Object.entries(ae);
537
- return !M || M.length === 0 ? r : r.sort(([l], [p]) => {
538
- const P = M.indexOf(l), v = M.indexOf(p);
539
- return P !== -1 && v !== -1 ? P - v : P !== -1 ? -1 : v !== -1 ? 1 : 0;
540
- });
541
- }, [ae, M]), L = D(() => I?.filter((r) => r.type === "checkbox") || [], [I]), X = j(
542
- (r) => L.some((l) => l.value === r && l.checked),
543
- [L]
544
- ), b = D(() => L.filter((r) => r.checked), [L]), ue = j(
545
- ({ groupName: r, clear: l }) => {
546
- let p;
547
- const P = W.filter((v) => v.type === "checkbox" && !v.disabled);
548
- if (r) {
549
- const v = P.filter((E) => E.groupLabel === r);
550
- p = l ? b.filter((E) => E.groupLabel !== r) : (
551
- // Otherwise, add the items in the group to the selected items
552
- [.../* @__PURE__ */ new Set([...b, ...v])]
553
- );
554
- } else
555
- p = l ? [] : P.map((v) => ({ ...v, checked: !0 }));
556
- se?.({ allSelectedItems: p });
557
- },
558
- [se, W, b]
559
- ), Ze = j(
560
- (r) => {
561
- if (r.type === "checkbox") {
562
- const l = X(r.value) ? b.filter((p) => p.value !== r.value) : [...b, r];
563
- if (r.onSelect) {
564
- r.onSelect(r.value);
565
- return;
566
- }
567
- K?.({ item: r, allSelectedItems: l });
568
- return;
569
- }
570
- if (r.onSelect) {
571
- r.onSelect(r.value);
572
- return;
573
- }
574
- K?.({ item: r, allSelectedItems: [r] });
575
- },
576
- [K, X, b]
577
- ), le = j((r, l) => r === "" || !r ? l : l.filter((p) => !!(typeof p.label == "string" ? p.label : p.valueText)?.toLowerCase().includes(r.toLowerCase())), []), et = j(
578
- (r) => {
579
- const l = r.target.value;
580
- Q(l), y && y(r);
581
- },
582
- [y]
583
- ), tt = j(() => {
584
- Q(""), y && y({
585
- target: { value: "" }
586
- });
587
- }, [y]), nt = j(
588
- (r) => {
589
- Ye(r), r || (Q(""), U(I)), a && a({ open: r, allSelectedItems: b });
590
- },
591
- [I, a, b]
592
- );
593
- return G(() => {
594
- U(y ? I : le(J, I));
595
- }, [J, y, le, I]), /* @__PURE__ */ e.jsxs(
596
- kt,
597
- {
598
- lazyMount: i,
599
- unmountOnExit: i,
600
- onOpenChange: (r) => {
601
- nt(r.open);
602
- },
603
- ...S,
604
- children: [
605
- c || /* @__PURE__ */ e.jsx(St, { asChild: !0, className: "Menu__Trigger", "data-testid": `${u}-trigger`, children: o?.showTooltip ? /* @__PURE__ */ e.jsx(_t, { isMenuOpen: Xe, ...o }) : /* @__PURE__ */ e.jsx(Je, { ...o }) }),
606
- /* @__PURE__ */ e.jsx(lt, { disabled: !s, container: $ || void 0, children: /* @__PURE__ */ e.jsx(Nt, { className: "Menu", "data-testid": u, ...t, children: /* @__PURE__ */ e.jsxs(
607
- yt,
608
- {
609
- className: "Menu__Content",
610
- "data-testid": `${u}-content`,
611
- maxH: k,
612
- minW: H,
613
- ...ce,
614
- ...q && { pt: "0" },
615
- onClick: (r) => {
616
- r.stopPropagation(), ce?.onClick?.(r);
617
- },
618
- children: [
619
- q && /* @__PURE__ */ e.jsx(
620
- A,
621
- {
622
- className: "Menu__SearchBarContainer",
623
- "data-testid": `${u}-search-bar-container`,
624
- px: 3,
625
- py: 2,
626
- position: "sticky",
627
- top: 0,
628
- bg: "background",
629
- zIndex: "docked",
630
- children: /* @__PURE__ */ e.jsx(
631
- at,
632
- {
633
- className: "Menu__SearchBar",
634
- "data-testid": `${u}-search-bar`,
635
- placeholder: Qe,
636
- onChange: et,
637
- size: "sm",
638
- value: J,
639
- clearable: !0,
640
- onClear: tt,
641
- onKeyDown: (r) => {
642
- r.code === "Space" && r.stopPropagation();
643
- }
644
- }
645
- )
646
- }
647
- ),
648
- R && /* @__PURE__ */ e.jsx(
649
- A,
650
- {
651
- className: "Menu__CheckboxGroupHeader",
652
- "data-testid": `${u}-checkbox-group-header`,
653
- px: 3,
654
- mt: q ? 1 : 2,
655
- children: R && !!L.length && /* @__PURE__ */ e.jsx(
656
- xe,
657
- {
658
- onToggle: ue,
659
- hasSelectedItems: !!b.length
660
- }
661
- )
662
- }
663
- ),
664
- w && /* @__PURE__ */ e.jsx(F, { justifyContent: "center", py: 5, children: /* @__PURE__ */ e.jsx(it, { fullScreen: !0 }) }),
665
- /* @__PURE__ */ e.jsx(A, { className: "Menu__List", "data-testid": `${u}-list`, children: ie.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ie.map(([r, l]) => {
666
- const p = r === "default", P = Object.keys(l), v = p ? ct.Fragment : At, ot = l.checkbox?.map((B) => B.value)?.some(
667
- (B) => b.some((V) => V.value === B && V.checked)
668
- );
669
- return /* @__PURE__ */ e.jsxs(v, { children: [
670
- !p && /* @__PURE__ */ e.jsx(Tt, { children: /* @__PURE__ */ e.jsxs(F, { alignItems: "center", justifyContent: "space-between", children: [
671
- r,
672
- N && P.includes("checkbox") && /* @__PURE__ */ e.jsx(
673
- xe,
674
- {
675
- groupName: r,
676
- onToggle: ue,
677
- hasSelectedItems: ot
678
- }
679
- )
680
- ] }) }),
681
- Object.entries(l).map(
682
- ([B, V]) => V.map((T, rt) => {
683
- const { groupLabel: st, ...de } = T;
684
- return d && (console.log("item props", de), console.log("positionerProps inside menu item", t)), /* @__PURE__ */ e.jsx(
685
- Ot,
686
- {
687
- ...de,
688
- shouldTruncateText: Ue,
689
- ...T.type === "checkbox" && {
690
- checked: X(T.value)
691
- },
692
- "data-testid": `${u}-item-${T.label}`,
693
- onSelect: () => Ze(T),
694
- ...T.type === "submenu" && {
695
- positionerProps: t
696
- }
697
- },
698
- `menu-item-${st}-${B}-${rt}`
699
- );
700
- })
701
- )
702
- ] }, r);
703
- }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(A, { p: 3, children: typeof C == "string" ? /* @__PURE__ */ e.jsx(A, { textAlign: "center", children: /* @__PURE__ */ e.jsx(te, { size: "sm", variant: "subtle", "data-testid": `${u}-empty-state`, children: C }) }) : C }) }) })
704
- ]
705
- }
706
- ) }) })
707
- ]
708
- }
709
- );
710
- };
711
- export {
712
- $t as M
713
- };
714
- //# sourceMappingURL=menu.component-Cdgw5Ad_.js.map