mimir-ui-kit 1.36.10 → 1.36.11
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Drawer/Drawer.js +76 -76
- package/package.json +1 -1
@@ -1,97 +1,97 @@
|
|
1
|
-
import { jsxs as m, jsx as t, Fragment as
|
1
|
+
import { jsxs as m, jsx as t, Fragment as X } from "react/jsx-runtime";
|
2
2
|
import { c as s } from "../../index-DIxK0V-G.js";
|
3
|
-
import { useState as
|
4
|
-
import { EDrawerPosition as
|
5
|
-
import { useMediaQuery as
|
6
|
-
import { EMediaQuery as
|
7
|
-
import { useLockBodyScroll as
|
8
|
-
import { useResizeObserver as
|
9
|
-
import { Button as
|
10
|
-
import { EButtonVariantDefault as
|
11
|
-
import { Loader as
|
12
|
-
import { Portal as
|
13
|
-
import '../../assets/Drawer.css';const
|
14
|
-
drawer:
|
15
|
-
content:
|
3
|
+
import { useState as N, useRef as j, useCallback as u, useEffect as P } from "react";
|
4
|
+
import { EDrawerPosition as w } from "./constants.js";
|
5
|
+
import { useMediaQuery as Q } from "../../hooks/useMediaQuery/useMediaQuery.js";
|
6
|
+
import { EMediaQuery as F } from "../../hooks/useMediaQuery/constants.js";
|
7
|
+
import { useLockBodyScroll as G } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
|
8
|
+
import { useResizeObserver as H } from "../../hooks/useResizeObserver/useResizeObserver.js";
|
9
|
+
import { Button as k } from "../Button/Button.js";
|
10
|
+
import { EButtonVariantDefault as K, EButtonSize as n } from "../Button/constants.js";
|
11
|
+
import { Loader as V } from "../Loader/Loader.js";
|
12
|
+
import { Portal as W } from "../Portal/Portal.js";
|
13
|
+
import '../../assets/Drawer.css';const Y = "_drawer_1xs4d_3", q = "_content_1xs4d_27", J = "_header_1xs4d_45", U = "_title_1xs4d_59", Z = "_space_1xs4d_73", $ = "_inner_1xs4d_84", O = "_button_1xs4d_87", ee = "_footer_1xs4d_92", te = "_left_1xs4d_105", oe = "_right_1xs4d_109", se = "_full_1xs4d_113", re = "_bottom_1xs4d_123", ne = "_opened_1xs4d_140", ae = "_overlay_1xs4d_196", ie = "_unmount_1xs4d_212", e = {
|
14
|
+
drawer: Y,
|
15
|
+
content: q,
|
16
16
|
"is-loading": "_is-loading_1xs4d_41",
|
17
|
-
header:
|
17
|
+
header: J,
|
18
18
|
"sticky-header": "_sticky-header_1xs4d_53",
|
19
|
-
title:
|
20
|
-
space:
|
21
|
-
inner:
|
22
|
-
button:
|
23
|
-
footer:
|
19
|
+
title: U,
|
20
|
+
space: Z,
|
21
|
+
inner: $,
|
22
|
+
button: O,
|
23
|
+
footer: ee,
|
24
24
|
"footer-button": "_footer-button_1xs4d_101",
|
25
|
-
left:
|
26
|
-
right:
|
27
|
-
full:
|
28
|
-
bottom:
|
25
|
+
left: te,
|
26
|
+
right: oe,
|
27
|
+
full: se,
|
28
|
+
bottom: re,
|
29
29
|
"full-bottom-height": "_full-bottom-height_1xs4d_134",
|
30
|
-
opened:
|
30
|
+
opened: ne,
|
31
31
|
"is-closing": "_is-closing_1xs4d_159",
|
32
|
-
overlay:
|
33
|
-
unmount:
|
34
|
-
},
|
32
|
+
overlay: ae,
|
33
|
+
unmount: ie
|
34
|
+
}, le = 300, ve = ({
|
35
35
|
isOpen: r,
|
36
|
-
onClose:
|
36
|
+
onClose: a,
|
37
37
|
title: E,
|
38
38
|
className: M,
|
39
|
-
unmount:
|
40
|
-
isLoading:
|
39
|
+
unmount: f = !0,
|
40
|
+
isLoading: i = !1,
|
41
41
|
stickyHeader: B,
|
42
|
-
fullBottomHeight:
|
43
|
-
position:
|
44
|
-
paddingRight:
|
42
|
+
fullBottomHeight: I = !1,
|
43
|
+
position: l = w.RIGHT,
|
44
|
+
paddingRight: S = 8,
|
45
45
|
footer: c,
|
46
|
-
children:
|
47
|
-
classNameInner:
|
48
|
-
classNameFooter:
|
49
|
-
closeOnClickOutside:
|
50
|
-
showCloseButton:
|
46
|
+
children: T,
|
47
|
+
classNameInner: C,
|
48
|
+
classNameFooter: D,
|
49
|
+
closeOnClickOutside: h = !0,
|
50
|
+
showCloseButton: x = !0
|
51
51
|
}) => {
|
52
|
-
const [
|
53
|
-
enabled:
|
52
|
+
const [p, y] = N(!1), [z, b] = N(!1), g = j(), d = Q(F.XS1), { ref: L } = H({
|
53
|
+
enabled: l === w.BOTTOM
|
54
54
|
});
|
55
|
-
|
56
|
-
on:
|
57
|
-
paddingRight:
|
55
|
+
G({
|
56
|
+
on: r && !p,
|
57
|
+
paddingRight: S
|
58
58
|
});
|
59
|
-
const o =
|
60
|
-
|
61
|
-
|
62
|
-
},
|
63
|
-
}, [
|
64
|
-
|
65
|
-
}, [
|
66
|
-
(
|
67
|
-
|
59
|
+
const o = u(() => {
|
60
|
+
a && (y(!0), g.current = setTimeout(() => {
|
61
|
+
a(), y(!1);
|
62
|
+
}, le));
|
63
|
+
}, [a]), R = u(() => {
|
64
|
+
h && o();
|
65
|
+
}, [h, o]), _ = u(
|
66
|
+
(A) => {
|
67
|
+
A.key === "Escape" && o();
|
68
68
|
},
|
69
69
|
[o]
|
70
70
|
);
|
71
|
-
|
72
|
-
b(!1), clearTimeout(
|
71
|
+
P(() => (r && (b(!0), window.addEventListener("keydown", _)), () => {
|
72
|
+
b(!1), clearTimeout(g.current), window.removeEventListener("keydown", _);
|
73
73
|
}), [r, _]);
|
74
|
-
const
|
74
|
+
const v = {
|
75
75
|
[e.opened]: z,
|
76
|
-
[e["is-closing"]]:
|
77
|
-
[e["full-bottom-height"]]:
|
78
|
-
[e["is-loading"]]:
|
76
|
+
[e["is-closing"]]: p,
|
77
|
+
[e["full-bottom-height"]]: I,
|
78
|
+
[e["is-loading"]]: i
|
79
79
|
};
|
80
|
-
return !r &&
|
80
|
+
return !r && f ? null : /* @__PURE__ */ m(W, { children: [
|
81
81
|
/* @__PURE__ */ t(
|
82
82
|
"div",
|
83
83
|
{
|
84
84
|
"aria-hidden": !r,
|
85
85
|
role: "dialog",
|
86
|
-
className: s(e.drawer, e[
|
86
|
+
className: s(e.drawer, e[l], v, M),
|
87
87
|
children: /* @__PURE__ */ t(
|
88
88
|
"section",
|
89
89
|
{
|
90
|
-
ref:
|
91
|
-
className: s(e.content, e[
|
92
|
-
[e["is-loading"]]: !!
|
90
|
+
ref: L,
|
91
|
+
className: s(e.content, e[l], {
|
92
|
+
[e["is-loading"]]: !!i
|
93
93
|
}),
|
94
|
-
children:
|
94
|
+
children: i ? /* @__PURE__ */ t(V, {}) : /* @__PURE__ */ m(X, { children: [
|
95
95
|
/* @__PURE__ */ m(
|
96
96
|
"header",
|
97
97
|
{
|
@@ -100,10 +100,10 @@ import '../../assets/Drawer.css';const J = "_drawer_1xs4d_3", O = "_content_1xs4
|
|
100
100
|
}),
|
101
101
|
children: [
|
102
102
|
/* @__PURE__ */ t("h2", { className: e.title, children: E }),
|
103
|
-
/* @__PURE__ */ t("div", { className: e.space, children:
|
104
|
-
|
103
|
+
/* @__PURE__ */ t("div", { className: e.space, children: x && /* @__PURE__ */ t(
|
104
|
+
k,
|
105
105
|
{
|
106
|
-
variant:
|
106
|
+
variant: K.SecondaryWhite,
|
107
107
|
isIconButton: !0,
|
108
108
|
size: d ? n.S : n.M,
|
109
109
|
iconName: "Close16px",
|
@@ -114,9 +114,9 @@ import '../../assets/Drawer.css';const J = "_drawer_1xs4d_3", O = "_content_1xs4
|
|
114
114
|
]
|
115
115
|
}
|
116
116
|
),
|
117
|
-
/* @__PURE__ */ t("div", { className: s(e.inner,
|
118
|
-
/* @__PURE__ */ t("footer", { className: s(e.footer,
|
119
|
-
|
117
|
+
/* @__PURE__ */ t("div", { className: s(e.inner, C), children: T }),
|
118
|
+
/* @__PURE__ */ t("footer", { className: s(e.footer, D), children: typeof c == "function" ? c({ handleClose: o }) : c || x && /* @__PURE__ */ t(
|
119
|
+
k,
|
120
120
|
{
|
121
121
|
size: d ? n.M : n.XXL,
|
122
122
|
full: d,
|
@@ -136,17 +136,17 @@ import '../../assets/Drawer.css';const J = "_drawer_1xs4d_3", O = "_content_1xs4
|
|
136
136
|
className: s(
|
137
137
|
e.overlay,
|
138
138
|
{
|
139
|
-
[e.unmount]: !
|
139
|
+
[e.unmount]: !f
|
140
140
|
},
|
141
|
-
|
141
|
+
v
|
142
142
|
),
|
143
143
|
"data-testid": "drawer-overlay",
|
144
|
-
onClick:
|
144
|
+
onClick: R
|
145
145
|
}
|
146
146
|
)
|
147
147
|
] });
|
148
148
|
};
|
149
149
|
export {
|
150
|
-
|
151
|
-
|
150
|
+
le as ANIMATION_DELAY,
|
151
|
+
ve as Drawer
|
152
152
|
};
|