mimir-ui-kit 1.43.13 → 1.43.14
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/SelectSearch/SelectSearch.d.ts +1 -0
- package/dist/components/SelectSearch/SelectSearch.js +229 -206
- package/dist/components/SelectSearch/constants.d.ts +2 -0
- package/dist/components/SelectSearch/constants.js +6 -3
- package/dist/components/SelectSearch/types.d.ts +4 -0
- package/dist/components/SelectSearch/utils.d.ts +1 -0
- package/dist/components/SelectSearch/utils.js +23 -18
- package/package.json +1 -1
@@ -28,4 +28,5 @@ export declare const SelectSearch: import('react').ForwardRefExoticComponent<Pic
|
|
28
28
|
groupBy?: string;
|
29
29
|
getGroupTitle?: (groupValue: string) => string;
|
30
30
|
optionLayout?: import('./types').TOptionLayout;
|
31
|
+
autoPlacement?: boolean;
|
31
32
|
} & import('react').RefAttributes<HTMLElement>>;
|
@@ -1,171 +1,185 @@
|
|
1
|
-
import { jsx as
|
2
|
-
import { u as
|
1
|
+
import { jsx as s, jsxs as c, Fragment as A } from "react/jsx-runtime";
|
2
|
+
import { u as Ae } from "../../index-D5H8gPPn.js";
|
3
3
|
import { c as i } from "../../index-DIxK0V-G.js";
|
4
|
-
import { forwardRef as
|
5
|
-
import { ESelectSearchSize as l, ELoadingIndicatorPlacement as
|
6
|
-
import { prepareGroupedItems as
|
7
|
-
import { Icon as
|
8
|
-
import { Button as
|
9
|
-
import { I as
|
10
|
-
import { EInputVariant as
|
11
|
-
import { Loader as
|
12
|
-
import { H as
|
13
|
-
import '../../assets/SelectSearch.css';const
|
4
|
+
import { forwardRef as Be, useRef as ue, useState as x, useMemo as F, useCallback as me, useEffect as H } from "react";
|
5
|
+
import { ESelectSearchSize as l, ELoadingIndicatorPlacement as I } from "./constants.js";
|
6
|
+
import { prepareGroupedItems as Pe, shouldShowMenuOnTop as Ge, mapSizeToInputSize as pe, getDropdownArrowIcon as qe } from "./utils.js";
|
7
|
+
import { Icon as $ } from "../../icons/Icon.js";
|
8
|
+
import { Button as je } from "../Button/Button.js";
|
9
|
+
import { I as he } from "../../Input-BU_6U1CW.js";
|
10
|
+
import { EInputVariant as Fe } from "../Input/constants.js";
|
11
|
+
import { Loader as _e } from "../Loader/Loader.js";
|
12
|
+
import { H as He, U as fe, G as ve, W as ge, K as $e } from "../../combobox-fIVOzEhl.js";
|
13
|
+
import '../../assets/SelectSearch.css';const Ke = "_disabled_1rthm_6", Ue = "_container_1rthm_13", We = "_full_1rthm_26", Qe = "_button_1rthm_38", Re = "_options_1rthm_52", Ye = "_top_1rthm_63", Je = "_bottom_1rthm_69", Xe = "_s_1rthm_2", Ze = "_m_1rthm_110", et = "_l_1rthm_123", tt = "_loader_1rthm_161", nt = "_option_1rthm_52", ot = "_clear_1rthm_200", t = {
|
14
14
|
"select-search": "_select-search_1rthm_2",
|
15
|
-
disabled:
|
16
|
-
container:
|
15
|
+
disabled: Ke,
|
16
|
+
container: Ue,
|
17
17
|
"container-open": "_container-open_1rthm_22",
|
18
|
-
full:
|
18
|
+
full: We,
|
19
19
|
"selected-icon": "_selected-icon_1rthm_30",
|
20
20
|
"selector-icon-open": "_selector-icon-open_1rthm_34",
|
21
|
-
button:
|
21
|
+
button: Qe,
|
22
22
|
"selector-icon": "_selector-icon_1rthm_34",
|
23
|
-
options:
|
24
|
-
top:
|
25
|
-
bottom:
|
23
|
+
options: Re,
|
24
|
+
top: Ye,
|
25
|
+
bottom: Je,
|
26
26
|
"no-options": "_no-options_1rthm_75",
|
27
|
-
s:
|
28
|
-
m:
|
29
|
-
l:
|
27
|
+
s: Xe,
|
28
|
+
m: Ze,
|
29
|
+
l: et,
|
30
30
|
"select-search-input": "_select-search-input_1rthm_136",
|
31
31
|
"select-search-input-disabled": "_select-search-input-disabled_1rthm_139",
|
32
32
|
"group-header": "_group-header_1rthm_146",
|
33
33
|
"sticky-active": "_sticky-active_1rthm_157",
|
34
|
-
loader:
|
34
|
+
loader: tt,
|
35
35
|
"input-container": "_input-container_1rthm_166",
|
36
|
-
option:
|
36
|
+
option: nt,
|
37
37
|
"option-active": "_option-active_1rthm_180",
|
38
38
|
"option-inner": "_option-inner_1rthm_183",
|
39
39
|
"right-slot": "_right-slot_1rthm_190",
|
40
40
|
"required-mark": "_required-mark_1rthm_195",
|
41
|
-
clear:
|
41
|
+
clear: ot,
|
42
42
|
"icon-button": "_icon-button_1rthm_209"
|
43
|
-
},
|
44
|
-
(
|
43
|
+
}, st = Be(
|
44
|
+
(be, ye) => {
|
45
45
|
const {
|
46
|
-
placeholder:
|
46
|
+
placeholder: K,
|
47
47
|
size: o = l.L,
|
48
48
|
value: d,
|
49
49
|
onChange: a,
|
50
|
-
full:
|
51
|
-
showArrow:
|
50
|
+
full: Ne,
|
51
|
+
showArrow: Se = !0,
|
52
52
|
items: g = [],
|
53
|
-
classNameOption:
|
54
|
-
classNameOptionInner:
|
55
|
-
displayValue:
|
56
|
-
filterOnSearch:
|
57
|
-
onSearch:
|
58
|
-
variant:
|
59
|
-
menuPlacement:
|
53
|
+
classNameOption: U,
|
54
|
+
classNameOptionInner: W,
|
55
|
+
displayValue: w = "name",
|
56
|
+
filterOnSearch: Q = !0,
|
57
|
+
onSearch: k,
|
58
|
+
variant: R = Fe.DefaultGray,
|
59
|
+
menuPlacement: C = "bottom",
|
60
60
|
disabled: u = !1,
|
61
|
-
searchProps:
|
62
|
-
withClearButton:
|
63
|
-
disableInput:
|
64
|
-
autocomplete:
|
65
|
-
immediate:
|
66
|
-
noOptionsText:
|
67
|
-
noMatchText:
|
68
|
-
loadOnOpen:
|
69
|
-
loading:
|
70
|
-
loadingIndicatorPlacement:
|
71
|
-
groupBy:
|
72
|
-
getGroupTitle:
|
73
|
-
optionLayout:
|
74
|
-
|
61
|
+
searchProps: Y,
|
62
|
+
withClearButton: B = !1,
|
63
|
+
disableInput: _ = !1,
|
64
|
+
autocomplete: J = "on",
|
65
|
+
immediate: xe = !1,
|
66
|
+
noOptionsText: Ie = "Нет данных",
|
67
|
+
noMatchText: we = "Ничего не найдено",
|
68
|
+
loadOnOpen: P,
|
69
|
+
loading: X,
|
70
|
+
loadingIndicatorPlacement: L = I.Dropdown,
|
71
|
+
groupBy: h,
|
72
|
+
getGroupTitle: Z = (e) => e,
|
73
|
+
optionLayout: ke = "name-bottom",
|
74
|
+
autoPlacement: z = !1
|
75
|
+
} = be, G = (e) => {
|
75
76
|
if (!e) return "";
|
76
|
-
const n = e[
|
77
|
+
const n = e[w];
|
77
78
|
return typeof n == "string" ? n : String(n || "");
|
78
|
-
},
|
79
|
-
const n = e[
|
79
|
+
}, Ce = (e) => {
|
80
|
+
const n = e[w];
|
80
81
|
return typeof n == "string" ? n : String(n || "");
|
81
|
-
},
|
82
|
-
if (
|
82
|
+
}, q = G(d), O = ue(null), ee = ue(null), [f, b] = x(q), [m, y] = x(d), [Le, te] = x(!1), [j, ze] = x(null), [E, ne] = x(C), oe = X !== void 0 ? X : Le, N = F(() => {
|
83
|
+
if (!Q)
|
83
84
|
return g;
|
84
|
-
const e = String(
|
85
|
-
return e ? g.filter((n) =>
|
86
|
-
}, [
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
) :
|
85
|
+
const e = String(f || "").trim().toLowerCase();
|
86
|
+
return e ? g.filter((n) => Ce(n).toLowerCase().includes(e)) : g;
|
87
|
+
}, [f, g, Q, w]), S = F(() => h ? Pe(
|
88
|
+
N,
|
89
|
+
h,
|
90
|
+
Z || ((e) => e)
|
91
|
+
) : N, [N, h, Z]), D = F(() => {
|
91
92
|
const e = [];
|
92
|
-
return
|
93
|
-
n.isGroupHeader && e.push(
|
93
|
+
return S.forEach((n, r) => {
|
94
|
+
n.isGroupHeader && e.push(r);
|
94
95
|
}), e;
|
95
|
-
}, [
|
96
|
-
count:
|
97
|
-
getScrollElement: () =>
|
96
|
+
}, [S]), v = Ae({
|
97
|
+
count: S.length,
|
98
|
+
getScrollElement: () => O.current,
|
98
99
|
estimateSize: () => o === l.L ? 65 : 49,
|
99
100
|
overscan: 10
|
100
|
-
})
|
101
|
-
|
102
|
-
|
103
|
-
|
101
|
+
}), p = me(() => {
|
102
|
+
if (!z) {
|
103
|
+
ne(C);
|
104
|
+
return;
|
105
|
+
}
|
106
|
+
const e = Ge(ee, o);
|
107
|
+
ne(e ? "top" : C);
|
108
|
+
}, [z, C, o]);
|
109
|
+
H(() => {
|
110
|
+
if (z)
|
111
|
+
return p(), window.addEventListener("scroll", p), window.addEventListener("resize", p), () => {
|
112
|
+
window.removeEventListener("scroll", p), window.removeEventListener("resize", p);
|
113
|
+
};
|
114
|
+
}, [z, p]), H(() => {
|
115
|
+
const e = O.current;
|
116
|
+
if (!e || !h) return;
|
104
117
|
const n = () => {
|
105
|
-
var
|
106
|
-
const
|
107
|
-
let
|
108
|
-
for (let
|
109
|
-
const
|
110
|
-
if ((((
|
111
|
-
|
112
|
-
const
|
113
|
-
if (
|
118
|
+
var ce, le;
|
119
|
+
const r = e.scrollTop;
|
120
|
+
let V = null;
|
121
|
+
for (let M = 0; M < D.length; M++) {
|
122
|
+
const de = D[M];
|
123
|
+
if ((((ce = v.getVirtualItems().find((T) => T.index === de)) == null ? void 0 : ce.start) || 0) <= r) {
|
124
|
+
V = de;
|
125
|
+
const T = D[M + 1];
|
126
|
+
if (T !== void 0 && (((le = v.getVirtualItems().find((Te) => Te.index === T)) == null ? void 0 : le.start) || 0) <= r)
|
114
127
|
continue;
|
115
128
|
} else
|
116
129
|
break;
|
117
130
|
}
|
118
|
-
|
131
|
+
ze(V);
|
119
132
|
};
|
120
133
|
return e.addEventListener("scroll", n), () => e.removeEventListener("scroll", n);
|
121
|
-
}, [
|
122
|
-
const
|
123
|
-
if (
|
134
|
+
}, [v, D, h, O.current]);
|
135
|
+
const se = async () => {
|
136
|
+
if (P)
|
124
137
|
try {
|
125
|
-
|
138
|
+
te(!0), await P();
|
126
139
|
} finally {
|
127
|
-
|
140
|
+
te(!1);
|
128
141
|
}
|
129
|
-
},
|
142
|
+
}, Oe = (e) => {
|
130
143
|
if (e) {
|
131
|
-
const n =
|
132
|
-
|
144
|
+
const n = G(e);
|
145
|
+
b(n), y(e), a == null || a(e);
|
133
146
|
} else
|
134
|
-
|
135
|
-
},
|
147
|
+
b(""), y(null), a == null || a({ id: "", name: "" });
|
148
|
+
}, re = me(
|
136
149
|
(e) => {
|
137
|
-
if (
|
150
|
+
if (_) return;
|
138
151
|
const n = e.target.value;
|
139
|
-
|
152
|
+
b(n), k == null || k(n), m && n !== G(m) && y(null), !n && d && (a == null || a({ id: "", name: "" }));
|
140
153
|
},
|
141
|
-
[
|
142
|
-
),
|
143
|
-
|
144
|
-
},
|
145
|
-
|
154
|
+
[_, a, k, d, m, w]
|
155
|
+
), Ee = () => {
|
156
|
+
b(""), y(null), a == null || a({ id: "", name: "" });
|
157
|
+
}, ie = async (e) => {
|
158
|
+
_ && e.target.blur(), p(), P && await se();
|
146
159
|
};
|
147
|
-
|
160
|
+
H(() => {
|
148
161
|
const e = !d || typeof d == "object" && !Object.keys(d).length;
|
149
|
-
|
150
|
-
}, [d,
|
151
|
-
const
|
152
|
-
/* @__PURE__ */
|
162
|
+
b(e ? "" : q), y(e ? null : d);
|
163
|
+
}, [d, q]);
|
164
|
+
const De = () => oe && (L === I.Dropdown || L === I.Both) ? /* @__PURE__ */ c("div", { className: t.loader, children: [
|
165
|
+
/* @__PURE__ */ s(_e, { size: "s" }),
|
153
166
|
"Загрузка..."
|
154
|
-
] }) :
|
155
|
-
if (
|
167
|
+
] }) : Ie, Ve = (e) => {
|
168
|
+
if (Se)
|
156
169
|
return {
|
157
170
|
addonType: "react-node",
|
158
|
-
addonContent: /* @__PURE__ */ c(
|
159
|
-
|
160
|
-
/* @__PURE__ */
|
161
|
-
|
171
|
+
addonContent: /* @__PURE__ */ c(A, { children: [
|
172
|
+
oe && (L === I.Input || L === I.Both) && /* @__PURE__ */ s(_e, { size: "s" }),
|
173
|
+
/* @__PURE__ */ s(
|
174
|
+
fe,
|
162
175
|
{
|
163
176
|
className: i(t.button, {
|
164
177
|
[t.disabled]: u
|
165
178
|
}),
|
166
179
|
disabled: u,
|
167
|
-
|
168
|
-
|
180
|
+
onClick: p,
|
181
|
+
children: /* @__PURE__ */ s(
|
182
|
+
$,
|
169
183
|
{
|
170
184
|
iconName: o == l.M || o == l.S ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
|
171
185
|
className: i(t["selector-icon"], {
|
@@ -177,27 +191,31 @@ import '../../assets/SelectSearch.css';const qt = "_disabled_1rthm_6", Pt = "_co
|
|
177
191
|
)
|
178
192
|
] })
|
179
193
|
};
|
180
|
-
},
|
181
|
-
const n = e.name,
|
182
|
-
return
|
183
|
-
|
194
|
+
}, ae = (e) => {
|
195
|
+
const n = e.name, r = e.bottom && /* @__PURE__ */ s("div", { children: e.bottom });
|
196
|
+
return ke === "bottom-name" ? /* @__PURE__ */ c(A, { children: [
|
197
|
+
r,
|
184
198
|
n
|
185
|
-
] }) : /* @__PURE__ */ c(
|
199
|
+
] }) : /* @__PURE__ */ c(A, { children: [
|
186
200
|
n,
|
187
|
-
|
201
|
+
r
|
188
202
|
] });
|
189
|
-
},
|
203
|
+
}, Me = (e) => g.length ? N.length ? h ? /* @__PURE__ */ c(
|
190
204
|
"div",
|
191
205
|
{
|
192
|
-
ref:
|
206
|
+
ref: O,
|
193
207
|
"data-testid": "select-search-options",
|
194
|
-
className: i(
|
208
|
+
className: i(
|
209
|
+
t.options,
|
210
|
+
t[o],
|
211
|
+
t[E]
|
212
|
+
),
|
195
213
|
style: {
|
196
214
|
height: o === l.M || o === l.S ? "240px" : "320px",
|
197
215
|
overflow: "auto"
|
198
216
|
},
|
199
217
|
children: [
|
200
|
-
|
218
|
+
j !== null && /* @__PURE__ */ s(
|
201
219
|
"div",
|
202
220
|
{
|
203
221
|
className: t["group-header"],
|
@@ -206,23 +224,23 @@ import '../../assets/SelectSearch.css';const qt = "_disabled_1rthm_6", Pt = "_co
|
|
206
224
|
top: 0,
|
207
225
|
zIndex: 3
|
208
226
|
},
|
209
|
-
children:
|
227
|
+
children: S[j].name
|
210
228
|
}
|
211
229
|
),
|
212
|
-
/* @__PURE__ */
|
230
|
+
/* @__PURE__ */ s(
|
213
231
|
"div",
|
214
232
|
{
|
215
233
|
style: {
|
216
|
-
height: `${
|
234
|
+
height: `${v.getTotalSize()}px`,
|
217
235
|
width: "100%"
|
218
236
|
},
|
219
|
-
children:
|
220
|
-
const
|
221
|
-
return /* @__PURE__ */
|
237
|
+
children: v.getVirtualItems().map((n) => {
|
238
|
+
const r = S[n.index];
|
239
|
+
return /* @__PURE__ */ s(
|
222
240
|
"div",
|
223
241
|
{
|
224
242
|
"data-index": n.index,
|
225
|
-
ref:
|
243
|
+
ref: v.measureElement,
|
226
244
|
style: {
|
227
245
|
position: "absolute",
|
228
246
|
top: 0,
|
@@ -230,41 +248,41 @@ import '../../assets/SelectSearch.css';const qt = "_disabled_1rthm_6", Pt = "_co
|
|
230
248
|
width: "100%",
|
231
249
|
transform: `translateY(${n.start}px)`
|
232
250
|
},
|
233
|
-
children:
|
251
|
+
children: r.isGroupHeader ? /* @__PURE__ */ s(
|
234
252
|
"div",
|
235
253
|
{
|
236
254
|
className: t["group-header"],
|
237
255
|
style: {
|
238
|
-
visibility:
|
256
|
+
visibility: j === n.index ? "hidden" : "visible"
|
239
257
|
},
|
240
|
-
children:
|
258
|
+
children: r.name
|
241
259
|
}
|
242
260
|
) : /* @__PURE__ */ c(
|
243
|
-
|
261
|
+
ge,
|
244
262
|
{
|
245
|
-
value:
|
246
|
-
className: ({ focus:
|
263
|
+
value: r,
|
264
|
+
className: ({ focus: V }) => i(
|
247
265
|
t.option,
|
248
|
-
|
266
|
+
U,
|
249
267
|
o && t[o],
|
250
268
|
{
|
251
|
-
[t["option-active"]]:
|
269
|
+
[t["option-active"]]: V
|
252
270
|
}
|
253
271
|
),
|
254
|
-
"data-testid": `select-search-option-${
|
272
|
+
"data-testid": `select-search-option-${r.id}`,
|
255
273
|
children: [
|
256
|
-
/* @__PURE__ */
|
274
|
+
/* @__PURE__ */ s(
|
257
275
|
"div",
|
258
276
|
{
|
259
277
|
className: i(
|
260
278
|
t["option-inner"],
|
261
|
-
|
279
|
+
W
|
262
280
|
),
|
263
|
-
children:
|
281
|
+
children: ae(r)
|
264
282
|
}
|
265
283
|
),
|
266
|
-
m && m.id ===
|
267
|
-
|
284
|
+
m && m.id === r.id && /* @__PURE__ */ s(
|
285
|
+
$,
|
268
286
|
{
|
269
287
|
iconName: o === l.M || o === l.S ? "Done16px" : "Done24px",
|
270
288
|
className: t["selected-icon"]
|
@@ -272,7 +290,7 @@ import '../../assets/SelectSearch.css';const qt = "_disabled_1rthm_6", Pt = "_co
|
|
272
290
|
)
|
273
291
|
]
|
274
292
|
},
|
275
|
-
|
293
|
+
r.id
|
276
294
|
)
|
277
295
|
},
|
278
296
|
n.key
|
@@ -282,38 +300,42 @@ import '../../assets/SelectSearch.css';const qt = "_disabled_1rthm_6", Pt = "_co
|
|
282
300
|
)
|
283
301
|
]
|
284
302
|
}
|
285
|
-
) : /* @__PURE__ */
|
286
|
-
|
303
|
+
) : /* @__PURE__ */ s(
|
304
|
+
$e,
|
287
305
|
{
|
288
|
-
className: i(
|
306
|
+
className: i(
|
307
|
+
t.options,
|
308
|
+
t[o],
|
309
|
+
t[E]
|
310
|
+
),
|
289
311
|
"data-testid": "select-search-options",
|
290
312
|
style: { width: "100%" },
|
291
313
|
static: !0,
|
292
314
|
children: ({ option: n }) => /* @__PURE__ */ c(
|
293
|
-
|
315
|
+
ge,
|
294
316
|
{
|
295
317
|
value: n,
|
296
|
-
className: ({ focus:
|
318
|
+
className: ({ focus: r }) => i(
|
297
319
|
t.option,
|
298
|
-
|
320
|
+
U,
|
299
321
|
{
|
300
|
-
[t["option-active"]]:
|
322
|
+
[t["option-active"]]: r
|
301
323
|
},
|
302
324
|
o && t[o]
|
303
325
|
),
|
304
326
|
children: [
|
305
|
-
/* @__PURE__ */
|
327
|
+
/* @__PURE__ */ s(
|
306
328
|
"div",
|
307
329
|
{
|
308
330
|
className: i(
|
309
331
|
t["option-inner"],
|
310
|
-
|
332
|
+
W
|
311
333
|
),
|
312
|
-
children:
|
334
|
+
children: ae(n)
|
313
335
|
}
|
314
336
|
),
|
315
|
-
m && m.id === n.id && /* @__PURE__ */
|
316
|
-
|
337
|
+
m && m.id === n.id && /* @__PURE__ */ s(
|
338
|
+
$,
|
317
339
|
{
|
318
340
|
iconName: o === l.M || o === l.S ? "Done16px" : "Done24px",
|
319
341
|
className: t["selected-icon"]
|
@@ -324,89 +346,90 @@ import '../../assets/SelectSearch.css';const qt = "_disabled_1rthm_6", Pt = "_co
|
|
324
346
|
n.id
|
325
347
|
)
|
326
348
|
}
|
327
|
-
) : /* @__PURE__ */
|
349
|
+
) : /* @__PURE__ */ s(
|
328
350
|
"div",
|
329
351
|
{
|
330
352
|
className: i(
|
331
353
|
t.options,
|
332
354
|
t[o],
|
333
355
|
t["no-options"],
|
334
|
-
t[
|
356
|
+
t[E]
|
335
357
|
),
|
336
358
|
"data-headlessui-state": e ? "open" : "closed",
|
337
|
-
children:
|
359
|
+
children: we
|
338
360
|
}
|
339
|
-
) : /* @__PURE__ */
|
361
|
+
) : /* @__PURE__ */ s(
|
340
362
|
"div",
|
341
363
|
{
|
342
364
|
className: i(
|
343
365
|
t.options,
|
344
366
|
t[o],
|
345
367
|
t["no-options"],
|
346
|
-
t[
|
368
|
+
t[E]
|
347
369
|
),
|
348
370
|
"data-headlessui-state": e ? "open" : "closed",
|
349
|
-
children:
|
371
|
+
children: De()
|
350
372
|
}
|
351
373
|
);
|
352
|
-
return /* @__PURE__ */
|
353
|
-
|
374
|
+
return /* @__PURE__ */ s(
|
375
|
+
He,
|
354
376
|
{
|
355
377
|
as: "div",
|
356
378
|
value: m,
|
357
379
|
className: i(t["select-search"], {
|
358
|
-
[t.full]:
|
380
|
+
[t.full]: Ne,
|
359
381
|
[t.disabled]: u
|
360
382
|
}),
|
361
|
-
onChange:
|
362
|
-
ref:
|
383
|
+
onChange: Oe,
|
384
|
+
ref: ye,
|
363
385
|
disabled: u,
|
364
|
-
virtual:
|
365
|
-
immediate:
|
366
|
-
children: ({ open: e }) => /* @__PURE__ */ c(
|
386
|
+
virtual: h ? void 0 : { options: N },
|
387
|
+
immediate: xe,
|
388
|
+
children: ({ open: e }) => /* @__PURE__ */ c(A, { children: [
|
367
389
|
/* @__PURE__ */ c(
|
368
390
|
"div",
|
369
391
|
{
|
392
|
+
ref: ee,
|
370
393
|
className: i(t.container, t[o], {
|
371
394
|
[t["container-open"]]: e
|
372
395
|
}),
|
373
396
|
children: [
|
374
|
-
|
375
|
-
/* @__PURE__ */
|
376
|
-
|
397
|
+
_ && /* @__PURE__ */ c("div", { className: t["input-container"], children: [
|
398
|
+
/* @__PURE__ */ s(
|
399
|
+
fe,
|
377
400
|
{
|
378
401
|
disabled: u,
|
379
402
|
style: { width: "100%" },
|
380
|
-
onClick:
|
381
|
-
children: /* @__PURE__ */
|
382
|
-
|
403
|
+
onClick: se,
|
404
|
+
children: /* @__PURE__ */ s(
|
405
|
+
ve,
|
383
406
|
{
|
384
|
-
as:
|
385
|
-
label:
|
386
|
-
size:
|
407
|
+
as: he,
|
408
|
+
label: K,
|
409
|
+
size: pe(o),
|
387
410
|
className: i(t["select-search-input"], {
|
388
|
-
[t["select-search-input-disabled"]]:
|
411
|
+
[t["select-search-input-disabled"]]: _ && B
|
389
412
|
}),
|
390
|
-
onChange:
|
391
|
-
value:
|
413
|
+
onChange: re,
|
414
|
+
value: f,
|
392
415
|
disabled: u,
|
393
|
-
variant:
|
416
|
+
variant: R,
|
394
417
|
rightSlotClassName: t["right-slot"],
|
395
418
|
requiredMarkClassName: t["required-mark"],
|
396
419
|
"data-testid": "select-search-input",
|
397
|
-
onFocus:
|
420
|
+
onFocus: ie,
|
398
421
|
rightAddon: {
|
399
422
|
addonType: "icon",
|
400
|
-
addonContent:
|
423
|
+
addonContent: qe(e, o)
|
401
424
|
},
|
402
|
-
autocomplete:
|
403
|
-
...
|
425
|
+
autocomplete: J,
|
426
|
+
...Y
|
404
427
|
}
|
405
428
|
)
|
406
429
|
}
|
407
430
|
),
|
408
|
-
|
409
|
-
|
431
|
+
B && f && /* @__PURE__ */ s(
|
432
|
+
je,
|
410
433
|
{
|
411
434
|
tabIndex: -1,
|
412
435
|
className: i(t.clear, {
|
@@ -420,43 +443,43 @@ import '../../assets/SelectSearch.css';const qt = "_disabled_1rthm_6", Pt = "_co
|
|
420
443
|
disabled: u,
|
421
444
|
variant: "secondary-gray",
|
422
445
|
onClick: (n) => {
|
423
|
-
n.stopPropagation(),
|
446
|
+
n.stopPropagation(), Ee();
|
424
447
|
},
|
425
448
|
"data-testid": "clear-button"
|
426
449
|
}
|
427
450
|
)
|
428
451
|
] }),
|
429
|
-
!
|
430
|
-
|
452
|
+
!_ && /* @__PURE__ */ s(
|
453
|
+
ve,
|
431
454
|
{
|
432
|
-
as:
|
433
|
-
label:
|
434
|
-
size:
|
455
|
+
as: he,
|
456
|
+
label: K,
|
457
|
+
size: pe(o),
|
435
458
|
className: t["select-search-input"],
|
436
459
|
rightSlotClassName: t["right-slot"],
|
437
460
|
requiredMarkClassName: t["required-mark"],
|
438
|
-
value:
|
461
|
+
value: f,
|
439
462
|
disabled: u,
|
440
|
-
variant:
|
441
|
-
withClearButton:
|
442
|
-
onChange:
|
443
|
-
rightAddon:
|
463
|
+
variant: R,
|
464
|
+
withClearButton: B && !!f,
|
465
|
+
onChange: re,
|
466
|
+
rightAddon: Ve(e),
|
444
467
|
"data-testid": "select-search-input",
|
445
|
-
onFocus:
|
446
|
-
autocomplete:
|
447
|
-
...
|
468
|
+
onFocus: ie,
|
469
|
+
autocomplete: J,
|
470
|
+
...Y
|
448
471
|
}
|
449
472
|
)
|
450
473
|
]
|
451
474
|
}
|
452
475
|
),
|
453
|
-
e &&
|
476
|
+
e && Me(e)
|
454
477
|
] })
|
455
478
|
}
|
456
479
|
);
|
457
480
|
}
|
458
481
|
);
|
459
|
-
|
482
|
+
st.displayName = "SelectSearch";
|
460
483
|
export {
|
461
|
-
|
484
|
+
st as SelectSearch
|
462
485
|
};
|
@@ -1,5 +1,8 @@
|
|
1
|
-
var
|
1
|
+
var p = /* @__PURE__ */ ((o) => (o.S = "s", o.M = "m", o.L = "l", o))(p || {}), r = /* @__PURE__ */ ((o) => (o.Input = "input", o.Dropdown = "dropdown", o.Both = "both", o.None = "none", o))(r || {});
|
2
|
+
const u = 240, H = 320;
|
2
3
|
export {
|
3
|
-
|
4
|
-
r as
|
4
|
+
H as DESKTOP_MENU_HEIGHT,
|
5
|
+
r as ELoadingIndicatorPlacement,
|
6
|
+
p as ESelectSearchSize,
|
7
|
+
u as MOBILE_MENU_HEIGHT
|
5
8
|
};
|
@@ -5,3 +5,4 @@ import { EInputSize } from '../Input';
|
|
5
5
|
export declare const mapSizeToInputSize: (size: ESelectSearchSize) => EInputSize;
|
6
6
|
export declare const getDropdownArrowIcon: (isOpen: boolean, size: ESelectSearchSize) => "DropdownArrowBottom16px" | "DropdownArrowUp16px" | "DropdownArrowUp24px" | "DropdownArrowDown24px";
|
7
7
|
export declare const prepareGroupedItems: (items: TSelectOption[], groupBy: string, getGroupTitle: (value: string) => string) => TSelectOption[];
|
8
|
+
export declare const shouldShowMenuOnTop: (selectRef: React.RefObject<HTMLDivElement>, size: ESelectSearchSize) => boolean;
|
@@ -1,33 +1,38 @@
|
|
1
|
-
import { ESelectSearchSize as t } from "./constants.js";
|
1
|
+
import { ESelectSearchSize as t, MOBILE_MENU_HEIGHT as i, DESKTOP_MENU_HEIGHT as a } from "./constants.js";
|
2
2
|
import "../../Input-BU_6U1CW.js";
|
3
|
-
import { EInputSize as
|
4
|
-
const
|
3
|
+
import { EInputSize as s } from "../Input/constants.js";
|
4
|
+
const h = (r) => {
|
5
5
|
switch (r) {
|
6
6
|
case t.S:
|
7
|
-
return
|
7
|
+
return s.S;
|
8
8
|
case t.M:
|
9
|
-
return
|
9
|
+
return s.M;
|
10
10
|
case t.L:
|
11
|
-
return
|
11
|
+
return s.L;
|
12
12
|
default:
|
13
|
-
return
|
13
|
+
return s.M;
|
14
14
|
}
|
15
|
-
},
|
15
|
+
}, l = (r, o) => r ? o === t.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : o === t.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", f = (r, o, u) => {
|
16
16
|
if (!r.length || !o) return r;
|
17
|
-
const
|
18
|
-
for (const
|
19
|
-
const e = String(
|
20
|
-
|
17
|
+
const n = [], c = /* @__PURE__ */ new Set();
|
18
|
+
for (const p of r) {
|
19
|
+
const e = String(p[o] || "Без группы");
|
20
|
+
c.has(e) || (c.add(e), n.push({
|
21
21
|
id: `group-header-${e}`,
|
22
|
-
name:
|
22
|
+
name: u(e),
|
23
23
|
isGroupHeader: !0,
|
24
24
|
originalValue: e
|
25
|
-
})),
|
25
|
+
})), n.push(p);
|
26
26
|
}
|
27
|
-
return
|
27
|
+
return n;
|
28
|
+
}, g = (r, o) => {
|
29
|
+
if (!r.current) return !1;
|
30
|
+
const u = r.current.getBoundingClientRect(), n = window.innerHeight, c = o === t.M || o === t.S ? i : a, p = n - u.bottom, e = u.top;
|
31
|
+
return p >= c ? !1 : e > p;
|
28
32
|
};
|
29
33
|
export {
|
30
|
-
|
31
|
-
|
32
|
-
f as prepareGroupedItems
|
34
|
+
l as getDropdownArrowIcon,
|
35
|
+
h as mapSizeToInputSize,
|
36
|
+
f as prepareGroupedItems,
|
37
|
+
g as shouldShowMenuOnTop
|
33
38
|
};
|