mimir-ui-kit 1.43.21 → 1.43.22
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/Drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._drawer_1cohb_2{--drawer-width: 808px;--drawer-z-index: 10000;position:fixed;z-index:10000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_1cohb_2::-webkit-scrollbar{width:3px}._drawer_1cohb_2::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._drawer_1cohb_2::-webkit-scrollbar-track{background-color:var(--white)}._drawer_1cohb_2 ._content_1cohb_26{position:relative;display:flex;flex:1;flex-direction:column;padding:var(--mimir-space-m) var(--mimir-space-xs) var(--mimir-space-3xs) var(--mimir-space-4xl);overflow:hidden;transition:all .3s ease}@media (max-width: 600px){._drawer_1cohb_2 ._content_1cohb_26{--drawer-width: 100%;padding:var(--mimir-space-m)}}._drawer_1cohb_2 ._header_1cohb_41{display:flex;gap:var(--mimir-space-xs);min-height:68px}._drawer_1cohb_2 ._header_1cohb_41:not(:last-child){margin-bottom:var(--mimir-space-2xl)}._drawer_1cohb_2 ._header_1cohb_41._sticky-header_1cohb_49{position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--black-5)}._drawer_1cohb_2 ._header_1cohb_41 ._title_1cohb_55{flex:1;align-self:flex-end;font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-xl3);line-height:var(--mimir-space-2xxl);letter-spacing:.7px}@media (max-width: 600px){._drawer_1cohb_2 ._header_1cohb_41 ._title_1cohb_55{font-size:var(--mimir-size-text-xl2);line-height:var(--mimir-line-height-text-xs)}}._drawer_1cohb_2 ._header_1cohb_41 ._space_1cohb_69{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_1cohb_2 ._header_1cohb_41{min-height:55px}._drawer_1cohb_2 ._header_1cohb_41:not(:last-child){margin-bottom:var(--mimir-space-m)}}._drawer_1cohb_2 ._inner_1cohb_80{flex:1;padding-right:var(--mimir-space-xxl);overflow-y:auto}._drawer_1cohb_2 ._inner_1cohb_80._is-loading_1cohb_85{display:flex;flex-direction:column;align-items:center;justify-content:center}@media (max-width: 600px){._drawer_1cohb_2 ._inner_1cohb_80{padding-right:0}}._drawer_1cohb_2 ._button_1cohb_96{position:absolute;top:var(--mimir-space-m);right:var(--mimir-space-m)}._drawer_1cohb_2 ._footer_1cohb_101{display:block;padding:var(--mimir-space-2xl) var(--mimir-space-xxl) var(--mimir-space-4xl) var(--mimir-space-xxl)}@media (max-width: 600px){._drawer_1cohb_2 ._footer_1cohb_101{padding:var(--mimir-space-m)}}._drawer_1cohb_2 ._footer_1cohb_101._has-scroll_1cohb_110{box-shadow:var(--mimir-modal-window-bottom-panel-shadow)}._drawer_1cohb_2 ._footer-button_1cohb_113{display:block;margin-left:auto}._drawer_1cohb_2._left_1cohb_117{top:0;left:-100%}._drawer_1cohb_2._right_1cohb_121{top:0;right:-100%}._drawer_1cohb_2._full_1cohb_125{top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:100vh;border-radius:0;transform:scale(.95);opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}._drawer_1cohb_2._bottom_1cohb_135{--drawer-width: calc(100% - var(--mimir-space-m));right:50%;bottom:-100%;left:50%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:calc(100% - var(--mimir-space-xs));border-top-left-radius:var(--mimir-control-radius);border-top-right-radius:var(--mimir-control-radius);transform:translate(-50%)}._drawer_1cohb_2._bottom_1cohb_135._full-bottom-height_1cohb_146{height:calc(100% - var(--mimir-space-xs))}._drawer_1cohb_2._bottom_1cohb_135._is-loading_1cohb_85{height:50vh}._drawer_1cohb_2._opened_1cohb_152{transition:all .3s ease;pointer-events:auto}._drawer_1cohb_2._opened_1cohb_152._left_1cohb_117{left:0%;transition:left .3s ease}._drawer_1cohb_2._opened_1cohb_152._right_1cohb_121{right:0%;transition:right .3s ease}._drawer_1cohb_2._opened_1cohb_152._bottom_1cohb_135{bottom:0%}._drawer_1cohb_2._opened_1cohb_152._full_1cohb_125{transform:scale(1);opacity:1}._drawer_1cohb_2._is-closing_1cohb_171._left_1cohb_117{left:-100%}._drawer_1cohb_2._is-closing_1cohb_171._right_1cohb_121{right:-100%}._drawer_1cohb_2._is-closing_1cohb_171._bottom_1cohb_135{bottom:-100%}._drawer_1cohb_2._is-closing_1cohb_171._full_1cohb_125{transform:scale(.95);opacity:0}@media (max-width: 1440px){._drawer_1cohb_2{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_1cohb_2{--drawer-width: 648px}}@media (max-width: 768px){._drawer_1cohb_2{--drawer-width: 584px}}@media (max-width: 600px){._drawer_1cohb_2{--drawer-width: 100%}._drawer_1cohb_2._bottom_1cohb_135{--drawer-width: calc(100% - var(--mimir-space-m))}}._overlay_1cohb_208{--overlay-z-index: 9990;position:fixed;top:0;left:0;z-index:9990;z-index:var(--overlay-z-index);width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_1cohb_208._opened_1cohb_152{opacity:1;transition:all .3s ease}._overlay_1cohb_208._opened_1cohb_152._unmount_1cohb_224{z-index:var(--overlay-z-index);-webkit-appearance:none;-moz-appearance:none;appearance:none}._overlay_1cohb_208._is-closing_1cohb_171{opacity:0;transition:all .3s ease}._overlay_1cohb_208._unmount_1cohb_224{z-index:-1;-webkit-appearance:none;-moz-appearance:none;appearance:none}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as l, Fragment as te, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { c as n } from "../../index-DIxK0V-G.js";
|
|
3
|
-
import { forwardRef as ne, useState as
|
|
3
|
+
import { forwardRef as ne, useState as p, useRef as L, useEffect as M, useCallback as g } from "react";
|
|
4
4
|
import { EDrawerPosition as R } from "./constants.js";
|
|
5
5
|
import { useContainer as re } from "./hooks.js";
|
|
6
6
|
import { ScrollWrapper as se } from "./ScrollWrapper/index.js";
|
|
7
7
|
import { useMediaQuery as ie } from "../../hooks/useMediaQuery/useMediaQuery.js";
|
|
8
|
-
import { EMediaQuery as
|
|
9
|
-
import { useLockBodyScroll as
|
|
10
|
-
import { useResizeObserver as
|
|
8
|
+
import { EMediaQuery as ce } from "../../hooks/useMediaQuery/constants.js";
|
|
9
|
+
import { useLockBodyScroll as le } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
|
|
10
|
+
import { useResizeObserver as ae } from "../../hooks/useResizeObserver/useResizeObserver.js";
|
|
11
11
|
import { Button as H } from "../Button/Button.js";
|
|
12
|
-
import { EButtonVariantDefault as
|
|
13
|
-
import { Loader as
|
|
14
|
-
import { Portal as
|
|
15
|
-
import { EScrollBarVariant as
|
|
16
|
-
import '../../assets/Drawer.css';const _e = "
|
|
12
|
+
import { EButtonVariantDefault as de, EButtonSize as a } from "../Button/constants.js";
|
|
13
|
+
import { Loader as ue } from "../Loader/Loader.js";
|
|
14
|
+
import { Portal as me } from "../Portal/Portal.js";
|
|
15
|
+
import { EScrollBarVariant as fe, EScrollBarSize as he } from "../ScrollBar/constants.js";
|
|
16
|
+
import '../../assets/Drawer.css';const _e = "_drawer_1cohb_2", be = "_content_1cohb_26", pe = "_header_1cohb_41", ge = "_title_1cohb_55", ye = "_space_1cohb_69", ve = "_inner_1cohb_80", Ce = "_button_1cohb_96", we = "_footer_1cohb_101", Ne = "_left_1cohb_117", ke = "_right_1cohb_121", Se = "_full_1cohb_125", Be = "_bottom_1cohb_135", Ee = "_opened_1cohb_152", ze = "_overlay_1cohb_208", Ie = "_unmount_1cohb_224", e = {
|
|
17
17
|
drawer: _e,
|
|
18
|
-
content:
|
|
19
|
-
header:
|
|
20
|
-
"sticky-header": "_sticky-
|
|
18
|
+
content: be,
|
|
19
|
+
header: pe,
|
|
20
|
+
"sticky-header": "_sticky-header_1cohb_49",
|
|
21
21
|
title: ge,
|
|
22
22
|
space: ye,
|
|
23
|
-
inner:
|
|
24
|
-
"is-loading": "_is-
|
|
23
|
+
inner: ve,
|
|
24
|
+
"is-loading": "_is-loading_1cohb_85",
|
|
25
25
|
button: Ce,
|
|
26
26
|
footer: we,
|
|
27
|
-
"has-scroll": "_has-
|
|
28
|
-
"footer-button": "_footer-
|
|
27
|
+
"has-scroll": "_has-scroll_1cohb_110",
|
|
28
|
+
"footer-button": "_footer-button_1cohb_113",
|
|
29
29
|
left: Ne,
|
|
30
30
|
right: ke,
|
|
31
31
|
full: Se,
|
|
32
32
|
bottom: Be,
|
|
33
|
-
"full-bottom-height": "_full-bottom-
|
|
33
|
+
"full-bottom-height": "_full-bottom-height_1cohb_146",
|
|
34
34
|
opened: Ee,
|
|
35
|
-
"is-closing": "_is-
|
|
35
|
+
"is-closing": "_is-closing_1cohb_171",
|
|
36
36
|
overlay: ze,
|
|
37
37
|
unmount: Ie
|
|
38
|
-
}, Oe = 300, Le = (
|
|
38
|
+
}, Oe = 300, Le = (d) => d ? {
|
|
39
39
|
drawer: {
|
|
40
40
|
position: "absolute",
|
|
41
41
|
zIndex: 100
|
|
@@ -45,64 +45,64 @@ import '../../assets/Drawer.css';const _e = "_drawer_pv7po_2", he = "_content_pv
|
|
|
45
45
|
zIndex: 90
|
|
46
46
|
}
|
|
47
47
|
} : {}, Ye = ne(
|
|
48
|
-
(
|
|
48
|
+
(d, T) => {
|
|
49
49
|
const {
|
|
50
50
|
as: x = "div",
|
|
51
51
|
isOpen: r,
|
|
52
|
-
onClose:
|
|
52
|
+
onClose: u,
|
|
53
53
|
title: D,
|
|
54
54
|
className: A,
|
|
55
55
|
unmount: y = !0,
|
|
56
56
|
isLoading: s = !1,
|
|
57
57
|
stickyHeader: P,
|
|
58
58
|
fullBottomHeight: X = !1,
|
|
59
|
-
position:
|
|
59
|
+
position: m = R.RIGHT,
|
|
60
60
|
paddingRight: j = 8,
|
|
61
|
-
footer:
|
|
61
|
+
footer: f,
|
|
62
62
|
children: F,
|
|
63
63
|
classNameTitle: G,
|
|
64
64
|
classNameHeader: Q,
|
|
65
65
|
classNameInner: V,
|
|
66
66
|
classNameContent: W,
|
|
67
67
|
classNameFooter: K,
|
|
68
|
-
closeOnClickOutside:
|
|
68
|
+
closeOnClickOutside: v = !0,
|
|
69
69
|
showCloseButton: C = !0,
|
|
70
|
-
getContainer:
|
|
70
|
+
getContainer: h,
|
|
71
71
|
...Y
|
|
72
|
-
} =
|
|
73
|
-
enabled:
|
|
74
|
-
}), B = re(
|
|
72
|
+
} = d, [w, N] = p(!1), [q, k] = p(!1), S = L(), _ = ie(ce.XS1), { ref: J } = ae({
|
|
73
|
+
enabled: m === R.BOTTOM
|
|
74
|
+
}), B = re(h), i = L(null), [U, Z] = p(!1);
|
|
75
75
|
M(() => {
|
|
76
|
-
const
|
|
76
|
+
const c = () => {
|
|
77
77
|
if (i.current) {
|
|
78
78
|
const { scrollHeight: ee, clientHeight: oe } = i.current;
|
|
79
79
|
Z(ee > oe);
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
|
-
|
|
83
|
-
const O = new ResizeObserver(
|
|
82
|
+
c();
|
|
83
|
+
const O = new ResizeObserver(c);
|
|
84
84
|
return i.current && O.observe(i.current), () => {
|
|
85
85
|
O.disconnect();
|
|
86
86
|
};
|
|
87
|
-
}, [r, s]),
|
|
87
|
+
}, [r, s]), le({
|
|
88
88
|
on: r && !w,
|
|
89
89
|
paddingRight: j
|
|
90
90
|
});
|
|
91
91
|
const t = g(() => {
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
u && (N(!0), S.current = setTimeout(() => {
|
|
93
|
+
u(), N(!1);
|
|
94
94
|
}, Oe));
|
|
95
|
-
}, [
|
|
96
|
-
|
|
97
|
-
}, [
|
|
98
|
-
(
|
|
99
|
-
|
|
95
|
+
}, [u]), $ = g(() => {
|
|
96
|
+
v && t();
|
|
97
|
+
}, [v, t]), b = g(
|
|
98
|
+
(c) => {
|
|
99
|
+
c.key === "Escape" && t();
|
|
100
100
|
},
|
|
101
101
|
[t]
|
|
102
102
|
);
|
|
103
|
-
M(() => (r && (k(!0), window.addEventListener("keydown",
|
|
104
|
-
k(!1), clearTimeout(S.current), window.removeEventListener("keydown",
|
|
105
|
-
}), [r,
|
|
103
|
+
M(() => (r && (k(!0), window.addEventListener("keydown", b)), () => {
|
|
104
|
+
k(!1), clearTimeout(S.current), window.removeEventListener("keydown", b);
|
|
105
|
+
}), [r, b]);
|
|
106
106
|
const E = {
|
|
107
107
|
[e.opened]: q,
|
|
108
108
|
[e["is-closing"]]: w,
|
|
@@ -111,31 +111,31 @@ import '../../assets/Drawer.css';const _e = "_drawer_pv7po_2", he = "_content_pv
|
|
|
111
111
|
};
|
|
112
112
|
if (!r && y)
|
|
113
113
|
return null;
|
|
114
|
-
const z = Le(
|
|
115
|
-
/* @__PURE__ */
|
|
114
|
+
const z = Le(h !== void 0 && h !== !1), I = /* @__PURE__ */ l(te, { children: [
|
|
115
|
+
/* @__PURE__ */ l(
|
|
116
116
|
x,
|
|
117
117
|
{
|
|
118
118
|
ref: T,
|
|
119
119
|
"aria-hidden": !r,
|
|
120
120
|
role: "dialog",
|
|
121
121
|
style: z.drawer,
|
|
122
|
-
className: n(e.drawer, e[
|
|
122
|
+
className: n(e.drawer, e[m], E, A),
|
|
123
123
|
...Y,
|
|
124
124
|
children: [
|
|
125
|
-
/* @__PURE__ */
|
|
125
|
+
/* @__PURE__ */ l(
|
|
126
126
|
"section",
|
|
127
127
|
{
|
|
128
128
|
ref: J,
|
|
129
129
|
className: n(
|
|
130
130
|
e.content,
|
|
131
131
|
W,
|
|
132
|
-
e[
|
|
132
|
+
e[m],
|
|
133
133
|
{
|
|
134
134
|
[e["is-loading"]]: !!s
|
|
135
135
|
}
|
|
136
136
|
),
|
|
137
137
|
children: [
|
|
138
|
-
/* @__PURE__ */
|
|
138
|
+
/* @__PURE__ */ l(
|
|
139
139
|
"header",
|
|
140
140
|
{
|
|
141
141
|
className: n(e.header, Q, {
|
|
@@ -146,9 +146,9 @@ import '../../assets/Drawer.css';const _e = "_drawer_pv7po_2", he = "_content_pv
|
|
|
146
146
|
/* @__PURE__ */ o("div", { className: e.space, children: C && /* @__PURE__ */ o(
|
|
147
147
|
H,
|
|
148
148
|
{
|
|
149
|
-
variant:
|
|
149
|
+
variant: de.SecondaryWhite,
|
|
150
150
|
isIconButton: !0,
|
|
151
|
-
size: _ ?
|
|
151
|
+
size: _ ? a.S : a.M,
|
|
152
152
|
iconName: "Close16px",
|
|
153
153
|
onClick: t,
|
|
154
154
|
className: e.button
|
|
@@ -168,9 +168,9 @@ import '../../assets/Drawer.css';const _e = "_drawer_pv7po_2", he = "_content_pv
|
|
|
168
168
|
},
|
|
169
169
|
V
|
|
170
170
|
),
|
|
171
|
-
variant:
|
|
172
|
-
size:
|
|
173
|
-
children: s ? /* @__PURE__ */ o(
|
|
171
|
+
variant: fe.LIGHT,
|
|
172
|
+
size: he.M,
|
|
173
|
+
children: s ? /* @__PURE__ */ o(ue, {}) : F
|
|
174
174
|
}
|
|
175
175
|
)
|
|
176
176
|
]
|
|
@@ -182,10 +182,10 @@ import '../../assets/Drawer.css';const _e = "_drawer_pv7po_2", he = "_content_pv
|
|
|
182
182
|
className: n(e.footer, K, {
|
|
183
183
|
[e["has-scroll"]]: U
|
|
184
184
|
}),
|
|
185
|
-
children: typeof
|
|
185
|
+
children: typeof f == "function" ? f({ handleClose: t }) : f || C && /* @__PURE__ */ o(
|
|
186
186
|
H,
|
|
187
187
|
{
|
|
188
|
-
size: _ ?
|
|
188
|
+
size: _ ? a.L : a.XXL,
|
|
189
189
|
full: _,
|
|
190
190
|
onClick: t,
|
|
191
191
|
className: e["footer-button"],
|
|
@@ -213,7 +213,7 @@ import '../../assets/Drawer.css';const _e = "_drawer_pv7po_2", he = "_content_pv
|
|
|
213
213
|
}
|
|
214
214
|
)
|
|
215
215
|
] });
|
|
216
|
-
return B === !1 ? I : /* @__PURE__ */ o(
|
|
216
|
+
return B === !1 ? I : /* @__PURE__ */ o(me, { element: B, children: I });
|
|
217
217
|
}
|
|
218
218
|
);
|
|
219
219
|
export {
|