mcr-design-systems 1.0.216 → 1.0.218

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