mimir-ui-kit 1.37.10 → 1.37.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/dist/components/MultiSelectSearch/MultiSelectSearch.d.ts +1 -0
  2. package/dist/components/MultiSelectSearch/MultiSelectSearch.js +228 -209
  3. package/dist/components/MultiSelectSearch/types.d.ts +4 -0
  4. package/dist/components/MultiSelectSearch/utils.d.ts +2 -0
  5. package/dist/components/MultiSelectSearch/utils.js +12 -8
  6. package/dist/components/SelectSearch/SelectSearch.d.ts +1 -0
  7. package/dist/components/SelectSearch/SelectSearch.js +57 -55
  8. package/dist/components/SelectSearch/types.d.ts +2 -0
  9. package/package.json +1 -1
package/dist/components/MultiSelectSearch/MultiSelectSearch.d.ts CHANGED
@@ -20,4 +20,5 @@ export declare const MultiSelectSearch: import('react').ForwardRefExoticComponen
20
20
  chipVariant?: import('../Chip').EChipVariant | `${import('../Chip').EChipVariant}`;
21
21
  disableInput?: boolean;
22
22
  autocomplete?: "on" | "off";
23
+ id?: string;
23
24
  } & import('react').RefAttributes<HTMLElement>>;
package/dist/components/MultiSelectSearch/MultiSelectSearch.js CHANGED
@@ -1,232 +1,251 @@
1
- import { jsxs as g, jsx as n, Fragment as B } from "react/jsx-runtime";
2
- import { c as l } from "../../index-DIxK0V-G.js";
3
- import { forwardRef as ie, useRef as R, useState as S, useEffect as j, useMemo as le } from "react";
4
- import { EMultiSelectSearchSize as M } from "./constants.js";
5
- import { getInitialInputValue as E, mapSizeToInputSize as F, getDropdownArrowIcon as re, joinSelectedItems as P } from "./utils.js";
6
- import { Icon as ce } from "../../icons/Icon.js";
7
- import { Button as ae } from "../Button/Button.js";
8
- import { CheckboxMimir as ue } from "../CheckboxMimir/CheckboxMimir.js";
9
- import { Chip as de } from "../Chip/Chip.js";
10
- import { I as G } from "../../Input-BYrIS5GU.js";
11
- import { EInputVariant as pe } from "../Input/constants.js";
12
- import { H as me, U as H, G as J, K as _e, j as he } from "../../combobox-BpYucpxz.js";
13
- import '../../assets/MultiSelectSearch.css';const fe = "_disabled_17kql_5", ke = "_container_17kql_9", qe = "_full_17kql_27", ge = "_button_17kql_39", be = "_options_17kql_53", ve = "_top_17kql_64", Ne = "_bottom_17kql_69", Ie = "_m_17kql_2", we = "_l_17kql_111", Ce = "_focused_17kql_129", Se = "_option_17kql_53", Me = "_chip_17kql_158", xe = "_clear_17kql_183", e = {
1
+ import { jsxs as b, jsx as o, Fragment as j } from "react/jsx-runtime";
2
+ import { c as r } from "../../index-DIxK0V-G.js";
3
+ import { forwardRef as ce, useRef as P, useState as E, useEffect as L, useMemo as ae } from "react";
4
+ import { EMultiSelectSearchSize as O } from "./constants.js";
5
+ import { getInitialInputValue as F, MULTISELECT_OPEN_EVENT as G, mapSizeToInputSize as U, getDropdownArrowIcon as ue, dispatchMultiselectOpen as I, joinSelectedItems as H } from "./utils.js";
6
+ import { Icon as de } from "../../icons/Icon.js";
7
+ import { Button as pe } from "../Button/Button.js";
8
+ import { CheckboxMimir as me } from "../CheckboxMimir/CheckboxMimir.js";
9
+ import { Chip as _e } from "../Chip/Chip.js";
10
+ import { I as J } from "../../Input-BYrIS5GU.js";
11
+ import { EInputVariant as he } from "../Input/constants.js";
12
+ import { H as fe, U as K, G as W, K as ke, j as qe } from "../../combobox-BpYucpxz.js";
13
+ import '../../assets/MultiSelectSearch.css';const ge = "_disabled_17kql_5", ve = "_container_17kql_9", be = "_full_17kql_27", Ie = "_button_17kql_39", we = "_options_17kql_53", Ne = "_top_17kql_64", Ce = "_bottom_17kql_69", Se = "_m_17kql_2", Me = "_l_17kql_111", Ee = "_focused_17kql_129", Le = "_option_17kql_53", Oe = "_chip_17kql_158", Te = "_clear_17kql_183", t = {
14
14
  "multi-select-search": "_multi-select-search_17kql_2",
15
- disabled: fe,
16
- container: ke,
15
+ disabled: ge,
16
+ container: ve,
17
17
  "container-open": "_container-open_17kql_18",
18
18
  "input-container": "_input-container_17kql_22",
19
- full: qe,
19
+ full: be,
20
20
  "selected-icon": "_selected-icon_17kql_31",
21
21
  "selector-icon-open": "_selector-icon-open_17kql_35",
22
- button: ge,
22
+ button: Ie,
23
23
  "selector-icon": "_selector-icon_17kql_35",
24
- options: be,
25
- top: ve,
26
- bottom: Ne,
24
+ options: we,
25
+ top: Ne,
26
+ bottom: Ce,
27
27
  "no-options": "_no-options_17kql_90",
28
- m: Ie,
29
- l: we,
28
+ m: Se,
29
+ l: Me,
30
30
  "multi-select-input-disabled": "_multi-select-input-disabled_17kql_126",
31
31
  "multi-select-input": "_multi-select-input_17kql_126",
32
- focused: Ce,
33
- option: Se,
32
+ focused: Ee,
33
+ option: Le,
34
34
  "option-active": "_option-active_17kql_148",
35
35
  "option-inner": "_option-inner_17kql_151",
36
- chip: Me,
36
+ chip: Oe,
37
37
  "chip-container": "_chip-container_17kql_163",
38
38
  "chip-root": "_chip-root_17kql_169",
39
39
  "right-slot": "_right-slot_17kql_173",
40
40
  "required-mark": "_required-mark_17kql_178",
41
- clear: xe,
41
+ clear: Te,
42
42
  "icon-button": "_icon-button_17kql_192"
43
- }, Fe = ie(
44
- (K, U) => {
43
+ }, Ue = ce(
44
+ ($, Q) => {
45
45
  const {
46
- placeholder: x,
47
- size: i = M.L,
48
- value: a,
46
+ placeholder: T,
47
+ size: i = O.L,
48
+ value: u,
49
49
  onChange: s,
50
- full: W,
51
- showArrow: Q = !0,
52
- items: m = [],
53
- classNameOption: X,
54
- displayValue: d = "name",
55
- filterOnSearch: y = !0,
56
- onSearch: v,
57
- variant: D = pe.DefaultGray,
50
+ full: X,
51
+ showArrow: Y = !0,
52
+ items: d = [],
53
+ classNameOption: Z,
54
+ displayValue: p = "name",
55
+ filterOnSearch: x = !0,
56
+ onSearch: w,
57
+ variant: y = he.DefaultGray,
58
58
  menuPlacement: N = "bottom",
59
- disabled: r = !1,
60
- searchProps: z,
61
- withClearButton: I = !1,
62
- withChip: Y = !1,
63
- chipVariant: Z = "sapphire",
64
- disableInput: _ = !1,
65
- autocomplete: O = "on"
66
- } = K, w = R(null), p = R(null), [b, h] = S(!1), [f, k] = S(
67
- () => E(a, d)
68
- ), [u, q] = S(
69
- a || []
59
+ disabled: c = !1,
60
+ searchProps: D,
61
+ withClearButton: C = !1,
62
+ withChip: ee = !1,
63
+ chipVariant: te = "sapphire",
64
+ disableInput: f = !1,
65
+ autocomplete: z = "on",
66
+ id: m = `multiselect-${Math.random().toString(36).slice(2, 11)}`
67
+ } = $, S = P(null), _ = P(null), [k, h] = E(!1), [q, g] = E(
68
+ () => F(u, p)
69
+ ), [l, v] = E(
70
+ u || []
70
71
  );
71
- j(() => {
72
- a && (q(a), JSON.stringify(a) !== JSON.stringify(u) && k(E(a, d)));
73
- }, [a, d, u]);
74
- const A = le(() => {
75
- var o;
76
- if (!y) return m;
77
- const t = ((o = f.split(",").pop()) == null ? void 0 : o.trim().toLowerCase()) ?? "";
78
- return m.filter(
79
- (c) => c.name.toLowerCase().includes(t)
72
+ L(() => {
73
+ u && (v(u), JSON.stringify(u) !== JSON.stringify(l) && g(F(u, p)));
74
+ }, [u, p, l]);
75
+ const V = ae(() => {
76
+ var n;
77
+ if (!x) return d;
78
+ const e = ((n = q.split(",").pop()) == null ? void 0 : n.trim().toLowerCase()) ?? "";
79
+ return l.length > 0 && l[l.length - 1].name.toLowerCase() === e ? d : d.filter(
80
+ (a) => a.name.toLowerCase().includes(e)
80
81
  );
81
- }, [y, m, f]), $ = (t) => {
82
- q(t), s == null || s(t);
83
- const o = P(t, d);
84
- k(o), h(!0), setTimeout(() => {
85
- if (p.current) {
86
- p.current.focus(), p.current.scrollLeft = p.current.scrollWidth;
87
- const c = o.length;
88
- p.current.setSelectionRange(c, c);
82
+ }, [x, d, q, l]), ne = (e) => {
83
+ v(e), s == null || s(e);
84
+ const n = H(e, p);
85
+ g(n), h(!0), I(m), setTimeout(() => {
86
+ if (_.current) {
87
+ _.current.focus(), _.current.scrollLeft = _.current.scrollWidth;
88
+ const a = n.length;
89
+ _.current.setSelectionRange(a, a);
89
90
  }
90
91
  }, 0);
91
- }, L = (t) => {
92
- if (_) return;
93
- const o = t.target.value;
94
- k(o), v == null || v(o);
95
- const c = o.split(",").map((C) => C.trim()).filter(Boolean), V = m.filter(
96
- (C) => c.includes(C[d])
92
+ }, A = (e) => {
93
+ if (f) return;
94
+ const n = e.target.value;
95
+ g(n), w == null || w(n);
96
+ const a = n.split(",").map((M) => M.trim()).filter(Boolean), R = d.filter(
97
+ (M) => a.includes(M[p])
97
98
  );
98
- q(V), s == null || s(V), h(!0);
99
- }, ee = (t) => {
100
- const o = u.filter(
101
- (c) => c.id !== t.id
99
+ v(R), s == null || s(R), h(!0), I(m);
100
+ }, oe = (e) => {
101
+ const n = l.filter(
102
+ (a) => a.id !== e.id
102
103
  );
103
- q(o), s == null || s(o), k(P(o, d));
104
- }, T = () => h((t) => !t), te = (t) => {
105
- t.preventDefault(), t.currentTarget.focus();
106
- const o = t.currentTarget.value.length;
107
- t.currentTarget.setSelectionRange(o, o);
108
- }, oe = () => {
109
- k(""), q([]), s == null || s([]);
110
- }, ne = (t) => {
111
- t.stopPropagation(), oe();
112
- }, se = (t) => {
113
- _ && t.target.blur();
104
+ v(n), s == null || s(n), g(H(n, p));
105
+ }, B = () => {
106
+ const e = !k;
107
+ h(e), e && I(m);
108
+ }, se = (e) => {
109
+ e.preventDefault(), e.currentTarget.focus();
110
+ const n = e.currentTarget.value.length;
111
+ e.currentTarget.setSelectionRange(n, n);
112
+ }, ie = () => {
113
+ g(""), v([]), s == null || s([]);
114
+ }, le = (e) => {
115
+ e.stopPropagation(), ie();
116
+ }, re = (e) => {
117
+ f && e.target.blur();
114
118
  };
115
- return j(() => {
116
- const t = (o) => {
117
- w.current && !w.current.contains(o.target) && !o.defaultPrevented && h(!1);
119
+ return L(() => {
120
+ const e = (n) => {
121
+ S.current && !S.current.contains(n.target) && !n.defaultPrevented && h(!1);
118
122
  };
119
- return document.addEventListener("mousedown", t), () => {
120
- document.removeEventListener("mousedown", t);
123
+ return document.addEventListener("mousedown", e), () => {
124
+ document.removeEventListener("mousedown", e);
121
125
  };
122
- }, []), /* @__PURE__ */ g("div", { ref: w, children: [
123
- /* @__PURE__ */ n(
124
- me,
126
+ }, []), L(() => {
127
+ const e = (n) => {
128
+ n.detail !== m && h(!1);
129
+ };
130
+ return window.addEventListener(
131
+ G,
132
+ e
133
+ ), () => {
134
+ window.removeEventListener(
135
+ G,
136
+ e
137
+ );
138
+ };
139
+ }, [m]), /* @__PURE__ */ b("div", { ref: S, children: [
140
+ /* @__PURE__ */ o(
141
+ fe,
125
142
  {
126
143
  multiple: !0,
127
144
  as: "div",
128
- value: u,
129
- className: l(e["multi-select-search"], {
130
- [e.full]: W,
131
- [e.disabled]: r
145
+ value: l,
146
+ className: r(t["multi-select-search"], {
147
+ [t.full]: X,
148
+ [t.disabled]: c
132
149
  }),
133
- onChange: $,
134
- ref: U,
135
- disabled: r,
136
- virtual: { options: A },
137
- children: /* @__PURE__ */ g(
150
+ onChange: ne,
151
+ ref: Q,
152
+ disabled: c,
153
+ virtual: { options: V },
154
+ children: /* @__PURE__ */ b(
138
155
  "div",
139
156
  {
140
- className: l(e.container, e[i], {
141
- [e["container-open"]]: b
157
+ className: r(t.container, t[i], {
158
+ [t["container-open"]]: k
142
159
  }),
143
160
  children: [
144
- _ && /* @__PURE__ */ g("div", { className: e["input-container"], children: [
145
- /* @__PURE__ */ n(
146
- H,
161
+ f && /* @__PURE__ */ b("div", { className: t["input-container"], children: [
162
+ /* @__PURE__ */ o(
163
+ K,
147
164
  {
148
- disabled: r,
165
+ disabled: c,
149
166
  style: { width: "100%" },
150
- onClick: T,
151
- children: /* @__PURE__ */ n(
152
- J,
167
+ onClick: B,
168
+ children: /* @__PURE__ */ o(
169
+ W,
153
170
  {
154
- as: G,
155
- label: x,
156
- size: F(i),
157
- className: l(e["multi-select-input"], {
158
- [e["multi-select-input-disabled"]]: _ && I
171
+ as: J,
172
+ label: T,
173
+ size: U(i),
174
+ className: r(t["multi-select-input"], {
175
+ [t["multi-select-input-disabled"]]: f && C
159
176
  }),
160
- onChange: L,
161
- value: f,
162
- disabled: r,
163
- variant: D,
164
- rightSlotClassName: e["right-slot"],
165
- requiredMarkClassName: e["required-mark"],
177
+ onChange: A,
178
+ value: q,
179
+ disabled: c,
180
+ variant: y,
181
+ rightSlotClassName: t["right-slot"],
182
+ requiredMarkClassName: t["required-mark"],
166
183
  "data-testid": "select-search-input",
167
- onFocus: se,
184
+ onFocus: re,
168
185
  rightAddon: {
169
186
  addonType: "icon",
170
- addonContent: re(b, i)
187
+ addonContent: ue(k, i)
171
188
  },
172
- autocomplete: O,
173
- ...z
189
+ autocomplete: z,
190
+ ...D
174
191
  }
175
192
  )
176
193
  }
177
194
  ),
178
- I && f && /* @__PURE__ */ n(
179
- ae,
195
+ C && q && /* @__PURE__ */ o(
196
+ pe,
180
197
  {
181
198
  tabIndex: -1,
182
- className: l(e.clear, {
183
- [e.disabled]: r
199
+ className: r(t.clear, {
200
+ [t.disabled]: c
184
201
  }),
185
- iconButtonClassName: e["icon-button"],
202
+ iconButtonClassName: t["icon-button"],
186
203
  isIconButton: !0,
187
204
  iconName: "Close16px",
188
205
  size: "m-s",
189
206
  clear: !0,
190
- disabled: r,
207
+ disabled: c,
191
208
  variant: "secondary-gray",
192
- onClick: ne,
209
+ onClick: le,
193
210
  "data-testid": "clear-button"
194
211
  }
195
212
  )
196
213
  ] }),
197
- !_ && /* @__PURE__ */ n(
198
- J,
214
+ !f && /* @__PURE__ */ o(
215
+ W,
199
216
  {
200
- as: G,
201
- label: x,
202
- size: F(i),
203
- className: e["multi-select-input"],
204
- rightSlotClassName: e["right-slot"],
205
- requiredMarkClassName: e["required-mark"],
206
- value: f,
207
- disabled: r,
208
- variant: D,
209
- withClearButton: I,
210
- onFocus: () => h(!0),
211
- onMouseDown: te,
212
- onChange: L,
213
- ref: p,
217
+ as: J,
218
+ label: T,
219
+ size: U(i),
220
+ className: t["multi-select-input"],
221
+ rightSlotClassName: t["right-slot"],
222
+ requiredMarkClassName: t["required-mark"],
223
+ value: q,
224
+ disabled: c,
225
+ variant: y,
226
+ withClearButton: C,
227
+ onFocus: () => {
228
+ h(!0), I(m);
229
+ },
230
+ onMouseDown: se,
231
+ onChange: A,
232
+ ref: _,
214
233
  rightAddon: {
215
234
  addonType: "react-node",
216
- addonContent: Q && /* @__PURE__ */ n(
217
- H,
235
+ addonContent: Y && /* @__PURE__ */ o(
236
+ K,
218
237
  {
219
- className: l(e.button, {
220
- [e.disabled]: r
238
+ className: r(t.button, {
239
+ [t.disabled]: c
221
240
  }),
222
- disabled: r,
223
- onMouseDown: T,
224
- children: /* @__PURE__ */ n(
225
- ce,
241
+ disabled: c,
242
+ onMouseDown: B,
243
+ children: /* @__PURE__ */ o(
244
+ de,
226
245
  {
227
- iconName: i == M.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
228
- className: l(e["selector-icon"], {
229
- [e["selector-icon-open"]]: b
246
+ iconName: i == O.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
247
+ className: r(t["selector-icon"], {
248
+ [t["selector-icon-open"]]: k
230
249
  })
231
250
  }
232
251
  )
@@ -234,70 +253,70 @@ import '../../assets/MultiSelectSearch.css';const fe = "_disabled_17kql_5", ke =
234
253
  )
235
254
  },
236
255
  "data-testid": "select-search-input",
237
- autocomplete: O,
238
- ...z
256
+ autocomplete: z,
257
+ ...D
239
258
  }
240
259
  ),
241
- b && /* @__PURE__ */ n(B, { children: m.length ? A.length ? /* @__PURE__ */ n(
242
- _e,
260
+ k && /* @__PURE__ */ o(j, { children: d.length ? V.length ? /* @__PURE__ */ o(
261
+ ke,
243
262
  {
244
- className: l(
245
- e.options,
246
- e[i],
247
- e[N]
263
+ className: r(
264
+ t.options,
265
+ t[i],
266
+ t[N]
248
267
  ),
249
268
  modal: !1,
250
269
  static: !0,
251
- children: ({ option: t }) => /* @__PURE__ */ n(
252
- he,
270
+ children: ({ option: e }) => /* @__PURE__ */ o(
271
+ qe,
253
272
  {
254
- value: t,
255
- className: ({ focus: o }) => l(
256
- e.option,
257
- X,
258
- i && e[i],
273
+ value: e,
274
+ className: ({ focus: n }) => r(
275
+ t.option,
276
+ Z,
277
+ i && t[i],
259
278
  {
260
- [e["option-active"]]: o
279
+ [t["option-active"]]: n
261
280
  }
262
281
  ),
263
- children: /* @__PURE__ */ g(B, { children: [
264
- /* @__PURE__ */ g("div", { className: e["option-inner"], children: [
265
- t.name,
266
- t.bottom && /* @__PURE__ */ n("div", { children: t.bottom })
282
+ children: /* @__PURE__ */ b(j, { children: [
283
+ /* @__PURE__ */ b("div", { className: t["option-inner"], children: [
284
+ e.name,
285
+ e.bottom && /* @__PURE__ */ o("div", { children: e.bottom })
267
286
  ] }),
268
- /* @__PURE__ */ n(
269
- ue,
287
+ /* @__PURE__ */ o(
288
+ me,
270
289
  {
271
290
  isInteractive: !1,
272
- checked: u.some(
273
- (o) => o.id === t.id
291
+ checked: l.some(
292
+ (n) => n.id === e.id
274
293
  )
275
294
  }
276
295
  )
277
296
  ] })
278
297
  },
279
- t.id
298
+ e.id
280
299
  )
281
300
  }
282
- ) : /* @__PURE__ */ n(
301
+ ) : /* @__PURE__ */ o(
283
302
  "div",
284
303
  {
285
- className: l(
286
- e.options,
287
- e[i],
288
- e["no-options"],
289
- e[N]
304
+ className: r(
305
+ t.options,
306
+ t[i],
307
+ t["no-options"],
308
+ t[N]
290
309
  ),
291
310
  children: "Ничего не найдено"
292
311
  }
293
- ) : /* @__PURE__ */ n(
312
+ ) : /* @__PURE__ */ o(
294
313
  "div",
295
314
  {
296
- className: l(
297
- e.options,
298
- e[i],
299
- e["no-options"],
300
- e[N]
315
+ className: r(
316
+ t.options,
317
+ t[i],
318
+ t["no-options"],
319
+ t[N]
301
320
  ),
302
321
  children: "Нет данных"
303
322
  }
@@ -307,21 +326,21 @@ import '../../assets/MultiSelectSearch.css';const fe = "_disabled_17kql_5", ke =
307
326
  )
308
327
  }
309
328
  ),
310
- Y && u.length > 0 && /* @__PURE__ */ n("div", { className: e["chip-container"], children: u.map((t) => /* @__PURE__ */ n(
311
- de,
329
+ ee && l.length > 0 && /* @__PURE__ */ o("div", { className: t["chip-container"], children: l.map((e) => /* @__PURE__ */ o(
330
+ _e,
312
331
  {
313
- size: i === M.L ? "s" : "xs",
314
- variant: Z,
315
- className: e["chip-root"],
332
+ size: i === O.L ? "s" : "xs",
333
+ variant: te,
334
+ className: t["chip-root"],
316
335
  withAction: !0,
317
- onClose: () => ee(t),
318
- children: /* @__PURE__ */ n("span", { className: e.chip, children: t.name })
336
+ onClose: () => oe(e),
337
+ children: /* @__PURE__ */ o("span", { className: t.chip, children: e.name })
319
338
  },
320
- t.id
339
+ e.id
321
340
  )) })
322
341
  ] });
323
342
  }
324
343
  );
325
344
  export {
326
- Fe as MultiSelectSearch
345
+ Ue as MultiSelectSearch
327
346
  };
package/dist/components/MultiSelectSearch/types.d.ts CHANGED
@@ -59,4 +59,8 @@ export type TMultiSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'var
59
59
  disableInput?: boolean;
60
60
  /** Управляет поведением автозаполнения браузера */
61
61
  autocomplete?: 'on' | 'off';
62
+ /**
63
+ * Уникальный идентификатор мультиселекта
64
+ */
65
+ id?: string;
62
66
  };
package/dist/components/MultiSelectSearch/utils.d.ts CHANGED
@@ -6,3 +6,5 @@ export declare const mapSizeToInputSize: (size: EMultiSelectSearchSize) => EInpu
6
6
  export declare const getDropdownArrowIcon: (isOpen: boolean, size: EMultiSelectSearchSize) => "DropdownArrowBottom16px" | "DropdownArrowUp16px" | "DropdownArrowUp24px" | "DropdownArrowDown24px";
7
7
  export declare const getInitialInputValue: (value: TMultiSelectOption[] | undefined | null, displayValue: string) => string;
8
8
  export declare const joinSelectedItems: (items: TMultiSelectOption[], displayValue: string) => string;
9
+ export declare const MULTISELECT_OPEN_EVENT = "multiselectOpen";
10
+ export declare const dispatchMultiselectOpen: (id: string) => void;
package/dist/components/MultiSelectSearch/utils.js CHANGED
@@ -1,19 +1,23 @@
1
- import { EMultiSelectSearchSize as t } from "./constants.js";
1
+ import { EMultiSelectSearchSize as o } from "./constants.js";
2
2
  import "../../Input-BYrIS5GU.js";
3
3
  import { EInputSize as e } from "../Input/constants.js";
4
- const w = (r) => {
5
- switch (r) {
6
- case t.M:
4
+ const w = (t) => {
5
+ switch (t) {
6
+ case o.M:
7
7
  return e.M;
8
- case t.L:
8
+ case o.L:
9
9
  return e.L;
10
10
  default:
11
11
  return e.M;
12
12
  }
13
- }, c = (r, o) => r ? o === t.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : o === t.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", m = (r, o) => r && r.length > 0 ? r.map((n) => n[o]).join(", ") : "", a = (r, o) => r.map((n) => n[o]).join(", ");
13
+ }, s = (t, r) => t ? r === o.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : r === o.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", m = (t, r) => t && t.length > 0 ? t.map((n) => n[r]).join(", ") : "", d = (t, r) => t.map((n) => n[r]).join(", "), p = "multiselectOpen", a = (t) => {
14
+ window.dispatchEvent(new CustomEvent(p, { detail: t }));
15
+ };
14
16
  export {
15
- c as getDropdownArrowIcon,
17
+ p as MULTISELECT_OPEN_EVENT,
18
+ a as dispatchMultiselectOpen,
19
+ s as getDropdownArrowIcon,
16
20
  m as getInitialInputValue,
17
- a as joinSelectedItems,
21
+ d as joinSelectedItems,
18
22
  w as mapSizeToInputSize
19
23
  };
package/dist/components/SelectSearch/SelectSearch.d.ts CHANGED
@@ -18,4 +18,5 @@ export declare const SelectSearch: import('react').ForwardRefExoticComponent<Pic
18
18
  searchProps?: Pick<import('../Input').TInputProps, "numbersOnly" | "maxLength" | "required">;
19
19
  disableInput?: boolean;
20
20
  autocomplete?: "on" | "off";
21
+ immediate?: boolean;
21
22
  } & import('react').RefAttributes<HTMLElement>>;
package/dist/components/SelectSearch/SelectSearch.js CHANGED
@@ -1,39 +1,39 @@
1
- import { jsx as s, jsxs as _, Fragment as z } from "react/jsx-runtime";
1
+ import { jsx as s, jsxs as u, Fragment as z } from "react/jsx-runtime";
2
2
  import { c as i } from "../../index-DIxK0V-G.js";
3
- import { forwardRef as K, useState as D, useMemo as U, useCallback as R, useEffect as $ } from "react";
3
+ import { forwardRef as U, useState as D, useMemo as R, useCallback as $, useEffect as J } from "react";
4
4
  import { ESelectSearchSize as v } from "./constants.js";
5
- import { mapSizeToInputSize as j, getDropdownArrowIcon as J } from "./utils.js";
5
+ import { mapSizeToInputSize as j, getDropdownArrowIcon as Q } from "./utils.js";
6
6
  import { Icon as q } from "../../icons/Icon.js";
7
- import { Button as Q } from "../Button/Button.js";
7
+ import { Button as W } from "../Button/Button.js";
8
8
  import { I as A } from "../../Input-BYrIS5GU.js";
9
- import { EInputVariant as W } from "../Input/constants.js";
10
- import { H as X, U as O, G as B, K as Y, j as Z } from "../../combobox-BpYucpxz.js";
11
- import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_container_rphak_9", oe = "_full_rphak_22", ae = "_button_rphak_34", ne = "_options_rphak_48", se = "_top_rphak_59", re = "_bottom_rphak_64", ie = "_m_rphak_91", le = "_l_rphak_106", ce = "_option_rphak_48", pe = "_clear_rphak_160", e = {
9
+ import { EInputVariant as X } from "../Input/constants.js";
10
+ import { H as Y, U as O, G as B, K as Z, j as ee } from "../../combobox-BpYucpxz.js";
11
+ import '../../assets/SelectSearch.css';const te = "_disabled_rphak_5", oe = "_container_rphak_9", ae = "_full_rphak_22", ne = "_button_rphak_34", se = "_options_rphak_48", re = "_top_rphak_59", ie = "_bottom_rphak_64", le = "_m_rphak_91", ce = "_l_rphak_106", pe = "_option_rphak_48", de = "_clear_rphak_160", e = {
12
12
  "select-search": "_select-search_rphak_2",
13
- disabled: ee,
14
- container: te,
13
+ disabled: te,
14
+ container: oe,
15
15
  "container-open": "_container-open_rphak_18",
16
- full: oe,
16
+ full: ae,
17
17
  "selected-icon": "_selected-icon_rphak_26",
18
18
  "selector-icon-open": "_selector-icon-open_rphak_30",
19
- button: ae,
19
+ button: ne,
20
20
  "selector-icon": "_selector-icon_rphak_30",
21
- options: ne,
22
- top: se,
23
- bottom: re,
21
+ options: se,
22
+ top: re,
23
+ bottom: ie,
24
24
  "no-options": "_no-options_rphak_85",
25
- m: ie,
26
- l: le,
25
+ m: le,
26
+ l: ce,
27
27
  "select-input": "_select-input_rphak_121",
28
28
  "select-input-disabled": "_select-input-disabled_rphak_124",
29
- option: ce,
29
+ option: pe,
30
30
  "option-active": "_option-active_rphak_140",
31
31
  "option-inner": "_option-inner_rphak_143",
32
32
  "right-slot": "_right-slot_rphak_150",
33
33
  "required-mark": "_required-mark_rphak_155",
34
- clear: pe,
34
+ clear: de,
35
35
  "icon-button": "_icon-button_rphak_169"
36
- }, ge = K(
36
+ }, we = U(
37
37
  (M, E) => {
38
38
  const {
39
39
  placeholder: g,
@@ -46,33 +46,34 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
46
46
  classNameOption: F,
47
47
  displayValue: G = "name",
48
48
  filterOnSearch: w = !0,
49
- onSearch: m,
50
- variant: C = W.DefaultGray,
51
- menuPlacement: b = "bottom",
49
+ onSearch: _,
50
+ variant: C = X.DefaultGray,
51
+ menuPlacement: f = "bottom",
52
52
  disabled: l = !1,
53
53
  searchProps: I,
54
- withClearButton: f = !1,
54
+ withClearButton: b = !1,
55
55
  disableInput: c = !1,
56
- autocomplete: S = "on"
57
- } = M, k = String((a == null ? void 0 : a[G]) || ""), [p, u] = D(k), [N, h] = D(a), y = U(() => !w || a && (a.id || a.name) ? d : p.trim().toLowerCase() ? d.filter(
56
+ autocomplete: S = "on",
57
+ immediate: P = !1
58
+ } = M, k = String((a == null ? void 0 : a[G]) || ""), [p, m] = D(k), [N, h] = D(a), y = R(() => !w || a && (a.id || a.name) ? d : p.trim().toLowerCase() ? d.filter(
58
59
  (o) => o.name.toLowerCase().includes(p.toLowerCase())
59
- ) : d, [p, d, a, w]), P = (o) => {
60
- o ? (u(o.name), h(o), n == null || n(o)) : (u(""), h(null), n == null || n({ id: "", name: "" }));
61
- }, x = R(
60
+ ) : d, [p, d, a, w]), T = (o) => {
61
+ o ? (m(o.name), h(o), n == null || n(o)) : (m(""), h(null), n == null || n({ id: "", name: "" }));
62
+ }, x = $(
62
63
  (o) => {
63
64
  if (c) return;
64
65
  const t = o.target.value;
65
- u(t), m == null || m(t), !t && a && (n == null || n({ id: "", name: "" }));
66
+ m(t), _ == null || _(t), !t && a && (n == null || n({ id: "", name: "" }));
66
67
  },
67
- [c, n, m, a]
68
- ), T = () => {
69
- u(""), h(null), n == null || n({ id: "", name: "" });
68
+ [c, n, _, a]
69
+ ), H = () => {
70
+ m(""), h(null), n == null || n({ id: "", name: "" });
70
71
  };
71
- return $(() => {
72
+ return J(() => {
72
73
  const o = !a || typeof a == "object" && !Object.keys(a).length;
73
- u(o ? "" : k), h(o ? null : a);
74
+ m(o ? "" : k), h(o ? null : a);
74
75
  }, [a, k]), /* @__PURE__ */ s(
75
- X,
76
+ Y,
76
77
  {
77
78
  as: "div",
78
79
  value: N,
@@ -80,19 +81,20 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
80
81
  [e.full]: L,
81
82
  [e.disabled]: l
82
83
  }),
83
- onChange: P,
84
+ onChange: T,
84
85
  ref: E,
85
86
  disabled: l,
86
87
  virtual: { options: y },
87
- children: ({ open: o }) => /* @__PURE__ */ _(z, { children: [
88
- /* @__PURE__ */ _(
88
+ immediate: P,
89
+ children: ({ open: o }) => /* @__PURE__ */ u(z, { children: [
90
+ /* @__PURE__ */ u(
89
91
  "div",
90
92
  {
91
93
  className: i(e.container, e[r], {
92
94
  [e["container-open"]]: o
93
95
  }),
94
96
  children: [
95
- c && /* @__PURE__ */ _("div", { style: { position: "relative", width: "100%" }, children: [
97
+ c && /* @__PURE__ */ u("div", { style: { position: "relative", width: "100%" }, children: [
96
98
  /* @__PURE__ */ s(O, { disabled: l, style: { width: "100%" }, children: /* @__PURE__ */ s(
97
99
  B,
98
100
  {
@@ -100,7 +102,7 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
100
102
  label: g,
101
103
  size: j(r),
102
104
  className: i(e["select-input"], {
103
- [e["select-input-disabled"]]: c && f
105
+ [e["select-input-disabled"]]: c && b
104
106
  }),
105
107
  onChange: x,
106
108
  value: p,
@@ -114,14 +116,14 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
114
116
  },
115
117
  rightAddon: {
116
118
  addonType: "icon",
117
- addonContent: J(o, r)
119
+ addonContent: Q(o, r)
118
120
  },
119
121
  autocomplete: S,
120
122
  ...I
121
123
  }
122
124
  ) }),
123
- f && p && /* @__PURE__ */ s(
124
- Q,
125
+ b && p && /* @__PURE__ */ s(
126
+ W,
125
127
  {
126
128
  tabIndex: -1,
127
129
  className: i(e.clear, {
@@ -135,7 +137,7 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
135
137
  disabled: l,
136
138
  variant: "secondary-gray",
137
139
  onClick: (t) => {
138
- t.stopPropagation(), T();
140
+ t.stopPropagation(), H();
139
141
  },
140
142
  "data-testid": "clear-button"
141
143
  }
@@ -152,7 +154,7 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
152
154
  value: p,
153
155
  disabled: l,
154
156
  variant: C,
155
- withClearButton: f,
157
+ withClearButton: b,
156
158
  rightSlotClassName: e["right-slot"],
157
159
  requiredMarkClassName: e["required-mark"],
158
160
  "data-testid": "select-search-input",
@@ -188,29 +190,29 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
188
190
  }
189
191
  ),
190
192
  o && /* @__PURE__ */ s(z, { children: d.length ? y.length ? /* @__PURE__ */ s(
191
- Y,
193
+ Z,
192
194
  {
193
195
  "data-testid": "select-search-options",
194
196
  className: i(
195
197
  e.options,
196
198
  e[r],
197
- e[b]
199
+ e[f]
198
200
  ),
199
- children: ({ option: t }) => /* @__PURE__ */ _(
200
- Z,
201
+ children: ({ option: t }) => /* @__PURE__ */ u(
202
+ ee,
201
203
  {
202
204
  value: t,
203
- className: ({ focus: H }) => i(
205
+ className: ({ focus: K }) => i(
204
206
  e.option,
205
207
  F,
206
208
  r && e[r],
207
209
  {
208
- [e["option-active"]]: H
210
+ [e["option-active"]]: K
209
211
  }
210
212
  ),
211
213
  "data-testid": `select-search-option-${t.id}`,
212
214
  children: [
213
- /* @__PURE__ */ _("div", { className: e["option-inner"], children: [
215
+ /* @__PURE__ */ u("div", { className: e["option-inner"], children: [
214
216
  t.name,
215
217
  t.bottom && /* @__PURE__ */ s("div", { children: t.bottom })
216
218
  ] }),
@@ -233,7 +235,7 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
233
235
  e.options,
234
236
  e[r],
235
237
  e["no-options"],
236
- e[b]
238
+ e[f]
237
239
  ),
238
240
  children: "Ничего не найдено"
239
241
  }
@@ -244,7 +246,7 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
244
246
  e.options,
245
247
  e[r],
246
248
  e["no-options"],
247
- e[b]
249
+ e[f]
248
250
  ),
249
251
  children: "Нет данных"
250
252
  }
@@ -255,5 +257,5 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
255
257
  }
256
258
  );
257
259
  export {
258
- ge as SelectSearch
260
+ we as SelectSearch
259
261
  };
package/dist/components/SelectSearch/types.d.ts CHANGED
@@ -54,4 +54,6 @@ export type TSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'variant'
54
54
  disableInput?: boolean;
55
55
  /** Управляет поведением автозаполнения браузера */
56
56
  autocomplete?: 'on' | 'off';
57
+ /** Показывать список при фокусе или нет */
58
+ immediate?: boolean;
57
59
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mimir-ui-kit",
3
3
  "private": false,
4
- "version": "1.37.10",
4
+ "version": "1.37.12",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {