mimir-ui-kit 1.38.19 → 1.38.20

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 +145 -145
  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,142 @@ 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: d,
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(), p = pe || `multiselect-${me}`, N = X(null), b = X(null), [m, _] = w(!1), [S, C] = w(
71
+ () => Y(d, f)
72
+ ), [c, M] = w(
73
+ d || []
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
+ d && (M(d), JSON.stringify(d) !== JSON.stringify(c) && C(Y(d, f)));
77
+ }, [d, 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(
83
- (u) => u.name.toLowerCase().includes(e)
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
+ (a) => a.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(p), setTimeout(() => {
89
89
  if (b.current) {
90
90
  b.current.focus(), b.current.scrollLeft = b.current.scrollWidth;
91
- const u = o.length;
92
- b.current.setSelectionRange(u, u);
91
+ const a = o.length;
92
+ b.current.setSelectionRange(a, a);
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 a = o.split(",").map((x) => x.trim()).filter(Boolean), K = h.filter(
101
+ (x) => a.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(p);
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(
110
- (u) => u.id !== e.id
109
+ const o = c.filter(
110
+ (a) => a.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
+ }, u = 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 = !m;
122
+ e && (u(), L(p)), _(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
+ u(), _(!0), L(p);
137
137
  };
138
138
  return T(() => {
139
139
  const e = (o) => {
140
- S.current && !S.current.contains(o.target) && !o.defaultPrevented && (h(!1), i == null || i(!1));
140
+ N.current && !N.current.contains(o.target) && !o.defaultPrevented && (_(!1), v == null || v(!1));
141
141
  };
142
142
  return document.addEventListener("mousedown", e), () => {
143
143
  document.removeEventListener("mousedown", e);
144
144
  };
145
145
  }, []), T(() => {
146
146
  const e = (o) => {
147
- o.detail !== p && (h(!1), i == null || i(!1));
147
+ o.detail !== p && _(!1);
148
148
  };
149
149
  return window.addEventListener(
150
150
  Z,
@@ -156,126 +156,126 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
156
156
  );
157
157
  };
158
158
  }, [p]), T(() => {
159
- if (_) {
160
- d(), window.addEventListener("scroll", d), window.addEventListener("resize", d);
159
+ if (m) {
160
+ u(), window.addEventListener("scroll", u), window.addEventListener("resize", u);
161
161
  const e = requestAnimationFrame(() => {
162
- W(!0), U(!0);
162
+ U(!0), G(!0);
163
163
  });
164
164
  return () => {
165
- window.removeEventListener("scroll", d), window.removeEventListener("resize", d), cancelAnimationFrame(e);
165
+ window.removeEventListener("scroll", u), window.removeEventListener("resize", u), cancelAnimationFrame(e);
166
166
  };
167
167
  } else
168
- U(!1), W(!1);
169
- }, [_, g, z, s, d]), /* @__PURE__ */ E("div", { ref: S, children: [
168
+ G(!1), U(!1);
169
+ }, [m, g, z, i, u]), /* @__PURE__ */ E("div", { ref: N, children: [
170
170
  /* @__PURE__ */ n(
171
171
  Ae,
172
172
  {
173
173
  multiple: !0,
174
174
  as: "div",
175
- value: l,
176
- className: r(t["multi-select-search"], {
175
+ value: c,
176
+ className: l(t["multi-select-search"], {
177
177
  [t.full]: le,
178
- [t.disabled]: a
178
+ [t.disabled]: r
179
179
  }),
180
180
  onChange: he,
181
181
  ref: ce,
182
- disabled: a,
183
- virtual: { options: H },
182
+ disabled: r,
183
+ virtual: { options: W },
184
184
  children: /* @__PURE__ */ E(
185
185
  "div",
186
186
  {
187
- className: r(t.container, t[s], {
188
- [t["container-open"]]: _
187
+ className: l(t.container, t[i], {
188
+ [t["container-open"]]: m
189
189
  }),
190
190
  children: [
191
- N && /* @__PURE__ */ E("div", { className: t["input-container"], children: [
191
+ I && /* @__PURE__ */ E("div", { className: t["input-container"], children: [
192
192
  /* @__PURE__ */ n(
193
- ie,
193
+ ne,
194
194
  {
195
- disabled: a,
195
+ disabled: r,
196
196
  style: { width: "100%" },
197
- onClick: K,
197
+ onClick: J,
198
198
  children: /* @__PURE__ */ n(
199
- ne,
199
+ ie,
200
200
  {
201
201
  as: oe,
202
- label: q,
203
- size: ee(s),
204
- className: r(t["multi-select-input"], {
205
- [t["multi-select-input-disabled"]]: N && y
202
+ label: P,
203
+ size: ee(i),
204
+ className: l(t["multi-select-input"], {
205
+ [t["multi-select-input-disabled"]]: I && y
206
206
  }),
207
- onChange: J,
208
- value: C,
209
- disabled: a,
210
- variant: B,
207
+ onChange: H,
208
+ value: S,
209
+ disabled: r,
210
+ variant: R,
211
211
  rightSlotClassName: t["right-slot"],
212
212
  requiredMarkClassName: t["required-mark"],
213
213
  "data-testid": "select-search-input",
214
214
  onFocus: ge,
215
215
  rightAddon: {
216
216
  addonType: "icon",
217
- addonContent: Ee(_, s)
217
+ addonContent: Ee(m, i)
218
218
  },
219
- autocomplete: j,
220
- ...F
219
+ autocomplete: F,
220
+ ...B
221
221
  }
222
222
  )
223
223
  }
224
224
  ),
225
- y && C && /* @__PURE__ */ n(
225
+ y && S && /* @__PURE__ */ n(
226
226
  Te,
227
227
  {
228
228
  tabIndex: -1,
229
- className: r(t.clear, {
230
- [t.disabled]: a
229
+ className: l(t.clear, {
230
+ [t.disabled]: r
231
231
  }),
232
232
  iconButtonClassName: t["icon-button"],
233
233
  isIconButton: !0,
234
234
  iconName: "Close16px",
235
235
  size: "m-s",
236
236
  clear: !0,
237
- disabled: a,
237
+ disabled: r,
238
238
  variant: "secondary-gray",
239
239
  onClick: we,
240
240
  "data-testid": "clear-button"
241
241
  }
242
242
  )
243
243
  ] }),
244
- !N && /* @__PURE__ */ n(
245
- ne,
244
+ !I && /* @__PURE__ */ n(
245
+ ie,
246
246
  {
247
247
  as: oe,
248
- label: q,
249
- size: ee(s),
248
+ label: P,
249
+ size: ee(i),
250
250
  className: t["multi-select-input"],
251
251
  rightSlotClassName: t["right-slot"],
252
252
  requiredMarkClassName: t["required-mark"],
253
- value: C,
254
- disabled: a,
255
- variant: B,
253
+ value: S,
254
+ disabled: r,
255
+ variant: R,
256
256
  withClearButton: y,
257
257
  onFocus: () => {
258
- h(!0), i == null || i(!0), L(p);
258
+ _(!0), L(p);
259
259
  },
260
260
  onMouseDown: ve,
261
- onChange: J,
261
+ onChange: H,
262
262
  ref: b,
263
263
  rightAddon: {
264
264
  addonType: "react-node",
265
265
  addonContent: re && /* @__PURE__ */ n(
266
- ie,
266
+ ne,
267
267
  {
268
- className: r(t.button, {
269
- [t.disabled]: a
268
+ className: l(t.button, {
269
+ [t.disabled]: r
270
270
  }),
271
- disabled: a,
272
- onMouseDown: K,
271
+ disabled: r,
272
+ onMouseDown: J,
273
273
  children: /* @__PURE__ */ n(
274
274
  Le,
275
275
  {
276
- iconName: s == P.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
277
- className: r(t["selector-icon"], {
278
- [t["selector-icon-open"]]: _
276
+ iconName: i == D.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
277
+ className: l(t["selector-icon"], {
278
+ [t["selector-icon-open"]]: m
279
279
  })
280
280
  }
281
281
  )
@@ -283,29 +283,29 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
283
283
  )
284
284
  },
285
285
  "data-testid": "select-search-input",
286
- autocomplete: j,
287
- ...F
286
+ autocomplete: F,
287
+ ...B
288
288
  }
289
289
  ),
290
- _ && _e && /* @__PURE__ */ n(Q, { children: f.length ? H.length ? /* @__PURE__ */ n(
291
- Ve,
290
+ m && _e && /* @__PURE__ */ n(Q, { children: h.length ? W.length ? /* @__PURE__ */ n(
291
+ Oe,
292
292
  {
293
- className: r(
293
+ className: l(
294
294
  t.options,
295
- t[s],
295
+ t[i],
296
296
  t[A],
297
- { [t.visible]: V }
297
+ { [t.visible]: O }
298
298
  ),
299
299
  modal: !1,
300
300
  static: !0,
301
301
  children: ({ option: e }) => /* @__PURE__ */ n(
302
- xe,
302
+ Ve,
303
303
  {
304
304
  value: e,
305
- className: ({ focus: o }) => r(
305
+ className: ({ focus: o }) => l(
306
306
  t.option,
307
307
  ae,
308
- s && t[s],
308
+ i && t[i],
309
309
  {
310
310
  [t["option-active"]]: o
311
311
  }
@@ -319,7 +319,7 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
319
319
  ke,
320
320
  {
321
321
  isInteractive: !1,
322
- checked: l.some(
322
+ checked: c.some(
323
323
  (o) => o.id === e.id
324
324
  )
325
325
  }
@@ -332,24 +332,24 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
332
332
  ) : /* @__PURE__ */ n(
333
333
  "div",
334
334
  {
335
- className: r(
335
+ className: l(
336
336
  t.options,
337
- t[s],
337
+ t[i],
338
338
  t["no-options"],
339
339
  t[A],
340
- { [t.visible]: V }
340
+ { [t.visible]: O }
341
341
  ),
342
342
  children: "Ничего не найдено"
343
343
  }
344
344
  ) : /* @__PURE__ */ n(
345
345
  "div",
346
346
  {
347
- className: r(
347
+ className: l(
348
348
  t.options,
349
- t[s],
349
+ t[i],
350
350
  t["no-options"],
351
351
  t[A],
352
- { [t.visible]: V }
352
+ { [t.visible]: O }
353
353
  ),
354
354
  children: "Нет данных"
355
355
  }
@@ -359,10 +359,10 @@ import '../../assets/MultiSelectSearch.css';const De = "_disabled_io0c8_5", Pe =
359
359
  )
360
360
  }
361
361
  ),
362
- ue && l.length > 0 && /* @__PURE__ */ n("div", { className: t["chip-container"], children: l.map((e) => /* @__PURE__ */ n(
362
+ ue && c.length > 0 && /* @__PURE__ */ n("div", { className: t["chip-container"], children: c.map((e) => /* @__PURE__ */ n(
363
363
  ye,
364
364
  {
365
- size: s === P.L ? "s" : "xs",
365
+ size: i === D.L ? "s" : "xs",
366
366
  variant: de,
367
367
  className: t["chip-root"],
368
368
  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.20",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {