mimir-ui-kit 1.38.19 → 1.38.21

Sign up to get free protection for your applications and to get access to all the features.
Files changed (2) hide show
  1. package/dist/components/MultiSelectSearch/MultiSelectSearch.js +148 -146
  2. package/package.json +1 -1
package/dist/components/MultiSelectSearch/MultiSelectSearch.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsxs as E, jsx as n, Fragment as Q } from "react/jsx-runtime";
2
- import { c as r } from "../../index-DIxK0V-G.js";
3
- import { forwardRef as Ne, useId as Se, useRef as X, useState as w, useEffect as T, useMemo as Ce, useCallback as Ie } from "react";
4
- import { EMultiSelectSearchSize as P } from "./constants.js";
2
+ import { c as l } from "../../index-DIxK0V-G.js";
3
+ import { forwardRef as Ie, useId as Ne, useRef as X, useState as w, useEffect as T, useMemo as Se, useCallback as Ce } from "react";
4
+ import { EMultiSelectSearchSize as D } from "./constants.js";
5
5
  import { getInitialInputValue as Y, shouldShowMenuOnTop as Me, MULTISELECT_OPEN_EVENT as Z, mapSizeToInputSize as ee, getDropdownArrowIcon as Ee, dispatchMultiselectOpen as L, joinSelectedItems as te } from "./utils.js";
6
6
  import { Icon as Le } from "../../icons/Icon.js";
7
7
  import { Button as Te } from "../Button/Button.js";
@@ -9,142 +9,144 @@ import { CheckboxMimir as ke } from "../CheckboxMimir/CheckboxMimir.js";
9
9
  import { Chip as ye } from "../Chip/Chip.js";
10
10
  import { I as oe } from "../../Input-BYrIS5GU.js";
11
11
  import { EInputVariant as ze } from "../Input/constants.js";
