impact-nova 1.7.51 → 1.8.1
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.
- package/dist/components/ui/combobox.js +32 -25
- package/dist/components/ui/expandable-sku/expandable-sku.js +2 -1
- package/dist/components/ui/filter-strip/filter-strip.d.ts +1 -1
- package/dist/components/ui/filter-strip/filter-strip.js +46 -42
- package/dist/components/ui/filter-strip/filter-tag-list.d.ts +2 -1
- package/dist/components/ui/filter-strip/filter-tag-list.js +87 -69
- package/dist/components/ui/select/select.js +126 -125
- package/dist/components/ui/types/filter-strip.types.d.ts +9 -0
- package/dist/components/ui/types/select.types.d.ts +13 -0
- package/dist/impact-nova.css +1 -1
- package/package.json +1 -1
|
@@ -1,75 +1,76 @@
|
|
|
1
|
-
import { jsxs as g, jsx as r, Fragment as
|
|
2
|
-
import
|
|
1
|
+
import { jsxs as g, jsx as r, Fragment as bt } from "react/jsx-runtime";
|
|
2
|
+
import vt, { useState as W, useRef as R, useEffect as I } from "react";
|
|
3
3
|
import * as ae from "@radix-ui/react-popover";
|
|
4
|
-
import { useVirtualizer as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { LoadingSpinner as
|
|
8
|
-
import { Checkbox as
|
|
9
|
-
import { Button as
|
|
4
|
+
import { useVirtualizer as yt } from "@tanstack/react-virtual";
|
|
5
|
+
import St from "./components/LabelWithSequence.js";
|
|
6
|
+
import wt from "./components/Submenu.js";
|
|
7
|
+
import { LoadingSpinner as Vt, Cross as Nt, ChevronRight as Fe, Search as kt, Info as oe } from "../../../icons/index.js";
|
|
8
|
+
import { Checkbox as Re } from "../checkbox.js";
|
|
9
|
+
import { Button as Pt } from "../button.js";
|
|
10
10
|
import { cn as w } from "../../../lib/utils.js";
|
|
11
|
-
import { isInvertedSelection as L, isOptionArray as V, isSelected as
|
|
12
|
-
import { useFlattenOptions as
|
|
13
|
-
import { useSelectionModel as
|
|
14
|
-
import { useVisibleStats as
|
|
11
|
+
import { isInvertedSelection as L, isOptionArray as V, isSelected as Dt, getSequence as Ct, getLeafOptions as Ot } from "./utils/select.js";
|
|
12
|
+
import { useFlattenOptions as At } from "./hooks/useFlattenOptions.js";
|
|
13
|
+
import { useSelectionModel as It } from "./hooks/useSelectionModel.js";
|
|
14
|
+
import { useVisibleStats as Tt } from "./hooks/useVisibleStats.js";
|
|
15
15
|
import { useImpactNovaI18n as Et } from "../../../i18n/ImpactNovaI18nContext.js";
|
|
16
|
-
const
|
|
16
|
+
const Lt = (Ve) => {
|
|
17
17
|
const {
|
|
18
18
|
options: H,
|
|
19
19
|
value: ce,
|
|
20
|
-
defaultValue:
|
|
20
|
+
defaultValue: He,
|
|
21
21
|
onChange: u,
|
|
22
22
|
isMulti: p,
|
|
23
23
|
isDisabled: k,
|
|
24
|
-
isLoading:
|
|
25
|
-
isClearable:
|
|
24
|
+
isLoading: T,
|
|
25
|
+
isClearable: _e = !0,
|
|
26
26
|
isSearchable: z = !0,
|
|
27
|
-
placeholder:
|
|
27
|
+
placeholder: je,
|
|
28
28
|
// menuPortalTarget is kept for API compatibility but no longer used (Radix handles portalling)
|
|
29
|
-
menuPortalTarget:
|
|
30
|
-
autoFocus:
|
|
31
|
-
closeMenuOnSelect:
|
|
32
|
-
defaultMenuIsOpen:
|
|
29
|
+
menuPortalTarget: zt,
|
|
30
|
+
autoFocus: qe,
|
|
31
|
+
closeMenuOnSelect: Be = !p,
|
|
32
|
+
defaultMenuIsOpen: Ke = !1,
|
|
33
33
|
scrollToSelectedOnOpen: Ne = !1,
|
|
34
34
|
maxSelectableOptions: b,
|
|
35
35
|
showSequence: ke,
|
|
36
|
-
selectionOrder:
|
|
36
|
+
selectionOrder: Ue,
|
|
37
37
|
label: _,
|
|
38
|
-
isRequired:
|
|
38
|
+
isRequired: We,
|
|
39
39
|
error: ue,
|
|
40
40
|
helperText: X,
|
|
41
41
|
helperTextPosition: de = "absolute",
|
|
42
42
|
id: P,
|
|
43
|
-
className:
|
|
44
|
-
parentClassName:
|
|
43
|
+
className: Xe,
|
|
44
|
+
parentClassName: Ye,
|
|
45
45
|
onMenuScrollToBottom: $,
|
|
46
|
-
|
|
46
|
+
totalCount: Pe,
|
|
47
|
+
name: Je,
|
|
47
48
|
isSelectAllEnabled: Q = !0,
|
|
48
49
|
isReadOnly: h = !1,
|
|
49
50
|
searchPosition: G = "menu",
|
|
50
|
-
footerContent:
|
|
51
|
-
onInputChange:
|
|
52
|
-
getOptionLabel:
|
|
53
|
-
renderOption:
|
|
54
|
-
onMenuOpen:
|
|
55
|
-
onMenuClose:
|
|
51
|
+
footerContent: De,
|
|
52
|
+
onInputChange: Qe,
|
|
53
|
+
getOptionLabel: Ce,
|
|
54
|
+
renderOption: Oe,
|
|
55
|
+
onMenuOpen: Ze,
|
|
56
|
+
onMenuClose: Ae,
|
|
56
57
|
labelOrientation: fe = "top",
|
|
57
|
-
leftContent:
|
|
58
|
-
ignoreCase:
|
|
59
|
-
ignoreAccents:
|
|
60
|
-
matchFrom:
|
|
61
|
-
stringify:
|
|
62
|
-
trim:
|
|
63
|
-
filterOption:
|
|
58
|
+
leftContent: Ie,
|
|
59
|
+
ignoreCase: et,
|
|
60
|
+
ignoreAccents: tt,
|
|
61
|
+
matchFrom: nt,
|
|
62
|
+
stringify: lt,
|
|
63
|
+
trim: st,
|
|
64
|
+
filterOption: it,
|
|
64
65
|
enableSubMenus: y = !1,
|
|
65
66
|
enableGroups: D = !1,
|
|
66
67
|
fetchError: j,
|
|
67
|
-
onRefetch:
|
|
68
|
-
menuWidth:
|
|
68
|
+
onRefetch: Te,
|
|
69
|
+
menuWidth: rt,
|
|
69
70
|
onClearAll: Ee,
|
|
70
|
-
onFocus:
|
|
71
|
-
onBlur:
|
|
72
|
-
} = Ve, { t: Y } = Et(), pe =
|
|
71
|
+
onFocus: at,
|
|
72
|
+
onBlur: ot
|
|
73
|
+
} = Ve, { t: Y } = Et(), pe = je ?? Y("select.placeholder"), [m, Le] = W(Ke), [M, Z] = W(""), [ze, me] = W(void 0), [d, v] = W(He || (p ? [] : null)), [ct, he] = W(null), J = -2, [C, O] = W(-1), xe = R(!1), ge = R(null), ee = R(null), ut = R(null), te = R(null), q = R(null);
|
|
73
74
|
I(() => {
|
|
74
75
|
ce !== void 0 && v(ce);
|
|
75
76
|
}, [ce]), I(() => {
|
|
@@ -84,23 +85,23 @@ const Tt = (Ve) => {
|
|
|
84
85
|
e = !0, clearTimeout(n);
|
|
85
86
|
};
|
|
86
87
|
}, [m, z, G]);
|
|
87
|
-
const { flatOptions: f, isProcessing: A, totalOptionsCount:
|
|
88
|
-
ignoreCase:
|
|
89
|
-
ignoreAccents:
|
|
90
|
-
matchFrom:
|
|
91
|
-
stringify:
|
|
92
|
-
trim:
|
|
93
|
-
filterOption:
|
|
88
|
+
const { flatOptions: f, isProcessing: A, totalOptionsCount: $e, workerSelectAll: dt } = At(H, M, {
|
|
89
|
+
ignoreCase: et,
|
|
90
|
+
ignoreAccents: tt,
|
|
91
|
+
matchFrom: nt,
|
|
92
|
+
stringify: lt,
|
|
93
|
+
trim: st,
|
|
94
|
+
filterOption: it,
|
|
94
95
|
enableSubMenus: y,
|
|
95
96
|
enableGroups: D
|
|
96
|
-
}), S =
|
|
97
|
+
}), S = It(d, p ?? !1), { stats: B, getGroupStats: be } = Tt(
|
|
97
98
|
f,
|
|
98
|
-
|
|
99
|
+
$e,
|
|
99
100
|
M,
|
|
100
101
|
S,
|
|
101
102
|
d,
|
|
102
103
|
p ?? !1
|
|
103
|
-
), N =
|
|
104
|
+
), N = yt({
|
|
104
105
|
count: f.length,
|
|
105
106
|
getScrollElement: () => te.current,
|
|
106
107
|
estimateSize: () => 34,
|
|
@@ -113,7 +114,7 @@ const Tt = (Ve) => {
|
|
|
113
114
|
if (xe.current = !1, z && G === "menu" && !h)
|
|
114
115
|
O(-1);
|
|
115
116
|
else {
|
|
116
|
-
const e = !
|
|
117
|
+
const e = !T && !A && !j && p && Q && !h && f.length > 0;
|
|
117
118
|
O(e ? J : 0);
|
|
118
119
|
}
|
|
119
120
|
}, [m]), I(() => {
|
|
@@ -135,11 +136,11 @@ const Tt = (Ve) => {
|
|
|
135
136
|
}
|
|
136
137
|
}
|
|
137
138
|
}, [m, Ne, A, f.length, p, S.mode, S.set, d, N]);
|
|
138
|
-
const K = R(null),
|
|
139
|
-
|
|
139
|
+
const K = R(null), Ge = N.getVirtualItems(), ve = Ge[Ge.length - 1], ne = vt.useCallback(() => {
|
|
140
|
+
T || A || K.current || $ && ($(), K.current = setTimeout(() => {
|
|
140
141
|
K.current = null;
|
|
141
142
|
}, 500));
|
|
142
|
-
}, [
|
|
143
|
+
}, [T, A, $]);
|
|
143
144
|
I(() => () => {
|
|
144
145
|
K.current && (clearTimeout(K.current), K.current = null);
|
|
145
146
|
}, []), I(() => {
|
|
@@ -166,13 +167,13 @@ const Tt = (Ve) => {
|
|
|
166
167
|
ve,
|
|
167
168
|
ne
|
|
168
169
|
]);
|
|
169
|
-
const
|
|
170
|
+
const E = (e) => {
|
|
170
171
|
if (!k)
|
|
171
|
-
if (
|
|
172
|
-
|
|
172
|
+
if (Le(e), e)
|
|
173
|
+
Ze?.();
|
|
173
174
|
else {
|
|
174
175
|
const t = d, n = p && V(d) ? d.map((l) => l.value) : void 0;
|
|
175
|
-
|
|
176
|
+
Ae?.(t, n), Z(""), he(null);
|
|
176
177
|
}
|
|
177
178
|
};
|
|
178
179
|
I(() => {
|
|
@@ -190,7 +191,7 @@ const Tt = (Ve) => {
|
|
|
190
191
|
if (p) {
|
|
191
192
|
const n = d || [];
|
|
192
193
|
if ("children" in e || "options" in e) {
|
|
193
|
-
const s =
|
|
194
|
+
const s = Ot(
|
|
194
195
|
e,
|
|
195
196
|
y,
|
|
196
197
|
D
|
|
@@ -260,12 +261,12 @@ const Tt = (Ve) => {
|
|
|
260
261
|
v(e), u && u(e, {
|
|
261
262
|
action: "select-option",
|
|
262
263
|
option: e
|
|
263
|
-
}),
|
|
264
|
+
}), Be && (Le(!1), Ae?.(e, void 0), Z(""));
|
|
264
265
|
}, ye = async () => {
|
|
265
266
|
if (!(!p || k || h)) {
|
|
266
267
|
if (H.length > 3e3) {
|
|
267
268
|
try {
|
|
268
|
-
const e = await
|
|
269
|
+
const e = await dt(
|
|
269
270
|
d,
|
|
270
271
|
L(d),
|
|
271
272
|
b
|
|
@@ -373,7 +374,7 @@ const Tt = (Ve) => {
|
|
|
373
374
|
}
|
|
374
375
|
}
|
|
375
376
|
}
|
|
376
|
-
},
|
|
377
|
+
}, ft = (e) => {
|
|
377
378
|
if (e.stopPropagation(), !h)
|
|
378
379
|
if (p) {
|
|
379
380
|
const t = [], n = (s) => {
|
|
@@ -427,32 +428,32 @@ const Tt = (Ve) => {
|
|
|
427
428
|
const n = null;
|
|
428
429
|
v(n), u && u(n, { action: "clear" }), Ee?.();
|
|
429
430
|
}
|
|
430
|
-
},
|
|
431
|
+
}, pt = (e) => Ct(
|
|
431
432
|
e,
|
|
432
433
|
ke ?? !1,
|
|
433
434
|
p ?? !1,
|
|
434
|
-
|
|
435
|
+
Ue,
|
|
435
436
|
d
|
|
436
|
-
), se = (e) =>
|
|
437
|
+
), se = (e) => Ce ? Ce(e) : e.label, Me = () => {
|
|
437
438
|
const e = [];
|
|
438
|
-
return !
|
|
439
|
+
return !T && !A && !j && p && Q && !h && f.length > 0 && e.push(J), f.forEach((n, l) => {
|
|
439
440
|
!n.isGroup && !(y && n.isSubmenuParent) && !n.isDisabled && e.push(l);
|
|
440
441
|
}), e;
|
|
441
|
-
},
|
|
442
|
+
}, mt = (e) => {
|
|
442
443
|
if (k || h) return;
|
|
443
444
|
if (e.key === "Tab") {
|
|
444
|
-
m &&
|
|
445
|
+
m && E(!1);
|
|
445
446
|
return;
|
|
446
447
|
}
|
|
447
448
|
if (!m) {
|
|
448
|
-
(e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), xe.current = !0,
|
|
449
|
+
(e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), xe.current = !0, E(!0));
|
|
449
450
|
return;
|
|
450
451
|
}
|
|
451
452
|
if (z && G === "menu" && !h && q.current) {
|
|
452
453
|
document.activeElement !== q.current && q.current.focus();
|
|
453
454
|
return;
|
|
454
455
|
}
|
|
455
|
-
const t =
|
|
456
|
+
const t = Me();
|
|
456
457
|
if (t.length === 0) return;
|
|
457
458
|
const n = t.indexOf(C);
|
|
458
459
|
if (e.key === "ArrowDown") {
|
|
@@ -471,15 +472,15 @@ const Tt = (Ve) => {
|
|
|
471
472
|
l.isDisabled || le(l);
|
|
472
473
|
}
|
|
473
474
|
} else if (e.key === "Escape")
|
|
474
|
-
e.preventDefault(),
|
|
475
|
+
e.preventDefault(), E(!1), ge.current?.focus();
|
|
475
476
|
else if (e.key === "Home")
|
|
476
477
|
e.preventDefault(), t.length > 0 && (O(t[0]), t[0] >= 0 && N.scrollToIndex(t[0], { align: "auto" }));
|
|
477
478
|
else if (e.key === "End" && (e.preventDefault(), t.length > 0)) {
|
|
478
479
|
const l = t[t.length - 1];
|
|
479
480
|
O(l), l >= 0 && N.scrollToIndex(l, { align: "auto" });
|
|
480
481
|
}
|
|
481
|
-
},
|
|
482
|
-
const t =
|
|
482
|
+
}, ht = (e) => {
|
|
483
|
+
const t = Me();
|
|
483
484
|
if (t.length === 0) return;
|
|
484
485
|
const n = t.indexOf(C);
|
|
485
486
|
if (e.key === "ArrowDown") {
|
|
@@ -497,12 +498,12 @@ const Tt = (Ve) => {
|
|
|
497
498
|
const l = f[C];
|
|
498
499
|
l.isDisabled || le(l);
|
|
499
500
|
}
|
|
500
|
-
} else e.key === "Escape" && (e.preventDefault(),
|
|
501
|
-
},
|
|
501
|
+
} else e.key === "Escape" && (e.preventDefault(), E(!1), ge.current?.focus());
|
|
502
|
+
}, xt = () => {
|
|
502
503
|
if (p) {
|
|
503
504
|
const e = d || [];
|
|
504
505
|
let t = 0;
|
|
505
|
-
return L(e) ? t =
|
|
506
|
+
return L(e) ? t = Math.max(0, (typeof Pe == "number" ? Pe : $e) - e.excludedValues.length) : V(e) && (t = e.length), t === 0 ? null : t === 1 && V(e) ? /* @__PURE__ */ r("span", { className: w("text-[14px] font-medium truncate min-w-0 block", k ? "text-disabled-foreground" : "text-[#1f2b4d]"), children: se(e[0]) }) : /* @__PURE__ */ r("span", { className: w("text-[14px] font-medium truncate min-w-0 block", k ? "text-disabled-foreground" : "text-[#1f2b4d]"), children: Y("select.selectedCount", { count: t }) });
|
|
506
507
|
} else {
|
|
507
508
|
const e = d;
|
|
508
509
|
return e ? /* @__PURE__ */ r("span", { className: w("text-[14px] font-medium truncate min-w-0 block", k ? "text-disabled-foreground" : "text-[#1f2b4d]"), children: se(e) }) : null;
|
|
@@ -514,7 +515,7 @@ const Tt = (Ve) => {
|
|
|
514
515
|
className: w(
|
|
515
516
|
"flex gap-[6px]",
|
|
516
517
|
fe === "left" ? "w-fit flex-row items-center" : "w-full flex-col",
|
|
517
|
-
|
|
518
|
+
Ye
|
|
518
519
|
),
|
|
519
520
|
"data-testid": `select-${P || "default"}`,
|
|
520
521
|
"data-component": "select",
|
|
@@ -529,7 +530,7 @@ const Tt = (Ve) => {
|
|
|
529
530
|
children: [
|
|
530
531
|
_,
|
|
531
532
|
" ",
|
|
532
|
-
|
|
533
|
+
We && /* @__PURE__ */ r("span", { className: "text-[red]", children: "*" })
|
|
533
534
|
]
|
|
534
535
|
}
|
|
535
536
|
),
|
|
@@ -541,7 +542,7 @@ const Tt = (Ve) => {
|
|
|
541
542
|
X && de === "absolute" && "relative"
|
|
542
543
|
),
|
|
543
544
|
children: [
|
|
544
|
-
/* @__PURE__ */ g(ae.Root, { open: m, onOpenChange:
|
|
545
|
+
/* @__PURE__ */ g(ae.Root, { open: m, onOpenChange: E, children: [
|
|
545
546
|
/* @__PURE__ */ r(ae.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
|
|
546
547
|
"div",
|
|
547
548
|
{
|
|
@@ -553,12 +554,12 @@ const Tt = (Ve) => {
|
|
|
553
554
|
h ? "cursor-default bg-[#f2f4fb]" : "",
|
|
554
555
|
m ? "ring-1 ring-indigo-500 border-indigo-500" : "",
|
|
555
556
|
!k && !h && "bg-white",
|
|
556
|
-
|
|
557
|
+
Xe
|
|
557
558
|
),
|
|
558
559
|
id: P,
|
|
559
560
|
tabIndex: k ? -1 : 0,
|
|
560
|
-
onFocus:
|
|
561
|
-
onBlur:
|
|
561
|
+
onFocus: at,
|
|
562
|
+
onBlur: ot,
|
|
562
563
|
role: "combobox",
|
|
563
564
|
"aria-expanded": m,
|
|
564
565
|
"aria-haspopup": "listbox",
|
|
@@ -566,7 +567,7 @@ const Tt = (Ve) => {
|
|
|
566
567
|
"data-component": "select-trigger",
|
|
567
568
|
"data-disabled": k || void 0,
|
|
568
569
|
"data-state": m ? "open" : "closed",
|
|
569
|
-
onKeyDown:
|
|
570
|
+
onKeyDown: mt,
|
|
570
571
|
onClick: (e) => {
|
|
571
572
|
const t = e.target, n = t.closest("[data-chevron-button]"), l = t.closest("[data-clear-button]");
|
|
572
573
|
if (n || l) {
|
|
@@ -575,14 +576,14 @@ const Tt = (Ve) => {
|
|
|
575
576
|
}
|
|
576
577
|
},
|
|
577
578
|
children: /* @__PURE__ */ g("div", { className: "flex items-center justify-between w-full min-w-0 max-w-full", children: [
|
|
578
|
-
|
|
579
|
+
Ie && /* @__PURE__ */ r("div", { className: "flex items-center text-gray-500 shrink-0", children: Ie }),
|
|
579
580
|
/* @__PURE__ */ g(
|
|
580
581
|
"div",
|
|
581
582
|
{
|
|
582
583
|
className: "flex-1 flex items-center overflow-hidden min-w-0 max-w-full",
|
|
583
584
|
"data-testid": `select-value-${P || "default"}`,
|
|
584
585
|
children: [
|
|
585
|
-
|
|
586
|
+
xt() || /* @__PURE__ */ r(
|
|
586
587
|
"span",
|
|
587
588
|
{
|
|
588
589
|
className: "text-[#b4bac7] font-normal text-[14px] truncate min-w-0 block",
|
|
@@ -594,21 +595,21 @@ const Tt = (Ve) => {
|
|
|
594
595
|
z && m && G === "trigger" && !h && /* @__PURE__ */ r(
|
|
595
596
|
"input",
|
|
596
597
|
{
|
|
597
|
-
ref:
|
|
598
|
+
ref: ut,
|
|
598
599
|
type: "text",
|
|
599
600
|
className: "flex-1 min-w-[50px] border-none p-0 focus:ring-0 text-sm outline-none h-full",
|
|
600
601
|
value: M,
|
|
601
602
|
onChange: (e) => Z(e.target.value),
|
|
602
603
|
onClick: (e) => e.stopPropagation(),
|
|
603
|
-
autoFocus:
|
|
604
|
-
name:
|
|
604
|
+
autoFocus: qe,
|
|
605
|
+
name: Je || void 0
|
|
605
606
|
}
|
|
606
607
|
)
|
|
607
608
|
]
|
|
608
609
|
}
|
|
609
610
|
),
|
|
610
|
-
/* @__PURE__ */ r("div", { className: "flex items-center gap-1 text-gray-400 shrink-0", children: !m && (
|
|
611
|
-
|
|
611
|
+
/* @__PURE__ */ r("div", { className: "flex items-center gap-1 text-gray-400 shrink-0", children: !m && (T || A) ? /* @__PURE__ */ r(Vt, { size: "14px" }) : /* @__PURE__ */ g(bt, { children: [
|
|
612
|
+
_e && !h && !k && (p && (L(
|
|
612
613
|
d
|
|
613
614
|
) && d.isAllSelected || V(d) && d.length > 0) || !p && d) && /* @__PURE__ */ r(
|
|
614
615
|
"div",
|
|
@@ -616,10 +617,10 @@ const Tt = (Ve) => {
|
|
|
616
617
|
role: "button",
|
|
617
618
|
"data-clear-button": !0,
|
|
618
619
|
onPointerDown: (e) => {
|
|
619
|
-
e.preventDefault(), e.stopPropagation(),
|
|
620
|
+
e.preventDefault(), e.stopPropagation(), ft(e);
|
|
620
621
|
},
|
|
621
622
|
className: "hover:text-gray-600 p-0.5 cursor-pointer z-10 relative",
|
|
622
|
-
children: /* @__PURE__ */ r(
|
|
623
|
+
children: /* @__PURE__ */ r(Nt, { size: "11px", color: "#758490" })
|
|
623
624
|
}
|
|
624
625
|
),
|
|
625
626
|
/* @__PURE__ */ r(
|
|
@@ -629,11 +630,11 @@ const Tt = (Ve) => {
|
|
|
629
630
|
"data-chevron-button": !0,
|
|
630
631
|
"aria-label": m ? "Close dropdown" : "Open dropdown",
|
|
631
632
|
onPointerDown: (e) => {
|
|
632
|
-
e.preventDefault(), e.stopPropagation(),
|
|
633
|
+
e.preventDefault(), e.stopPropagation(), E(!m);
|
|
633
634
|
},
|
|
634
635
|
className: "hover:text-gray-600 p-0.5 cursor-pointer z-10 relative",
|
|
635
636
|
children: /* @__PURE__ */ r(
|
|
636
|
-
|
|
637
|
+
Fe,
|
|
637
638
|
{
|
|
638
639
|
size: "16px",
|
|
639
640
|
className: w(
|
|
@@ -658,13 +659,13 @@ const Tt = (Ve) => {
|
|
|
658
659
|
avoidCollisions: !0,
|
|
659
660
|
collisionPadding: 8,
|
|
660
661
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
661
|
-
onInteractOutside: () =>
|
|
662
|
-
onFocusOutside: () =>
|
|
662
|
+
onInteractOutside: () => E(!1),
|
|
663
|
+
onFocusOutside: () => E(!1),
|
|
663
664
|
onWheel: (e) => e.stopPropagation(),
|
|
664
665
|
style: {
|
|
665
|
-
width:
|
|
666
|
+
width: rt || "var(--radix-popover-trigger-width)",
|
|
666
667
|
maxHeight: "var(--radix-popover-content-available-height)",
|
|
667
|
-
minHeight:
|
|
668
|
+
minHeight: ze ? `${ze}px` : void 0
|
|
668
669
|
},
|
|
669
670
|
className: w(
|
|
670
671
|
"z-50 overflow-hidden rounded-[12px] text-base shadow-[0px_1px_6px_0px_rgba(26,39,124,0.14)] focus:outline-none sm:text-sm flex flex-col border-none pointer-events-auto",
|
|
@@ -688,7 +689,7 @@ const Tt = (Ve) => {
|
|
|
688
689
|
className: "p-0",
|
|
689
690
|
"data-testid": `select-search-container-${P || "default"}`,
|
|
690
691
|
children: /* @__PURE__ */ g("div", { className: "relative", children: [
|
|
691
|
-
/* @__PURE__ */ r("div", { className: "absolute inset-y-0 left-[12px] flex items-center pointer-events-none", children: /* @__PURE__ */ r(
|
|
692
|
+
/* @__PURE__ */ r("div", { className: "absolute inset-y-0 left-[12px] flex items-center pointer-events-none", children: /* @__PURE__ */ r(kt, { size: "14px", color: "#AFAFAF" }) }),
|
|
692
693
|
/* @__PURE__ */ r(
|
|
693
694
|
"input",
|
|
694
695
|
{
|
|
@@ -697,10 +698,10 @@ const Tt = (Ve) => {
|
|
|
697
698
|
className: "block w-full pl-[34px] pr-4 h-[35px] border-none border-b border-primary text-sm outline-none focus-visible:ring-1 focus-visible:ring-indigo-500 focus-visible:rounded-md",
|
|
698
699
|
placeholder: Y("select.searchHere"),
|
|
699
700
|
value: M,
|
|
700
|
-
onKeyDown:
|
|
701
|
+
onKeyDown: ht,
|
|
701
702
|
onChange: (e) => {
|
|
702
703
|
const t = e.target.value;
|
|
703
|
-
M === "" && t !== "" ? ee.current && me(ee.current.offsetHeight) : t === "" && me(void 0), Z(t),
|
|
704
|
+
M === "" && t !== "" ? ee.current && me(ee.current.offsetHeight) : t === "" && me(void 0), Z(t), Qe?.(t);
|
|
704
705
|
},
|
|
705
706
|
onClick: (e) => e.stopPropagation(),
|
|
706
707
|
"data-testid": `select-search-input-${P || "default"}`
|
|
@@ -709,7 +710,7 @@ const Tt = (Ve) => {
|
|
|
709
710
|
] })
|
|
710
711
|
}
|
|
711
712
|
),
|
|
712
|
-
!
|
|
713
|
+
!T && !A && !j && p && Q && !h && f.length > 0 && /* @__PURE__ */ r(
|
|
713
714
|
"div",
|
|
714
715
|
{
|
|
715
716
|
className: "pb-1",
|
|
@@ -727,7 +728,7 @@ const Tt = (Ve) => {
|
|
|
727
728
|
"data-testid": `select-select-all-button-${P || "default"}`,
|
|
728
729
|
children: /* @__PURE__ */ g("div", { className: "flex items-center flex-1", children: [
|
|
729
730
|
/* @__PURE__ */ r("div", { className: "pointer-events-none flex", children: /* @__PURE__ */ r(
|
|
730
|
-
|
|
731
|
+
Re,
|
|
731
732
|
{
|
|
732
733
|
checked: (() => {
|
|
733
734
|
const { totalVisible: e, selectedVisible: t } = B;
|
|
@@ -774,16 +775,16 @@ const Tt = (Ve) => {
|
|
|
774
775
|
onWheel: (e) => e.stopPropagation(),
|
|
775
776
|
children: j ? /* @__PURE__ */ g("div", { className: "flex flex-col items-center justify-center py-8 px-4 text-center", children: [
|
|
776
777
|
/* @__PURE__ */ r("p", { className: "text-sm text-gray-500 font-medium mb-3", children: "Something went wrong" }),
|
|
777
|
-
|
|
778
|
-
|
|
778
|
+
Te && /* @__PURE__ */ r(
|
|
779
|
+
Pt,
|
|
779
780
|
{
|
|
780
781
|
size: "sm",
|
|
781
782
|
variant: "outline",
|
|
782
|
-
onClick: () =>
|
|
783
|
+
onClick: () => Te(),
|
|
783
784
|
children: "Refetch"
|
|
784
785
|
}
|
|
785
786
|
)
|
|
786
|
-
] }) : f.length === 0 && !
|
|
787
|
+
] }) : f.length === 0 && !T && !A ? /* @__PURE__ */ r("div", { className: "flex items-center justify-center py-8 text-sm text-gray-500", children: "No options found" }) : T || A ? /* @__PURE__ */ r("div", { className: "px-1 py-1 space-y-1", children: Array.from({ length: 6 }).map((e, t) => /* @__PURE__ */ g(
|
|
787
788
|
"div",
|
|
788
789
|
{
|
|
789
790
|
className: "flex items-center gap-2 px-3 py-2 animate-pulse",
|
|
@@ -804,7 +805,7 @@ const Tt = (Ve) => {
|
|
|
804
805
|
children: N.getVirtualItems().map((e) => {
|
|
805
806
|
const t = f[e.index], n = p ? S.mode === "exclude" ? !S.set.has(t.value) : S.set.has(t.value) : d?.value === t.value, l = d || [], s = p && b ? L(l) ? !1 : V(l) && l.length >= b : !1, i = t.isDisabled || s && !n && !(D && t.isGroup) && !(y && t.isSubmenuParent), a = D && t.isGroup || y && t.isSubmenuParent ? be(t.original) : void 0, c = a?.selected || 0, o = a?.total || 0, x = c > 0 && c < o, ie = t.isParentSelectable !== !1, Se = P || "default", re = String(t.value || ""), we = se(
|
|
806
807
|
t
|
|
807
|
-
),
|
|
808
|
+
), gt = typeof we == "string" ? we : re;
|
|
808
809
|
return /* @__PURE__ */ g(
|
|
809
810
|
"div",
|
|
810
811
|
{
|
|
@@ -847,7 +848,7 @@ const Tt = (Ve) => {
|
|
|
847
848
|
role: "option",
|
|
848
849
|
"aria-selected": n,
|
|
849
850
|
"aria-disabled": i || void 0,
|
|
850
|
-
children:
|
|
851
|
+
children: Oe ? Oe(
|
|
851
852
|
{
|
|
852
853
|
onClick: () => {
|
|
853
854
|
},
|
|
@@ -858,7 +859,7 @@ const Tt = (Ve) => {
|
|
|
858
859
|
t
|
|
859
860
|
) : /* @__PURE__ */ g("div", { className: "flex items-center flex-1 overflow-hidden", children: [
|
|
860
861
|
p && (D && t.isGroup || y && t.isSubmenuParent ? ie : !0) && /* @__PURE__ */ r(
|
|
861
|
-
|
|
862
|
+
Re,
|
|
862
863
|
{
|
|
863
864
|
checked: x ? "indeterminate" : n,
|
|
864
865
|
disabled: i || h,
|
|
@@ -867,12 +868,12 @@ const Tt = (Ve) => {
|
|
|
867
868
|
}
|
|
868
869
|
),
|
|
869
870
|
ke && !(D && t.isGroup) && !(y && t.isSubmenuParent) ? /* @__PURE__ */ r(
|
|
870
|
-
|
|
871
|
+
St,
|
|
871
872
|
{
|
|
872
873
|
label: se(
|
|
873
874
|
t
|
|
874
875
|
),
|
|
875
|
-
sequence:
|
|
876
|
+
sequence: pt(t)
|
|
876
877
|
}
|
|
877
878
|
) : /* @__PURE__ */ g("div", { className: "flex items-center gap-2 overflow-hidden w-full", children: [
|
|
878
879
|
/* @__PURE__ */ r(
|
|
@@ -885,14 +886,14 @@ const Tt = (Ve) => {
|
|
|
885
886
|
),
|
|
886
887
|
"data-testid": `select-option-label-${Se}-${re}`,
|
|
887
888
|
"data-state": n ? "checked" : "unchecked",
|
|
888
|
-
title:
|
|
889
|
+
title: gt,
|
|
889
890
|
children: we
|
|
890
891
|
}
|
|
891
892
|
),
|
|
892
893
|
(D && t.isGroup || y && t.isSubmenuParent) && c > 0 && /* @__PURE__ */ r("span", { className: "inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800", children: c })
|
|
893
894
|
] }),
|
|
894
895
|
y && t.isSubmenuParent && /* @__PURE__ */ r(
|
|
895
|
-
|
|
896
|
+
Fe,
|
|
896
897
|
{
|
|
897
898
|
size: "12px",
|
|
898
899
|
className: "text-gray-400"
|
|
@@ -901,13 +902,13 @@ const Tt = (Ve) => {
|
|
|
901
902
|
] })
|
|
902
903
|
}
|
|
903
904
|
),
|
|
904
|
-
y &&
|
|
905
|
-
|
|
905
|
+
y && ct === t.value && t.isSubmenuParent && t.rect && /* @__PURE__ */ r(
|
|
906
|
+
wt,
|
|
906
907
|
{
|
|
907
908
|
parentOption: t,
|
|
908
909
|
isMulti: !!p,
|
|
909
910
|
isReadOnly: !!h,
|
|
910
|
-
isSelected: (F) =>
|
|
911
|
+
isSelected: (F) => Dt(F, d, !!p),
|
|
911
912
|
getIndeterminateState: (F) => {
|
|
912
913
|
const U = be(F);
|
|
913
914
|
return U ? U.selected > 0 && U.selected < U.total : !1;
|
|
@@ -926,7 +927,7 @@ const Tt = (Ve) => {
|
|
|
926
927
|
)
|
|
927
928
|
}
|
|
928
929
|
),
|
|
929
|
-
(
|
|
930
|
+
(De || b || H.length > 5e3) && /* @__PURE__ */ r("div", { className: "px-3 py-[10px] border-t border-solid border-gray-100 z-10 sticky bottom-0 bg-white", children: b ? /* @__PURE__ */ g("div", { className: "flex items-center gap-2 text-gray-500 px-2", children: [
|
|
930
931
|
/* @__PURE__ */ r(oe, { size: "12px", className: "text-gray-400" }),
|
|
931
932
|
/* @__PURE__ */ g("span", { className: "text-xs font-medium leading-4 text-[#60697d]", children: [
|
|
932
933
|
"Maximum ",
|
|
@@ -936,7 +937,7 @@ const Tt = (Ve) => {
|
|
|
936
937
|
] }) : H.length > 5e3 ? /* @__PURE__ */ g("div", { className: "flex items-center gap-2 text-gray-500 px-2", children: [
|
|
937
938
|
/* @__PURE__ */ r(oe, { size: "12px", className: "text-gray-400" }),
|
|
938
939
|
/* @__PURE__ */ r("span", { className: "text-xs font-medium leading-4 text-[#60697d]", children: "Large dataset detected. Operations might be slower." })
|
|
939
|
-
] }) :
|
|
940
|
+
] }) : De })
|
|
940
941
|
]
|
|
941
942
|
}
|
|
942
943
|
) })
|
|
@@ -974,7 +975,7 @@ const Tt = (Ve) => {
|
|
|
974
975
|
}
|
|
975
976
|
);
|
|
976
977
|
};
|
|
977
|
-
|
|
978
|
+
Lt.displayName = "Select";
|
|
978
979
|
export {
|
|
979
|
-
|
|
980
|
+
Lt as default
|
|
980
981
|
};
|
|
@@ -4,6 +4,7 @@ export interface FilterItem {
|
|
|
4
4
|
value: string | number | string[];
|
|
5
5
|
required?: boolean;
|
|
6
6
|
removable?: boolean;
|
|
7
|
+
copyable?: boolean;
|
|
7
8
|
viewAllTrigger?: 'expand' | 'custom';
|
|
8
9
|
overflow?: {
|
|
9
10
|
count?: number;
|
|
@@ -106,4 +107,12 @@ export interface FilterStripProps {
|
|
|
106
107
|
* to anchor a badge to this button.
|
|
107
108
|
*/
|
|
108
109
|
allFiltersShortcutId?: string;
|
|
110
|
+
/**
|
|
111
|
+
* Whether to show the "All Filters" button. Defaults to true.
|
|
112
|
+
*/
|
|
113
|
+
showAllFiltersButton?: boolean;
|
|
114
|
+
/**
|
|
115
|
+
* Whether to show the saved filters in the summary dropdown.
|
|
116
|
+
*/
|
|
117
|
+
showSavedFilters?: boolean;
|
|
109
118
|
}
|
|
@@ -223,6 +223,19 @@ export interface SelectProps<OptionType extends Option = Option, IsMulti extends
|
|
|
223
223
|
* Callback fired when the menu is scrolled to the bottom.
|
|
224
224
|
*/
|
|
225
225
|
onMenuScrollToBottom?: () => void;
|
|
226
|
+
/**
|
|
227
|
+
* Total number of options in the complete dataset, including options that
|
|
228
|
+
* have not been fetched yet (async pagination). When provided AND the
|
|
229
|
+
* component is in multi-select with `enableInvertedSelection`, the trigger
|
|
230
|
+
* label "Selected (N)" uses this value instead of the count of loaded
|
|
231
|
+
* options. Leave undefined for non-paginated usage; behaviour is unchanged.
|
|
232
|
+
*
|
|
233
|
+
* The parent should pass the same total it intends "Select All" to
|
|
234
|
+
* represent on the server. During search you may either keep the
|
|
235
|
+
* unfiltered total (recommended) or pass the filtered total – the
|
|
236
|
+
* component renders whatever is given.
|
|
237
|
+
*/
|
|
238
|
+
totalCount?: number;
|
|
226
239
|
/**
|
|
227
240
|
* If `true`, shows the "Select All" option in multi-select mode.
|
|
228
241
|
* @default true
|