mcr-design-systems 1.0.214 → 1.0.215

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 (4) hide show
  1. package/dist/components/Select/index.d.ts +5 -0
  2. package/dist/components/Select/index.js +234 -233
  3. package/dist/shared/hooks/useChipOverflow.js +62 -57
  4. package/package.json +1 -1
package/dist/components/Select/index.d.ts CHANGED
@@ -125,6 +125,11 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
125
125
  * Test identifier
126
126
  */
127
127
  'data-testid'?: string;
128
+ /**
129
+ * All items (unfiltered) for selectedItems mapping when using search
130
+ * This ensures selected items always have proper labels even when filtered
131
+ */
132
+ allItems?: (DropdownItem | DropdownGroup)[];
128
133
  /**
129
134
  * Custom width for select and dropdown
130
135
  */
package/dist/components/Select/index.js CHANGED
@@ -1,104 +1,105 @@
1
- import { jsxs as d, jsx as t, Fragment as Se } from "react/jsx-runtime";
2
- import { forwardRef as $e, useState as Re, useRef as Te, useCallback as R, useMemo as F, memo as ke } from "react";
3
- import { cn as h } from "../../shared/utils/cn.js";
4
- import { dataTestId as je } from "../../shared/utils/dataTestId.js";
5
- import { Typography as P } from "../Typography/index.js";
1
+ import { jsxs as g, jsx as t, Fragment as Re } from "react/jsx-runtime";
2
+ import { forwardRef as Te, useState as ke, useRef as je, useCallback as T, useMemo as P, memo as De } from "react";
3
+ import { cn as d } from "../../shared/utils/cn.js";
4
+ import { dataTestId as Ee } from "../../shared/utils/dataTestId.js";
5
+ import { Typography as z } from "../Typography/index.js";
6
6
  import C from "../Icon/Icon.js";