12
- import { H as Ae, U as ie, G as ne, K as Ve, W as xe } from "../../combobox-CVtJDVoZ.js";
13
- import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe = "_container_io0c8_9", qe = "_full_io0c8_27", Re = "_button_io0c8_39", Be = "_options_io0c8_53", Fe = "_visible_io0c8_66", je = "_top_io0c8_69", Ge = "_bottom_io0c8_74", Ue = "_m_io0c8_2", We = "_l_io0c8_116", He = "_focused_io0c8_134", Je = "_option_io0c8_53", Ke = "_chip_io0c8_163", $e = "_clear_io0c8_188", t = {
12
+ import { H as Ae, U as ne, G as ie, K as Oe, W as Ve } from "../../combobox-CVtJDVoZ.js";
13
+ import '../../assets/MultiSelectSearch.css';const xe = "_disabled_io0c8_5", De = "_container_io0c8_9", Pe = "_full_io0c8_27", qe = "_button_io0c8_39", Re = "_options_io0c8_53", Be = "_visible_io0c8_66", Fe = "_top_io0c8_69", je = "_bottom_io0c8_74", Ge = "_m_io0c8_2", Ue = "_l_io0c8_116", We = "_focused_io0c8_134", He = "_option_io0c8_53", Je = "_chip_io0c8_163", Ke = "_clear_io0c8_188", t = {
14
14
  "multi-select-search": "_multi-select-search_io0c8_2",
15
- disabled: De,
16
- container: Pe,
15
+ disabled: xe,
16
+ container: De,
17
17
  "container-open": "_container-open_io0c8_18",
18
18
  "input-container": "_input-container_io0c8_22",
19
- full: qe,
19
+ full: Pe,
20
20
  "selected-icon": "_selected-icon_io0c8_31",
21
21
  "selector-icon-open": "_selector-icon-open_io0c8_35",
22
- button: Re,
22
+ button: qe,
23
23
  "selector-icon": "_selector-icon_io0c8_35",
24
- options: Be,
25
- visible: Fe,
26
- top: je,
27
- bottom: Ge,
24
+ options: Re,
25
+ visible: Be,
26
+ top: Fe,
27
+ bottom: je,
28
28
  "no-options": "_no-options_io0c8_95",
29
- m: Ue,
30
- l: We,
29
+ m: Ge,
30
+ l: Ue,
31
31
  "multi-select-input-disabled": "_multi-select-input-disabled_io0c8_131",
32
32
  "multi-select-input": "_multi-select-input_io0c8_131",
33
- focused: He,
34
- option: Je,
33
+ focused: We,
34
+ option: He,
35
35
  "option-active": "_option-active_io0c8_153",
36
36
  "option-inner": "_option-inner_io0c8_156",
37
- chip: Ke,
37
+ chip: Je,
38
38
  "chip-container": "_chip-container_io0c8_168",
39
39
  "chip-root": "_chip-root_io0c8_174",
40
40
  "right-slot": "_right-slot_io0c8_178",
41
41
  "required-mark": "_required-mark_io0c8_183",
42
- clear: $e,
42
+ clear: Ke,
43
43
  "icon-button": "_icon-button_io0c8_197"
44
- }, lt = Ne(
44
+ }, lt = Ie(
45
45
  (se, ce) => {
46
46
  const {
47
- placeholder: q,
48
- size: s = P.L,
49
- value: m,
50
- onChange: c,
47
+ placeholder: P,
48
+ size: i = D.L,
49
+ value: p,
50
+ onChange: s,
51
51
  full: le,
52
52
  showArrow: re = !0,
53
- items: f = [],
53
+ items: h = [],
54
54
  classNameOption: ae,
55
- displayValue: v = "name",
56
- filterOnSearch: R = !0,
55
+ displayValue: f = "name",
56
+ filterOnSearch: q = !0,
57
57
  onSearch: k,
58
- variant: B = ze.DefaultGray,
58
+ variant: R = ze.DefaultGray,
59
59
  menuPlacement: g = "bottom",
60
- disabled: a = !1,
61
- searchProps: F,
60
+ disabled: r = !1,
61
+ searchProps: B,
62
62
  withClearButton: y = !1,
63
63
  withChip: ue = !1,
64
64
  chipVariant: de = "sapphire",
65
- disableInput: N = !1,
66
- autocomplete: j = "on",
67
- id: me,
65
+ disableInput: I = !1,
66
+ autocomplete: F = "on",
67
+ id: pe,
68
68
  autoPlacement: z = !1,
69
- onIsOpen: i
70
- } = se, pe = Se(), p = me || `multiselect-${pe}`, S = X(null), b = X(null), [_, h] = w(!1), [C, I] = w(
71
- () => Y(m, v)
72
- ), [l, M] = w(
73
- m || []
74
- ), [A, G] = w(g), [V, U] = w(!1), [_e, W] = w(!1);
69
+ onIsOpen: v
70
+ } = se, me = Ne(), m = pe || `multiselect-${me}`, N = X(null), b = X(null), [a, _] = w(!1), [S, C] = w(
71
+ () => Y(p, f)
72
+ ), [c, M] = w(
73
+ p || []
74
+ ), [A, j] = w(g), [O, G] = w(!1), [_e, U] = w(!1);
75
75
  T(() => {
76
- m && (M(m), JSON.stringify(m) !== JSON.stringify(l) && I(Y(m, v)));
77
- }, [m, v, l]);
78
- const H = Ce(() => {
76
+ p && (M(p), JSON.stringify(p) !== JSON.stringify(c) && C(Y(p, f)));
77
+ }, [p, f, c]);
78
+ const W = Se(() => {
79
79
  var o;
80
- if (!R) return f;
81
- const e = ((o = C.split(",").pop()) == null ? void 0 : o.trim().toLowerCase()) ?? "";
82
- return l.length > 0 && l[l.length - 1].name.toLowerCase() === e ? f : f.filter(
80
+ if (!q) return h;
81
+ const e = ((o = S.split(",").pop()) == null ? void 0 : o.trim().toLowerCase()) ?? "";
82
+ return c.length > 0 && c[c.length - 1].name.toLowerCase() === e ? h : h.filter(
83
83
  (u) => u.name.toLowerCase().includes(e)
84
84
  );
85
- }, [R, f, C, l]), he = (e) => {
86
- M(e), c == null || c(e);
87
- const o = te(e, v);
88
- I(o), h(!0), i == null || i(!0), L(p), setTimeout(() => {
85
+ }, [q, h, S, c]), he = (e) => {
86
+ M(e), s == null || s(e);
87
+ const o = te(e, f);
88
+ C(o), _(!0), L(m), setTimeout(() => {
89
89
  if (b.current) {
90
90
  b.current.focus(), b.current.scrollLeft = b.current.scrollWidth;
91
91
  const u = o.length;
92
92
  b.current.setSelectionRange(u, u);
93
93
  }
94
94
  }, 0);
95
- }, J = (e) => {
96
- var O;
97
- if (N) return;
95
+ }, H = (e) => {
96
+ var $;
97
+ if (I) return;
98
98
  const o = e.target.value;
99
- I(o), k == null || k(o);
100
- const u = o.split(",").map((D) => D.trim()).filter(Boolean), $ = f.filter(
101
- (D) => u.includes(D[v])
99
+ C(o), k == null || k(o);
100
+ const u = o.split(",").map((x) => x.trim()).filter(Boolean), K = h.filter(
101
+ (x) => u.includes(x[f])
102
102
  );
103
- M($), c == null || c($), h(!0), i == null || i(!0), L(p);
104
- const x = (O = S.current) == null ? void 0 : O.querySelector(
103
+ M(K), s == null || s(K), _(!0), L(m);
104
+ const V = ($ = N.current) == null ? void 0 : $.querySelector(
105
105
  `.${t.options}`
106
106
  );
107
- x && typeof x.scrollTo == "function" && x.scrollTo({ top: 0, behavior: "smooth" });
107
+ V && typeof V.scrollTo == "function" && V.scrollTo({ top: 0, behavior: "smooth" });
108
108
  }, fe = (e) => {
109
- const o = l.filter(
109
+ const o = c.filter(
110
110
  (u) => u.id !== e.id
111
111
  );
112
- M(o), c == null || c(o), I(te(o, v));
113
- }, d = Ie(() => {
112
+ M(o), s == null || s(o), C(te(o, f));
113
+ }, d = Ce(() => {
114
114
  if (!z) {
115
- G(g);
115
+ j(g);
116
116
  return;
117
117
  }
118
- const e = Me(S, s);
119
- G(e ? "top" : g);
120
- }, [z, g, s]), K = () => {
121
- const e = !_;
122
- e && (d(), L(p)), h(e), i == null || i(e);
118
+ const e = Me(N, i);
119
+ j(e ? "top" : g);
120
+ }, [z, g, i]), J = () => {
121
+ const e = !a;
122
+ e && (d(), L(m)), _(e), v == null || v(e);
123
123
  }, ve = (e) => {
124
124
  e.preventDefault(), e.currentTarget.focus();
125
125
  const o = e.currentTarget.value.length;
126
126
  e.currentTarget.setSelectionRange(o, o);
127
127
  }, be = () => {
128
- I(""), M([]), c == null || c([]);
128
+ C(""), M([]), s == null || s([]);
129
129
  }, we = (e) => {
130
130
  e.stopPropagation(), be();
131
131
  }, ge = (e) => {
132
- if (N) {
132
+ if (I) {
133
133
  e.target.blur();
134
134
  return;
135
135
  }
136
- d(), h(!0), i == null || i(!0), L(p);
136
+ d(), _(!0), L(m);
137
137
  };
138
138
  return T(() => {
139
+ if (a) {
140
+ const e = (o) => {
141
+ N.current && !N.current.contains(o.target) && !o.defaultPrevented && (_(!1), v == null || v(!1));
142
+ };
143
+ return document.addEventListener("mousedown", e), () => {
144
+ document.removeEventListener("mousedown", e);
145
+ };
146
+ }
147
+ }, [a]), T(() => {
139
148
  const e = (o) => {
140
- S.current && !S.current.contains(o.target) && !o.defaultPrevented && (h(!1), i == null || i(!1));
141
- };
142
- return document.addEventListener("mousedown", e), () => {
143
- document.removeEventListener("mousedown", e);
144
- };
145
- }, []), T(() => {
146
- const e = (o) => {
147
- o.detail !== p && (h(!1), i == null || i(!1));
149
+ o.detail !== m && _(!1);
148
150
  };
149
151
  return window.addEventListener(
150
152
  Z,
@@ -155,127 +157,127 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
155
157
  e
156
158
  );
157
159
  };
158
- }, [p]), T(() => {
159
- if (_) {
160
+ }, [m]), T(() => {
161
+ if (a) {
160
162
  d(), window.addEventListener("scroll", d), window.addEventListener("resize", d);
161
163
  const e = requestAnimationFrame(() => {
162
- W(!0), U(!0);
164
+ U(!0), G(!0);
163
165
  });
164
166
  return () => {
165
167
  window.removeEventListener("scroll", d), window.removeEventListener("resize", d), cancelAnimationFrame(e);
166
168
  };
167
169
  } else
168
- U(!1), W(!1);
169
- }, [_, g, z, s, d]), /* @__PURE__ */ E("div", { ref: S, children: [
170
+ G(!1), U(!1);
171
+ }, [a, g, z, i, d]), /* @__PURE__ */ E("div", { ref: N, children: [
170
172
  /* @__PURE__ */ n(
171
173
  Ae,
172
174
  {
173
175
  multiple: !0,
174
176
  as: "div",
175
- value: l,
176
- className: r(t["multi-select-search"], {
177
+ value: c,
178
+ className: l(t["multi-select-search"], {
177
179
  [t.full]: le,
178
- [t.disabled]: a
180
+ [t.disabled]: r
179
181
  }),
180
182
  onChange: he,
181
183
  ref: ce,
182
- disabled: a,
183
- virtual: { options: H },
184
+ disabled: r,
185
+ virtual: { options: W },
184
186
  children: /* @__PURE__ */ E(
185
187
  "div",
186
188
  {
187
- className: r(t.container, t[s], {
188
- [t["container-open"]]: _
189
+ className: l(t.container, t[i], {
190
+ [t["container-open"]]: a
189
191
  }),
190
192
  children: [
191
- N && /* @__PURE__ */ E("div", { className: t["input-container"], children: [
193
+ I && /* @__PURE__ */ E("div", { className: t["input-container"], children: [
192
194
  /* @__PURE__ */ n(
193
- ie,
195
+ ne,
194
196
  {
195
- disabled: a,
197
+ disabled: r,
196
198
  style: { width: "100%" },
197
- onClick: K,
199
+ onClick: J,
198
200
  children: /* @__PURE__ */ n(
199
- ne,
201
+ ie,
200
202
  {
201
203
  as: oe,
202
- label: q,
203
- size: ee(s),
204
- className: r(t["multi-select-input"], {
205
- [t["multi-select-input-disabled"]]: N && y
204
+ label: P,
205
+ size: ee(i),
206
+ className: l(t["multi-select-input"], {
207
+ [t["multi-select-input-disabled"]]: I && y
206
208
  }),
207
- onChange: J,
208
- value: C,
209
- disabled: a,
210
- variant: B,
209
+ onChange: H,
210
+ value: S,
211
+ disabled: r,
212
+ variant: R,
211
213
  rightSlotClassName: t["right-slot"],
212
214
  requiredMarkClassName: t["required-mark"],
213
215
  "data-testid": "select-search-input",
214
216
  onFocus: ge,
215
217
  rightAddon: {
216
218
  addonType: "icon",
217
- addonContent: Ee(_, s)
219
+ addonContent: Ee(a, i)
218
220
  },
219
- autocomplete: j,
220
- ...F
221
+ autocomplete: F,
222
+ ...B
221
223
  }
222
224
  )
223
225
  }
224
226
  ),
225
- y && C && /* @__PURE__ */ n(
227
+ y && S && /* @__PURE__ */ n(
226
228
  Te,
227
229
  {
228
230
  tabIndex: -1,
229
- className: r(t.clear, {
230
- [t.disabled]: a
231
+ className: l(t.clear, {
232
+ [t.disabled]: r
231
233
  }),
232
234
  iconButtonClassName: t["icon-button"],
233
235
  isIconButton: !0,
234
236
  iconName: "Close16px",
235
237
  size: "m-s",
236
238
  clear: !0,
237
- disabled: a,
239
+ disabled: r,
238
240
  variant: "secondary-gray",
239
241
  onClick: we,
240
242
  "data-testid": "clear-button"
241
243
  }
242
244
  )
243
245
  ] }),
244
- !N && /* @__PURE__ */ n(
245
- ne,
246
+ !I && /* @__PURE__ */ n(
247
+ ie,
246
248
  {
247
249
  as: oe,
248
- label: q,
249
- size: ee(s),
250
+ label: P,
251
+ size: ee(i),
250
252
  className: t["multi-select-input"],
251
253
  rightSlotClassName: t["right-slot"],
252
254
  requiredMarkClassName: t["required-mark"],
253
- value: C,
254
- disabled: a,
255
- variant: B,
255
+ value: S,
256
+ disabled: r,
257
+ variant: R,
256
258
  withClearButton: y,
257
259
  onFocus: () => {
258
- h(!0), i == null || i(!0), L(p);
260
+ _(!0), L(m);
259
261
  },
260
262
  onMouseDown: ve,
261
- onChange: J,
263
+ onChange: H,
262
264
  ref: b,
263
265
  rightAddon: {
264
266
  addonType: "react-node",
265
267
  addonContent: re && /* @__PURE__ */ n(
266
- ie,
268
+ ne,
267
269
  {
268
- className: r(t.button, {
269
- [t.disabled]: a
270
+ className: l(t.button, {
271
+ [t.disabled]: r
270
272
  }),
271
- disabled: a,
272
- onMouseDown: K,
273
+ disabled: r,
274
+ onMouseDown: J,
273
275
  children: /* @__PURE__ */ n(
274
276
  Le,
275
277
  {
276
- iconName: s == P.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
277
- className: r(t["selector-icon"], {
278
- [t["selector-icon-open"]]: _
278
+ iconName: i == D.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
279
+ className: l(t["selector-icon"], {
280
+ [t["selector-icon-open"]]: a
279
281
  })
280
282
  }
281
283
  )
@@ -283,29 +285,29 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
283
285
  )
284
286
  },
285
287
  "data-testid": "select-search-input",
286
- autocomplete: j,
287
- ...F
288
+ autocomplete: F,
289
+ ...B
288
290
  }
289
291
  ),
290
- _ && _e && /* @__PURE__ */ n(Q, { children: f.length ? H.length ? /* @__PURE__ */ n(
291
- Ve,
292
+ a && _e && /* @__PURE__ */ n(Q, { children: h.length ? W.length ? /* @__PURE__ */ n(
293
+ Oe,
292
294
  {
293
- className: r(
295
+ className: l(
294
296
  t.options,
295
- t[s],
297
+ t[i],
296
298
  t[A],
297
- { [t.visible]: V }
299
+ { [t.visible]: O }
298
300
  ),
299
301
  modal: !1,
300
302
  static: !0,
301
303
  children: ({ option: e }) => /* @__PURE__ */ n(
302
- xe,
304
+ Ve,
303
305
  {
304
306
  value: e,
305
- className: ({ focus: o }) => r(
307
+ className: ({ focus: o }) => l(
306
308
  t.option,
307
309
  ae,
308
- s && t[s],
310
+ i && t[i],
309
311
  {
310
312
  [t["option-active"]]: o
311
313
  }
@@ -319,7 +321,7 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
319
321
  ke,
320
322
  {
321
323
  isInteractive: !1,
322
- checked: l.some(
324
+ checked: c.some(
323
325
  (o) => o.id === e.id
324
326
  )
325
327
  }
@@ -332,24 +334,24 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
332
334
  ) : /* @__PURE__ */ n(
333
335
  "div",
334
336
  {
335
- className: r(
337
+ className: l(
336
338
  t.options,
337
- t[s],
339
+ t[i],
338
340
  t["no-options"],
339
341
  t[A],
340
- { [t.visible]: V }
342
+ { [t.visible]: O }
341
343
  ),
342
344
  children: "Ничего не найдено"
343
345
  }
344
346
  ) : /* @__PURE__ */ n(
345
347
  "div",
346
348
  {
347
- className: r(
349
+ className: l(
348
350
  t.options,
349
- t[s],
351
+ t[i],
350
352
  t["no-options"],
351
353
  t[A],
352
- { [t.visible]: V }
354
+ { [t.visible]: O }
353
355
  ),
354
356
  children: "Нет данных"
355
357
  }
@@ -359,10 +361,10 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
359
361
  )
360
362
  }
361
363
  ),
362
- ue && l.length > 0 && /* @__PURE__ */ n("div", { className: t["chip-container"], children: l.map((e) => /* @__PURE__ */ n(
364
+ ue && c.length > 0 && /* @__PURE__ */ n("div", { className: t["chip-container"], children: c.map((e) => /* @__PURE__ */ n(
363
365
  ye,
364
366
  {
365
- size: s === P.L ? "s" : "xs",
367
+ size: i === D.L ? "s" : "xs",
366
368
  variant: de,
367
369
  className: t["chip-root"],
368
370
  withAction: !0,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mimir-ui-kit",
3
3
  "private": false,
4
- "version": "1.38.19",
4
+ "version": "1.38.21",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {