mimir-ui-kit 1.38.8 → 1.38.10
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/MultiSelectSearch.css +1 -1
- package/dist/assets/styles.css +1 -1
- package/dist/components/DatePicker/DatePicker.js +2 -1
- package/dist/components/DatePicker/DatePickerModal.js +1 -1
- package/dist/components/DatePicker/MonthPickerModal.js +1 -1
- package/dist/components/DatePicker/YearPickerModal.js +1 -1
- package/dist/components/MultiSelectSearch/MultiSelectSearch.js +245 -231
- package/dist/components/MultiSelectSearch/utils.js +12 -12
- package/dist/styles.module-BlOA4RBL.js +28 -0
- package/package.json +1 -1
- package/dist/styles.module-CPvzaOtD.js +0 -27
@@ -1 +1 @@
|
|
1
|
-
._multi-select-
|
1
|
+
._multi-select-search_io0c8_2{position:relative}._multi-select-search_io0c8_2._disabled_io0c8_5{cursor:not-allowed}._container_io0c8_9{display:block;gap:var(--select-search-gap);align-items:center;justify-content:space-between;height:var(--select-search-height);background-color:var(--black-5);border-radius:var(--select-search-radius)}._container-open_io0c8_18{border-bottom:1px solid var(--citrine-100)}._input-container_io0c8_22{position:relative;width:100%}._full_io0c8_27{width:100%}._selected-icon_io0c8_31 path{fill:var(--sapphire-100)}._selector-icon-open_io0c8_35{transform:rotate(180deg)}._button_io0c8_39{display:flex;align-items:center;background:none;border:none;cursor:pointer}._button_io0c8_39._disabled_io0c8_5{cursor:not-allowed}._button_io0c8_39._disabled_io0c8_5 ._selector-icon_io0c8_35 path{fill:var(--white)}._options_io0c8_53{position:absolute;z-index:10;width:100%;min-height:50%;max-height:var(--select-search-options-height);overflow-y:auto;font-size:var(--mimir-size-text-l);background:var(--white);box-shadow:var(--mimir-box-shadow-select-search);transition:transform .2s ease-out,opacity .2s ease-out;opacity:0}._options_io0c8_53._visible_io0c8_66{opacity:1}._options_io0c8_53._top_io0c8_69{bottom:100%;margin-bottom:1px;border-radius:var(--select-search-radius) var(--select-search-radius) 0 0}._options_io0c8_53._bottom_io0c8_74{top:100%;margin-top:1px;border-radius:0 0 var(--select-search-radius) var(--select-search-radius)}._options_io0c8_53::-webkit-scrollbar{width:3px}._options_io0c8_53::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:var(--mimir-control-radius-xs2)}._options_io0c8_53::-webkit-scrollbar-track{background-color:var(--white)}@media (max-width: 600px){._options_io0c8_53{max-height:var(--mimir-select-search-options-height-mobile)}}._no-options_io0c8_95{height:100%;padding:var(--select-search-option-space);color:var(--black-80)}._m_io0c8_2{--select-search-height: var(--mimir-select-search-height-l);--select-search-space: var(--mimir-space-xss) var(--mimir-space-m);--select-search-radius: var(--mimir-control-radius);--select-search-gap: var(--mimir-space-2xs);--select-search-btn-space: var(--mimir-space-m) var(--mimir-space-m) var(--mimir-space-m) var(--mimir-space-xs);--select-search-option-space: var(--mimir-space-2s) var(--mimir-space-m);--select-search-options-height: var( --mimir-select-search-options-height-mobile );--clear-right: var(--mimir-space-2xxl);--multi-select-input-disabled-margin-right: var(--mimir-space-l)}._l_io0c8_116{--select-search-height: var(--mimir-select-search-height-xxl);--select-search-space: var(--mimir-space-xss) var(--mimir-space-m);--select-search-radius: var(--mimir-control-radius-s);--select-search-gap: var(--mimir-space-xs);--select-search-btn-space: var(--mimir-space-l) var(--mimir-space-m) var(--mimir-space-l) var(--mimir-space-xs);--select-search-option-space: var(--mimir-space-2l) var(--mimir-space-m);--select-search-options-height: var( --mimir-select-search-options-height-desktop );--clear-right: var(--mimir-space-4xl);--multi-select-input-disabled-margin-right: var(--mimir-space-1xl)}._multi-select-input-disabled_io0c8_131{margin-right:var(--multi-select-input-disabled-margin-right)}._multi-select-input_io0c8_131._focused_io0c8_134{height:auto;min-height:var(--input-height);overflow:hidden;resize:vertical}._multi-select-input_io0c8_131:last-child{padding-right:var(--mimir-space-4xl)}._option_io0c8_53{display:flex;gap:var(--mimir-space-m);align-items:center;width:100%;padding:var(--select-search-option-space);cursor:pointer;transition:background-color .2s ease-in-out}._option-active_io0c8_153{background-color:var(--black-5)}._option-inner_io0c8_156{display:flex;flex-direction:column;gap:var(--mimir-space-xs);width:100%}._chip_io0c8_163{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._chip-container_io0c8_168{display:flex;flex-wrap:wrap;gap:var(--mimir-space-2xs);margin-top:var(--mimir-space-xs)}._chip-root_io0c8_174{max-width:100%}._right-slot_io0c8_178{order:2;padding-top:0!important}._required-mark_io0c8_183{order:1;margin-right:var(--mimir-space-xs)}._clear_io0c8_188{position:absolute;top:50%;right:var(--clear-right);transform:translateY(-50%)}._clear_io0c8_188._disabled_io0c8_5{cursor:not-allowed}._clear_io0c8_188._disabled_io0c8_5 ._icon-button_io0c8_197 path{fill:var(--white)}
|
package/dist/assets/styles.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
._input-field-group-
|
1
|
+
._input-field-group-datePicker_1ogw2_3{display:flex;flex-direction:column;gap:var(--mimir-space-2xs)}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8{--border-color: var(--citrine-100);position:relative;display:flex;align-items:center;border-radius:var(--mimir-control-radius-s)}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8 ._date-wrapper_1ogw2_15{position:relative;width:100%}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8 ._date-wrapper_1ogw2_15 ._input-wrapper_1ogw2_19{flex:1}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8 ._date-wrapper_1ogw2_15 ._input-wrapper_1ogw2_19 ._right-slot_1ogw2_22{padding-top:0;order:2}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8 ._date-wrapper_1ogw2_15 ._inputBorderControl_1ogw2_26{border:transparent}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8 ._date-wrapper_1ogw2_15:hover ._input-wrapper_1ogw2_19{background-color:var(--input-bg-color-hover)}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8 ._date-wrapper_1ogw2_15:before{position:absolute;top:0;right:45px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8 ._date-wrapper_1ogw2_15._editable_1ogw2_39:before{display:none}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8 ._date-wrapper_1ogw2_15 svg{cursor:pointer}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8:has([data-error=true]){--border-color: var(--error-normal)}._input-field-group-datePicker_1ogw2_3 ._wrapper_1ogw2_8._active_1ogw2_48{border-bottom:1px solid var(--border-color)}._input-field-group-datePicker_1ogw2_3 ._textError_1ogw2_51{font-family:var(--mimir-font-inter);font-weight:var(--mimir-font-weight-text-regular);font-size:var(--mimir-size-text-s);line-height:var(--mimir-size-text-m);text-align:left;color:var(--gos-znak-diplomatic-background-color)}._input_1ogw2_3{padding-right:var(--mimir-space-3xl)}[data-disabled=true] ._date-wrapper_1ogw2_15:before{cursor:auto}[data-disabled=true] ._date-wrapper_1ogw2_15 ._input-wrapper_1ogw2_19{background:var(--black-20)}[data-disabled=true] ._date-wrapper_1ogw2_15 ._input-wrapper_1ogw2_19 label,[data-disabled=true] ._date-wrapper_1ogw2_15 ._input-wrapper_1ogw2_19 input{color:var(--white)}[data-disabled=true] ._button-wrapper_1ogw2_74 svg{color:var(--white);cursor:default;fill:var(--white)}._button-wrapper_1ogw2_74{position:absolute;top:0;right:0;z-index:2;display:flex;justify-content:center;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1ogw2_74{align-self:center;background-color:transparent;border-radius:var(--mimir-control-radius-s)}._calendar-block_1ogw2_98{position:absolute;z-index:var(--mimir-zindex-dropdown);display:flex;flex-direction:column;width:368px;max-height:none;padding:var(--mimir-space-m);font-weight:var(--mimir-font-weight-text-regular);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-inter);line-height:var(--mimir-line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:var(--white);border-radius:var(--mimir-control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_1ogw2_98 ._h_1ogw2_120{display:flex;width:100%;color:var(--black-100)}._calendar-block_1ogw2_98 ._b_1ogw2_74{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_1ogw2_98 ._d_1ogw2_15{display:flex;flex:1;gap:var(--mimir-space-2xs);align-items:center;justify-content:center;color:var(--black-100);font-size:var(--mimir-size-text-l);cursor:pointer}._calendar-block_1ogw2_98 ._m_1ogw2_142,._calendar-block_1ogw2_98 ._a_1ogw2_48,._calendar-block_1ogw2_98 ._prev_1ogw2_144{width:auto;height:48px;overflow:hidden}._calendar-block_1ogw2_98 ._m_1ogw2_142{display:flex;align-items:center;justify-content:center;color:var(--disabled);font-size:var(--mimir-size-text-l)}._calendar-block_1ogw2_98 ._orange_1ogw2_158{color:var(--citrine-100)}._calendar-block_1ogw2_98 ._a_1ogw2_48{color:var(--black-100);font-size:var(--mimir-size-text-l);border-radius:var(--mimir-control-radius-s)}._calendar-block_1ogw2_98 ._a_1ogw2_48:hover{background:var(--black-10)}._calendar-block_1ogw2_98 ._a_1ogw2_48:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_1ogw2_98 ._current_1ogw2_175{background:var(--sapphire-10);border-radius:var(--mimir-control-radius-s)}._calendar-block_1ogw2_98 ._monthGrid_1ogw2_180{display:grid;grid-template-columns:repeat(3,1fr)}._icon-button_1ogw2_185{display:flex}
|
@@ -4,7 +4,7 @@ import { memo as V, forwardRef as tt, useState as N, useEffect as T } from "reac
|
|
4
4
|
import { MAX_DAY as st, MAX_MONTH as et, DATE_LENGTH as it } from "./constants.js";
|
5
5
|
import { DatePickerModal as rt } from "./DatePickerModal.js";
|
6
6
|
import { MonthPickerModal as ot } from "./MonthPickerModal.js";
|
7
|
-
import { c as e } from "../../styles.module-
|
7
|
+
import { c as e } from "../../styles.module-BlOA4RBL.js";
|
8
8
|
import { formatDatePart as L } from "./utils.js";
|
9
9
|
import { YearPickerModal as at } from "./YearPickerModal.js";
|
10
10
|
import { useClickOutside as ct } from "../../hooks/useClickOutside/useClickOutside.js";
|
@@ -135,6 +135,7 @@ const dt = {
|
|
135
135
|
addonType: "react-node",
|
136
136
|
addonContent: /* @__PURE__ */ a(C, { isActive: D })
|
137
137
|
},
|
138
|
+
rightSlotClassName: e["right-slot"],
|
138
139
|
onFocus: () => {
|
139
140
|
j && !w && m(!0);
|
140
141
|
},
|
@@ -3,7 +3,7 @@ import { c as x } from "../../index-DIxK0V-G.js";
|
|
3
3
|
import { useState as O } from "react";
|
4
4
|
import { week as Y, COUNT_WORK_DAYS as j } from "./constants.js";
|
5
5
|
import { useDatePickerPosition as z } from "./hooks.js";
|
6
|
-
import { c as o } from "../../styles.module-
|
6
|
+
import { c as o } from "../../styles.module-BlOA4RBL.js";
|
7
7
|
import { getUpdateDate as M } from "./utils.js";
|
8
8
|
import { Icon as G } from "../../icons/Icon.js";
|
9
9
|
import { formating as s } from "../../utils/index.js";
|
@@ -3,7 +3,7 @@ import { c as k } from "../../index-DIxK0V-G.js";
|
|
3
3
|
import { useState as $ } from "react";
|
4
4
|
import { months as x } from "./constants.js";
|
5
5
|
import { useDatePickerPosition as v } from "./hooks.js";
|
6
|
-
import { c as e } from "../../styles.module-
|
6
|
+
import { c as e } from "../../styles.module-BlOA4RBL.js";
|
7
7
|
import { Icon as B } from "../../icons/Icon.js";
|
8
8
|
import { formating as a } from "../../utils/index.js";
|
9
9
|
import { Button as b } from "../Button/Button.js";
|
@@ -2,7 +2,7 @@ import { jsxs as p, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { c as v } from "../../index-DIxK0V-G.js";
|
3
3
|
import { useState as x } from "react";
|
4
4
|
import { useDatePickerPosition as Y } from "./hooks.js";
|
5
|
-
import { c as t } from "../../styles.module-
|
5
|
+
import { c as t } from "../../styles.module-BlOA4RBL.js";
|
6
6
|
import { formating as n } from "../../utils/index.js";
|
7
7
|
import { Button as y } from "../Button/Button.js";
|
8
8
|
const F = ({
|
@@ -1,269 +1,280 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import { c as
|
3
|
-
import { forwardRef as
|
4
|
-
import { EMultiSelectSearchSize as
|
5
|
-
import { getInitialInputValue as
|
6
|
-
import { Icon as
|
7
|
-
import { Button as
|
8
|
-
import { CheckboxMimir as
|
9
|
-
import { Chip as
|
10
|
-
import { I as
|
11
|
-
import { EInputVariant as
|
12
|
-
import { H as
|
13
|
-
import '../../assets/MultiSelectSearch.css';const
|
14
|
-
"multi-select-search": "_multi-select-
|
15
|
-
disabled:
|
16
|
-
container:
|
17
|
-
"container-open": "_container-
|
18
|
-
"input-container": "_input-
|
19
|
-
full:
|
20
|
-
"selected-icon": "_selected-
|
21
|
-
"selector-icon-open": "_selector-icon-
|
22
|
-
button:
|
23
|
-
"selector-icon": "_selector-
|
24
|
-
options:
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
"multi-select-input": "_multi-select-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
"option-
|
36
|
-
|
37
|
-
|
38
|
-
"chip-
|
39
|
-
"
|
40
|
-
"
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
1
|
+
import { jsxs as M, jsx as n, Fragment as $ } from "react/jsx-runtime";
|
2
|
+
import { c as l } from "../../index-DIxK0V-G.js";
|
3
|
+
import { forwardRef as Ie, useId as ge, useRef as Q, useState as b, useEffect as L, useMemo as Ne, useCallback as Se } from "react";
|
4
|
+
import { EMultiSelectSearchSize as x } from "./constants.js";
|
5
|
+
import { getInitialInputValue as X, shouldShowMenuOnTop as Ce, MULTISELECT_OPEN_EVENT as Y, mapSizeToInputSize as Z, getDropdownArrowIcon as Me, dispatchMultiselectOpen as E, joinSelectedItems as ee } from "./utils.js";
|
6
|
+
import { Icon as Ee } from "../../icons/Icon.js";
|
7
|
+
import { Button as Le } from "../Button/Button.js";
|
8
|
+
import { CheckboxMimir as Te } from "../CheckboxMimir/CheckboxMimir.js";
|
9
|
+
import { Chip as ke } from "../Chip/Chip.js";
|
10
|
+
import { I as te } from "../../Input-BYrIS5GU.js";
|
11
|
+
import { EInputVariant as ye } from "../Input/constants.js";
|
12
|
+
import { H as Oe, U as oe, G as ne, K as ze, W as Ae } from "../../combobox-CVtJDVoZ.js";
|
13
|
+
import '../../assets/MultiSelectSearch.css';const Ve = "_disabled_io0c8_5", xe = "_container_io0c8_9", De = "_full_io0c8_27", Pe = "_button_io0c8_39", qe = "_options_io0c8_53", Re = "_visible_io0c8_66", Be = "_top_io0c8_69", Fe = "_bottom_io0c8_74", je = "_m_io0c8_2", Ge = "_l_io0c8_116", Ue = "_focused_io0c8_134", We = "_option_io0c8_53", He = "_chip_io0c8_163", Je = "_clear_io0c8_188", t = {
|
14
|
+
"multi-select-search": "_multi-select-search_io0c8_2",
|
15
|
+
disabled: Ve,
|
16
|
+
container: xe,
|
17
|
+
"container-open": "_container-open_io0c8_18",
|
18
|
+
"input-container": "_input-container_io0c8_22",
|
19
|
+
full: De,
|
20
|
+
"selected-icon": "_selected-icon_io0c8_31",
|
21
|
+
"selector-icon-open": "_selector-icon-open_io0c8_35",
|
22
|
+
button: Pe,
|
23
|
+
"selector-icon": "_selector-icon_io0c8_35",
|
24
|
+
options: qe,
|
25
|
+
visible: Re,
|
26
|
+
top: Be,
|
27
|
+
bottom: Fe,
|
28
|
+
"no-options": "_no-options_io0c8_95",
|
29
|
+
m: je,
|
30
|
+
l: Ge,
|
31
|
+
"multi-select-input-disabled": "_multi-select-input-disabled_io0c8_131",
|
32
|
+
"multi-select-input": "_multi-select-input_io0c8_131",
|
33
|
+
focused: Ue,
|
34
|
+
option: We,
|
35
|
+
"option-active": "_option-active_io0c8_153",
|
36
|
+
"option-inner": "_option-inner_io0c8_156",
|
37
|
+
chip: He,
|
38
|
+
"chip-container": "_chip-container_io0c8_168",
|
39
|
+
"chip-root": "_chip-root_io0c8_174",
|
40
|
+
"right-slot": "_right-slot_io0c8_178",
|
41
|
+
"required-mark": "_required-mark_io0c8_183",
|
42
|
+
clear: Je,
|
43
|
+
"icon-button": "_icon-button_io0c8_197"
|
44
|
+
}, ct = Ie(
|
45
|
+
(ie, se) => {
|
45
46
|
const {
|
46
|
-
placeholder:
|
47
|
-
size:
|
48
|
-
value:
|
49
|
-
onChange:
|
50
|
-
full:
|
51
|
-
showArrow:
|
52
|
-
items:
|
53
|
-
classNameOption:
|
54
|
-
displayValue:
|
55
|
-
filterOnSearch:
|
56
|
-
onSearch:
|
57
|
-
variant:
|
58
|
-
menuPlacement:
|
59
|
-
disabled:
|
60
|
-
searchProps:
|
61
|
-
withClearButton:
|
62
|
-
withChip:
|
63
|
-
chipVariant:
|
64
|
-
disableInput:
|
65
|
-
autocomplete:
|
66
|
-
id:
|
67
|
-
autoPlacement:
|
68
|
-
} =
|
69
|
-
() =>
|
70
|
-
), [
|
71
|
-
|
72
|
-
), [
|
73
|
-
|
74
|
-
|
75
|
-
}, [
|
76
|
-
const
|
77
|
-
var
|
78
|
-
if (!
|
79
|
-
const e = ((
|
80
|
-
return
|
47
|
+
placeholder: D,
|
48
|
+
size: i = x.L,
|
49
|
+
value: d,
|
50
|
+
onChange: s,
|
51
|
+
full: ce,
|
52
|
+
showArrow: le = !0,
|
53
|
+
items: h = [],
|
54
|
+
classNameOption: re,
|
55
|
+
displayValue: f = "name",
|
56
|
+
filterOnSearch: P = !0,
|
57
|
+
onSearch: T,
|
58
|
+
variant: q = ye.DefaultGray,
|
59
|
+
menuPlacement: w = "bottom",
|
60
|
+
disabled: r = !1,
|
61
|
+
searchProps: R,
|
62
|
+
withClearButton: k = !1,
|
63
|
+
withChip: ae = !1,
|
64
|
+
chipVariant: ue = "sapphire",
|
65
|
+
disableInput: I = !1,
|
66
|
+
autocomplete: B = "on",
|
67
|
+
id: de,
|
68
|
+
autoPlacement: y = !1
|
69
|
+
} = ie, pe = ge(), p = de || `multiselect-${pe}`, g = Q(null), v = Q(null), [m, _] = b(!1), [N, S] = b(
|
70
|
+
() => X(d, f)
|
71
|
+
), [c, C] = b(
|
72
|
+
d || []
|
73
|
+
), [O, F] = b(w), [z, j] = b(!1), [me, G] = b(!1);
|
74
|
+
L(() => {
|
75
|
+
d && (C(d), JSON.stringify(d) !== JSON.stringify(c) && S(X(d, f)));
|
76
|
+
}, [d, f, c]);
|
77
|
+
const U = Ne(() => {
|
78
|
+
var o;
|
79
|
+
if (!P) return h;
|
80
|
+
const e = ((o = N.split(",").pop()) == null ? void 0 : o.trim().toLowerCase()) ?? "";
|
81
|
+
return c.length > 0 && c[c.length - 1].name.toLowerCase() === e ? h : h.filter(
|
81
82
|
(a) => a.name.toLowerCase().includes(e)
|
82
83
|
);
|
83
|
-
}, [
|
84
|
-
|
85
|
-
const
|
86
|
-
|
87
|
-
if (
|
88
|
-
|
89
|
-
const a =
|
90
|
-
|
84
|
+
}, [P, h, N, c]), _e = (e) => {
|
85
|
+
C(e), s == null || s(e);
|
86
|
+
const o = ee(e, f);
|
87
|
+
S(o), _(!0), E(p), setTimeout(() => {
|
88
|
+
if (v.current) {
|
89
|
+
v.current.focus(), v.current.scrollLeft = v.current.scrollWidth;
|
90
|
+
const a = o.length;
|
91
|
+
v.current.setSelectionRange(a, a);
|
91
92
|
}
|
92
93
|
}, 0);
|
93
|
-
},
|
94
|
-
var
|
95
|
-
if (
|
96
|
-
const
|
97
|
-
|
98
|
-
const a =
|
99
|
-
(
|
94
|
+
}, W = (e) => {
|
95
|
+
var K;
|
96
|
+
if (I) return;
|
97
|
+
const o = e.target.value;
|
98
|
+
S(o), T == null || T(o);
|
99
|
+
const a = o.split(",").map((V) => V.trim()).filter(Boolean), J = h.filter(
|
100
|
+
(V) => a.includes(V[f])
|
100
101
|
);
|
101
|
-
|
102
|
-
const
|
102
|
+
C(J), s == null || s(J), _(!0), E(p);
|
103
|
+
const A = (K = g.current) == null ? void 0 : K.querySelector(
|
103
104
|
`.${t.options}`
|
104
105
|
);
|
105
|
-
|
106
|
-
},
|
107
|
-
const
|
106
|
+
A && typeof A.scrollTo == "function" && A.scrollTo({ top: 0, behavior: "smooth" });
|
107
|
+
}, he = (e) => {
|
108
|
+
const o = c.filter(
|
108
109
|
(a) => a.id !== e.id
|
109
110
|
);
|
110
|
-
|
111
|
-
},
|
112
|
-
|
113
|
-
|
114
|
-
|
111
|
+
C(o), s == null || s(o), S(ee(o, f));
|
112
|
+
}, u = Se(() => {
|
113
|
+
if (!y) {
|
114
|
+
F(w);
|
115
|
+
return;
|
116
|
+
}
|
117
|
+
const e = Ce(g, i);
|
118
|
+
F(e ? "top" : w);
|
119
|
+
}, [y, w, i]), H = () => {
|
120
|
+
const e = !m;
|
121
|
+
e && (u(), E(p)), _(e);
|
122
|
+
}, fe = (e) => {
|
115
123
|
e.preventDefault(), e.currentTarget.focus();
|
116
|
-
const
|
117
|
-
e.currentTarget.setSelectionRange(
|
118
|
-
},
|
119
|
-
|
120
|
-
},
|
121
|
-
e.stopPropagation(),
|
122
|
-
},
|
123
|
-
|
124
|
+
const o = e.currentTarget.value.length;
|
125
|
+
e.currentTarget.setSelectionRange(o, o);
|
126
|
+
}, ve = () => {
|
127
|
+
S(""), C([]), s == null || s([]);
|
128
|
+
}, be = (e) => {
|
129
|
+
e.stopPropagation(), ve();
|
130
|
+
}, we = (e) => {
|
131
|
+
if (I) {
|
132
|
+
e.target.blur();
|
133
|
+
return;
|
134
|
+
}
|
135
|
+
u(), _(!0), E(p);
|
124
136
|
};
|
125
|
-
return
|
126
|
-
const e = (
|
127
|
-
|
137
|
+
return L(() => {
|
138
|
+
const e = (o) => {
|
139
|
+
g.current && !g.current.contains(o.target) && !o.defaultPrevented && _(!1);
|
128
140
|
};
|
129
141
|
return document.addEventListener("mousedown", e), () => {
|
130
142
|
document.removeEventListener("mousedown", e);
|
131
143
|
};
|
132
|
-
}, []),
|
133
|
-
const e = (
|
134
|
-
|
144
|
+
}, []), L(() => {
|
145
|
+
const e = (o) => {
|
146
|
+
o.detail !== p && _(!1);
|
135
147
|
};
|
136
148
|
return window.addEventListener(
|
137
|
-
|
149
|
+
Y,
|
138
150
|
e
|
139
151
|
), () => {
|
140
152
|
window.removeEventListener(
|
141
|
-
|
153
|
+
Y,
|
142
154
|
e
|
143
155
|
);
|
144
156
|
};
|
145
|
-
}, [
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
}
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
Se,
|
157
|
+
}, [p]), L(() => {
|
158
|
+
if (m) {
|
159
|
+
u(), window.addEventListener("scroll", u), window.addEventListener("resize", u);
|
160
|
+
const e = requestAnimationFrame(() => {
|
161
|
+
G(!0), j(!0);
|
162
|
+
});
|
163
|
+
return () => {
|
164
|
+
window.removeEventListener("scroll", u), window.removeEventListener("resize", u), cancelAnimationFrame(e);
|
165
|
+
};
|
166
|
+
} else
|
167
|
+
j(!1), G(!1);
|
168
|
+
}, [m, w, y, i, u]), /* @__PURE__ */ M("div", { ref: g, children: [
|
169
|
+
/* @__PURE__ */ n(
|
170
|
+
Oe,
|
160
171
|
{
|
161
172
|
multiple: !0,
|
162
173
|
as: "div",
|
163
|
-
value:
|
164
|
-
className:
|
165
|
-
[t.full]:
|
166
|
-
[t.disabled]:
|
174
|
+
value: c,
|
175
|
+
className: l(t["multi-select-search"], {
|
176
|
+
[t.full]: ce,
|
177
|
+
[t.disabled]: r
|
167
178
|
}),
|
168
|
-
onChange:
|
169
|
-
ref:
|
170
|
-
disabled:
|
171
|
-
virtual: { options:
|
172
|
-
children: /* @__PURE__ */
|
179
|
+
onChange: _e,
|
180
|
+
ref: se,
|
181
|
+
disabled: r,
|
182
|
+
virtual: { options: U },
|
183
|
+
children: /* @__PURE__ */ M(
|
173
184
|
"div",
|
174
185
|
{
|
175
|
-
className:
|
176
|
-
[t["container-open"]]:
|
186
|
+
className: l(t.container, t[i], {
|
187
|
+
[t["container-open"]]: m
|
177
188
|
}),
|
178
189
|
children: [
|
179
|
-
|
180
|
-
/* @__PURE__ */
|
181
|
-
|
190
|
+
I && /* @__PURE__ */ M("div", { className: t["input-container"], children: [
|
191
|
+
/* @__PURE__ */ n(
|
192
|
+
oe,
|
182
193
|
{
|
183
|
-
disabled:
|
194
|
+
disabled: r,
|
184
195
|
style: { width: "100%" },
|
185
|
-
onClick:
|
186
|
-
children: /* @__PURE__ */
|
187
|
-
|
196
|
+
onClick: H,
|
197
|
+
children: /* @__PURE__ */ n(
|
198
|
+
ne,
|
188
199
|
{
|
189
|
-
as:
|
190
|
-
label:
|
191
|
-
size:
|
192
|
-
className:
|
193
|
-
[t["multi-select-input-disabled"]]:
|
200
|
+
as: te,
|
201
|
+
label: D,
|
202
|
+
size: Z(i),
|
203
|
+
className: l(t["multi-select-input"], {
|
204
|
+
[t["multi-select-input-disabled"]]: I && k
|
194
205
|
}),
|
195
|
-
onChange:
|
196
|
-
value:
|
197
|
-
disabled:
|
198
|
-
variant:
|
206
|
+
onChange: W,
|
207
|
+
value: N,
|
208
|
+
disabled: r,
|
209
|
+
variant: q,
|
199
210
|
rightSlotClassName: t["right-slot"],
|
200
211
|
requiredMarkClassName: t["required-mark"],
|
201
212
|
"data-testid": "select-search-input",
|
202
|
-
onFocus:
|
213
|
+
onFocus: we,
|
203
214
|
rightAddon: {
|
204
215
|
addonType: "icon",
|
205
|
-
addonContent:
|
216
|
+
addonContent: Me(m, i)
|
206
217
|
},
|
207
|
-
autocomplete:
|
208
|
-
...
|
218
|
+
autocomplete: B,
|
219
|
+
...R
|
209
220
|
}
|
210
221
|
)
|
211
222
|
}
|
212
223
|
),
|
213
|
-
|
214
|
-
|
224
|
+
k && N && /* @__PURE__ */ n(
|
225
|
+
Le,
|
215
226
|
{
|
216
227
|
tabIndex: -1,
|
217
|
-
className:
|
218
|
-
[t.disabled]:
|
228
|
+
className: l(t.clear, {
|
229
|
+
[t.disabled]: r
|
219
230
|
}),
|
220
231
|
iconButtonClassName: t["icon-button"],
|
221
232
|
isIconButton: !0,
|
222
233
|
iconName: "Close16px",
|
223
234
|
size: "m-s",
|
224
235
|
clear: !0,
|
225
|
-
disabled:
|
236
|
+
disabled: r,
|
226
237
|
variant: "secondary-gray",
|
227
|
-
onClick:
|
238
|
+
onClick: be,
|
228
239
|
"data-testid": "clear-button"
|
229
240
|
}
|
230
241
|
)
|
231
242
|
] }),
|
232
|
-
!
|
233
|
-
|
243
|
+
!I && /* @__PURE__ */ n(
|
244
|
+
ne,
|
234
245
|
{
|
235
|
-
as:
|
236
|
-
label:
|
237
|
-
size:
|
246
|
+
as: te,
|
247
|
+
label: D,
|
248
|
+
size: Z(i),
|
238
249
|
className: t["multi-select-input"],
|
239
250
|
rightSlotClassName: t["right-slot"],
|
240
251
|
requiredMarkClassName: t["required-mark"],
|
241
|
-
value:
|
242
|
-
disabled:
|
243
|
-
variant:
|
244
|
-
withClearButton:
|
252
|
+
value: N,
|
253
|
+
disabled: r,
|
254
|
+
variant: q,
|
255
|
+
withClearButton: k,
|
245
256
|
onFocus: () => {
|
246
|
-
|
257
|
+
_(!0), E(p);
|
247
258
|
},
|
248
|
-
onMouseDown:
|
249
|
-
onChange:
|
250
|
-
ref:
|
259
|
+
onMouseDown: fe,
|
260
|
+
onChange: W,
|
261
|
+
ref: v,
|
251
262
|
rightAddon: {
|
252
263
|
addonType: "react-node",
|
253
|
-
addonContent:
|
254
|
-
|
264
|
+
addonContent: le && /* @__PURE__ */ n(
|
265
|
+
oe,
|
255
266
|
{
|
256
|
-
className:
|
257
|
-
[t.disabled]:
|
267
|
+
className: l(t.button, {
|
268
|
+
[t.disabled]: r
|
258
269
|
}),
|
259
|
-
disabled:
|
260
|
-
onMouseDown:
|
261
|
-
children: /* @__PURE__ */
|
262
|
-
|
270
|
+
disabled: r,
|
271
|
+
onMouseDown: H,
|
272
|
+
children: /* @__PURE__ */ n(
|
273
|
+
Ee,
|
263
274
|
{
|
264
|
-
iconName:
|
265
|
-
className:
|
266
|
-
[t["selector-icon-open"]]:
|
275
|
+
iconName: i == x.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
|
276
|
+
className: l(t["selector-icon"], {
|
277
|
+
[t["selector-icon-open"]]: m
|
267
278
|
})
|
268
279
|
}
|
269
280
|
)
|
@@ -271,43 +282,44 @@ import '../../assets/MultiSelectSearch.css';const Me = "_disabled_17kql_5", Le =
|
|
271
282
|
)
|
272
283
|
},
|
273
284
|
"data-testid": "select-search-input",
|
274
|
-
autocomplete:
|
275
|
-
...
|
285
|
+
autocomplete: B,
|
286
|
+
...R
|
276
287
|
}
|
277
288
|
),
|
278
|
-
|
279
|
-
|
289
|
+
m && me && /* @__PURE__ */ n($, { children: h.length ? U.length ? /* @__PURE__ */ n(
|
290
|
+
ze,
|
280
291
|
{
|
281
|
-
className:
|
292
|
+
className: l(
|
282
293
|
t.options,
|
283
|
-
t[
|
284
|
-
t[
|
294
|
+
t[i],
|
295
|
+
t[O],
|
296
|
+
{ [t.visible]: z }
|
285
297
|
),
|
286
298
|
modal: !1,
|
287
299
|
static: !0,
|
288
|
-
children: ({ option: e }) => /* @__PURE__ */
|
289
|
-
|
300
|
+
children: ({ option: e }) => /* @__PURE__ */ n(
|
301
|
+
Ae,
|
290
302
|
{
|
291
303
|
value: e,
|
292
|
-
className: ({ focus:
|
304
|
+
className: ({ focus: o }) => l(
|
293
305
|
t.option,
|
294
|
-
|
295
|
-
|
306
|
+
re,
|
307
|
+
i && t[i],
|
296
308
|
{
|
297
|
-
[t["option-active"]]:
|
309
|
+
[t["option-active"]]: o
|
298
310
|
}
|
299
311
|
),
|
300
|
-
children: /* @__PURE__ */
|
301
|
-
/* @__PURE__ */
|
312
|
+
children: /* @__PURE__ */ M($, { children: [
|
313
|
+
/* @__PURE__ */ M("div", { className: t["option-inner"], children: [
|
302
314
|
e.name,
|
303
|
-
e.bottom && /* @__PURE__ */
|
315
|
+
e.bottom && /* @__PURE__ */ n("div", { children: e.bottom })
|
304
316
|
] }),
|
305
|
-
/* @__PURE__ */
|
306
|
-
|
317
|
+
/* @__PURE__ */ n(
|
318
|
+
Te,
|
307
319
|
{
|
308
320
|
isInteractive: !1,
|
309
|
-
checked:
|
310
|
-
(
|
321
|
+
checked: c.some(
|
322
|
+
(o) => o.id === e.id
|
311
323
|
)
|
312
324
|
}
|
313
325
|
)
|
@@ -316,25 +328,27 @@ import '../../assets/MultiSelectSearch.css';const Me = "_disabled_17kql_5", Le =
|
|
316
328
|
e.id
|
317
329
|
)
|
318
330
|
}
|
319
|
-
) : /* @__PURE__ */
|
331
|
+
) : /* @__PURE__ */ n(
|
320
332
|
"div",
|
321
333
|
{
|
322
|
-
className:
|
334
|
+
className: l(
|
323
335
|
t.options,
|
324
|
-
t[
|
336
|
+
t[i],
|
325
337
|
t["no-options"],
|
326
|
-
t[
|
338
|
+
t[O],
|
339
|
+
{ [t.visible]: z }
|
327
340
|
),
|
328
341
|
children: "Ничего не найдено"
|
329
342
|
}
|
330
|
-
) : /* @__PURE__ */
|
343
|
+
) : /* @__PURE__ */ n(
|
331
344
|
"div",
|
332
345
|
{
|
333
|
-
className:
|
346
|
+
className: l(
|
334
347
|
t.options,
|
335
|
-
t[
|
348
|
+
t[i],
|
336
349
|
t["no-options"],
|
337
|
-
t[
|
350
|
+
t[O],
|
351
|
+
{ [t.visible]: z }
|
338
352
|
),
|
339
353
|
children: "Нет данных"
|
340
354
|
}
|
@@ -344,15 +358,15 @@ import '../../assets/MultiSelectSearch.css';const Me = "_disabled_17kql_5", Le =
|
|
344
358
|
)
|
345
359
|
}
|
346
360
|
),
|
347
|
-
|
348
|
-
|
361
|
+
ae && c.length > 0 && /* @__PURE__ */ n("div", { className: t["chip-container"], children: c.map((e) => /* @__PURE__ */ n(
|
362
|
+
ke,
|
349
363
|
{
|
350
|
-
size:
|
351
|
-
variant:
|
364
|
+
size: i === x.L ? "s" : "xs",
|
365
|
+
variant: ue,
|
352
366
|
className: t["chip-root"],
|
353
367
|
withAction: !0,
|
354
|
-
onClose: () =>
|
355
|
-
children: /* @__PURE__ */
|
368
|
+
onClose: () => he(e),
|
369
|
+
children: /* @__PURE__ */ n("span", { className: t.chip, children: e.name })
|
356
370
|
},
|
357
371
|
e.id
|
358
372
|
)) })
|
@@ -360,5 +374,5 @@ import '../../assets/MultiSelectSearch.css';const Me = "_disabled_17kql_5", Le =
|
|
360
374
|
}
|
361
375
|
);
|
362
376
|
export {
|
363
|
-
|
377
|
+
ct as MultiSelectSearch
|
364
378
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { EMultiSelectSearchSize as o, MOBILE_MENU_HEIGHT as
|
1
|
+
import { EMultiSelectSearchSize as o, MOBILE_MENU_HEIGHT as u, DESKTOP_MENU_HEIGHT as w } from "./constants.js";
|
2
2
|
import "../../Input-BYrIS5GU.js";
|
3
3
|
import { EInputSize as r } from "../Input/constants.js";
|
4
4
|
const m = (t) => {
|
@@ -10,19 +10,19 @@ const m = (t) => {
|
|
10
10
|
default:
|
11
11
|
return r.M;
|
12
12
|
}
|
13
|
-
},
|
14
|
-
window.dispatchEvent(new CustomEvent(
|
15
|
-
},
|
13
|
+
}, M = (t, e) => t ? e === o.L ? "DropdownArrowUp24px" : "DropdownArrowUp16px" : e === o.L ? "DropdownArrowDown24px" : "DropdownArrowBottom16px", h = (t, e) => t && t.length > 0 ? t.map((n) => n[e]).join(", ") : "", I = (t, e) => t.map((n) => n[e]).join(", "), l = "multiselectOpen", S = (t) => {
|
14
|
+
window.dispatchEvent(new CustomEvent(l, { detail: t }));
|
15
|
+
}, f = (t, e) => {
|
16
16
|
if (!t.current) return !1;
|
17
|
-
const n = t.current.getBoundingClientRect(),
|
18
|
-
return i
|
17
|
+
const n = t.current.getBoundingClientRect(), p = window.innerHeight, c = e === o.M ? u : w, i = p - n.bottom, s = n.top;
|
18
|
+
return i >= c ? !1 : s > i;
|
19
19
|
};
|
20
20
|
export {
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
21
|
+
l as MULTISELECT_OPEN_EVENT,
|
22
|
+
S as dispatchMultiselectOpen,
|
23
|
+
M as getDropdownArrowIcon,
|
24
|
+
h as getInitialInputValue,
|
25
|
+
I as joinSelectedItems,
|
26
26
|
m as mapSizeToInputSize,
|
27
|
-
|
27
|
+
f as shouldShowMenuOnTop
|
28
28
|
};
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import './assets/styles.css';const o = "_wrapper_1ogw2_8", t = "_inputBorderControl_1ogw2_26", _ = "_editable_1ogw2_39", r = "_active_1ogw2_48", n = "_textError_1ogw2_51", e = "_input_1ogw2_3", p = "_button_1ogw2_74", c = "_h_1ogw2_120", w = "_b_1ogw2_74", a = "_d_1ogw2_15", g = "_m_1ogw2_142", i = "_a_1ogw2_48", u = "_prev_1ogw2_144", s = "_orange_1ogw2_158", d = "_current_1ogw2_175", b = "_monthGrid_1ogw2_180", l = {
|
2
|
+
"input-field-group-datePicker": "_input-field-group-datePicker_1ogw2_3",
|
3
|
+
wrapper: o,
|
4
|
+
"date-wrapper": "_date-wrapper_1ogw2_15",
|
5
|
+
"input-wrapper": "_input-wrapper_1ogw2_19",
|
6
|
+
"right-slot": "_right-slot_1ogw2_22",
|
7
|
+
inputBorderControl: t,
|
8
|
+
editable: _,
|
9
|
+
active: r,
|
10
|
+
textError: n,
|
11
|
+
input: e,
|
12
|
+
"button-wrapper": "_button-wrapper_1ogw2_74",
|
13
|
+
button: p,
|
14
|
+
"calendar-block": "_calendar-block_1ogw2_98",
|
15
|
+
h: c,
|
16
|
+
b: w,
|
17
|
+
d: a,
|
18
|
+
m: g,
|
19
|
+
a: i,
|
20
|
+
prev: u,
|
21
|
+
orange: s,
|
22
|
+
current: d,
|
23
|
+
monthGrid: b,
|
24
|
+
"icon-button": "_icon-button_1ogw2_185"
|
25
|
+
};
|
26
|
+
export {
|
27
|
+
l as c
|
28
|
+
};
|
package/package.json
CHANGED
@@ -1,27 +0,0 @@
|
|
1
|
-
import './assets/styles.css';const t = "_textError_97gw7_7", _ = "_input_97gw7_2", r = "_inputBorderControl_97gw7_28", n = "_editable_97gw7_41", o = "_wrapper_97gw7_64", e = "_active_97gw7_74", p = "_button_97gw7_58", c = "_h_97gw7_118", w = "_b_97gw7_58", a = "_d_97gw7_24", g = "_m_97gw7_140", i = "_a_97gw7_74", u = "_prev_97gw7_142", d = "_orange_97gw7_156", s = "_current_97gw7_173", b = "_monthGrid_97gw7_178", l = {
|
2
|
-
"input-field-group-datePicker": "_input-field-group-datePicker_97gw7_2",
|
3
|
-
textError: t,
|
4
|
-
input: _,
|
5
|
-
"input-wrapper": "_input-wrapper_97gw7_20",
|
6
|
-
"date-wrapper": "_date-wrapper_97gw7_24",
|
7
|
-
inputBorderControl: r,
|
8
|
-
editable: n,
|
9
|
-
"button-wrapper": "_button-wrapper_97gw7_58",
|
10
|
-
wrapper: o,
|
11
|
-
active: e,
|
12
|
-
button: p,
|
13
|
-
"calendar-block": "_calendar-block_97gw7_96",
|
14
|
-
h: c,
|
15
|
-
b: w,
|
16
|
-
d: a,
|
17
|
-
m: g,
|
18
|
-
a: i,
|
19
|
-
prev: u,
|
20
|
-
orange: d,
|
21
|
-
current: s,
|
22
|
-
monthGrid: b,
|
23
|
-
"icon-button": "_icon-button_97gw7_183"
|
24
|
-
};
|
25
|
-
export {
|
26
|
-
l as c
|
27
|
-
};
|