mimir-ui-kit 1.37.11 → 1.37.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/Accordion.css +1 -1
- package/dist/assets/SelectSearch.css +1 -1
- package/dist/components/Accordion/Accordion.js +116 -116
- package/dist/components/Drawer/Drawer.d.ts +9 -1
- package/dist/components/Drawer/Drawer.js +49 -47
- package/dist/components/SelectSearch/SelectSearch.d.ts +1 -0
- package/dist/components/SelectSearch/SelectSearch.js +147 -145
- package/dist/components/SelectSearch/types.d.ts +2 -0
- package/dist/hooks/useMediaQuery/useMediaQuery.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._icon_1yk0x_2{transition:transform .3s ease-in-out}._icon_1yk0x_2 path{fill:var(--white)}._icon-container_1yk0x_8{display:flex;align-items:center;justify-content:center;transition:background-color .3s ease-in-out}._open_1yk0x_15 ._icon_1yk0x_2{transform:rotate(-180deg)}._square_1yk0x_19 ._icon_1yk0x_2 path{fill:var(--black-100)}._circle_1yk0x_23._disabled_1yk0x_23 ._icon_1yk0x_2 path,._square_1yk0x_19._disabled_1yk0x_23 ._icon_1yk0x_2 path{fill:var(--white)}._open_1yk0x_15._square_1yk0x_19 ._icon_1yk0x_2 path{fill:var(--white)}._open_1yk0x_15._circle_1yk0x_23._disabled_1yk0x_23 ._icon_1yk0x_2 path,._open_1yk0x_15._square_1yk0x_19._disabled_1yk0x_23 ._icon_1yk0x_2 path{fill:var(--white)}._accordion_1yk0x_37{padding-bottom:var(--accordion-space);border-bottom:1px solid var(--black-20)}._accordion_1yk0x_37._is-link_1yk0x_41{border:none}._header_1yk0x_45{display:flex;gap:var(--mimir-space-m);align-items:flex-start;justify-content:space-between;width:100%;font-weight:var(--mimir-font-weight-text-medium);font-family:var(--mimir-font-montserrat);text-align:left;border:none;cursor:pointer}._header_1yk0x_45._disabled_1yk0x_23{cursor:not-allowed}._title_1yk0x_61{font-size:var(--accordion-text-size)}._title-uppercase_1yk0x_64{text-transform:uppercase}._circle_1yk0x_23{min-width:var(--accordion-icon-circle-width);min-height:var(--accordion-icon-circle-height);background-color:var(--black-80);border-radius:50%}._square_1yk0x_19{min-width:var(--mimir-accordion-icon-square-width);min-height:var(--mimir-accordion-icon-square-height);background-color:var(--white);border-radius:var(--mimir-control-radius)}._circle_1yk0x_23._disabled_1yk0x_23,._square_1yk0x_19._disabled_1yk0x_23{background-color:var(--disabled);cursor:not-allowed}._panel_1yk0x_88{margin-top:var(--accordion-panel-space)}._panel_1yk0x_88._is-link_1yk0x_41{margin-top:var(--mimir-space-xs)}._open_1yk0x_15,._open_1yk0x_15._circle_1yk0x_23{background-color:var(--sapphire-100)}._open_1yk0x_15._square_1yk0x_19{background-color:var(--black-80)}._open_1yk0x_15._circle_1yk0x_23._disabled_1yk0x_23,._open_1yk0x_15._square_1yk0x_19._disabled_1yk0x_23{background-color:var(--disabled)}._link-open_1yk0x_108{transform:rotate(-180deg)}._m_1yk0x_112{--accordion-space: var(--mimir-space-xl);--accordion-text-size: var(--mimir-size-text-xl2);--accordion-icon-circle-width: var(--mimir-accordion-icon-circle-size-m);--accordion-icon-circle-height: var(--mimir-accordion-icon-circle-size-m);--mimir-accordion-icon-square-width: var( --mimir-accordion-icon-square-size-m );--mimir-accordion-icon-square-height: var( --mimir-accordion-icon-square-size-m );--accordion-panel-space: var(--mimir-space-xl)}._s_1yk0x_19{--accordion-space: var(--mimir-space-m);--accordion-text-size: var(--mimir-size-text-l);--accordion-icon-circle-width: var(--mimir-accordion-icon-circle-size-s);--accordion-icon-circle-height: var(--mimir-accordion-icon-circle-size-s);--mimir-accordion-icon-square-width: var( --mimir-accordion-icon-square-size-s );--mimir-accordion-icon-square-height: var( --mimir-accordion-icon-square-size-s );--accordion-panel-space: var(--mimir-space-m)}._wrapper-button_1yk0x_140{width:100%}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-
|
|
1
|
+
._select-search_1f5f7_2{position:relative}._select-search_1f5f7_2._disabled_1f5f7_5{cursor:not-allowed}._container_1f5f7_9{position:relative;z-index:1;display:block;gap:var(--mimir-select-search-gap);align-items:center;justify-content:space-between;height:var(--mimir-select-search-height);background-color:var(--black-5);border-radius:var(--mimir-select-search-radius)}._container-open_1f5f7_20{border-bottom:1px solid var(--citrine-100)}._full_1f5f7_24{width:100%}._selected-icon_1f5f7_28 path{fill:var(--sapphire-100)}._selector-icon-open_1f5f7_32{transform:rotate(180deg)}._button_1f5f7_36{display:flex;align-items:center;background:none;border:none;cursor:pointer}._button_1f5f7_36._disabled_1f5f7_5{cursor:not-allowed}._button_1f5f7_36._disabled_1f5f7_5 ._selector-icon_1f5f7_32 path{fill:var(--white)}._options_1f5f7_50{position:absolute;z-index:0;width:100%;min-height:100%;max-height:var(--mimir-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)}._options_1f5f7_50._top_1f5f7_61{bottom:90%;margin-bottom:1px;padding-bottom:5px;border-radius:var(--mimir-select-search-radius) var(--mimir-select-search-radius) 0 0}._options_1f5f7_50._bottom_1f5f7_67{top:90%;margin-top:1px;padding-top:5px;border-radius:0 0 var(--mimir-select-search-radius) var(--mimir-select-search-radius)}._options_1f5f7_50::-webkit-scrollbar{width:3px}._options_1f5f7_50::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:var(--mimir-control-radius-xs2)}._options_1f5f7_50::-webkit-scrollbar-track{background-color:var(--white)}@media (max-width: 600px){._options_1f5f7_50{max-height:var(--mimir-select-search-options-height-mobile)}}._no-options_1f5f7_89{height:100%;padding:var(--mimir-select-search-option-space);color:var(--black-80)}._m_1f5f7_95{--mimir-select-search-height: var(--mimir-select-search-height-l);--mimir-select-search-space: var(--mimir-space-xss) var(--mimir-space-m);--mimir-select-search-radius: var(--mimir-control-radius);--mimir-select-search-gap: var(--mimir-space-2xs);--mimir-select-search-btn-space: var(--mimir-space-m) var(--mimir-space-m) var(--mimir-space-m) var(--mimir-space-xs);--mimir-select-search-option-space: var(--mimir-space-2s) var(--mimir-space-m);--mimir-select-search-options-height: var( --mimir-select-search-options-height-mobile );--clear-right: var(--mimir-space-2xxl);--select-input-disabled-margin-right: var(--mimir-space-l)}._l_1f5f7_110{--mimir-select-search-height: var(--mimir-select-search-height-xxl);--mimir-select-search-space: var(--mimir-space-xss) var(--mimir-space-m);--mimir-select-search-radius: var(--mimir-control-radius-s);--mimir-select-search-gap: var(--mimir-space-xs);--mimir-select-search-btn-space: var(--mimir-space-l) var(--mimir-space-m) var(--mimir-space-l) var(--mimir-space-xs);--mimir-select-search-option-space: var(--mimir-space-2l) var(--mimir-space-m);--mimir-select-search-options-height: var( --mimir-select-search-options-height-desktop );--clear-right: var(--mimir-space-4xl);--select-input-disabled-margin-right: var(--mimir-space-1xl)}._select-input_1f5f7_125{width:100%!important}._select-input-disabled_1f5f7_128{margin-right:var(--select-input-disabled-margin-right)}._select-input_1f5f7_125:last-child{padding-right:var(--mimir-space-4xl)}._option_1f5f7_50{display:flex;gap:var(--mimir-space-m);align-items:center;width:100%;padding:var(--mimir-select-search-option-space);cursor:pointer;transition:background-color .2s ease-in-out}._option-active_1f5f7_144{background-color:var(--black-5)}._option-inner_1f5f7_147{display:flex;flex-direction:column;gap:var(--mimir-space-xs);width:100%}._right-slot_1f5f7_154{order:2;padding-top:0!important}._required-mark_1f5f7_159{order:1;margin-right:var(--mimir-space-xs)}._clear_1f5f7_164{position:absolute;top:50%;right:var(--clear-right);transform:translateY(-50%)}._clear_1f5f7_164._disabled_1f5f7_5{cursor:not-allowed}._clear_1f5f7_164._disabled_1f5f7_5 ._icon-button_1f5f7_173 path{fill:var(--white)}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { c as
|
|
3
|
-
import
|
|
1
|
+
import { jsxs as A, Fragment as K, jsx as I } from "react/jsx-runtime";
|
|
2
|
+
import { c as D } from "../../index-DIxK0V-G.js";
|
|
3
|
+
import b, { createContext as M, useRef as oe, Fragment as re, useReducer as pe, useMemo as O, useId as le, useEffect as se, useState as ae, useContext as U, forwardRef as me } from "react";
|
|
4
4
|
import { AccordionItem as fe } from "./AccordionItem/AccordionItem.js";
|
|
5
|
-
import { EAccordionButtonType as
|
|
6
|
-
import { useMediaQuery as
|
|
7
|
-
import { EMediaQuery as
|
|
8
|
-
import { Icon as
|
|
9
|
-
import { Link as
|
|
10
|
-
import { M as ee, W as q, y as j, T as
|
|
11
|
-
import { w as
|
|
12
|
-
import { e as
|
|
13
|
-
import { c as
|
|
14
|
-
import { r as
|
|
15
|
-
import '../../assets/Accordion.css';let
|
|
5
|
+
import { EAccordionButtonType as g, EAccordionSize as B, EAccordionLinkIconSize as J, EAccordionButtonStyle as _e, EAccordionIconType as Y, EAccordionButtonIconSize as Z } from "./constants.js";
|
|
6
|
+
import { useMediaQuery as ye } from "../../hooks/useMediaQuery/useMediaQuery.js";
|
|
7
|
+
import { EMediaQuery as Ee } from "../../hooks/useMediaQuery/constants.js";
|
|
8
|
+
import { Icon as Se } from "../../icons/Icon.js";
|
|
9
|
+
import { Link as ke } from "../AnchorLink/Link.js";
|
|
10
|
+
import { M as ee, W as q, y as j, T as Ie, o as $, a as W, H as Q, I as ce, $ as be, b as ve, D as te, u as xe, c as T } from "../../keyboard-mgWkd2Vh.js";
|
|
11
|
+
import { w as he } from "../../use-active-press-CqLGIFz7.js";
|
|
12
|
+
import { e as De } from "../../use-resolve-button-type-DhFdPxnv.js";
|
|
13
|
+
import { c as $e, i as R, u as Pe, x as ge, R as Te, s as we } from "../../open-closed-D2VjDhAN.js";
|
|
14
|
+
import { r as Ne } from "../../bugs-diTMAGNw.js";
|
|
15
|
+
import '../../assets/Accordion.css';let Ce = M(() => {
|
|
16
16
|
});
|
|
17
|
-
function
|
|
18
|
-
return
|
|
17
|
+
function Ae({ value: e, children: t }) {
|
|
18
|
+
return b.createElement(Ce.Provider, { value: e }, t);
|
|
19
19
|
}
|
|
20
|
-
var
|
|
21
|
-
let
|
|
20
|
+
var ne;
|
|
21
|
+
let Be = (ne = b.startTransition) != null ? ne : function(e) {
|
|
22
22
|
e();
|
|
23
23
|
};
|
|
24
24
|
var Oe = ((e) => (e[e.Open = 0] = "Open", e[e.Closed = 1] = "Closed", e))(Oe || {}), Re = ((e) => (e[e.ToggleDisclosure = 0] = "ToggleDisclosure", e[e.CloseDisclosure = 1] = "CloseDisclosure", e[e.SetButtonId = 2] = "SetButtonId", e[e.SetPanelId = 3] = "SetPanelId", e[e.SetButtonElement = 4] = "SetButtonElement", e[e.SetPanelElement = 5] = "SetPanelElement", e))(Re || {});
|
|
@@ -60,148 +60,148 @@ function Le(e, t) {
|
|
|
60
60
|
}
|
|
61
61
|
let He = re;
|
|
62
62
|
function Ke(e, t) {
|
|
63
|
-
let { defaultOpen: u = !1, ...p } = e, s =
|
|
63
|
+
let { defaultOpen: u = !1, ...p } = e, s = oe(null), m = j(t, Ie((c) => {
|
|
64
64
|
s.current = c;
|
|
65
|
-
}, e.as === void 0 || e.as === re)), a = pe(Le, { disclosureState: u ? 0 : 1, buttonElement: null, panelElement: null, buttonId: null, panelId: null }), [{ disclosureState:
|
|
66
|
-
|
|
67
|
-
let f =
|
|
65
|
+
}, e.as === void 0 || e.as === re)), a = pe(Le, { disclosureState: u ? 0 : 1, buttonElement: null, panelElement: null, buttonId: null, panelId: null }), [{ disclosureState: n, buttonId: r }, y] = a, l = $((c) => {
|
|
66
|
+
y({ type: 1 });
|
|
67
|
+
let f = xe(s);
|
|
68
68
|
if (!f || !r) return;
|
|
69
69
|
let _ = c ? c instanceof HTMLElement ? c : c.current instanceof HTMLElement ? c.current : f.getElementById(r) : f.getElementById(r);
|
|
70
70
|
_ == null || _.focus();
|
|
71
|
-
}),
|
|
72
|
-
return
|
|
71
|
+
}), v = O(() => ({ close: l }), [l]), E = O(() => ({ open: n === 0, close: l }), [n, l]), S = { ref: m };
|
|
72
|
+
return b.createElement(V.Provider, { value: a }, b.createElement(X.Provider, { value: v }, b.createElement(Ae, { value: l }, b.createElement($e, { value: W(n, { 0: R.Open, 1: R.Closed }) }, Q({ ourProps: S, theirProps: p, slot: E, defaultTag: He, name: "Disclosure" })))));
|
|
73
73
|
}
|
|
74
74
|
let Ue = "button";
|
|
75
75
|
function qe(e, t) {
|
|
76
|
-
let u = le(), { id: p = `headlessui-disclosure-button-${u}`, disabled: s = !1, autoFocus: m = !1, ...a } = e, [
|
|
76
|
+
let u = le(), { id: p = `headlessui-disclosure-button-${u}`, disabled: s = !1, autoFocus: m = !1, ...a } = e, [n, r] = z("Disclosure.Button"), y = Fe(), l = y === null ? !1 : y === n.panelId, v = oe(null), E = j(v, t, $((i) => {
|
|
77
77
|
if (!l) return r({ type: 4, element: i });
|
|
78
|
-
})),
|
|
78
|
+
})), S = ce();
|
|
79
79
|
se(() => {
|
|
80
80
|
if (!l) return r({ type: 2, buttonId: p }), () => {
|
|
81
81
|
r({ type: 2, buttonId: null });
|
|
82
82
|
};
|
|
83
83
|
}, [p, r, l]);
|
|
84
|
-
let c =
|
|
85
|
-
var
|
|
84
|
+
let c = $((i) => {
|
|
85
|
+
var o;
|
|
86
86
|
if (l) {
|
|
87
|
-
if (
|
|
87
|
+
if (n.disclosureState === 1) return;
|
|
88
88
|
switch (i.key) {
|
|
89
|
-
case
|
|
90
|
-
case
|
|
91
|
-
i.preventDefault(), i.stopPropagation(), r({ type: 0 }), (
|
|
89
|
+
case T.Space:
|
|
90
|
+
case T.Enter:
|
|
91
|
+
i.preventDefault(), i.stopPropagation(), r({ type: 0 }), (o = n.buttonElement) == null || o.focus();
|
|
92
92
|
break;
|
|
93
93
|
}
|
|
94
94
|
} else switch (i.key) {
|
|
95
|
-
case
|
|
96
|
-
case
|
|
95
|
+
case T.Space:
|
|
96
|
+
case T.Enter:
|
|
97
97
|
i.preventDefault(), i.stopPropagation(), r({ type: 0 });
|
|
98
98
|
break;
|
|
99
99
|
}
|
|
100
|
-
}), f =
|
|
100
|
+
}), f = $((i) => {
|
|
101
101
|
switch (i.key) {
|
|
102
|
-
case
|
|
102
|
+
case T.Space:
|
|
103
103
|
i.preventDefault();
|
|
104
104
|
break;
|
|
105
105
|
}
|
|
106
|
-
}), _ =
|
|
107
|
-
var
|
|
108
|
-
|
|
109
|
-
}), { isFocusVisible:
|
|
110
|
-
return Q({ mergeRefs:
|
|
106
|
+
}), _ = $((i) => {
|
|
107
|
+
var o;
|
|
108
|
+
Ne(i.currentTarget) || s || (l ? (r({ type: 0 }), (o = n.buttonElement) == null || o.focus()) : r({ type: 0 }));
|
|
109
|
+
}), { isFocusVisible: x, focusProps: h } = be({ autoFocus: m }), { isHovered: w, hoverProps: N } = ve({ isDisabled: s }), { pressed: k, pressProps: P } = he({ disabled: s }), F = O(() => ({ open: n.disclosureState === 0, hover: w, active: k, disabled: s, focus: x, autofocus: m }), [n, w, k, x, s, m]), C = De(e, n.buttonElement), L = l ? te({ ref: E, type: C, disabled: s || void 0, autoFocus: m, onKeyDown: c, onClick: _ }, h, N, P) : te({ ref: E, id: p, type: C, "aria-expanded": n.disclosureState === 0, "aria-controls": n.panelElement ? n.panelId : void 0, disabled: s || void 0, autoFocus: m, onKeyDown: c, onKeyUp: f, onClick: _ }, h, N, P);
|
|
110
|
+
return Q({ mergeRefs: S, ourProps: L, theirProps: a, slot: F, defaultTag: Ue, name: "Disclosure.Button" });
|
|
111
111
|
}
|
|
112
112
|
let je = "div", We = ee.RenderStrategy | ee.Static;
|
|
113
113
|
function Qe(e, t) {
|
|
114
|
-
let u = le(), { id: p = `headlessui-disclosure-panel-${u}`, transition: s = !1, ...m } = e, [a,
|
|
115
|
-
|
|
116
|
-
}),
|
|
117
|
-
se(() => (
|
|
118
|
-
|
|
119
|
-
}), [p,
|
|
120
|
-
let
|
|
121
|
-
return
|
|
114
|
+
let u = le(), { id: p = `headlessui-disclosure-panel-${u}`, transition: s = !1, ...m } = e, [a, n] = z("Disclosure.Panel"), { close: r } = ie("Disclosure.Panel"), y = ce(), [l, v] = ae(null), E = j(t, $((h) => {
|
|
115
|
+
Be(() => n({ type: 5, element: h }));
|
|
116
|
+
}), v);
|
|
117
|
+
se(() => (n({ type: 3, panelId: p }), () => {
|
|
118
|
+
n({ type: 3, panelId: null });
|
|
119
|
+
}), [p, n]);
|
|
120
|
+
let S = Pe(), [c, f] = ge(s, l, S !== null ? (S & R.Open) === R.Open : a.disclosureState === 0), _ = O(() => ({ open: a.disclosureState === 0, close: r }), [a.disclosureState, r]), x = { ref: E, id: p, ...Te(f) };
|
|
121
|
+
return b.createElement(we, null, b.createElement(G.Provider, { value: a.panelId }, Q({ mergeRefs: y, ourProps: x, theirProps: m, slot: _, defaultTag: je, features: We, visible: c, name: "Disclosure.Panel" })));
|
|
122
122
|
}
|
|
123
123
|
let Ve = q(Ke), ue = q(qe), de = q(Qe), ze = Object.assign(Ve, { Button: ue, Panel: de });
|
|
124
|
-
const Xe = "
|
|
125
|
-
|
|
126
|
-
"
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
"
|
|
133
|
-
|
|
134
|
-
|
|
124
|
+
const Xe = "_icon_1yk0x_2", Ge = "_open_1yk0x_15", Je = "_square_1yk0x_19", Ye = "_circle_1yk0x_23", Ze = "_disabled_1yk0x_23", et = "_accordion_1yk0x_37", tt = "_header_1yk0x_45", nt = "_title_1yk0x_61", ot = "_panel_1yk0x_88", rt = "_m_1yk0x_112", lt = "_s_1yk0x_19", d = {
|
|
125
|
+
icon: Xe,
|
|
126
|
+
"icon-container": "_icon-container_1yk0x_8",
|
|
127
|
+
open: Ge,
|
|
128
|
+
square: Je,
|
|
129
|
+
circle: Ye,
|
|
130
|
+
disabled: Ze,
|
|
131
|
+
accordion: et,
|
|
132
|
+
"is-link": "_is-link_1yk0x_41",
|
|
133
|
+
header: tt,
|
|
134
|
+
title: nt,
|
|
135
|
+
"title-uppercase": "_title-uppercase_1yk0x_64",
|
|
135
136
|
panel: ot,
|
|
136
|
-
open:
|
|
137
|
-
"link-open": "_link-open_1k9to_102",
|
|
137
|
+
"link-open": "_link-open_1yk0x_108",
|
|
138
138
|
m: rt,
|
|
139
139
|
s: lt,
|
|
140
|
-
"wrapper-button": "_wrapper-
|
|
141
|
-
},
|
|
140
|
+
"wrapper-button": "_wrapper-button_1yk0x_140"
|
|
141
|
+
}, It = me(
|
|
142
142
|
({
|
|
143
143
|
title: e,
|
|
144
144
|
disabled: t,
|
|
145
|
-
buttonType: u =
|
|
145
|
+
buttonType: u = g.BUTTON,
|
|
146
146
|
children: p,
|
|
147
147
|
showTitleByDefault: s = !0,
|
|
148
148
|
linkClassName: m,
|
|
149
|
-
size: a =
|
|
150
|
-
titleUppercase:
|
|
149
|
+
size: a = B.M,
|
|
150
|
+
titleUppercase: n,
|
|
151
151
|
buttonStyle: r = _e.CIRCLE,
|
|
152
|
-
iconType:
|
|
152
|
+
iconType: y = Y.ARROW,
|
|
153
153
|
classNameTitle: l,
|
|
154
|
-
classNameContent:
|
|
155
|
-
classNameAccordion:
|
|
156
|
-
classNameIconButton:
|
|
154
|
+
classNameContent: v,
|
|
155
|
+
classNameAccordion: E,
|
|
156
|
+
classNameIconButton: S,
|
|
157
157
|
subtitleNode: c,
|
|
158
158
|
onlyOpenSubtitleNode: f,
|
|
159
159
|
classNameSubtitleContainer: _
|
|
160
|
-
},
|
|
161
|
-
const [
|
|
162
|
-
[d["is-link"]]:
|
|
160
|
+
}, x) => {
|
|
161
|
+
const [h, w] = ae(!1), N = ye(Ee.XS1), k = u === g.LINK, P = {
|
|
162
|
+
[d["is-link"]]: k
|
|
163
163
|
}, F = () => {
|
|
164
|
-
t ||
|
|
165
|
-
},
|
|
164
|
+
t || w((o) => !o);
|
|
165
|
+
}, C = a === B.S ? J.S : J.M, L = (o) => ({
|
|
166
166
|
variant: "anchor",
|
|
167
|
-
size:
|
|
167
|
+
size: N ? "s" : "l",
|
|
168
168
|
rightIcon: {
|
|
169
|
-
iconName:
|
|
170
|
-
className:
|
|
171
|
-
[d["link-open"]]:
|
|
169
|
+
iconName: C,
|
|
170
|
+
className: D({
|
|
171
|
+
[d["link-open"]]: o
|
|
172
172
|
})
|
|
173
173
|
}
|
|
174
|
-
}), i = (
|
|
175
|
-
const H = () =>
|
|
174
|
+
}), i = (o) => {
|
|
175
|
+
const H = () => y === Y.DROPDOWN ? a === B.S ? "DropdownArrowBottom16px" : "DropdownArrowDown24px" : a === B.S ? Z.S : Z.M;
|
|
176
176
|
switch (u) {
|
|
177
|
-
case
|
|
177
|
+
case g.LINK:
|
|
178
178
|
return e;
|
|
179
|
-
case
|
|
180
|
-
return /* @__PURE__ */
|
|
181
|
-
/* @__PURE__ */
|
|
179
|
+
case g.BUTTON:
|
|
180
|
+
return /* @__PURE__ */ A(K, { children: [
|
|
181
|
+
/* @__PURE__ */ I(
|
|
182
182
|
"span",
|
|
183
183
|
{
|
|
184
|
-
className:
|
|
184
|
+
className: D(
|
|
185
185
|
d.title,
|
|
186
186
|
l,
|
|
187
|
-
|
|
187
|
+
n && d["title-uppercase"]
|
|
188
188
|
),
|
|
189
189
|
children: e
|
|
190
190
|
}
|
|
191
191
|
),
|
|
192
|
-
/* @__PURE__ */
|
|
192
|
+
/* @__PURE__ */ I(
|
|
193
193
|
"div",
|
|
194
194
|
{
|
|
195
|
-
className:
|
|
195
|
+
className: D(
|
|
196
196
|
d["icon-container"],
|
|
197
|
-
|
|
197
|
+
o && d.open,
|
|
198
198
|
t && d.disabled,
|
|
199
199
|
d[r],
|
|
200
|
-
|
|
200
|
+
S
|
|
201
201
|
),
|
|
202
202
|
"data-testid": "accordion-icon-container",
|
|
203
|
-
children: /* @__PURE__ */
|
|
204
|
-
|
|
203
|
+
children: /* @__PURE__ */ I(
|
|
204
|
+
Se,
|
|
205
205
|
{
|
|
206
206
|
iconName: H(),
|
|
207
207
|
className: d.icon,
|
|
@@ -215,43 +215,43 @@ const Xe = "_accordion_1k9to_2", Ge = "_header_1k9to_13", Je = "_disabled_1k9to_
|
|
|
215
215
|
return null;
|
|
216
216
|
}
|
|
217
217
|
};
|
|
218
|
-
return /* @__PURE__ */
|
|
219
|
-
/* @__PURE__ */
|
|
218
|
+
return /* @__PURE__ */ A(K, { children: [
|
|
219
|
+
/* @__PURE__ */ I(
|
|
220
220
|
"div",
|
|
221
221
|
{
|
|
222
|
-
className:
|
|
222
|
+
className: D(
|
|
223
223
|
d.accordion,
|
|
224
224
|
d[a],
|
|
225
|
-
|
|
226
|
-
|
|
225
|
+
P,
|
|
226
|
+
E
|
|
227
227
|
),
|
|
228
|
-
children: /* @__PURE__ */
|
|
229
|
-
(!
|
|
228
|
+
children: /* @__PURE__ */ I(ze, { ref: x, children: ({ open: o, close: H }) => /* @__PURE__ */ A(K, { children: [
|
|
229
|
+
(!o || s) && /* @__PURE__ */ I(
|
|
230
230
|
ue,
|
|
231
231
|
{
|
|
232
232
|
disabled: t,
|
|
233
|
-
as:
|
|
233
|
+
as: k ? ke : g.BUTTON,
|
|
234
234
|
onClick: F,
|
|
235
|
-
className:
|
|
236
|
-
[d.header]: !
|
|
235
|
+
className: D({
|
|
236
|
+
[d.header]: !k,
|
|
237
237
|
[d.disabled]: t,
|
|
238
|
-
[m ?? ""]:
|
|
238
|
+
[m ?? ""]: k && m
|
|
239
239
|
}),
|
|
240
|
-
...
|
|
241
|
-
children: (!
|
|
240
|
+
...k ? L(o) : {},
|
|
241
|
+
children: (!o || s) && i(o)
|
|
242
242
|
}
|
|
243
243
|
),
|
|
244
|
-
|
|
244
|
+
o && /* @__PURE__ */ I(
|
|
245
245
|
de,
|
|
246
246
|
{
|
|
247
247
|
"data-testid": "accordion-panel",
|
|
248
|
-
className:
|
|
248
|
+
className: D(
|
|
249
249
|
d.panel,
|
|
250
|
-
|
|
251
|
-
|
|
250
|
+
v,
|
|
251
|
+
P
|
|
252
252
|
),
|
|
253
|
-
children: /* @__PURE__ */
|
|
254
|
-
open:
|
|
253
|
+
children: /* @__PURE__ */ I(fe, { size: a, children: typeof p == "function" ? p({
|
|
254
|
+
open: o,
|
|
255
255
|
close: H
|
|
256
256
|
}) : p })
|
|
257
257
|
}
|
|
@@ -259,13 +259,13 @@ const Xe = "_accordion_1k9to_2", Ge = "_header_1k9to_13", Je = "_disabled_1k9to_
|
|
|
259
259
|
] }) })
|
|
260
260
|
}
|
|
261
261
|
),
|
|
262
|
-
(c || f) && /* @__PURE__ */
|
|
262
|
+
(c || f) && /* @__PURE__ */ A("div", { className: _, children: [
|
|
263
263
|
c,
|
|
264
|
-
|
|
264
|
+
h && f
|
|
265
265
|
] })
|
|
266
266
|
] });
|
|
267
267
|
}
|
|
268
268
|
);
|
|
269
269
|
export {
|
|
270
|
-
|
|
270
|
+
It as Accordion
|
|
271
271
|
};
|
|
@@ -49,6 +49,14 @@ type TProps = {
|
|
|
49
49
|
footer?: ReactNode | ((props: {
|
|
50
50
|
handleClose: VoidFunction;
|
|
51
51
|
}) => JSX.Element);
|
|
52
|
+
/**
|
|
53
|
+
* Дополнительный класс для title.
|
|
54
|
+
*/
|
|
55
|
+
classNameTitle?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Дополнительный класс для header.
|
|
58
|
+
*/
|
|
59
|
+
classNameHeader?: string;
|
|
52
60
|
/**
|
|
53
61
|
* Дополнительный класс для inner.
|
|
54
62
|
*/
|
|
@@ -69,5 +77,5 @@ type TProps = {
|
|
|
69
77
|
/**
|
|
70
78
|
* Компонент шторки, который может выезжать слева, справа или внизу.
|
|
71
79
|
*/
|
|
72
|
-
export declare const Drawer: ({ isOpen, onClose, title, className, unmount, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children, classNameInner, classNameFooter, closeOnClickOutside, showCloseButton }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
|
|
80
|
+
export declare const Drawer: ({ isOpen, onClose, title, className, unmount, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children, classNameTitle, classNameHeader, classNameInner, classNameFooter, closeOnClickOutside, showCloseButton }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
|
|
73
81
|
export {};
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import { jsxs as m, jsx as t, Fragment as
|
|
1
|
+
import { jsxs as m, jsx as t, Fragment as P } from "react/jsx-runtime";
|
|
2
2
|
import { c as s } from "../../index-DIxK0V-G.js";
|
|
3
|
-
import { useState as N, useRef as
|
|
3
|
+
import { useState as N, useRef as Q, useCallback as u, useEffect as F } from "react";
|
|
4
4
|
import { EDrawerPosition as w } from "./constants.js";
|
|
5
|
-
import { useMediaQuery as
|
|
6
|
-
import { EMediaQuery as
|
|
7
|
-
import { useLockBodyScroll as
|
|
8
|
-
import { useResizeObserver as
|
|
5
|
+
import { useMediaQuery as G } from "../../hooks/useMediaQuery/useMediaQuery.js";
|
|
6
|
+
import { EMediaQuery as H } from "../../hooks/useMediaQuery/constants.js";
|
|
7
|
+
import { useLockBodyScroll as K } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
|
|
8
|
+
import { useResizeObserver as V } from "../../hooks/useResizeObserver/useResizeObserver.js";
|
|
9
9
|
import { Button as k } from "../Button/Button.js";
|
|
10
|
-
import { EButtonVariantDefault as
|
|
11
|
-
import { Loader as
|
|
12
|
-
import { Portal as
|
|
13
|
-
import '../../assets/Drawer.css';const
|
|
14
|
-
drawer:
|
|
15
|
-
content:
|
|
10
|
+
import { EButtonVariantDefault as W, EButtonSize as n } from "../Button/constants.js";
|
|
11
|
+
import { Loader as Y } from "../Loader/Loader.js";
|
|
12
|
+
import { Portal as q } from "../Portal/Portal.js";
|
|
13
|
+
import '../../assets/Drawer.css';const J = "_drawer_1xs4d_3", U = "_content_1xs4d_27", Z = "_header_1xs4d_45", $ = "_title_1xs4d_59", O = "_space_1xs4d_73", ee = "_inner_1xs4d_84", te = "_button_1xs4d_87", oe = "_footer_1xs4d_92", se = "_left_1xs4d_105", re = "_right_1xs4d_109", ne = "_full_1xs4d_113", ae = "_bottom_1xs4d_123", ie = "_opened_1xs4d_140", le = "_overlay_1xs4d_196", ce = "_unmount_1xs4d_212", e = {
|
|
14
|
+
drawer: J,
|
|
15
|
+
content: U,
|
|
16
16
|
"is-loading": "_is-loading_1xs4d_41",
|
|
17
|
-
header:
|
|
17
|
+
header: Z,
|
|
18
18
|
"sticky-header": "_sticky-header_1xs4d_53",
|
|
19
|
-
title:
|
|
20
|
-
space:
|
|
21
|
-
inner:
|
|
22
|
-
button:
|
|
23
|
-
footer:
|
|
19
|
+
title: $,
|
|
20
|
+
space: O,
|
|
21
|
+
inner: ee,
|
|
22
|
+
button: te,
|
|
23
|
+
footer: oe,
|
|
24
24
|
"footer-button": "_footer-button_1xs4d_101",
|
|
25
|
-
left:
|
|
26
|
-
right:
|
|
27
|
-
full:
|
|
28
|
-
bottom:
|
|
25
|
+
left: se,
|
|
26
|
+
right: re,
|
|
27
|
+
full: ne,
|
|
28
|
+
bottom: ae,
|
|
29
29
|
"full-bottom-height": "_full-bottom-height_1xs4d_134",
|
|
30
|
-
opened:
|
|
30
|
+
opened: ie,
|
|
31
31
|
"is-closing": "_is-closing_1xs4d_159",
|
|
32
|
-
overlay:
|
|
33
|
-
unmount:
|
|
34
|
-
},
|
|
32
|
+
overlay: le,
|
|
33
|
+
unmount: ce
|
|
34
|
+
}, de = 300, we = ({
|
|
35
35
|
isOpen: r,
|
|
36
36
|
onClose: a,
|
|
37
37
|
title: E,
|
|
@@ -44,40 +44,42 @@ import '../../assets/Drawer.css';const Y = "_drawer_1xs4d_3", q = "_content_1xs4
|
|
|
44
44
|
paddingRight: S = 8,
|
|
45
45
|
footer: c,
|
|
46
46
|
children: T,
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
classNameTitle: C,
|
|
48
|
+
classNameHeader: D,
|
|
49
|
+
classNameInner: z,
|
|
50
|
+
classNameFooter: L,
|
|
49
51
|
closeOnClickOutside: h = !0,
|
|
50
52
|
showCloseButton: x = !0
|
|
51
53
|
}) => {
|
|
52
|
-
const [p, y] = N(!1), [
|
|
54
|
+
const [p, y] = N(!1), [R, b] = N(!1), g = Q(), d = G(H.XS1), { ref: A } = V({
|
|
53
55
|
enabled: l === w.BOTTOM
|
|
54
56
|
});
|
|
55
|
-
|
|
57
|
+
K({
|
|
56
58
|
on: r && !p,
|
|
57
59
|
paddingRight: S
|
|
58
60
|
});
|
|
59
61
|
const o = u(() => {
|
|
60
62
|
a && (y(!0), g.current = setTimeout(() => {
|
|
61
63
|
a(), y(!1);
|
|
62
|
-
},
|
|
63
|
-
}, [a]),
|
|
64
|
+
}, de));
|
|
65
|
+
}, [a]), X = u(() => {
|
|
64
66
|
h && o();
|
|
65
67
|
}, [h, o]), _ = u(
|
|
66
|
-
(
|
|
67
|
-
|
|
68
|
+
(j) => {
|
|
69
|
+
j.key === "Escape" && o();
|
|
68
70
|
},
|
|
69
71
|
[o]
|
|
70
72
|
);
|
|
71
|
-
|
|
73
|
+
F(() => (r && (b(!0), window.addEventListener("keydown", _)), () => {
|
|
72
74
|
b(!1), clearTimeout(g.current), window.removeEventListener("keydown", _);
|
|
73
75
|
}), [r, _]);
|
|
74
76
|
const v = {
|
|
75
|
-
[e.opened]:
|
|
77
|
+
[e.opened]: R,
|
|
76
78
|
[e["is-closing"]]: p,
|
|
77
79
|
[e["full-bottom-height"]]: I,
|
|
78
80
|
[e["is-loading"]]: i
|
|
79
81
|
};
|
|
80
|
-
return !r && f ? null : /* @__PURE__ */ m(
|
|
82
|
+
return !r && f ? null : /* @__PURE__ */ m(q, { children: [
|
|
81
83
|
/* @__PURE__ */ t(
|
|
82
84
|
"div",
|
|
83
85
|
{
|
|
@@ -87,23 +89,23 @@ import '../../assets/Drawer.css';const Y = "_drawer_1xs4d_3", q = "_content_1xs4
|
|
|
87
89
|
children: /* @__PURE__ */ t(
|
|
88
90
|
"section",
|
|
89
91
|
{
|
|
90
|
-
ref:
|
|
92
|
+
ref: A,
|
|
91
93
|
className: s(e.content, e[l], {
|
|
92
94
|
[e["is-loading"]]: !!i
|
|
93
95
|
}),
|
|
94
|
-
children: i ? /* @__PURE__ */ t(
|
|
96
|
+
children: i ? /* @__PURE__ */ t(Y, {}) : /* @__PURE__ */ m(P, { children: [
|
|
95
97
|
/* @__PURE__ */ m(
|
|
96
98
|
"header",
|
|
97
99
|
{
|
|
98
|
-
className: s(e.header, {
|
|
100
|
+
className: s(e.header, D, {
|
|
99
101
|
[e["sticky-header"]]: B
|
|
100
102
|
}),
|
|
101
103
|
children: [
|
|
102
|
-
/* @__PURE__ */ t("h2", { className: e.title, children: E }),
|
|
104
|
+
/* @__PURE__ */ t("h2", { className: s(e.title, C), children: E }),
|
|
103
105
|
/* @__PURE__ */ t("div", { className: e.space, children: x && /* @__PURE__ */ t(
|
|
104
106
|
k,
|
|
105
107
|
{
|
|
106
|
-
variant:
|
|
108
|
+
variant: W.SecondaryWhite,
|
|
107
109
|
isIconButton: !0,
|
|
108
110
|
size: d ? n.S : n.M,
|
|
109
111
|
iconName: "Close16px",
|
|
@@ -114,8 +116,8 @@ import '../../assets/Drawer.css';const Y = "_drawer_1xs4d_3", q = "_content_1xs4
|
|
|
114
116
|
]
|
|
115
117
|
}
|
|
116
118
|
),
|
|
117
|
-
/* @__PURE__ */ t("div", { className: s(e.inner,
|
|
118
|
-
/* @__PURE__ */ t("footer", { className: s(e.footer,
|
|
119
|
+
/* @__PURE__ */ t("div", { className: s(e.inner, z), children: T }),
|
|
120
|
+
/* @__PURE__ */ t("footer", { className: s(e.footer, L), children: typeof c == "function" ? c({ handleClose: o }) : c || x && /* @__PURE__ */ t(
|
|
119
121
|
k,
|
|
120
122
|
{
|
|
121
123
|
size: d ? n.M : n.XXL,
|
|
@@ -141,12 +143,12 @@ import '../../assets/Drawer.css';const Y = "_drawer_1xs4d_3", q = "_content_1xs4
|
|
|
141
143
|
v
|
|
142
144
|
),
|
|
143
145
|
"data-testid": "drawer-overlay",
|
|
144
|
-
onClick:
|
|
146
|
+
onClick: X
|
|
145
147
|
}
|
|
146
148
|
)
|
|
147
149
|
] });
|
|
148
150
|
};
|
|
149
151
|
export {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
+
de as ANIMATION_DELAY,
|
|
153
|
+
we as Drawer
|
|
152
154
|
};
|
|
@@ -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>>;
|
|
@@ -1,111 +1,113 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { ESelectSearchSize as
|
|
5
|
-
import { mapSizeToInputSize as
|
|
6
|
-
import { Icon as
|
|
7
|
-
import { Button as
|
|
8
|
-
import { I as
|
|
9
|
-
import { EInputVariant as
|
|
10
|
-
import { H as
|
|
11
|
-
import '../../assets/SelectSearch.css';const
|
|
12
|
-
"select-search": "_select-
|
|
13
|
-
disabled:
|
|
14
|
-
container:
|
|
15
|
-
"container-open": "_container-
|
|
16
|
-
full:
|
|
17
|
-
"selected-icon": "_selected-
|
|
18
|
-
"selector-icon-open": "_selector-icon-
|
|
19
|
-
button:
|
|
20
|
-
"selector-icon": "_selector-
|
|
21
|
-
options:
|
|
22
|
-
top:
|
|
23
|
-
bottom:
|
|
24
|
-
"no-options": "_no-
|
|
25
|
-
m:
|
|
26
|
-
l:
|
|
27
|
-
"select-input": "_select-
|
|
28
|
-
"select-input-disabled": "_select-input-
|
|
29
|
-
option:
|
|
30
|
-
"option-active": "_option-
|
|
31
|
-
"option-inner": "_option-
|
|
32
|
-
"right-slot": "_right-
|
|
33
|
-
"required-mark": "_required-
|
|
34
|
-
clear:
|
|
35
|
-
"icon-button": "_icon-
|
|
36
|
-
},
|
|
37
|
-
(
|
|
1
|
+
import { jsx as a, jsxs as m, Fragment as D } from "react/jsx-runtime";
|
|
2
|
+
import { c as l } from "../../index-DIxK0V-G.js";
|
|
3
|
+
import { forwardRef as U, useState as j, useMemo as R, useCallback as $, useEffect as J } from "react";
|
|
4
|
+
import { ESelectSearchSize as g } from "./constants.js";
|
|
5
|
+
import { mapSizeToInputSize as q, getDropdownArrowIcon as Q } from "./utils.js";
|
|
6
|
+
import { Icon as A } from "../../icons/Icon.js";
|
|
7
|
+
import { Button as W } from "../Button/Button.js";
|
|
8
|
+
import { I as O } from "../../Input-BYrIS5GU.js";
|
|
9
|
+
import { EInputVariant as X } from "../Input/constants.js";
|
|
10
|
+
import { H as Y, U as B, G as M, K as Z, j as ee } from "../../combobox-BpYucpxz.js";
|
|
11
|
+
import '../../assets/SelectSearch.css';const te = "_disabled_1f5f7_5", oe = "_container_1f5f7_9", ne = "_full_1f5f7_24", se = "_button_1f5f7_36", ae = "_options_1f5f7_50", ie = "_top_1f5f7_61", le = "_bottom_1f5f7_67", re = "_m_1f5f7_95", ce = "_l_1f5f7_110", de = "_option_1f5f7_50", fe = "_clear_1f5f7_164", e = {
|
|
12
|
+
"select-search": "_select-search_1f5f7_2",
|
|
13
|
+
disabled: te,
|
|
14
|
+
container: oe,
|
|
15
|
+
"container-open": "_container-open_1f5f7_20",
|
|
16
|
+
full: ne,
|
|
17
|
+
"selected-icon": "_selected-icon_1f5f7_28",
|
|
18
|
+
"selector-icon-open": "_selector-icon-open_1f5f7_32",
|
|
19
|
+
button: se,
|
|
20
|
+
"selector-icon": "_selector-icon_1f5f7_32",
|
|
21
|
+
options: ae,
|
|
22
|
+
top: ie,
|
|
23
|
+
bottom: le,
|
|
24
|
+
"no-options": "_no-options_1f5f7_89",
|
|
25
|
+
m: re,
|
|
26
|
+
l: ce,
|
|
27
|
+
"select-input": "_select-input_1f5f7_125",
|
|
28
|
+
"select-input-disabled": "_select-input-disabled_1f5f7_128",
|
|
29
|
+
option: de,
|
|
30
|
+
"option-active": "_option-active_1f5f7_144",
|
|
31
|
+
"option-inner": "_option-inner_1f5f7_147",
|
|
32
|
+
"right-slot": "_right-slot_1f5f7_154",
|
|
33
|
+
"required-mark": "_required-mark_1f5f7_159",
|
|
34
|
+
clear: fe,
|
|
35
|
+
"icon-button": "_icon-button_1f5f7_173"
|
|
36
|
+
}, Ce = U(
|
|
37
|
+
(E, L) => {
|
|
38
38
|
const {
|
|
39
|
-
placeholder:
|
|
40
|
-
size:
|
|
41
|
-
value:
|
|
42
|
-
onChange:
|
|
43
|
-
full:
|
|
44
|
-
showArrow:
|
|
45
|
-
items:
|
|
39
|
+
placeholder: w,
|
|
40
|
+
size: i = g.L,
|
|
41
|
+
value: n,
|
|
42
|
+
onChange: s,
|
|
43
|
+
full: V,
|
|
44
|
+
showArrow: C = !0,
|
|
45
|
+
items: f = [],
|
|
46
46
|
classNameOption: F,
|
|
47
47
|
displayValue: G = "name",
|
|
48
|
-
filterOnSearch:
|
|
49
|
-
onSearch:
|
|
50
|
-
variant:
|
|
51
|
-
menuPlacement:
|
|
52
|
-
disabled:
|
|
53
|
-
searchProps:
|
|
54
|
-
withClearButton:
|
|
48
|
+
filterOnSearch: I = !0,
|
|
49
|
+
onSearch: u,
|
|
50
|
+
variant: S = X.DefaultGray,
|
|
51
|
+
menuPlacement: h = "bottom",
|
|
52
|
+
disabled: r = !1,
|
|
53
|
+
searchProps: y,
|
|
54
|
+
withClearButton: b = !1,
|
|
55
55
|
disableInput: c = !1,
|
|
56
|
-
autocomplete:
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
56
|
+
autocomplete: k = "on",
|
|
57
|
+
immediate: P = !1
|
|
58
|
+
} = E, N = String((n == null ? void 0 : n[G]) || ""), [d, p] = j(N), [v, _] = j(n), x = R(() => !I || n && (n.id || n.name) ? f : d.trim().toLowerCase() ? f.filter(
|
|
59
|
+
(o) => o.name.toLowerCase().includes(d.toLowerCase())
|
|
60
|
+
) : f, [d, f, n, I]), T = (o) => {
|
|
61
|
+
o ? (p(o.name), _(o), s == null || s(o)) : (p(""), _(null), s == null || s({ id: "", name: "" }));
|
|
62
|
+
}, z = $(
|
|
62
63
|
(o) => {
|
|
63
64
|
if (c) return;
|
|
64
65
|
const t = o.target.value;
|
|
65
|
-
|
|
66
|
+
p(t), u == null || u(t), !t && n && (s == null || s({ id: "", name: "" }));
|
|
66
67
|
},
|
|
67
|
-
[c,
|
|
68
|
-
),
|
|
69
|
-
|
|
68
|
+
[c, s, u, n]
|
|
69
|
+
), H = () => {
|
|
70
|
+
p(""), _(null), s == null || s({ id: "", name: "" });
|
|
70
71
|
};
|
|
71
|
-
return
|
|
72
|
-
const o = !
|
|
73
|
-
|
|
74
|
-
}, [
|
|
75
|
-
|
|
72
|
+
return J(() => {
|
|
73
|
+
const o = !n || typeof n == "object" && !Object.keys(n).length;
|
|
74
|
+
p(o ? "" : N), _(o ? null : n);
|
|
75
|
+
}, [n, N]), /* @__PURE__ */ a(
|
|
76
|
+
Y,
|
|
76
77
|
{
|
|
77
78
|
as: "div",
|
|
78
|
-
value:
|
|
79
|
-
className:
|
|
80
|
-
[e.full]:
|
|
81
|
-
[e.disabled]:
|
|
79
|
+
value: v,
|
|
80
|
+
className: l(e["select-search"], {
|
|
81
|
+
[e.full]: V,
|
|
82
|
+
[e.disabled]: r
|
|
82
83
|
}),
|
|
83
|
-
onChange:
|
|
84
|
-
ref:
|
|
85
|
-
disabled:
|
|
86
|
-
virtual: { options:
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
onChange: T,
|
|
85
|
+
ref: L,
|
|
86
|
+
disabled: r,
|
|
87
|
+
virtual: { options: x },
|
|
88
|
+
immediate: P,
|
|
89
|
+
children: ({ open: o }) => /* @__PURE__ */ m(D, { children: [
|
|
90
|
+
/* @__PURE__ */ m(
|
|
89
91
|
"div",
|
|
90
92
|
{
|
|
91
|
-
className:
|
|
93
|
+
className: l(e.container, e[i], {
|
|
92
94
|
[e["container-open"]]: o
|
|
93
95
|
}),
|
|
94
96
|
children: [
|
|
95
|
-
c && /* @__PURE__ */
|
|
96
|
-
/* @__PURE__ */
|
|
97
|
-
|
|
97
|
+
c && /* @__PURE__ */ m("div", { style: { position: "relative", width: "100%" }, children: [
|
|
98
|
+
/* @__PURE__ */ a(B, { disabled: r, style: { width: "100%" }, children: /* @__PURE__ */ a(
|
|
99
|
+
M,
|
|
98
100
|
{
|
|
99
|
-
as:
|
|
100
|
-
label:
|
|
101
|
-
size:
|
|
102
|
-
className:
|
|
103
|
-
[e["select-input-disabled"]]: c &&
|
|
101
|
+
as: O,
|
|
102
|
+
label: w,
|
|
103
|
+
size: q(i),
|
|
104
|
+
className: l(e["select-input"], {
|
|
105
|
+
[e["select-input-disabled"]]: c && b
|
|
104
106
|
}),
|
|
105
|
-
onChange:
|
|
106
|
-
value:
|
|
107
|
-
disabled:
|
|
108
|
-
variant:
|
|
107
|
+
onChange: z,
|
|
108
|
+
value: d,
|
|
109
|
+
disabled: r,
|
|
110
|
+
variant: S,
|
|
109
111
|
rightSlotClassName: e["right-slot"],
|
|
110
112
|
requiredMarkClassName: e["required-mark"],
|
|
111
113
|
"data-testid": "select-search-input",
|
|
@@ -114,110 +116,110 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
|
|
|
114
116
|
},
|
|
115
117
|
rightAddon: {
|
|
116
118
|
addonType: "icon",
|
|
117
|
-
addonContent:
|
|
119
|
+
addonContent: Q(o, i)
|
|
118
120
|
},
|
|
119
|
-
autocomplete:
|
|
120
|
-
...
|
|
121
|
+
autocomplete: k,
|
|
122
|
+
...y
|
|
121
123
|
}
|
|
122
124
|
) }),
|
|
123
|
-
|
|
124
|
-
|
|
125
|
+
b && d && /* @__PURE__ */ a(
|
|
126
|
+
W,
|
|
125
127
|
{
|
|
126
128
|
tabIndex: -1,
|
|
127
|
-
className:
|
|
128
|
-
[e.disabled]:
|
|
129
|
+
className: l(e.clear, {
|
|
130
|
+
[e.disabled]: r
|
|
129
131
|
}),
|
|
130
132
|
iconButtonClassName: e["icon-button"],
|
|
131
133
|
isIconButton: !0,
|
|
132
134
|
iconName: "Close16px",
|
|
133
135
|
size: "m-s",
|
|
134
136
|
clear: !0,
|
|
135
|
-
disabled:
|
|
137
|
+
disabled: r,
|
|
136
138
|
variant: "secondary-gray",
|
|
137
139
|
onClick: (t) => {
|
|
138
|
-
t.stopPropagation(),
|
|
140
|
+
t.stopPropagation(), H();
|
|
139
141
|
},
|
|
140
142
|
"data-testid": "clear-button"
|
|
141
143
|
}
|
|
142
144
|
)
|
|
143
145
|
] }),
|
|
144
|
-
!c && /* @__PURE__ */
|
|
145
|
-
|
|
146
|
+
!c && /* @__PURE__ */ a(
|
|
147
|
+
M,
|
|
146
148
|
{
|
|
147
|
-
as:
|
|
148
|
-
label:
|
|
149
|
-
size:
|
|
149
|
+
as: O,
|
|
150
|
+
label: w,
|
|
151
|
+
size: q(i),
|
|
150
152
|
className: e["select-input"],
|
|
151
|
-
onChange:
|
|
152
|
-
value:
|
|
153
|
-
disabled:
|
|
154
|
-
variant:
|
|
155
|
-
withClearButton:
|
|
153
|
+
onChange: z,
|
|
154
|
+
value: d,
|
|
155
|
+
disabled: r,
|
|
156
|
+
variant: S,
|
|
157
|
+
withClearButton: b,
|
|
156
158
|
rightSlotClassName: e["right-slot"],
|
|
157
159
|
requiredMarkClassName: e["required-mark"],
|
|
158
160
|
"data-testid": "select-search-input",
|
|
159
|
-
rightAddon: {
|
|
161
|
+
rightAddon: C ? {
|
|
160
162
|
addonType: "react-node",
|
|
161
|
-
addonContent:
|
|
162
|
-
|
|
163
|
+
addonContent: C && /* @__PURE__ */ a(
|
|
164
|
+
B,
|
|
163
165
|
{
|
|
164
|
-
className:
|
|
165
|
-
[e.disabled]:
|
|
166
|
+
className: l(e.button, {
|
|
167
|
+
[e.disabled]: r
|
|
166
168
|
}),
|
|
167
|
-
disabled:
|
|
168
|
-
children: /* @__PURE__ */
|
|
169
|
-
|
|
169
|
+
disabled: r,
|
|
170
|
+
children: /* @__PURE__ */ a(
|
|
171
|
+
A,
|
|
170
172
|
{
|
|
171
|
-
iconName:
|
|
172
|
-
className:
|
|
173
|
+
iconName: i == g.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
|
|
174
|
+
className: l(e["selector-icon"], {
|
|
173
175
|
[e["selector-icon-open"]]: o
|
|
174
176
|
})
|
|
175
177
|
}
|
|
176
178
|
)
|
|
177
179
|
}
|
|
178
180
|
)
|
|
179
|
-
},
|
|
181
|
+
} : void 0,
|
|
180
182
|
onFocus: (t) => {
|
|
181
183
|
c && t.target.blur();
|
|
182
184
|
},
|
|
183
|
-
autocomplete:
|
|
184
|
-
...
|
|
185
|
+
autocomplete: k,
|
|
186
|
+
...y
|
|
185
187
|
}
|
|
186
188
|
)
|
|
187
189
|
]
|
|
188
190
|
}
|
|
189
191
|
),
|
|
190
|
-
o && /* @__PURE__ */
|
|
191
|
-
|
|
192
|
+
o && /* @__PURE__ */ a(D, { children: f.length ? x.length ? /* @__PURE__ */ a(
|
|
193
|
+
Z,
|
|
192
194
|
{
|
|
193
195
|
"data-testid": "select-search-options",
|
|
194
|
-
className:
|
|
196
|
+
className: l(
|
|
195
197
|
e.options,
|
|
196
|
-
e[
|
|
197
|
-
e[
|
|
198
|
+
e[i],
|
|
199
|
+
e[h]
|
|
198
200
|
),
|
|
199
|
-
children: ({ option: t }) => /* @__PURE__ */
|
|
200
|
-
|
|
201
|
+
children: ({ option: t }) => /* @__PURE__ */ m(
|
|
202
|
+
ee,
|
|
201
203
|
{
|
|
202
204
|
value: t,
|
|
203
|
-
className: ({ focus:
|
|
205
|
+
className: ({ focus: K }) => l(
|
|
204
206
|
e.option,
|
|
205
207
|
F,
|
|
206
|
-
|
|
208
|
+
i && e[i],
|
|
207
209
|
{
|
|
208
|
-
[e["option-active"]]:
|
|
210
|
+
[e["option-active"]]: K
|
|
209
211
|
}
|
|
210
212
|
),
|
|
211
213
|
"data-testid": `select-search-option-${t.id}`,
|
|
212
214
|
children: [
|
|
213
|
-
/* @__PURE__ */
|
|
215
|
+
/* @__PURE__ */ m("div", { className: e["option-inner"], children: [
|
|
214
216
|
t.name,
|
|
215
|
-
t.bottom && /* @__PURE__ */
|
|
217
|
+
t.bottom && /* @__PURE__ */ a("div", { children: t.bottom })
|
|
216
218
|
] }),
|
|
217
|
-
|
|
218
|
-
|
|
219
|
+
v && v.id === t.id && /* @__PURE__ */ a(
|
|
220
|
+
A,
|
|
219
221
|
{
|
|
220
|
-
iconName:
|
|
222
|
+
iconName: i === g.M ? "Done16px" : "Done24px",
|
|
221
223
|
className: e["selected-icon"]
|
|
222
224
|
}
|
|
223
225
|
)
|
|
@@ -226,25 +228,25 @@ import '../../assets/SelectSearch.css';const ee = "_disabled_rphak_5", te = "_co
|
|
|
226
228
|
t.id
|
|
227
229
|
)
|
|
228
230
|
}
|
|
229
|
-
) : /* @__PURE__ */
|
|
231
|
+
) : /* @__PURE__ */ a(
|
|
230
232
|
"div",
|
|
231
233
|
{
|
|
232
|
-
className:
|
|
234
|
+
className: l(
|
|
233
235
|
e.options,
|
|
234
|
-
e[
|
|
236
|
+
e[i],
|
|
235
237
|
e["no-options"],
|
|
236
|
-
e[
|
|
238
|
+
e[h]
|
|
237
239
|
),
|
|
238
240
|
children: "Ничего не найдено"
|
|
239
241
|
}
|
|
240
|
-
) : /* @__PURE__ */
|
|
242
|
+
) : /* @__PURE__ */ a(
|
|
241
243
|
"div",
|
|
242
244
|
{
|
|
243
|
-
className:
|
|
245
|
+
className: l(
|
|
244
246
|
e.options,
|
|
245
|
-
e[
|
|
247
|
+
e[i],
|
|
246
248
|
e["no-options"],
|
|
247
|
-
e[
|
|
249
|
+
e[h]
|
|
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
|
-
|
|
260
|
+
Ce as SelectSearch
|
|
259
261
|
};
|
|
@@ -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
|
};
|
|
@@ -11,4 +11,4 @@ import { EMediaQuery, EMinMediaQuery } from './constants';
|
|
|
11
11
|
* @example
|
|
12
12
|
* const matches = useMediaQuery('(max-width: 768px)');
|
|
13
13
|
*/
|
|
14
|
-
export declare const useMediaQuery: (query: EMediaQuery | `${EMediaQuery}` | EMinMediaQuery | `${EMinMediaQuery}`) => boolean;
|
|
14
|
+
export declare const useMediaQuery: (query: EMediaQuery | `${EMediaQuery}` | EMinMediaQuery | `${EMinMediaQuery}` | string) => boolean;
|