7
- import { Dropdown as oe } from "../Dropdown/index.js";
8
- import { selectVariants as De } from "./helper/variants.js";
9
- import le from "../Chip/index.js";
10
- import Ee from "../TextField/HelperText.js";
11
- import { useChipOverflow as Fe } from "../../shared/hooks/useChipOverflow.js";
12
- const ie = $e(
7
+ import { Dropdown as ie } from "../Dropdown/index.js";
8
+ import { selectVariants as Fe } from "./helper/variants.js";
9
+ import ce from "../Chip/index.js";
10
+ import Pe from "../TextField/HelperText.js";
11
+ import { useChipOverflow as ze } from "../../shared/hooks/useChipOverflow.js";
12
+ const me = Te(
13
13
  ({
14
14
  items: M = [],
15
15
  value: r,
16
16
  onChange: y,
17
17
  placeholder: b = "Select an option...",
18
18
  disabled: a = !1,
19
- readOnly: s = !1,
20
- loading: z = !1,
21
- showCheckmark: V = !1,
22
- emptyText: q = "No options available",
23
- state: T,
24
- label: G,
25
- helpText: ce,
26
- required: me = !1,
27
- leadingIcon: m,
28
- trailingIcon: p,
19
+ readOnly: n = !1,
20
+ loading: V = !1,
21
+ showCheckmark: q = !1,
22
+ emptyText: G = "No options available",
23
+ state: k,
24
+ label: J,
25
+ helpText: pe,
26
+ required: fe = !1,
27
+ leadingIcon: c,
28
+ trailingIcon: m,
29
29
  mode: o = "single",
30
- displayType: pe = "chip",
31
- maxDisplayChips: Pe,
30
+ displayType: ue = "chip",
31
+ maxDisplayChips: Ve,
32
32
  // eslint-disable-line @typescript-eslint/no-unused-vars -- kept for backward compatibility
33
- moreItemsText: fe = "+{count}",
34
- trigger: ue,
35
- side: J = "bottom",
36
- align: K = "start",
37
- sideOffset: L = 4,
38
- enableVirtualization: Q,
39
- itemHeight: U = 32,
40
- maxHeight: W = 300,
41
- size: n = "md",
42
- variant: k = "default",
43
- fullWidth: j = !1,
44
- className: he,
45
- iconsSize: de,
33
+ moreItemsText: he = "+{count}",
34
+ trigger: de,
35
+ side: K = "bottom",
36
+ align: L = "start",
37
+ sideOffset: Q = 4,
38
+ enableVirtualization: U,
39
+ itemHeight: W = 32,
40
+ maxHeight: X = 300,
41
+ size: s = "md",
42
+ variant: j = "default",
43
+ fullWidth: D = !1,
44
+ className: ge,
45
+ iconsSize: xe,
46
46
  "data-testid": l,
47
47
  width: A,
48
- error: X,
49
- haveIcon: ge,
50
- iconsCustom: xe,
51
- onBlur: Y,
52
- dropdownProps: Z,
53
- allowSearch: _,
54
- title: D,
55
- onSearchChange: H,
56
- searchValue: B,
57
- showClearButton: I = !1,
58
- searchPlaceholder: O = "Search...",
59
- ...Ne
60
- }, ve) => {
61
- const [f, S] = Re(!1), Ce = Te(null), i = De({
62
- size: n,
63
- variant: k,
64
- fullWidth: j,
65
- state: T,
48
+ error: Y,
49
+ haveIcon: Ne,
50
+ iconsCustom: ve,
51
+ onBlur: Z,
52
+ dropdownProps: _,
53
+ allowSearch: H,
54
+ title: E,
55
+ onSearchChange: B,
56
+ searchValue: I,
57
+ showClearButton: O = !1,
58
+ searchPlaceholder: ee = "Search...",
59
+ allItems: S,
60
+ ...Ce
61
+ }, ye) => {
62
+ const [p, $] = ke(!1), be = je(null), i = Fe({
63
+ size: s,
64
+ variant: j,
65
+ fullWidth: D,
66
+ state: k,
66
67
  disabled: a,
67
- readOnly: s
68
- }), ye = R(
68
+ readOnly: n
69
+ }), Ae = T(
69
70
  (e) => {
70
- if (o === "multiple" && Array.isArray(r) && !a && !s) {
71
- const c = r.filter((w) => w !== e);
72
- y?.(c);
71
+ if (o === "multiple" && Array.isArray(r) && !a && !n) {
72
+ const u = r.filter((h) => h !== e);
73
+ y?.(u);
73
74
  }
74
75
  },
75
- [o, r, y, a, s]
76
- ), ee = R(() => {
77
- o === "multiple" && Array.isArray(r) && r.length > 0 && !a && !s && y?.([]);
78
- }, [o, r, y, a, s]), u = F(() => {
76
+ [o, r, y, a, n]
77
+ ), te = T(() => {
78
+ o === "multiple" && Array.isArray(r) && r.length > 0 && !a && !n && y?.([]);
79
+ }, [o, r, y, a, n]), f = P(() => {
79
80
  if (!r) return [];
80
- const e = Array.isArray(r) ? r : [r], c = /* @__PURE__ */ new Map();
81
- return ((N) => {
82
- N.forEach((v) => {
83
- "items" in v ? v.items.forEach((ne) => {
84
- c.set(ne.value, ne);
85
- }) : c.set(v.value, v);
81
+ const e = Array.isArray(r) ? r : [r], u = S && S.length > 0 ? S : M, h = /* @__PURE__ */ new Map();
82
+ return ((w) => {
83
+ w.forEach((v) => {
84
+ "items" in v ? v.items.forEach((le) => {
85
+ h.set(le.value, le);
86
+ }) : h.set(v.value, v);
86
87
  });
87
- })(M), e.map((N) => {
88
- const v = c.get(N);
88
+ })(u), e.map((w) => {
89
+ const v = h.get(w);
89
90
  return v || {
90
- value: N,
91
- label: N
91
+ value: w,
92
+ label: w
92
93
  };
93
94
  });
94
- }, [r, M]), E = F(() => {
95
+ }, [r, M, S]), F = P(() => {
95
96
  if (o === "single") {
96
- const e = u[0];
97
+ const e = f[0];
97
98
  return e ? e.label : b;
98
99
  }
99
- return o === "multiple" ? r?.length === 0 ? b : D ? `${D} ` : "" : "";
100
- }, [o, u, b, D, r]), g = Fe({
101
- items: o === "multiple" && Array.isArray(r) ? u.map((e) => ({
100
+ return o === "multiple" ? r?.length === 0 ? b : E ? `${E} ` : "" : "";
101
+ }, [o, f, b, E, r]), x = ze({
102
+ items: o === "multiple" && Array.isArray(r) ? f.map((e) => ({
102
103
  value: e.value,
103
104
  label: e.label
104
105
  })) : [],
@@ -107,36 +108,36 @@ const ie = $e(
107
108
  minChipsToShow: 1,
108
109
  moreChipWidth: 60
109
110
  // Estimated width for "+X more" chip
110
- }), $ = F(() => {
111
+ }), R = P(() => {
111
112
  if (o !== "multiple" || !Array.isArray(r))
112
113
  return {
113
114
  displayItems: [],
114
115
  remainingCount: 0,
115
116
  hasMore: !1
116
117
  };
117
- const c = {
118
- displayItems: g.displayItems.map((w) => u.find(
119
- (N) => N.value === w.value
118
+ const u = {
119
+ displayItems: x.displayItems.map((h) => f.find(
120
+ (oe) => oe.value === h.value
120
121
  ) || {
121
- value: w.value,
122
- label: w.label
122
+ value: h.value,
123
+ label: h.label
123
124
  }),
124
- remainingCount: g.remainingCount,
125
- hasMore: g.hasMore
125
+ remainingCount: x.remainingCount,
126
+ hasMore: x.hasMore
126
127
  };
127
- return u.length > 0 && c.displayItems.length === 0 && !c.hasMore ? {
128
- displayItems: [u[0]],
129
- remainingCount: Math.max(0, u.length - 1),
130
- hasMore: u.length > 1
131
- } : c;
128
+ return f.length > 0 && u.displayItems.length === 0 && !u.hasMore ? {
129
+ displayItems: [f[0]],
130
+ remainingCount: Math.max(0, f.length - 1),
131
+ hasMore: f.length > 1
132
+ } : u;
132
133
  }, [
133
134
  o,
134
135
  r,
135
- g.displayItems,
136
- g.remainingCount,
137
- g.hasMore,
138
- u
139
- ]), be = A ? { width: typeof A == "number" ? `${A}px` : A } : {}, Ae = h(i.container(), he), x = (e) => {
136
+ x.displayItems,
137
+ x.remainingCount,
138
+ x.hasMore,
139
+ f
140
+ ]), we = A ? { width: typeof A == "number" ? `${A}px` : A } : {}, Me = d(i.container(), ge), N = (e) => {
140
141
  switch (e) {
141
142
  case "sm":
142
143
  return 16;
@@ -147,7 +148,7 @@ const ie = $e(
147
148
  default:
148
149
  return 16;
149
150
  }
150
- }, te = (e) => {
151
+ }, re = (e) => {
151
152
  switch (e) {
152
153
  case "sm":
153
154
  return "small";
@@ -158,157 +159,157 @@ const ie = $e(
158
159
  default:
159
160
  return "medium";
160
161
  }
161
- }, re = R((e) => !!(e.closest('[data-testid*="chip"]') || e.closest('[data-testid*="clear-all"]') || e.closest('[data-no-trigger="true"]') || e.closest('[role="button"]') && e.closest('[data-testid*="chip"]')), []), ae = R(
162
+ }, ae = T((e) => !!(e.closest('[data-testid*="chip"]') || e.closest('[data-testid*="clear-all"]') || e.closest('[data-no-trigger="true"]') || e.closest('[role="button"]') && e.closest('[data-testid*="chip"]')), []), ne = T(
162
163
  (e) => {
163
- const c = e.target;
164
- return re(c) ? (e.preventDefault(), e.stopPropagation(), !0) : !1;
164
+ const u = e.target;
165
+ return ae(u) ? (e.preventDefault(), e.stopPropagation(), !0) : !1;
165
166
  },
166
- [re]
167
+ [ae]
167
168
  ), se = (e) => {
168
- S(e), !e && Y && Y(
169
+ $(e), !e && Z && Z(
169
170
  new FocusEvent("blur")
170
171
  );
171
- }, we = () => /* @__PURE__ */ d(
172
+ }, Se = () => /* @__PURE__ */ g(
172
173
  "div",
173
174
  {
174
175
  className: i.trigger(),
175
- "data-state": f ? "open" : "closed",
176
+ "data-state": p ? "open" : "closed",
176
177
  children: [
177
- m && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: m.node || m.name && /* @__PURE__ */ t(
178
+ c && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: c.node || c.name && /* @__PURE__ */ t(
178
179
  C,
179
180
  {
180
- name: m.name,
181
- size: x(n),
182
- "aria-label": m["aria-label"]
181
+ name: c.name,
182
+ size: N(s),
183
+ "aria-label": c["aria-label"]
183
184
  }
184
185
  ) }),
185
186
  /* @__PURE__ */ t(
186
187
  "span",
187
188
  {
188
- className: h(
189
+ className: d(
189
190
  "flex-1 truncate text-left",
190
- u.length > 0 ? "text-fg-neutral-main" : i.placeholder()
191
+ f.length > 0 ? "text-fg-neutral-main" : i.placeholder()
191
192
  ),
192
- children: E
193
+ children: F
193
194
  }
194
195
  ),
195
- p ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: p.node || p.name && /* @__PURE__ */ t(
196
+ m ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: m.node || m.name && /* @__PURE__ */ t(
196
197
  C,
197
198
  {
198
- name: p.name,
199
- size: x(n),
200
- "aria-label": p["aria-label"]
199
+ name: m.name,
200
+ size: N(s),
201
+ "aria-label": m["aria-label"]
201
202
  }
202
203
  ) }) : /* @__PURE__ */ t(
203
204
  C,
204
205
  {
205
- name: f ? "chevron-up" : "chevron-down",
206
- size: x(n),
207
- className: h(i.chevron(), f && "rotate-180")
206
+ name: p ? "chevron-up" : "chevron-down",
207
+ size: N(s),
208
+ className: d(i.chevron(), p && "rotate-180")
208
209
  }
209
210
  )
210
211
  ]
211
212
  }
212
213
  );
213
- return /* @__PURE__ */ d(
214
+ return /* @__PURE__ */ g(
214
215
  "div",
215
216
  {
216
- ref: ve,
217
- className: Ae,
218
- style: be,
219
- ...je(l || "select"),
220
- ...Ne,
217
+ ref: ye,
218
+ className: Me,
219
+ style: we,
220
+ ...Ee(l || "select"),
221
+ ...Ce,
221
222
  children: [
222
- G && /* @__PURE__ */ d("div", { className: "mb-1 flex items-center gap-[2px]", children: [
223
- /* @__PURE__ */ t(P, { variants: "action", size: "sm", color: "fg-neutral-subtle", children: G }),
224
- me && /* @__PURE__ */ t(P, { variants: "action", size: "sm", color: "fg-accent-error", children: "*" })
223
+ J && /* @__PURE__ */ g("div", { className: "mb-1 flex items-center gap-[2px]", children: [
224
+ /* @__PURE__ */ t(z, { variants: "action", size: "sm", color: "fg-neutral-subtle", children: J }),
225
+ fe && /* @__PURE__ */ t(z, { variants: "action", size: "sm", color: "fg-accent-error", children: "*" })
225
226
  ] }),
226
227
  /* @__PURE__ */ t("div", { className: "relative h-11", children: o === "multiple" ? /* @__PURE__ */ t(
227
- oe,
228
+ ie,
228
229
  {
229
- ...Z,
230
+ ..._,
230
231
  items: M,
231
232
  value: r,
232
233
  onValueChange: (e) => {
233
- a || s || y?.(Array.isArray(e) ? e : [e]);
234
+ a || n || y?.(Array.isArray(e) ? e : [e]);
234
235
  },
235
236
  fullWidthContent: !0,
236
237
  placeholder: b,
237
238
  disabled: a,
238
- loading: z,
239
- showCheckmark: V,
240
- emptyText: q,
241
- state: T,
242
- open: f,
239
+ loading: V,
240
+ showCheckmark: q,
241
+ emptyText: G,
242
+ state: k,
243
+ open: p,
243
244
  onOpenChange: se,
244
- side: J,
245
- align: K,
246
- search: _,
247
- sideOffset: L,
248
- enableVirtualization: Q,
245
+ side: K,
246
+ align: L,
247
+ search: H,
248
+ sideOffset: Q,
249
+ enableVirtualization: U,
249
250
  selectionMode: "separated",
250
251
  multiSelect: !0,
251
- itemHeight: U,
252
- maxHeight: W,
253
- size: n,
254
- variant: k,
255
- fullWidth: j,
256
- searchPlaceholder: O,
252
+ itemHeight: W,
253
+ maxHeight: X,
254
+ size: s,
255
+ variant: j,
256
+ fullWidth: D,
257
+ searchPlaceholder: ee,
257
258
  width: A,
258
259
  "data-testid": l ? `${l}-dropdown` : void 0,
259
- showClearButton: I,
260
- onClear: ee,
261
- searchValue: B,
262
- onSearchChange: H,
260
+ showClearButton: O,
261
+ onClear: te,
262
+ searchValue: I,
263
+ onSearchChange: B,
263
264
  className: "flex items-center",
264
- children: /* @__PURE__ */ d(
265
+ children: /* @__PURE__ */ g(
265
266
  "div",
266
267
  {
267
- ref: Ce,
268
- className: h(
268
+ ref: be,
269
+ className: d(
269
270
  i.trigger({
270
- state: X ? "error" : void 0
271
+ state: Y ? "error" : void 0
271
272
  }),
272
273
  "flex"
273
274
  ),
274
- "data-state": f ? "open" : "closed",
275
- onPointerDown: ae,
275
+ "data-state": p ? "open" : "closed",
276
+ onPointerDown: ne,
276
277
  onClick: (e) => {
277
- a || s || ae(e) || S(!f);
278
+ a || n || ne(e) || $(!p);
278
279
  },
279
280
  children: [
280
- m && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: m.node || m.name && /* @__PURE__ */ t(
281
+ c && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: c.node || c.name && /* @__PURE__ */ t(
281
282
  C,
282
283
  {
283
- name: m.name,
284
- size: x(n),
285
- "aria-label": m["aria-label"],
284
+ name: c.name,
285
+ size: N(s),
286
+ "aria-label": c["aria-label"],
286
287
  className: "cursor-pointer"
287
288
  }
288
289
  ) }),
289
290
  /* @__PURE__ */ t(
290
291
  "div",
291
292
  {
292
- className: h(
293
+ className: d(
293
294
  "flex-1 flex flex-nowrap gap-1 min-h-0 overflow-hidden",
294
- !a && !s && "cursor-pointer"
295
+ !a && !n && "cursor-pointer"
295
296
  ),
296
- children: Array.isArray($) ? null : /* @__PURE__ */ t(Se, { children: pe === "chip" ? /* @__PURE__ */ d(
297
+ children: Array.isArray(R) ? null : /* @__PURE__ */ t(Re, { children: ue === "chip" ? /* @__PURE__ */ g(
297
298
  "div",
298
299
  {
299
- ref: g.containerRef,
300
+ ref: x.containerRef,
300
301
  className: "flex items-center gap-xs-3 flex-nowrap w-full max-w-full overflow-hidden",
301
302
  children: [
302
- $.displayItems.map((e) => /* @__PURE__ */ t(
303
- le,
303
+ R.displayItems.map((e) => /* @__PURE__ */ t(
304
+ ce,
304
305
  {
305
- size: te(n),
306
- onRemove: !a && !s ? () => {
307
- ye(e.value);
306
+ size: re(s),
307
+ onRemove: !a && !n ? () => {
308
+ Ae(e.value);
308
309
  } : void 0,
309
310
  className: "bg-bg-surface-level-3 flex-shrink-0",
310
311
  variant: "neutral",
311
- trailingIcon: !a && !s ? {
312
+ trailingIcon: !a && !n ? {
312
313
  name: "x-close",
313
314
  "aria-label": "Remove option"
314
315
  } : void 0,
@@ -318,17 +319,17 @@ const ie = $e(
318
319
  },
319
320
  e.value
320
321
  )),
321
- $.hasMore && /* @__PURE__ */ t(
322
- le,
322
+ R.hasMore && /* @__PURE__ */ t(
323
+ ce,
323
324
  {
324
- size: te(n),
325
+ size: re(s),
325
326
  variant: "neutral",
326
327
  className: "bg-bg-surface-level-3 flex-shrink-0",
327
328
  dataTestIdName: `${l || "select"}-chip-more`,
328
329
  onClick: (e) => e.stopPropagation(),
329
- children: fe.replace(
330
+ children: he.replace(
330
331
  "{count}",
331
- $.remainingCount.toString()
332
+ R.remainingCount.toString()
332
333
  )
333
334
  }
334
335
  )
@@ -339,45 +340,45 @@ const ie = $e(
339
340
  /* @__PURE__ */ t(
340
341
  "div",
341
342
  {
342
- className: h(
343
+ className: d(
343
344
  i.placeholder(),
344
- !a && !s && "cursor-pointer"
345
+ !a && !n && "cursor-pointer"
345
346
  ),
346
- children: Array.isArray(r) ? r?.length > 0 ? /* @__PURE__ */ d(
347
- P,
347
+ children: Array.isArray(r) ? r?.length > 0 ? /* @__PURE__ */ g(
348
+ z,
348
349
  {
349
350
  variants: "body",
350
351
  size: "md",
351
352
  color: "fg-neutral-main",
352
353
  children: [
353
- E,
354
- /* @__PURE__ */ d("span", { className: "text-fg-brand-rest", children: [
354
+ F,
355
+ /* @__PURE__ */ g("span", { className: "text-fg-brand-rest", children: [
355
356
  "(",
356
357
  r?.length,
357
358
  ")"
358
359
  ] })
359
360
  ]
360
361
  }
361
- ) : b : E
362
+ ) : b : F
362
363
  }
363
364
  )
364
365
  ) })
365
366
  }
366
367
  ),
367
- /* @__PURE__ */ d("div", { className: "flex items-center gap-xs", children: [
368
+ /* @__PURE__ */ g("div", { className: "flex items-center gap-xs", children: [
368
369
  Array.isArray(r) && r.length > 0 && /* @__PURE__ */ t(
369
370
  "button",
370
371
  {
371
372
  type: "button",
372
373
  onClick: (e) => {
373
- e.stopPropagation(), ee();
374
+ e.stopPropagation(), te();
374
375
  },
375
- className: h(
376
+ className: d(
376
377
  "flex items-center justify-center rounded-sm transition-colors",
377
- !a && !s && "cursor-pointer hover:bg-bg-neutral-subtle",
378
- a || s ? "opacity-50 cursor-not-allowed" : ""
378
+ !a && !n && "cursor-pointer hover:bg-bg-neutral-subtle",
379
+ a || n ? "opacity-50 cursor-not-allowed" : ""
379
380
  ),
380
- disabled: a || s,
381
+ disabled: a || n,
381
382
  "aria-label": "Clear all selections",
382
383
  "data-testid": l ? `${l}-clear-all` : void 0,
383
384
  "data-no-trigger": "true",
@@ -386,7 +387,7 @@ const ie = $e(
386
387
  {
387
388
  name: "x-circle",
388
389
  variant: "solid",
389
- size: x(n),
390
+ size: N(s),
390
391
  className: "text-fg-neutral-subtle"
391
392
  }
392
393
  )
@@ -397,28 +398,28 @@ const ie = $e(
397
398
  {
398
399
  type: "button",
399
400
  onClick: (e) => {
400
- e.stopPropagation(), !a && !s && S(!f);
401
+ e.stopPropagation(), !a && !n && $(!p);
401
402
  },
402
- className: h(
403
+ className: d(
403
404
  "flex items-center justify-center dropdown-toggle-btn",
404
- !a && !s && "cursor-pointer"
405
+ !a && !n && "cursor-pointer"
405
406
  ),
406
407
  "data-testid": l ? `${l}-dropdown-toggle` : "dropdown-toggle",
407
- children: p ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: p.node || p.name && /* @__PURE__ */ t(
408
+ children: m ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: m.node || m.name && /* @__PURE__ */ t(
408
409
  C,
409
410
  {
410
- name: p.name,
411
- size: x(n),
412
- "aria-label": p["aria-label"]
411
+ name: m.name,
412
+ size: N(s),
413
+ "aria-label": m["aria-label"]
413
414
  }
414
415
  ) }) : /* @__PURE__ */ t(
415
416
  C,
416
417
  {
417
- name: f ? "chevron-up" : "chevron-down",
418
- size: x(n),
419
- className: h(
418
+ name: p ? "chevron-up" : "chevron-down",
419
+ size: N(s),
420
+ className: d(
420
421
  i.chevron(),
421
- f && "rotate-180"
422
+ p && "rotate-180"
422
423
  )
423
424
  }
424
425
  )
@@ -432,51 +433,51 @@ const ie = $e(
432
433
  ) : (
433
434
  /* Single mode - use Dropdown normally */
434
435
  /* @__PURE__ */ t(
435
- oe,
436
+ ie,
436
437
  {
437
- ...Z,
438
+ ..._,
438
439
  items: M,
439
440
  value: r,
440
441
  onValueChange: (e) => {
441
- a || s || (y?.(e), S(!1));
442
+ a || n || (y?.(e), $(!1));
442
443
  },
443
444
  placeholder: b,
444
445
  disabled: a,
445
- loading: z,
446
- showCheckmark: V,
447
- emptyText: q,
448
- state: T,
449
- open: f,
446
+ loading: V,
447
+ showCheckmark: q,
448
+ emptyText: G,
449
+ state: k,
450
+ open: p,
450
451
  onOpenChange: se,
451
- side: J,
452
- align: K,
453
- sideOffset: L,
454
- enableVirtualization: Q,
455
- itemHeight: U,
456
- maxHeight: W,
457
- size: n,
458
- variant: k,
459
- fullWidth: j,
452
+ side: K,
453
+ align: L,
454
+ sideOffset: Q,
455
+ enableVirtualization: U,
456
+ itemHeight: W,
457
+ maxHeight: X,
458
+ size: s,
459
+ variant: j,
460
+ fullWidth: D,
460
461
  width: A,
461
462
  "data-testid": l ? `${l}-dropdown` : void 0,
462
- search: _,
463
- searchPlaceholder: O,
464
- searchValue: B,
465
- onSearchChange: H,
466
- showClearButton: I,
467
- children: ue || we()
463
+ search: H,
464
+ searchPlaceholder: ee,
465
+ searchValue: I,
466
+ onSearchChange: B,
467
+ showClearButton: O,
468
+ children: de || Se()
468
469
  }
469
470
  )
470
471
  ) }),
471
472
  /* @__PURE__ */ t(
472
- Ee,
473
+ Pe,
473
474
  {
474
475
  className: "mt-1",
475
- text: ce,
476
- error: X,
477
- haveIcon: ge,
478
- iconsSize: de,
479
- iconsCustom: xe
476
+ text: pe,
477
+ error: Y,
478
+ haveIcon: Ne,
479
+ iconsSize: xe,
480
+ iconsCustom: ve
480
481
  }
481
482
  )
482
483
  ]
@@ -484,8 +485,8 @@ const ie = $e(
484
485
  );
485
486
  }
486
487
  );
487
- ie.displayName = "Select";
488
- const Ye = ke(ie);
488
+ me.displayName = "Select";
489
+ const _e = De(me);
489
490
  export {
490
- Ye as default
491
+ _e as default
491
492
  };
package/dist/shared/hooks/useChipOverflow.js CHANGED
@@ -1,99 +1,104 @@
1
- import { useRef as w, useState as k, useCallback as q, useEffect as g } from "react";
2
- const O = ({
3
- items: t,
4
- gap: a = 8,
5
- minChipsToShow: C = 1,
6
- moreChipWidth: W = 60
1
+ import { useRef as W, useState as E, useEffect as C, useCallback as I } from "react";
2
+ const z = ({
3
+ items: r,
4
+ gap: c = 8,
5
+ minChipsToShow: x = 1,
6
+ moreChipWidth: M = 60
7
7
  }) => {
8
- const f = w(null), [x, o] = k(t.length), n = q(() => {
9
- if (!f.current || t.length === 0) {
10
- o(t.length);
8
+ const d = W(null), [b, a] = E(r.length), m = W(r), A = W(r.length);
9
+ C(() => {
10
+ m.current = r, A.current = r.length;
11
+ });
12
+ const n = I(() => {
13
+ const t = m.current;
14
+ if (!d.current || t.length === 0) {
15
+ a(t.length);
11
16
  return;
12
17
  }
13
- const i = f.current, h = i.clientWidth;
14
- if (h === 0) {
15
- o(t.length);
18
+ const h = d.current, i = h.clientWidth;
19
+ if (i === 0) {
20
+ a(t.length);
16
21
  return;
17
22
  }
18
23
  if (t.length <= 4) {
19
- const e = i.querySelectorAll(
24
+ const e = h.querySelectorAll(
20
25
  '[data-testid*="chip"]:not([data-testid*="chip-more"])'
21
26
  );
22
- let r = 75;
23
- e.length > 0 && (r = e[0].offsetWidth);
24
- const s = Math.max(0, t.length - 1) * a;
25
- if (t.length * r + s <= h) {
26
- o(t.length);
27
+ let s = 75;
28
+ e.length > 0 && (s = e[0].offsetWidth);
29
+ const u = Math.max(0, t.length - 1) * c;
30
+ if (t.length * s + u <= i) {
31
+ a(t.length);
27
32
  return;
28
33
  }
29
34
  }
30
- const l = i.querySelectorAll(
35
+ const l = h.querySelectorAll(
31
36
  '[data-testid*="chip"]:not([data-testid*="chip-more"])'
32
37
  );
33
38
  if (l.length === 0) {
34
- o(t.length);
39
+ a(t.length);
35
40
  return;
36
41
  }
37
- let u = 0;
38
- l.length > 0 && (u = Array.from(l).reduce((r, s) => r + s.offsetWidth, 0) / l.length), u === 0 && (u = 80);
39
- let M = 0, c = 0;
42
+ let p = 0;
43
+ l.length > 0 && (p = Array.from(l).reduce((s, u) => s + u.offsetWidth, 0) / l.length), p === 0 && (p = 80);
44
+ let v = 0, o = 0;
40
45
  for (let e = 0; e < t.length; e++) {
41
- const r = e < l.length ? l[e].offsetWidth : u;
42
- if (r === 0)
46
+ const s = e < l.length ? l[e].offsetWidth : p;
47
+ if (s === 0)
43
48
  break;
44
- const s = e === t.length - 1, p = M + r + (e > 0 ? a : 0);
45
- let d;
46
- if (s)
47
- d = h;
49
+ const u = e === t.length - 1, g = v + s + (e > 0 ? c : 0);
50
+ let f;
51
+ if (u)
52
+ f = i;
48
53
  else {
49
- const b = r;
50
- p + a + b > h ? d = h - W - a : d = h;
54
+ const y = s;
55
+ g + c + y > i ? f = i - M - c : f = i;
51
56
  }
52
- if (p <= d)
53
- M = p, c = e + 1;
57
+ if (g <= f)
58
+ v = g, o = e + 1;
54
59
  else
55
60
  break;
56
61
  }
57
- c = Math.max(c, Math.min(C, t.length));
58
- const y = c >= t.length ? t.length : c, A = t.length > 0 ? Math.max(1, y) : 0;
59
- o(A);
60
- }, [t.length, a, C, W]);
61
- g(() => {
62
- const i = f.current;
63
- if (!i) return;
64
- const h = setTimeout(n, 0), l = new ResizeObserver(() => {
62
+ o = Math.max(o, Math.min(x, t.length));
63
+ const k = o >= t.length ? t.length : o, q = t.length > 0 ? Math.max(1, k) : 0;
64
+ a(q);
65
+ }, [c, x, M]);
66
+ C(() => {
67
+ const t = d.current;
68
+ if (!t) return;
69
+ const h = setTimeout(n, 0), i = new ResizeObserver(() => {
65
70
  n();
66
71
  });
67
- return l.observe(i), () => {
68
- clearTimeout(h), l.disconnect();
72
+ return i.observe(t), () => {
73
+ clearTimeout(h), i.disconnect();
69
74
  };
70
- }, [n]), g(() => {
75
+ }, [n]), C(() => {
71
76
  n();
72
- const i = setTimeout(() => {
77
+ const t = setTimeout(() => {
73
78
  n();
74
79
  }, 10), h = setTimeout(() => {
75
80
  n();
76
81
  }, 50);
77
82
  return () => {
78
- clearTimeout(i), clearTimeout(h);
83
+ clearTimeout(t), clearTimeout(h);
79
84
  };
80
- }, [t, n]), g(() => {
81
- if (t.length > 0) {
82
- const i = requestAnimationFrame(() => {
85
+ }, [r.length, n]), C(() => {
86
+ if (r.length > 0) {
87
+ const t = requestAnimationFrame(() => {
83
88
  n();
84
89
  });
85
- return () => cancelAnimationFrame(i);
90
+ return () => cancelAnimationFrame(t);
86
91
  }
87
- }, [t.length, n]);
88
- const T = t.slice(0, x), m = Math.max(0, t.length - x), v = m > 0;
92
+ }, [r.length, n]);
93
+ const R = m.current.slice(0, b), T = Math.max(0, m.current.length - b), w = T > 0;
89
94
  return {
90
- containerRef: f,
91
- displayItems: T,
92
- remainingCount: m,
93
- hasMore: v,
95
+ containerRef: d,
96
+ displayItems: R,
97
+ remainingCount: T,
98
+ hasMore: w,
94
99
  recalculate: n
95
100
  };
96
101
  };
97
102
  export {
98
- O as useChipOverflow
103
+ z as useChipOverflow
99
104
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mcr-design-systems",
3
3
  "private": false,
4
- "version": "1.0.214",
4
+ "version": "1.0.215",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",