@dt-dds/react-drawer 1.0.0-beta.63 → 1.0.0-beta.65

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/index.js +30 -240
  3. package/dist/index.mjs +18 -231
  4. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @dt-ui/react-drawer
2
2
 
3
+ ## 1.0.0-beta.65
4
+
5
+ ### Patch Changes
6
+
7
+ - refactor: remove custom icons
8
+
9
+ ## 1.0.0-beta.64
10
+
11
+ ### Minor Changes
12
+
13
+ - feat: change Typo default color
14
+
15
+ ### Patch Changes
16
+
17
+ - fix: change color logic on typography
18
+ - Updated dependencies
19
+ - Updated dependencies
20
+ - @dt-dds/react-typography@1.0.0-beta.48
21
+ - @dt-dds/themes@1.0.0-beta.12
22
+ - @dt-dds/react-core@1.0.0-beta.57
23
+ - @dt-dds/react-icon-button@1.0.0-beta.26
24
+
3
25
  ## 1.0.0-beta.63
4
26
 
5
27
  ### Minor Changes
package/dist/index.js CHANGED
@@ -1,27 +1,10 @@
1
1
  "use strict";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
- var __defProps = Object.defineProperties;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
6
  var __getProtoOf = Object.getPrototypeOf;
10
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
- var __spreadValues = (a, b) => {
14
- for (var prop in b || (b = {}))
15
- if (__hasOwnProp.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- if (__getOwnPropSymbols)
18
- for (var prop of __getOwnPropSymbols(b)) {
19
- if (__propIsEnum.call(b, prop))
20
- __defNormalProp(a, prop, b[prop]);
21
- }
22
- return a;
23
- };
24
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
8
  var __export = (target, all) => {
26
9
  for (var name in all)
27
10
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -52,8 +35,8 @@ __export(index_exports, {
52
35
  module.exports = __toCommonJS(index_exports);
53
36
 
54
37
  // src/Drawer.tsx
55
- var import_react6 = require("react");
56
- var import_react7 = require("@emotion/react");
38
+ var import_react4 = require("react");
39
+ var import_react5 = require("@emotion/react");
57
40
 
58
41
  // src/components/title/DrawerTitle.tsx
59
42
  var import_react_typography = require("@dt-dds/react-typography");
@@ -61,6 +44,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
61
44
  var DrawerTitle = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: "content.dark", element: "h4", fontStyles: "h4", children: title });
62
45
 
63
46
  // src/components/header/DrawerHeader.tsx
47
+ var import_react_icon = require("@dt-dds/react-icon");
64
48
  var import_react_icon_button = require("@dt-dds/react-icon-button");
65
49
 
66
50
  // src/components/header/DrawerHeader.styled.ts
@@ -82,215 +66,21 @@ var HeaderStyled = import_styled.default.header`
82
66
  `}
83
67
  `;
84
68
 
85
- // ../../dt-dds-react/core/assets/svgs/AllOut.tsx
86
- var import_jsx_runtime2 = require("react/jsx-runtime");
87
-
88
- // ../../dt-dds-react/core/assets/svgs/Apis.tsx
89
- var import_jsx_runtime3 = require("react/jsx-runtime");
90
-
91
- // ../../dt-dds-react/core/assets/svgs/Apps.tsx
92
- var import_jsx_runtime4 = require("react/jsx-runtime");
93
-
94
- // ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
95
- var import_jsx_runtime5 = require("react/jsx-runtime");
96
-
97
- // ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
98
- var import_jsx_runtime6 = require("react/jsx-runtime");
99
-
100
- // ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
101
- var import_jsx_runtime7 = require("react/jsx-runtime");
102
-
103
- // ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
104
- var import_jsx_runtime8 = require("react/jsx-runtime");
105
-
106
- // ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
107
- var import_jsx_runtime9 = require("react/jsx-runtime");
108
-
109
- // ../../dt-dds-react/core/assets/svgs/Bolt.tsx
110
- var import_jsx_runtime10 = require("react/jsx-runtime");
111
-
112
- // ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
113
- var import_jsx_runtime11 = require("react/jsx-runtime");
114
-
115
- // ../../dt-dds-react/core/assets/svgs/Cancel.tsx
116
- var import_jsx_runtime12 = require("react/jsx-runtime");
117
-
118
- // ../../dt-dds-react/core/assets/svgs/Check.tsx
119
- var import_jsx_runtime13 = require("react/jsx-runtime");
120
-
121
- // ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
122
- var import_jsx_runtime14 = require("react/jsx-runtime");
123
-
124
- // ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
125
- var import_jsx_runtime15 = require("react/jsx-runtime");
126
-
127
- // ../../dt-dds-react/core/assets/svgs/Close.tsx
128
- var import_jsx_runtime16 = require("react/jsx-runtime");
129
- var CloseIcon = (props) => {
130
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
131
- "svg",
132
- __spreadProps(__spreadValues({
133
- fill: "none",
134
- height: "24",
135
- viewBox: "0 0 24 24",
136
- width: "24",
137
- xmlns: "http://www.w3.org/2000/svg"
138
- }, props), {
139
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
140
- "path",
141
- {
142
- d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
143
- fill: "currentColor"
144
- }
145
- )
146
- })
147
- );
148
- };
149
- var Close_default = CloseIcon;
150
-
151
- // ../../dt-dds-react/core/assets/svgs/Copy.tsx
152
- var import_jsx_runtime17 = require("react/jsx-runtime");
153
-
154
- // ../../dt-dds-react/core/assets/svgs/Delete.tsx
155
- var import_jsx_runtime18 = require("react/jsx-runtime");
156
-
157
- // ../../dt-dds-react/core/assets/svgs/Edit.tsx
158
- var import_jsx_runtime19 = require("react/jsx-runtime");
159
-
160
- // ../../dt-dds-react/core/assets/svgs/Email.tsx
161
- var import_jsx_runtime20 = require("react/jsx-runtime");
162
-
163
- // ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
164
- var import_jsx_runtime21 = require("react/jsx-runtime");
165
-
166
- // ../../dt-dds-react/core/assets/svgs/Error.tsx
167
- var import_react = require("@emotion/react");
168
- var import_jsx_runtime22 = require("react/jsx-runtime");
169
-
170
- // ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
171
- var import_jsx_runtime23 = require("react/jsx-runtime");
172
-
173
- // ../../dt-dds-react/core/assets/svgs/EVStation.tsx
174
- var import_jsx_runtime24 = require("react/jsx-runtime");
175
-
176
- // ../../dt-dds-react/core/assets/svgs/Info.tsx
177
- var import_jsx_runtime25 = require("react/jsx-runtime");
178
-
179
- // ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
180
- var import_jsx_runtime26 = require("react/jsx-runtime");
181
-
182
- // ../../dt-dds-react/core/assets/svgs/Input.tsx
183
- var import_jsx_runtime27 = require("react/jsx-runtime");
184
-
185
- // ../../dt-dds-react/core/assets/svgs/Language.tsx
186
- var import_jsx_runtime28 = require("react/jsx-runtime");
187
-
188
- // ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
189
- var import_jsx_runtime29 = require("react/jsx-runtime");
190
-
191
- // ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
192
- var import_jsx_runtime30 = require("react/jsx-runtime");
193
-
194
- // ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
195
- var import_jsx_runtime31 = require("react/jsx-runtime");
196
-
197
- // ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
198
- var import_jsx_runtime32 = require("react/jsx-runtime");
199
-
200
- // ../../dt-dds-react/core/assets/svgs/Menu.tsx
201
- var import_jsx_runtime33 = require("react/jsx-runtime");
202
-
203
- // ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
204
- var import_jsx_runtime34 = require("react/jsx-runtime");
205
-
206
- // ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
207
- var import_jsx_runtime35 = require("react/jsx-runtime");
208
-
209
- // ../../dt-dds-react/core/assets/svgs/NoData.tsx
210
- var import_react2 = require("@emotion/react");
211
- var import_jsx_runtime36 = require("react/jsx-runtime");
212
-
213
- // ../../dt-dds-react/core/assets/svgs/NotFound.tsx
214
- var import_jsx_runtime37 = require("react/jsx-runtime");
215
-
216
- // ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
217
- var import_jsx_runtime38 = require("react/jsx-runtime");
218
-
219
- // ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
220
- var import_jsx_runtime39 = require("react/jsx-runtime");
221
-
222
- // ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
223
- var import_jsx_runtime40 = require("react/jsx-runtime");
224
-
225
- // ../../dt-dds-react/core/assets/svgs/Payments.tsx
226
- var import_jsx_runtime41 = require("react/jsx-runtime");
227
-
228
- // ../../dt-dds-react/core/assets/svgs/Products.tsx
229
- var import_jsx_runtime42 = require("react/jsx-runtime");
230
-
231
- // ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
232
- var import_jsx_runtime43 = require("react/jsx-runtime");
233
-
234
- // ../../dt-dds-react/core/assets/svgs/Share.tsx
235
- var import_jsx_runtime44 = require("react/jsx-runtime");
236
-
237
- // ../../dt-dds-react/core/assets/svgs/Signout.tsx
238
- var import_jsx_runtime45 = require("react/jsx-runtime");
239
-
240
- // ../../dt-dds-react/core/assets/svgs/Teams.tsx
241
- var import_jsx_runtime46 = require("react/jsx-runtime");
242
-
243
- // ../../dt-dds-react/core/assets/svgs/Timeline.tsx
244
- var import_jsx_runtime47 = require("react/jsx-runtime");
245
-
246
- // ../../dt-dds-react/core/assets/svgs/Topic.tsx
247
- var import_jsx_runtime48 = require("react/jsx-runtime");
248
-
249
- // ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
250
- var import_jsx_runtime49 = require("react/jsx-runtime");
251
-
252
- // ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
253
- var import_jsx_runtime50 = require("react/jsx-runtime");
254
-
255
- // ../../dt-dds-react/core/assets/svgs/Username.tsx
256
- var import_jsx_runtime51 = require("react/jsx-runtime");
257
-
258
- // ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
259
- var import_jsx_runtime52 = require("react/jsx-runtime");
260
-
261
- // ../../dt-dds-react/core/assets/svgs/Visibility.tsx
262
- var import_jsx_runtime53 = require("react/jsx-runtime");
263
-
264
- // ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
265
- var import_jsx_runtime54 = require("react/jsx-runtime");
266
-
267
- // ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
268
- var import_jsx_runtime55 = require("react/jsx-runtime");
269
-
270
- // ../../dt-dds-react/core/assets/svgs/Warning.tsx
271
- var import_jsx_runtime56 = require("react/jsx-runtime");
272
-
273
- // ../../dt-dds-react/core/assets/svgs/Wifi.tsx
274
- var import_jsx_runtime57 = require("react/jsx-runtime");
275
-
276
- // ../../dt-dds-react/core/assets/svgs/Settings.tsx
277
- var import_jsx_runtime58 = require("react/jsx-runtime");
278
-
279
69
  // src/context/DrawerProvider.tsx
280
- var import_react3 = require("react");
281
- var import_jsx_runtime59 = require("react/jsx-runtime");
70
+ var import_react = require("react");
71
+ var import_jsx_runtime2 = require("react/jsx-runtime");
282
72
  var DEFAULT_VALUE = {
283
73
  handleClose: () => null
284
74
  };
285
- var DrawerContext = (0, import_react3.createContext)(DEFAULT_VALUE);
75
+ var DrawerContext = (0, import_react.createContext)(DEFAULT_VALUE);
286
76
  var DrawerContextProvider = ({
287
77
  handleClose,
288
78
  children
289
79
  }) => {
290
- return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DrawerContext.Provider, { value: { handleClose }, children });
80
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DrawerContext.Provider, { value: { handleClose }, children });
291
81
  };
292
82
  var useDrawerContext = () => {
293
- const context = (0, import_react3.useContext)(DrawerContext);
83
+ const context = (0, import_react.useContext)(DrawerContext);
294
84
  if (!context) {
295
85
  throw new Error(
296
86
  "Drawer compound components cannot be rendered outside the Drawer component"
@@ -300,25 +90,25 @@ var useDrawerContext = () => {
300
90
  };
301
91
 
302
92
  // src/components/header/DrawerHeader.tsx
303
- var import_jsx_runtime60 = require("react/jsx-runtime");
93
+ var import_jsx_runtime3 = require("react/jsx-runtime");
304
94
  var DrawerHeader = ({ children }) => {
305
95
  const { handleClose } = useDrawerContext();
306
- return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(HeaderStyled, { "data-testid": "drawer-header", children: [
307
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children }),
308
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
96
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(HeaderStyled, { "data-testid": "drawer-header", children: [
97
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children }),
98
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
309
99
  import_react_icon_button.IconButton,
310
100
  {
311
101
  color: "default",
312
102
  dataTestId: "drawer-close-button",
313
103
  onClick: handleClose,
314
- children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Close_default, {})
104
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icon.Icon, { code: "close", size: "large" })
315
105
  }
316
106
  )
317
107
  ] });
318
108
  };
319
109
 
320
110
  // src/components/body/DrawerBody.tsx
321
- var import_react4 = require("react");
111
+ var import_react2 = require("react");
322
112
 
323
113
  // src/components/body/DrawerBody.styled.ts
324
114
  var import_styled2 = __toESM(require("@emotion/styled"));
@@ -339,9 +129,9 @@ var ScrollableSectionObserverStyled = import_styled2.default.div`
339
129
  `;
340
130
 
341
131
  // src/components/body/DrawerBody.tsx
342
- var import_jsx_runtime61 = require("react/jsx-runtime");
132
+ var import_jsx_runtime4 = require("react/jsx-runtime");
343
133
  var DrawerBody = ({ children, style, dataTestId }) => {
344
- const scrollableSectionObserverRef = (0, import_react4.useRef)(null);
134
+ const scrollableSectionObserverRef = (0, import_react2.useRef)(null);
345
135
  const handleScrollClass = (isSectionScrollable) => {
346
136
  var _a;
347
137
  const sectionElement = (_a = scrollableSectionObserverRef.current) == null ? void 0 : _a.parentElement;
@@ -349,7 +139,7 @@ var DrawerBody = ({ children, style, dataTestId }) => {
349
139
  isSectionScrollable ? sectionElement.classList.add("hasScroll") : sectionElement.classList.remove("hasScroll");
350
140
  }
351
141
  };
352
- (0, import_react4.useEffect)(() => {
142
+ (0, import_react2.useEffect)(() => {
353
143
  if (scrollableSectionObserverRef.current) {
354
144
  const observer = new IntersectionObserver(
355
145
  ([{ isIntersecting: isSectionObserverVisible }]) => handleScrollClass(!isSectionObserverVisible)
@@ -358,24 +148,24 @@ var DrawerBody = ({ children, style, dataTestId }) => {
358
148
  return () => observer.disconnect();
359
149
  }
360
150
  }, [scrollableSectionObserverRef]);
361
- return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
151
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
362
152
  DrawerContentStyled,
363
153
  {
364
154
  "data-testid": dataTestId != null ? dataTestId : "drawer-body",
365
155
  style,
366
156
  children: [
367
157
  children,
368
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ScrollableSectionObserverStyled, { ref: scrollableSectionObserverRef })
158
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ScrollableSectionObserverStyled, { ref: scrollableSectionObserverRef })
369
159
  ]
370
160
  }
371
161
  );
372
162
  };
373
163
 
374
164
  // src/Drawer.styled.ts
375
- var import_react5 = require("@emotion/react");
165
+ var import_react3 = require("@emotion/react");
376
166
  var import_styled3 = __toESM(require("@emotion/styled"));
377
167
  var import_react_core = require("@dt-dds/react-core");
378
- var GlobalStyle = import_react5.css`
168
+ var GlobalStyle = import_react3.css`
379
169
  body {
380
170
  overflow: hidden;
381
171
  }
@@ -425,7 +215,7 @@ var DrawerStyled = import_styled3.default.div`
425
215
  `;
426
216
 
427
217
  // src/Drawer.tsx
428
- var import_jsx_runtime62 = require("react/jsx-runtime");
218
+ var import_jsx_runtime5 = require("react/jsx-runtime");
429
219
  var animationToMiliseconds = (duration) => parseFloat(duration.replace(/[^\d.]/g, "")) * 1e3;
430
220
  var Drawer = ({
431
221
  isVisible,
@@ -433,15 +223,15 @@ var Drawer = ({
433
223
  children,
434
224
  dataTestId
435
225
  }) => {
436
- const [isTransformed, setIsTransformed] = (0, import_react6.useState)(false);
437
- const theme = (0, import_react7.useTheme)();
438
- const handleClose = (0, import_react6.useCallback)(() => {
226
+ const [isTransformed, setIsTransformed] = (0, import_react4.useState)(false);
227
+ const theme = (0, import_react5.useTheme)();
228
+ const handleClose = (0, import_react4.useCallback)(() => {
439
229
  setIsTransformed(false);
440
230
  setTimeout(() => {
441
231
  setIsVisible(false);
442
232
  }, animationToMiliseconds(theme.animations.emphasizedDecelerate.timingFunction));
443
233
  }, [setIsVisible, theme.animations.emphasizedDecelerate.timingFunction]);
444
- (0, import_react6.useEffect)(() => {
234
+ (0, import_react4.useEffect)(() => {
445
235
  const handleKeyDown = (event) => {
446
236
  if (event.key === "Escape") {
447
237
  handleClose();
@@ -453,9 +243,9 @@ var Drawer = ({
453
243
  document.removeEventListener("keydown", handleKeyDown);
454
244
  };
455
245
  }, [handleClose, isVisible]);
456
- return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DrawerContextProvider, { handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(MainContainerStyled, { children: [
457
- isVisible ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react7.Global, { styles: GlobalStyle }) : null,
458
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
246
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DrawerContextProvider, { handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MainContainerStyled, { children: [
247
+ isVisible ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Global, { styles: GlobalStyle }) : null,
248
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
459
249
  OverlayStyled,
460
250
  {
461
251
  "data-testid": "drawer-overlay",
@@ -463,7 +253,7 @@ var Drawer = ({
463
253
  onClick: handleClose
464
254
  }
465
255
  ),
466
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
256
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
467
257
  DrawerStyled,
468
258
  {
469
259
  "data-testid": dataTestId != null ? dataTestId : "drawer-content-container",
package/dist/index.mjs CHANGED
@@ -1,26 +1,6 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
-
21
1
  // src/Drawer.tsx
22
2
  import { useCallback, useEffect as useEffect2, useState } from "react";
23
- import { useTheme as useTheme3, Global } from "@emotion/react";
3
+ import { useTheme, Global } from "@emotion/react";
24
4
 
25
5
  // src/components/title/DrawerTitle.tsx
26
6
  import { Typography } from "@dt-dds/react-typography";
@@ -28,6 +8,7 @@ import { jsx } from "react/jsx-runtime";
28
8
  var DrawerTitle = ({ title }) => /* @__PURE__ */ jsx(Typography, { color: "content.dark", element: "h4", fontStyles: "h4", children: title });
29
9
 
30
10
  // src/components/header/DrawerHeader.tsx
11
+ import { Icon } from "@dt-dds/react-icon";
31
12
  import { IconButton } from "@dt-dds/react-icon-button";
32
13
 
33
14
  // src/components/header/DrawerHeader.styled.ts
@@ -49,203 +30,9 @@ var HeaderStyled = styled.header`
49
30
  `}
50
31
  `;
51
32
 
52
- // ../../dt-dds-react/core/assets/svgs/AllOut.tsx
53
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
54
-
55
- // ../../dt-dds-react/core/assets/svgs/Apis.tsx
56
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
57
-
58
- // ../../dt-dds-react/core/assets/svgs/Apps.tsx
59
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
60
-
61
- // ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
62
- import { jsx as jsx5 } from "react/jsx-runtime";
63
-
64
- // ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
65
- import { jsx as jsx6 } from "react/jsx-runtime";
66
-
67
- // ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
68
- import { jsx as jsx7 } from "react/jsx-runtime";
69
-
70
- // ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
71
- import { jsx as jsx8 } from "react/jsx-runtime";
72
-
73
- // ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
74
- import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
75
-
76
- // ../../dt-dds-react/core/assets/svgs/Bolt.tsx
77
- import { jsx as jsx10 } from "react/jsx-runtime";
78
-
79
- // ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
80
- import { jsx as jsx11 } from "react/jsx-runtime";
81
-
82
- // ../../dt-dds-react/core/assets/svgs/Cancel.tsx
83
- import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
84
-
85
- // ../../dt-dds-react/core/assets/svgs/Check.tsx
86
- import { jsx as jsx13 } from "react/jsx-runtime";
87
-
88
- // ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
89
- import { jsx as jsx14 } from "react/jsx-runtime";
90
-
91
- // ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
92
- import { jsx as jsx15 } from "react/jsx-runtime";
93
-
94
- // ../../dt-dds-react/core/assets/svgs/Close.tsx
95
- import { jsx as jsx16 } from "react/jsx-runtime";
96
- var CloseIcon = (props) => {
97
- return /* @__PURE__ */ jsx16(
98
- "svg",
99
- __spreadProps(__spreadValues({
100
- fill: "none",
101
- height: "24",
102
- viewBox: "0 0 24 24",
103
- width: "24",
104
- xmlns: "http://www.w3.org/2000/svg"
105
- }, props), {
106
- children: /* @__PURE__ */ jsx16(
107
- "path",
108
- {
109
- d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
110
- fill: "currentColor"
111
- }
112
- )
113
- })
114
- );
115
- };
116
- var Close_default = CloseIcon;
117
-
118
- // ../../dt-dds-react/core/assets/svgs/Copy.tsx
119
- import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
120
-
121
- // ../../dt-dds-react/core/assets/svgs/Delete.tsx
122
- import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
123
-
124
- // ../../dt-dds-react/core/assets/svgs/Edit.tsx
125
- import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
126
-
127
- // ../../dt-dds-react/core/assets/svgs/Email.tsx
128
- import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
129
-
130
- // ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
131
- import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
132
-
133
- // ../../dt-dds-react/core/assets/svgs/Error.tsx
134
- import { useTheme } from "@emotion/react";
135
- import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
136
-
137
- // ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
138
- import { jsx as jsx23 } from "react/jsx-runtime";
139
-
140
- // ../../dt-dds-react/core/assets/svgs/EVStation.tsx
141
- import { jsx as jsx24 } from "react/jsx-runtime";
142
-
143
- // ../../dt-dds-react/core/assets/svgs/Info.tsx
144
- import { jsx as jsx25 } from "react/jsx-runtime";
145
-
146
- // ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
147
- import { jsx as jsx26 } from "react/jsx-runtime";
148
-
149
- // ../../dt-dds-react/core/assets/svgs/Input.tsx
150
- import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
151
-
152
- // ../../dt-dds-react/core/assets/svgs/Language.tsx
153
- import { jsx as jsx28 } from "react/jsx-runtime";
154
-
155
- // ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
156
- import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
157
-
158
- // ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
159
- import { jsx as jsx30 } from "react/jsx-runtime";
160
-
161
- // ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
162
- import { jsx as jsx31 } from "react/jsx-runtime";
163
-
164
- // ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
165
- import { jsx as jsx32 } from "react/jsx-runtime";
166
-
167
- // ../../dt-dds-react/core/assets/svgs/Menu.tsx
168
- import { jsx as jsx33 } from "react/jsx-runtime";
169
-
170
- // ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
171
- import { jsx as jsx34 } from "react/jsx-runtime";
172
-
173
- // ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
174
- import { jsx as jsx35 } from "react/jsx-runtime";
175
-
176
- // ../../dt-dds-react/core/assets/svgs/NoData.tsx
177
- import { useTheme as useTheme2 } from "@emotion/react";
178
- import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
179
-
180
- // ../../dt-dds-react/core/assets/svgs/NotFound.tsx
181
- import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
182
-
183
- // ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
184
- import { jsx as jsx38 } from "react/jsx-runtime";
185
-
186
- // ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
187
- import { jsx as jsx39 } from "react/jsx-runtime";
188
-
189
- // ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
190
- import { jsx as jsx40 } from "react/jsx-runtime";
191
-
192
- // ../../dt-dds-react/core/assets/svgs/Payments.tsx
193
- import { jsx as jsx41 } from "react/jsx-runtime";
194
-
195
- // ../../dt-dds-react/core/assets/svgs/Products.tsx
196
- import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
197
-
198
- // ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
199
- import { jsx as jsx43 } from "react/jsx-runtime";
200
-
201
- // ../../dt-dds-react/core/assets/svgs/Share.tsx
202
- import { jsx as jsx44, jsxs as jsxs17 } from "react/jsx-runtime";
203
-
204
- // ../../dt-dds-react/core/assets/svgs/Signout.tsx
205
- import { jsx as jsx45 } from "react/jsx-runtime";
206
-
207
- // ../../dt-dds-react/core/assets/svgs/Teams.tsx
208
- import { jsx as jsx46, jsxs as jsxs18 } from "react/jsx-runtime";
209
-
210
- // ../../dt-dds-react/core/assets/svgs/Timeline.tsx
211
- import { jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
212
-
213
- // ../../dt-dds-react/core/assets/svgs/Topic.tsx
214
- import { jsx as jsx48, jsxs as jsxs20 } from "react/jsx-runtime";
215
-
216
- // ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
217
- import { jsx as jsx49 } from "react/jsx-runtime";
218
-
219
- // ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
220
- import { jsx as jsx50 } from "react/jsx-runtime";
221
-
222
- // ../../dt-dds-react/core/assets/svgs/Username.tsx
223
- import { jsx as jsx51, jsxs as jsxs21 } from "react/jsx-runtime";
224
-
225
- // ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
226
- import { jsx as jsx52, jsxs as jsxs22 } from "react/jsx-runtime";
227
-
228
- // ../../dt-dds-react/core/assets/svgs/Visibility.tsx
229
- import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
230
-
231
- // ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
232
- import { jsx as jsx54, jsxs as jsxs24 } from "react/jsx-runtime";
233
-
234
- // ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
235
- import { jsx as jsx55 } from "react/jsx-runtime";
236
-
237
- // ../../dt-dds-react/core/assets/svgs/Warning.tsx
238
- import { jsx as jsx56 } from "react/jsx-runtime";
239
-
240
- // ../../dt-dds-react/core/assets/svgs/Wifi.tsx
241
- import { jsx as jsx57 } from "react/jsx-runtime";
242
-
243
- // ../../dt-dds-react/core/assets/svgs/Settings.tsx
244
- import { jsx as jsx58 } from "react/jsx-runtime";
245
-
246
33
  // src/context/DrawerProvider.tsx
247
34
  import { createContext, useContext } from "react";
248
- import { jsx as jsx59 } from "react/jsx-runtime";
35
+ import { jsx as jsx2 } from "react/jsx-runtime";
249
36
  var DEFAULT_VALUE = {
250
37
  handleClose: () => null
251
38
  };
@@ -254,7 +41,7 @@ var DrawerContextProvider = ({
254
41
  handleClose,
255
42
  children
256
43
  }) => {
257
- return /* @__PURE__ */ jsx59(DrawerContext.Provider, { value: { handleClose }, children });
44
+ return /* @__PURE__ */ jsx2(DrawerContext.Provider, { value: { handleClose }, children });
258
45
  };
259
46
  var useDrawerContext = () => {
260
47
  const context = useContext(DrawerContext);
@@ -267,18 +54,18 @@ var useDrawerContext = () => {
267
54
  };
268
55
 
269
56
  // src/components/header/DrawerHeader.tsx
270
- import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
57
+ import { jsx as jsx3, jsxs } from "react/jsx-runtime";
271
58
  var DrawerHeader = ({ children }) => {
272
59
  const { handleClose } = useDrawerContext();
273
- return /* @__PURE__ */ jsxs25(HeaderStyled, { "data-testid": "drawer-header", children: [
274
- /* @__PURE__ */ jsx60("div", { children }),
275
- /* @__PURE__ */ jsx60(
60
+ return /* @__PURE__ */ jsxs(HeaderStyled, { "data-testid": "drawer-header", children: [
61
+ /* @__PURE__ */ jsx3("div", { children }),
62
+ /* @__PURE__ */ jsx3(
276
63
  IconButton,
277
64
  {
278
65
  color: "default",
279
66
  dataTestId: "drawer-close-button",
280
67
  onClick: handleClose,
281
- children: /* @__PURE__ */ jsx60(Close_default, {})
68
+ children: /* @__PURE__ */ jsx3(Icon, { code: "close", size: "large" })
282
69
  }
283
70
  )
284
71
  ] });
@@ -306,7 +93,7 @@ var ScrollableSectionObserverStyled = styled2.div`
306
93
  `;
307
94
 
308
95
  // src/components/body/DrawerBody.tsx
309
- import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
96
+ import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
310
97
  var DrawerBody = ({ children, style, dataTestId }) => {
311
98
  const scrollableSectionObserverRef = useRef(null);
312
99
  const handleScrollClass = (isSectionScrollable) => {
@@ -325,14 +112,14 @@ var DrawerBody = ({ children, style, dataTestId }) => {
325
112
  return () => observer.disconnect();
326
113
  }
327
114
  }, [scrollableSectionObserverRef]);
328
- return /* @__PURE__ */ jsxs26(
115
+ return /* @__PURE__ */ jsxs2(
329
116
  DrawerContentStyled,
330
117
  {
331
118
  "data-testid": dataTestId != null ? dataTestId : "drawer-body",
332
119
  style,
333
120
  children: [
334
121
  children,
335
- /* @__PURE__ */ jsx61(ScrollableSectionObserverStyled, { ref: scrollableSectionObserverRef })
122
+ /* @__PURE__ */ jsx4(ScrollableSectionObserverStyled, { ref: scrollableSectionObserverRef })
336
123
  ]
337
124
  }
338
125
  );
@@ -392,7 +179,7 @@ var DrawerStyled = styled3.div`
392
179
  `;
393
180
 
394
181
  // src/Drawer.tsx
395
- import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
182
+ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
396
183
  var animationToMiliseconds = (duration) => parseFloat(duration.replace(/[^\d.]/g, "")) * 1e3;
397
184
  var Drawer = ({
398
185
  isVisible,
@@ -401,7 +188,7 @@ var Drawer = ({
401
188
  dataTestId
402
189
  }) => {
403
190
  const [isTransformed, setIsTransformed] = useState(false);
404
- const theme = useTheme3();
191
+ const theme = useTheme();
405
192
  const handleClose = useCallback(() => {
406
193
  setIsTransformed(false);
407
194
  setTimeout(() => {
@@ -420,9 +207,9 @@ var Drawer = ({
420
207
  document.removeEventListener("keydown", handleKeyDown);
421
208
  };
422
209
  }, [handleClose, isVisible]);
423
- return /* @__PURE__ */ jsx62(DrawerContextProvider, { handleClose, children: /* @__PURE__ */ jsxs27(MainContainerStyled, { children: [
424
- isVisible ? /* @__PURE__ */ jsx62(Global, { styles: GlobalStyle }) : null,
425
- /* @__PURE__ */ jsx62(
210
+ return /* @__PURE__ */ jsx5(DrawerContextProvider, { handleClose, children: /* @__PURE__ */ jsxs3(MainContainerStyled, { children: [
211
+ isVisible ? /* @__PURE__ */ jsx5(Global, { styles: GlobalStyle }) : null,
212
+ /* @__PURE__ */ jsx5(
426
213
  OverlayStyled,
427
214
  {
428
215
  "data-testid": "drawer-overlay",
@@ -430,7 +217,7 @@ var Drawer = ({
430
217
  onClick: handleClose
431
218
  }
432
219
  ),
433
- /* @__PURE__ */ jsx62(
220
+ /* @__PURE__ */ jsx5(
434
221
  DrawerStyled,
435
222
  {
436
223
  "data-testid": dataTestId != null ? dataTestId : "drawer-content-container",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-drawer",
3
- "version": "1.0.0-beta.63",
3
+ "version": "1.0.0-beta.65",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,10 +20,11 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/react-core": "1.0.0-beta.56",
24
- "@dt-dds/react-icon-button": "1.0.0-beta.25",
25
- "@dt-dds/react-typography": "1.0.0-beta.47",
26
- "@dt-dds/themes": "1.0.0-beta.11"
23
+ "@dt-dds/react-core": "1.0.0-beta.57",
24
+ "@dt-dds/react-icon-button": "1.0.0-beta.26",
25
+ "@dt-dds/react-typography": "1.0.0-beta.48",
26
+ "@dt-dds/react-icon": "1.0.0-beta.60",
27
+ "@dt-dds/themes": "1.0.0-beta.12"
27
28
  },
28
29
  "devDependencies": {
29
30
  "@babel/core": "^7.22.9",