@dt-dds/react-drawer 1.0.0-beta.67 → 1.0.0-beta.70
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/CHANGELOG.md +31 -0
- package/dist/index.d.mts +9 -11
- package/dist/index.d.ts +9 -11
- package/dist/index.js +70 -77
- package/dist/index.mjs +74 -81
- package/package.json +8 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# @dt-ui/react-drawer
|
|
2
2
|
|
|
3
|
+
## 1.0.0-beta.70
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- feat: update drawer design
|
|
8
|
+
|
|
9
|
+
## 1.0.0-beta.69
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- chore: update to ESLint 10
|
|
14
|
+
- chore: update to ESLint 9
|
|
15
|
+
- fix: default icon type in themes
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
- @dt-dds/react-core@1.0.0-beta.60
|
|
20
|
+
- @dt-dds/react-icon@1.0.0-beta.64
|
|
21
|
+
- @dt-dds/react-icon-button@1.0.0-beta.30
|
|
22
|
+
- @dt-dds/react-typography@1.0.0-beta.51
|
|
23
|
+
- @dt-dds/themes@1.0.0-beta.15
|
|
24
|
+
|
|
25
|
+
## 1.0.0-beta.68
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- fix: add displayName to Icon and IconButton for production builds
|
|
30
|
+
- Updated dependencies
|
|
31
|
+
- @dt-dds/react-icon@1.0.0-beta.63
|
|
32
|
+
- @dt-dds/react-icon-button@1.0.0-beta.29
|
|
33
|
+
|
|
3
34
|
## 1.0.0-beta.67
|
|
4
35
|
|
|
5
36
|
### Minor Changes
|
package/dist/index.d.mts
CHANGED
|
@@ -1,25 +1,23 @@
|
|
|
1
1
|
import { CustomTheme } from '@dt-dds/themes';
|
|
2
|
-
import
|
|
3
|
-
import { BaseProps } from '@dt-dds/react-core';
|
|
2
|
+
import { Code } from '@dt-dds/icons';
|
|
4
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
-
import
|
|
4
|
+
import { BaseProps } from '@dt-dds/react-core';
|
|
5
|
+
import React from 'react';
|
|
6
6
|
|
|
7
7
|
interface DrawerTitleProps {
|
|
8
8
|
title: string;
|
|
9
|
+
icon?: Code;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
interface
|
|
12
|
+
interface DrawerProps extends BaseProps {
|
|
12
13
|
isVisible: boolean;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
interface DrawerProps extends DrawerBaseProps {
|
|
16
|
-
setIsVisible: react.Dispatch<react.SetStateAction<boolean>>;
|
|
14
|
+
setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
|
|
17
15
|
}
|
|
18
16
|
declare const Drawer: {
|
|
19
17
|
({ isVisible, setIsVisible, children, dataTestId, }: DrawerProps): react_jsx_runtime.JSX.Element;
|
|
20
|
-
Title: ({ title }: DrawerTitleProps) => react_jsx_runtime.JSX.Element;
|
|
21
|
-
Header: ({ children }:
|
|
22
|
-
Body: ({ children, style, dataTestId }:
|
|
18
|
+
Title: ({ title, icon }: DrawerTitleProps) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
Header: ({ children }: BaseProps) => react_jsx_runtime.JSX.Element;
|
|
20
|
+
Body: ({ children, style, dataTestId }: BaseProps) => react_jsx_runtime.JSX.Element;
|
|
23
21
|
};
|
|
24
22
|
|
|
25
23
|
declare module '@emotion/react' {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,25 +1,23 @@
|
|
|
1
1
|
import { CustomTheme } from '@dt-dds/themes';
|
|
2
|
-
import
|
|
3
|
-
import { BaseProps } from '@dt-dds/react-core';
|
|
2
|
+
import { Code } from '@dt-dds/icons';
|
|
4
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
-
import
|
|
4
|
+
import { BaseProps } from '@dt-dds/react-core';
|
|
5
|
+
import React from 'react';
|
|
6
6
|
|
|
7
7
|
interface DrawerTitleProps {
|
|
8
8
|
title: string;
|
|
9
|
+
icon?: Code;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
interface
|
|
12
|
+
interface DrawerProps extends BaseProps {
|
|
12
13
|
isVisible: boolean;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
interface DrawerProps extends DrawerBaseProps {
|
|
16
|
-
setIsVisible: react.Dispatch<react.SetStateAction<boolean>>;
|
|
14
|
+
setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
|
|
17
15
|
}
|
|
18
16
|
declare const Drawer: {
|
|
19
17
|
({ isVisible, setIsVisible, children, dataTestId, }: DrawerProps): react_jsx_runtime.JSX.Element;
|
|
20
|
-
Title: ({ title }: DrawerTitleProps) => react_jsx_runtime.JSX.Element;
|
|
21
|
-
Header: ({ children }:
|
|
22
|
-
Body: ({ children, style, dataTestId }:
|
|
18
|
+
Title: ({ title, icon }: DrawerTitleProps) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
Header: ({ children }: BaseProps) => react_jsx_runtime.JSX.Element;
|
|
20
|
+
Body: ({ children, style, dataTestId }: BaseProps) => react_jsx_runtime.JSX.Element;
|
|
23
21
|
};
|
|
24
22
|
|
|
25
23
|
declare module '@emotion/react' {
|
package/dist/index.js
CHANGED
|
@@ -39,12 +39,30 @@ var import_react4 = require("react");
|
|
|
39
39
|
var import_react5 = require("@emotion/react");
|
|
40
40
|
|
|
41
41
|
// src/components/title/DrawerTitle.tsx
|
|
42
|
+
var import_react = require("@emotion/react");
|
|
43
|
+
var import_react_box = require("@dt-dds/react-box");
|
|
44
|
+
var import_react_icon = require("@dt-dds/react-icon");
|
|
42
45
|
var import_react_typography = require("@dt-dds/react-typography");
|
|
43
46
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
44
|
-
var DrawerTitle = ({ title }) =>
|
|
47
|
+
var DrawerTitle = ({ title, icon }) => {
|
|
48
|
+
const theme = (0, import_react.useTheme)();
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
50
|
+
import_react_box.Box,
|
|
51
|
+
{
|
|
52
|
+
style: {
|
|
53
|
+
flexDirection: "row",
|
|
54
|
+
gap: theme.spacing.spacing_20
|
|
55
|
+
},
|
|
56
|
+
children: [
|
|
57
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: icon }),
|
|
58
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: "content.dark", element: "h4", fontStyles: "h4Bold", children: title })
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
};
|
|
45
63
|
|
|
46
64
|
// src/components/header/DrawerHeader.tsx
|
|
47
|
-
var
|
|
65
|
+
var import_react_icon2 = require("@dt-dds/react-icon");
|
|
48
66
|
var import_react_icon_button = require("@dt-dds/react-icon-button");
|
|
49
67
|
|
|
50
68
|
// src/components/header/DrawerHeader.styled.ts
|
|
@@ -56,23 +74,19 @@ var HeaderStyled = import_styled.default.header`
|
|
|
56
74
|
align-items: flex-start;
|
|
57
75
|
padding: 0 ${theme.spacing.spacing_60} ${theme.spacing.spacing_50};
|
|
58
76
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@media only screen and (min-width: ${theme.breakpoints.mq2}px) {
|
|
64
|
-
padding: 0 ${theme.spacing.spacing_80} ${theme.spacing.spacing_50};
|
|
77
|
+
@media only screen and (min-width: ${theme.breakpoints.mq3}px) {
|
|
78
|
+
padding: 0 ${theme.spacing.spacing_70} ${theme.spacing.spacing_50};
|
|
65
79
|
}
|
|
66
80
|
`}
|
|
67
81
|
`;
|
|
68
82
|
|
|
69
83
|
// src/context/DrawerProvider.tsx
|
|
70
|
-
var
|
|
84
|
+
var import_react2 = require("react");
|
|
71
85
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
72
86
|
var DEFAULT_VALUE = {
|
|
73
87
|
handleClose: () => null
|
|
74
88
|
};
|
|
75
|
-
var DrawerContext = (0,
|
|
89
|
+
var DrawerContext = (0, import_react2.createContext)(DEFAULT_VALUE);
|
|
76
90
|
var DrawerContextProvider = ({
|
|
77
91
|
handleClose,
|
|
78
92
|
children
|
|
@@ -80,7 +94,7 @@ var DrawerContextProvider = ({
|
|
|
80
94
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DrawerContext.Provider, { value: { handleClose }, children });
|
|
81
95
|
};
|
|
82
96
|
var useDrawerContext = () => {
|
|
83
|
-
const context = (0,
|
|
97
|
+
const context = (0, import_react2.useContext)(DrawerContext);
|
|
84
98
|
if (!context) {
|
|
85
99
|
throw new Error(
|
|
86
100
|
"Drawer compound components cannot be rendered outside the Drawer component"
|
|
@@ -94,69 +108,52 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
|
94
108
|
var DrawerHeader = ({ children }) => {
|
|
95
109
|
const { handleClose } = useDrawerContext();
|
|
96
110
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(HeaderStyled, { "data-testid": "drawer-header", children: [
|
|
97
|
-
|
|
111
|
+
children,
|
|
98
112
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
99
113
|
import_react_icon_button.IconButton,
|
|
100
114
|
{
|
|
101
115
|
color: "default",
|
|
102
116
|
dataTestId: "drawer-close-button",
|
|
103
117
|
onClick: handleClose,
|
|
104
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
118
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icon2.Icon, { code: "close", size: "large" })
|
|
105
119
|
}
|
|
106
120
|
)
|
|
107
121
|
] });
|
|
108
122
|
};
|
|
109
123
|
|
|
110
|
-
// src/components/body/DrawerBody.tsx
|
|
111
|
-
var import_react2 = require("react");
|
|
112
|
-
|
|
113
124
|
// src/components/body/DrawerBody.styled.ts
|
|
114
125
|
var import_styled2 = __toESM(require("@emotion/styled"));
|
|
115
126
|
var DrawerContentStyled = import_styled2.default.section`
|
|
116
127
|
${({ theme }) => `
|
|
117
128
|
position: relative;
|
|
118
129
|
overflow: auto;
|
|
119
|
-
padding:
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
130
|
+
padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_60} 0;
|
|
131
|
+
background:
|
|
132
|
+
linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
|
|
133
|
+
linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
|
|
134
|
+
linear-gradient(${theme.palette.border.default}, ${theme.palette.border.default}) center top;
|
|
135
|
+
background-size:
|
|
136
|
+
100% 40px,
|
|
137
|
+
100% 40px,
|
|
138
|
+
100% 1px;
|
|
139
|
+
background-repeat: no-repeat;
|
|
140
|
+
background-attachment: local, local, scroll;
|
|
141
|
+
|
|
142
|
+
@media only screen and (min-width: ${theme.breakpoints.mq3}px) {
|
|
143
|
+
padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_70} 0;
|
|
123
144
|
}
|
|
124
145
|
`}
|
|
125
146
|
`;
|
|
126
|
-
var ScrollableSectionObserverStyled = import_styled2.default.div`
|
|
127
|
-
position: absolute;
|
|
128
|
-
margin-top: ${({ theme }) => theme.spacing.spacing_30};
|
|
129
|
-
`;
|
|
130
147
|
|
|
131
148
|
// src/components/body/DrawerBody.tsx
|
|
132
149
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
133
150
|
var DrawerBody = ({ children, style, dataTestId }) => {
|
|
134
|
-
|
|
135
|
-
const handleScrollClass = (isSectionScrollable) => {
|
|
136
|
-
var _a;
|
|
137
|
-
const sectionElement = (_a = scrollableSectionObserverRef.current) == null ? void 0 : _a.parentElement;
|
|
138
|
-
if (sectionElement) {
|
|
139
|
-
isSectionScrollable ? sectionElement.classList.add("hasScroll") : sectionElement.classList.remove("hasScroll");
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
(0, import_react2.useEffect)(() => {
|
|
143
|
-
if (scrollableSectionObserverRef.current) {
|
|
144
|
-
const observer = new IntersectionObserver(
|
|
145
|
-
([{ isIntersecting: isSectionObserverVisible }]) => handleScrollClass(!isSectionObserverVisible)
|
|
146
|
-
);
|
|
147
|
-
observer.observe(scrollableSectionObserverRef.current);
|
|
148
|
-
return () => observer.disconnect();
|
|
149
|
-
}
|
|
150
|
-
}, [scrollableSectionObserverRef]);
|
|
151
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
152
152
|
DrawerContentStyled,
|
|
153
153
|
{
|
|
154
154
|
"data-testid": dataTestId != null ? dataTestId : "drawer-body",
|
|
155
155
|
style,
|
|
156
|
-
children
|
|
157
|
-
children,
|
|
158
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ScrollableSectionObserverStyled, { ref: scrollableSectionObserverRef })
|
|
159
|
-
]
|
|
156
|
+
children
|
|
160
157
|
}
|
|
161
158
|
);
|
|
162
159
|
};
|
|
@@ -171,52 +168,46 @@ var GlobalStyle = import_react3.css`
|
|
|
171
168
|
}
|
|
172
169
|
`;
|
|
173
170
|
var MainContainerStyled = import_styled3.default.div`
|
|
174
|
-
width: 100%;
|
|
175
|
-
height: 100%;
|
|
176
171
|
position: fixed;
|
|
177
|
-
|
|
178
|
-
left: 0;
|
|
172
|
+
inset: 0;
|
|
179
173
|
z-index: ${import_react_core.DRAWER_Z_INDEX};
|
|
180
174
|
`;
|
|
181
175
|
var OverlayStyled = import_styled3.default.div`
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
176
|
+
position: absolute;
|
|
177
|
+
inset: 0;
|
|
178
|
+
|
|
179
|
+
${({ theme, $isVisible }) => `
|
|
186
180
|
background-color: ${theme.palette.surface.dark};
|
|
187
|
-
opacity: ${isVisible ? 0.2 : 0};
|
|
181
|
+
opacity: ${$isVisible ? 0.2 : 0};
|
|
188
182
|
transition: opacity ${theme.animations.emphasizedDecelerate.duration}
|
|
189
183
|
${theme.animations.emphasizedDecelerate.timingFunction};
|
|
190
184
|
`}
|
|
191
185
|
`;
|
|
192
186
|
var DrawerStyled = import_styled3.default.div`
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
187
|
+
display: grid;
|
|
188
|
+
grid-template-rows: auto 1fr;
|
|
189
|
+
width: 100%;
|
|
190
|
+
height: 100%;
|
|
191
|
+
position: absolute;
|
|
192
|
+
top: 0;
|
|
193
|
+
right: 0;
|
|
194
|
+
|
|
195
|
+
${({ theme, $isVisible }) => `
|
|
196
|
+
padding: ${theme.spacing.spacing_70} 0;
|
|
202
197
|
background-color: ${theme.palette.surface.contrast};
|
|
203
|
-
transform: ${isVisible ? "translateX(0)" : "translateX(100%)"};
|
|
198
|
+
transform: ${$isVisible ? "translateX(0)" : "translateX(100%)"};
|
|
204
199
|
transition: transform ${theme.animations.emphasizedDecelerate.duration}
|
|
205
200
|
${theme.animations.emphasizedDecelerate.timingFunction};
|
|
206
201
|
|
|
207
|
-
@media only screen and (min-width: ${theme.breakpoints.
|
|
202
|
+
@media only screen and (min-width: ${theme.breakpoints.mq3}px) {
|
|
208
203
|
width: 500px;
|
|
209
|
-
border-
|
|
210
|
-
${theme.radius.radius_0} ${theme.radius.radius_40};
|
|
211
|
-
box-shadow: ${theme.shadows.elevation_200};
|
|
212
|
-
padding: ${theme.spacing.s} 0;
|
|
204
|
+
border-left: 1px solid ${theme.palette.border.default};
|
|
213
205
|
}
|
|
214
206
|
`}
|
|
215
207
|
`;
|
|
216
208
|
|
|
217
209
|
// src/Drawer.tsx
|
|
218
210
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
219
|
-
var animationToMiliseconds = (duration) => parseFloat(duration.replace(/[^\d.]/g, "")) * 1e3;
|
|
220
211
|
var Drawer = ({
|
|
221
212
|
isVisible,
|
|
222
213
|
setIsVisible,
|
|
@@ -224,13 +215,14 @@ var Drawer = ({
|
|
|
224
215
|
dataTestId
|
|
225
216
|
}) => {
|
|
226
217
|
const [isTransformed, setIsTransformed] = (0, import_react4.useState)(false);
|
|
227
|
-
const theme = (0, import_react5.useTheme)();
|
|
228
218
|
const handleClose = (0, import_react4.useCallback)(() => {
|
|
229
219
|
setIsTransformed(false);
|
|
230
|
-
|
|
220
|
+
}, []);
|
|
221
|
+
const handleTransitionEnd = (0, import_react4.useCallback)(() => {
|
|
222
|
+
if (!isTransformed) {
|
|
231
223
|
setIsVisible(false);
|
|
232
|
-
}
|
|
233
|
-
}, [
|
|
224
|
+
}
|
|
225
|
+
}, [isTransformed, setIsVisible]);
|
|
234
226
|
(0, import_react4.useEffect)(() => {
|
|
235
227
|
const handleKeyDown = (event) => {
|
|
236
228
|
if (event.key === "Escape") {
|
|
@@ -249,7 +241,7 @@ var Drawer = ({
|
|
|
249
241
|
OverlayStyled,
|
|
250
242
|
{
|
|
251
243
|
"data-testid": "drawer-overlay",
|
|
252
|
-
isVisible: isTransformed,
|
|
244
|
+
$isVisible: isTransformed,
|
|
253
245
|
onClick: handleClose
|
|
254
246
|
}
|
|
255
247
|
),
|
|
@@ -257,7 +249,8 @@ var Drawer = ({
|
|
|
257
249
|
DrawerStyled,
|
|
258
250
|
{
|
|
259
251
|
"data-testid": dataTestId != null ? dataTestId : "drawer-content-container",
|
|
260
|
-
isVisible: isTransformed,
|
|
252
|
+
$isVisible: isTransformed,
|
|
253
|
+
onTransitionEnd: handleTransitionEnd,
|
|
261
254
|
children
|
|
262
255
|
}
|
|
263
256
|
)
|
package/dist/index.mjs
CHANGED
|
@@ -1,14 +1,32 @@
|
|
|
1
1
|
// src/Drawer.tsx
|
|
2
|
-
import { useCallback, useEffect
|
|
3
|
-
import {
|
|
2
|
+
import { useCallback, useEffect, useState } from "react";
|
|
3
|
+
import { Global } from "@emotion/react";
|
|
4
4
|
|
|
5
5
|
// src/components/title/DrawerTitle.tsx
|
|
6
|
+
import { useTheme } from "@emotion/react";
|
|
7
|
+
import { Box } from "@dt-dds/react-box";
|
|
8
|
+
import { Icon } from "@dt-dds/react-icon";
|
|
6
9
|
import { Typography } from "@dt-dds/react-typography";
|
|
7
|
-
import { jsx } from "react/jsx-runtime";
|
|
8
|
-
var DrawerTitle = ({ title }) =>
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var DrawerTitle = ({ title, icon }) => {
|
|
12
|
+
const theme = useTheme();
|
|
13
|
+
return /* @__PURE__ */ jsxs(
|
|
14
|
+
Box,
|
|
15
|
+
{
|
|
16
|
+
style: {
|
|
17
|
+
flexDirection: "row",
|
|
18
|
+
gap: theme.spacing.spacing_20
|
|
19
|
+
},
|
|
20
|
+
children: [
|
|
21
|
+
icon && /* @__PURE__ */ jsx(Icon, { code: icon }),
|
|
22
|
+
/* @__PURE__ */ jsx(Typography, { color: "content.dark", element: "h4", fontStyles: "h4Bold", children: title })
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
};
|
|
9
27
|
|
|
10
28
|
// src/components/header/DrawerHeader.tsx
|
|
11
|
-
import { Icon } from "@dt-dds/react-icon";
|
|
29
|
+
import { Icon as Icon2 } from "@dt-dds/react-icon";
|
|
12
30
|
import { IconButton } from "@dt-dds/react-icon-button";
|
|
13
31
|
|
|
14
32
|
// src/components/header/DrawerHeader.styled.ts
|
|
@@ -20,12 +38,8 @@ var HeaderStyled = styled.header`
|
|
|
20
38
|
align-items: flex-start;
|
|
21
39
|
padding: 0 ${theme.spacing.spacing_60} ${theme.spacing.spacing_50};
|
|
22
40
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@media only screen and (min-width: ${theme.breakpoints.mq2}px) {
|
|
28
|
-
padding: 0 ${theme.spacing.spacing_80} ${theme.spacing.spacing_50};
|
|
41
|
+
@media only screen and (min-width: ${theme.breakpoints.mq3}px) {
|
|
42
|
+
padding: 0 ${theme.spacing.spacing_70} ${theme.spacing.spacing_50};
|
|
29
43
|
}
|
|
30
44
|
`}
|
|
31
45
|
`;
|
|
@@ -54,73 +68,56 @@ var useDrawerContext = () => {
|
|
|
54
68
|
};
|
|
55
69
|
|
|
56
70
|
// src/components/header/DrawerHeader.tsx
|
|
57
|
-
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
71
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
58
72
|
var DrawerHeader = ({ children }) => {
|
|
59
73
|
const { handleClose } = useDrawerContext();
|
|
60
|
-
return /* @__PURE__ */
|
|
61
|
-
|
|
74
|
+
return /* @__PURE__ */ jsxs2(HeaderStyled, { "data-testid": "drawer-header", children: [
|
|
75
|
+
children,
|
|
62
76
|
/* @__PURE__ */ jsx3(
|
|
63
77
|
IconButton,
|
|
64
78
|
{
|
|
65
79
|
color: "default",
|
|
66
80
|
dataTestId: "drawer-close-button",
|
|
67
81
|
onClick: handleClose,
|
|
68
|
-
children: /* @__PURE__ */ jsx3(
|
|
82
|
+
children: /* @__PURE__ */ jsx3(Icon2, { code: "close", size: "large" })
|
|
69
83
|
}
|
|
70
84
|
)
|
|
71
85
|
] });
|
|
72
86
|
};
|
|
73
87
|
|
|
74
|
-
// src/components/body/DrawerBody.tsx
|
|
75
|
-
import { useEffect, useRef } from "react";
|
|
76
|
-
|
|
77
88
|
// src/components/body/DrawerBody.styled.ts
|
|
78
89
|
import styled2 from "@emotion/styled";
|
|
79
90
|
var DrawerContentStyled = styled2.section`
|
|
80
91
|
${({ theme }) => `
|
|
81
92
|
position: relative;
|
|
82
93
|
overflow: auto;
|
|
83
|
-
padding:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
94
|
+
padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_60} 0;
|
|
95
|
+
background:
|
|
96
|
+
linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
|
|
97
|
+
linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
|
|
98
|
+
linear-gradient(${theme.palette.border.default}, ${theme.palette.border.default}) center top;
|
|
99
|
+
background-size:
|
|
100
|
+
100% 40px,
|
|
101
|
+
100% 40px,
|
|
102
|
+
100% 1px;
|
|
103
|
+
background-repeat: no-repeat;
|
|
104
|
+
background-attachment: local, local, scroll;
|
|
105
|
+
|
|
106
|
+
@media only screen and (min-width: ${theme.breakpoints.mq3}px) {
|
|
107
|
+
padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_70} 0;
|
|
87
108
|
}
|
|
88
109
|
`}
|
|
89
110
|
`;
|
|
90
|
-
var ScrollableSectionObserverStyled = styled2.div`
|
|
91
|
-
position: absolute;
|
|
92
|
-
margin-top: ${({ theme }) => theme.spacing.spacing_30};
|
|
93
|
-
`;
|
|
94
111
|
|
|
95
112
|
// src/components/body/DrawerBody.tsx
|
|
96
|
-
import { jsx as jsx4
|
|
113
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
97
114
|
var DrawerBody = ({ children, style, dataTestId }) => {
|
|
98
|
-
|
|
99
|
-
const handleScrollClass = (isSectionScrollable) => {
|
|
100
|
-
var _a;
|
|
101
|
-
const sectionElement = (_a = scrollableSectionObserverRef.current) == null ? void 0 : _a.parentElement;
|
|
102
|
-
if (sectionElement) {
|
|
103
|
-
isSectionScrollable ? sectionElement.classList.add("hasScroll") : sectionElement.classList.remove("hasScroll");
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
useEffect(() => {
|
|
107
|
-
if (scrollableSectionObserverRef.current) {
|
|
108
|
-
const observer = new IntersectionObserver(
|
|
109
|
-
([{ isIntersecting: isSectionObserverVisible }]) => handleScrollClass(!isSectionObserverVisible)
|
|
110
|
-
);
|
|
111
|
-
observer.observe(scrollableSectionObserverRef.current);
|
|
112
|
-
return () => observer.disconnect();
|
|
113
|
-
}
|
|
114
|
-
}, [scrollableSectionObserverRef]);
|
|
115
|
-
return /* @__PURE__ */ jsxs2(
|
|
115
|
+
return /* @__PURE__ */ jsx4(
|
|
116
116
|
DrawerContentStyled,
|
|
117
117
|
{
|
|
118
118
|
"data-testid": dataTestId != null ? dataTestId : "drawer-body",
|
|
119
119
|
style,
|
|
120
|
-
children
|
|
121
|
-
children,
|
|
122
|
-
/* @__PURE__ */ jsx4(ScrollableSectionObserverStyled, { ref: scrollableSectionObserverRef })
|
|
123
|
-
]
|
|
120
|
+
children
|
|
124
121
|
}
|
|
125
122
|
);
|
|
126
123
|
};
|
|
@@ -135,52 +132,46 @@ var GlobalStyle = css`
|
|
|
135
132
|
}
|
|
136
133
|
`;
|
|
137
134
|
var MainContainerStyled = styled3.div`
|
|
138
|
-
width: 100%;
|
|
139
|
-
height: 100%;
|
|
140
135
|
position: fixed;
|
|
141
|
-
|
|
142
|
-
left: 0;
|
|
136
|
+
inset: 0;
|
|
143
137
|
z-index: ${DRAWER_Z_INDEX};
|
|
144
138
|
`;
|
|
145
139
|
var OverlayStyled = styled3.div`
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
140
|
+
position: absolute;
|
|
141
|
+
inset: 0;
|
|
142
|
+
|
|
143
|
+
${({ theme, $isVisible }) => `
|
|
150
144
|
background-color: ${theme.palette.surface.dark};
|
|
151
|
-
opacity: ${isVisible ? 0.2 : 0};
|
|
145
|
+
opacity: ${$isVisible ? 0.2 : 0};
|
|
152
146
|
transition: opacity ${theme.animations.emphasizedDecelerate.duration}
|
|
153
147
|
${theme.animations.emphasizedDecelerate.timingFunction};
|
|
154
148
|
`}
|
|
155
149
|
`;
|
|
156
150
|
var DrawerStyled = styled3.div`
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
151
|
+
display: grid;
|
|
152
|
+
grid-template-rows: auto 1fr;
|
|
153
|
+
width: 100%;
|
|
154
|
+
height: 100%;
|
|
155
|
+
position: absolute;
|
|
156
|
+
top: 0;
|
|
157
|
+
right: 0;
|
|
158
|
+
|
|
159
|
+
${({ theme, $isVisible }) => `
|
|
160
|
+
padding: ${theme.spacing.spacing_70} 0;
|
|
166
161
|
background-color: ${theme.palette.surface.contrast};
|
|
167
|
-
transform: ${isVisible ? "translateX(0)" : "translateX(100%)"};
|
|
162
|
+
transform: ${$isVisible ? "translateX(0)" : "translateX(100%)"};
|
|
168
163
|
transition: transform ${theme.animations.emphasizedDecelerate.duration}
|
|
169
164
|
${theme.animations.emphasizedDecelerate.timingFunction};
|
|
170
165
|
|
|
171
|
-
@media only screen and (min-width: ${theme.breakpoints.
|
|
166
|
+
@media only screen and (min-width: ${theme.breakpoints.mq3}px) {
|
|
172
167
|
width: 500px;
|
|
173
|
-
border-
|
|
174
|
-
${theme.radius.radius_0} ${theme.radius.radius_40};
|
|
175
|
-
box-shadow: ${theme.shadows.elevation_200};
|
|
176
|
-
padding: ${theme.spacing.s} 0;
|
|
168
|
+
border-left: 1px solid ${theme.palette.border.default};
|
|
177
169
|
}
|
|
178
170
|
`}
|
|
179
171
|
`;
|
|
180
172
|
|
|
181
173
|
// src/Drawer.tsx
|
|
182
174
|
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
183
|
-
var animationToMiliseconds = (duration) => parseFloat(duration.replace(/[^\d.]/g, "")) * 1e3;
|
|
184
175
|
var Drawer = ({
|
|
185
176
|
isVisible,
|
|
186
177
|
setIsVisible,
|
|
@@ -188,14 +179,15 @@ var Drawer = ({
|
|
|
188
179
|
dataTestId
|
|
189
180
|
}) => {
|
|
190
181
|
const [isTransformed, setIsTransformed] = useState(false);
|
|
191
|
-
const theme = useTheme();
|
|
192
182
|
const handleClose = useCallback(() => {
|
|
193
183
|
setIsTransformed(false);
|
|
194
|
-
|
|
184
|
+
}, []);
|
|
185
|
+
const handleTransitionEnd = useCallback(() => {
|
|
186
|
+
if (!isTransformed) {
|
|
195
187
|
setIsVisible(false);
|
|
196
|
-
}
|
|
197
|
-
}, [
|
|
198
|
-
|
|
188
|
+
}
|
|
189
|
+
}, [isTransformed, setIsVisible]);
|
|
190
|
+
useEffect(() => {
|
|
199
191
|
const handleKeyDown = (event) => {
|
|
200
192
|
if (event.key === "Escape") {
|
|
201
193
|
handleClose();
|
|
@@ -213,7 +205,7 @@ var Drawer = ({
|
|
|
213
205
|
OverlayStyled,
|
|
214
206
|
{
|
|
215
207
|
"data-testid": "drawer-overlay",
|
|
216
|
-
isVisible: isTransformed,
|
|
208
|
+
$isVisible: isTransformed,
|
|
217
209
|
onClick: handleClose
|
|
218
210
|
}
|
|
219
211
|
),
|
|
@@ -221,7 +213,8 @@ var Drawer = ({
|
|
|
221
213
|
DrawerStyled,
|
|
222
214
|
{
|
|
223
215
|
"data-testid": dataTestId != null ? dataTestId : "drawer-content-container",
|
|
224
|
-
isVisible: isTransformed,
|
|
216
|
+
$isVisible: isTransformed,
|
|
217
|
+
onTransitionEnd: handleTransitionEnd,
|
|
225
218
|
children
|
|
226
219
|
}
|
|
227
220
|
)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dt-dds/react-drawer",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.70",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./dist/index.js"
|
|
@@ -20,11 +20,13 @@
|
|
|
20
20
|
"test:update:snapshot": "jest -u"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@dt-dds/react-core": "1.0.0-beta.
|
|
24
|
-
"@dt-dds/react-icon-button": "1.0.0-beta.
|
|
25
|
-
"@dt-dds/react-typography": "1.0.0-beta.
|
|
26
|
-
"@dt-dds/react-icon": "1.0.0-beta.
|
|
27
|
-
"@dt-dds/themes": "1.0.0-beta.
|
|
23
|
+
"@dt-dds/react-core": "1.0.0-beta.60",
|
|
24
|
+
"@dt-dds/react-icon-button": "1.0.0-beta.30",
|
|
25
|
+
"@dt-dds/react-typography": "1.0.0-beta.51",
|
|
26
|
+
"@dt-dds/react-icon": "1.0.0-beta.64",
|
|
27
|
+
"@dt-dds/themes": "1.0.0-beta.15",
|
|
28
|
+
"@dt-dds/icons": "1.0.0-beta.7",
|
|
29
|
+
"@dt-dds/react-box": "1.0.0-beta.77"
|
|
28
30
|
},
|
|
29
31
|
"devDependencies": {
|
|
30
32
|
"@babel/core": "^7.22.9",
|