@alfalab/core-components-drawer 4.2.1 → 4.2.3

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 (12) hide show
  1. package/Component.js +10 -12
  2. package/cssm/Component.js +34 -36
  3. package/cssm/index.js +0 -2
  4. package/cssm/index.module.css +29 -46
  5. package/esm/Component.js +2 -2
  6. package/esm/index.css +32 -49
  7. package/index.css +32 -49
  8. package/index.js +0 -2
  9. package/modern/Component.js +2 -2
  10. package/modern/index.css +32 -49
  11. package/modern/index.js +1 -1
  12. package/package.json +3 -3
package/Component.js CHANGED
@@ -1,17 +1,15 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var reactTransitionGroup = require('react-transition-group');
7
5
  var cn = require('classnames');
8
6
  var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
9
7
  var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar');
10
8
 
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
12
10
 
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
11
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
13
 
16
14
  /******************************************************************************
17
15
  Copyright (c) Microsoft Corporation.
@@ -52,7 +50,7 @@ function __rest(s, e) {
52
50
  return t;
53
51
  }
54
52
 
55
- var styles = {"component":"drawer__component_1cvyk","rightPlacement":"drawer__rightPlacement_1cvyk","leftPlacement":"drawer__leftPlacement_1cvyk","content":"drawer__content_1cvyk","simplebar":"drawer__simplebar_1cvyk","enterRight":"drawer__enterRight_1cvyk","enterLeft":"drawer__enterLeft_1cvyk","contentEnter":"drawer__contentEnter_1cvyk","backdropEnter":"drawer__backdropEnter_1cvyk","enterActive":"drawer__enterActive_1cvyk","backdropEnterActive":"drawer__backdropEnterActive_1cvyk","backdropEnterDone":"drawer__backdropEnterDone_1cvyk","contentEnterActive":"drawer__contentEnterActive_1cvyk","exit":"drawer__exit_1cvyk","backdropExit":"drawer__backdropExit_1cvyk","contentExit":"drawer__contentExit_1cvyk","exitActiveRight":"drawer__exitActiveRight_1cvyk","exitActiveLeft":"drawer__exitActiveLeft_1cvyk","backdropExitActive":"drawer__backdropExitActive_1cvyk","backdropExitDone":"drawer__backdropExitDone_1cvyk","contentExitActive":"drawer__contentExitActive_1cvyk"};
53
+ var styles = {"component":"drawer__component_1tn4c","rightPlacement":"drawer__rightPlacement_1tn4c","leftPlacement":"drawer__leftPlacement_1tn4c","content":"drawer__content_1tn4c","simplebar":"drawer__simplebar_1tn4c","enterRight":"drawer__enterRight_1tn4c","enterLeft":"drawer__enterLeft_1tn4c","contentEnter":"drawer__contentEnter_1tn4c","backdropEnter":"drawer__backdropEnter_1tn4c","enterActive":"drawer__enterActive_1tn4c","backdropEnterActive":"drawer__backdropEnterActive_1tn4c","backdropEnterDone":"drawer__backdropEnterDone_1tn4c","contentEnterActive":"drawer__contentEnterActive_1tn4c","exit":"drawer__exit_1tn4c","backdropExit":"drawer__backdropExit_1tn4c","contentExit":"drawer__contentExit_1tn4c","exitActiveRight":"drawer__exitActiveRight_1tn4c","exitActiveLeft":"drawer__exitActiveLeft_1tn4c","backdropExitActive":"drawer__backdropExitActive_1tn4c","backdropExitDone":"drawer__backdropExitDone_1tn4c","contentExitActive":"drawer__contentExitActive_1tn4c"};
56
54
  require('./index.css')
57
55
 
58
56
  var ANIMATION_DURATION = 600;
@@ -89,11 +87,11 @@ var Drawer = React.forwardRef(function (_a, ref) {
89
87
  var isLeftPlacement = placement === 'left';
90
88
  var transitionProps = React.useMemo(function () {
91
89
  var _a, _b;
92
- var enterClassName = cn__default['default']((_a = {},
90
+ var enterClassName = cn__default.default((_a = {},
93
91
  _a[styles.enterRight] = isRightPlacement,
94
92
  _a[styles.enterLeft] = isLeftPlacement,
95
93
  _a));
96
- var exitClassName = cn__default['default']((_b = {},
94
+ var exitClassName = cn__default.default((_b = {},
97
95
  _b[styles.exitActiveRight] = isRightPlacement,
98
96
  _b[styles.exitActiveLeft] = isLeftPlacement,
99
97
  _b));
@@ -106,13 +104,13 @@ var Drawer = React.forwardRef(function (_a, ref) {
106
104
  exitActive: exitClassName,
107
105
  }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
108
106
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
109
- var renderWithNativeScrollbar = function () { return React__default['default'].createElement("div", { className: styles.content }, children); };
110
- var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, __assign({}, scrollbarProps, { className: cn__default['default'](styles.simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
111
- return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles.component, className, (_b = {},
107
+ var renderWithNativeScrollbar = function () { return React__default.default.createElement("div", { className: styles.content }, children); };
108
+ var renderWithCustomScrollbar = function () { return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, __assign({}, scrollbarProps, { className: cn__default.default(styles.simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
109
+ return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default.default(styles.component, className, (_b = {},
112
110
  _b[styles.rightPlacement] = isRightPlacement,
113
111
  _b[styles.leftPlacement] = isLeftPlacement,
114
112
  _b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
115
- React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
113
+ React__default.default.createElement(reactTransitionGroup.CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
116
114
  });
117
115
 
118
116
  exports.ANIMATION_DURATION = ANIMATION_DURATION;
package/cssm/Component.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var reactTransitionGroup = require('react-transition-group');
7
5
  var cn = require('classnames');
@@ -9,11 +7,11 @@ var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm'
9
7
  var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar/cssm');
10
8
  var styles = require('./index.module.css');
11
9
 
12
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
13
11
 
14
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
16
- var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
12
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
13
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
14
+ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
17
15
 
18
16
  /******************************************************************************
19
17
  Copyright (c) Microsoft Corporation.
@@ -58,26 +56,26 @@ var ANIMATION_DURATION = 600;
58
56
  var DrawerContext = coreComponentsBaseModal.BaseModalContext;
59
57
  var backdropProps = {
60
58
  classNames: {
61
- enter: styles__default['default'].backdropEnter,
62
- appear: styles__default['default'].backdropEnter,
63
- enterActive: styles__default['default'].backdropEnterActive,
64
- appearActive: styles__default['default'].backdropEnterActive,
65
- enterDone: styles__default['default'].backdropEnterDone,
66
- appearDone: styles__default['default'].backdropEnterDone,
67
- exit: styles__default['default'].backdropExit,
68
- exitActive: styles__default['default'].backdropExitActive,
69
- exitDone: styles__default['default'].backdropExitDone,
59
+ enter: styles__default.default.backdropEnter,
60
+ appear: styles__default.default.backdropEnter,
61
+ enterActive: styles__default.default.backdropEnterActive,
62
+ appearActive: styles__default.default.backdropEnterActive,
63
+ enterDone: styles__default.default.backdropEnterDone,
64
+ appearDone: styles__default.default.backdropEnterDone,
65
+ exit: styles__default.default.backdropExit,
66
+ exitActive: styles__default.default.backdropExitActive,
67
+ exitDone: styles__default.default.backdropExitDone,
70
68
  },
71
69
  timeout: ANIMATION_DURATION,
72
70
  };
73
71
  var contentProps = {
74
72
  classNames: {
75
- enter: styles__default['default'].contentEnter,
76
- appear: styles__default['default'].contentEnter,
77
- enterActive: styles__default['default'].contentEnterActive,
78
- appearActive: styles__default['default'].contentEnterActive,
79
- exit: styles__default['default'].contentExit,
80
- exitActive: styles__default['default'].contentExitActive,
73
+ enter: styles__default.default.contentEnter,
74
+ appear: styles__default.default.contentEnter,
75
+ enterActive: styles__default.default.contentEnterActive,
76
+ appearActive: styles__default.default.contentEnterActive,
77
+ exit: styles__default.default.contentExit,
78
+ exitActive: styles__default.default.contentExitActive,
81
79
  },
82
80
  timeout: ANIMATION_DURATION,
83
81
  };
@@ -88,30 +86,30 @@ var Drawer = React.forwardRef(function (_a, ref) {
88
86
  var isLeftPlacement = placement === 'left';
89
87
  var transitionProps = React.useMemo(function () {
90
88
  var _a, _b;
91
- var enterClassName = cn__default['default']((_a = {},
92
- _a[styles__default['default'].enterRight] = isRightPlacement,
93
- _a[styles__default['default'].enterLeft] = isLeftPlacement,
89
+ var enterClassName = cn__default.default((_a = {},
90
+ _a[styles__default.default.enterRight] = isRightPlacement,
91
+ _a[styles__default.default.enterLeft] = isLeftPlacement,
94
92
  _a));
95
- var exitClassName = cn__default['default']((_b = {},
96
- _b[styles__default['default'].exitActiveRight] = isRightPlacement,
97
- _b[styles__default['default'].exitActiveLeft] = isLeftPlacement,
93
+ var exitClassName = cn__default.default((_b = {},
94
+ _b[styles__default.default.exitActiveRight] = isRightPlacement,
95
+ _b[styles__default.default.exitActiveLeft] = isLeftPlacement,
98
96
  _b));
99
97
  return __assign({ classNames: {
100
98
  enter: enterClassName,
101
99
  appear: enterClassName,
102
- enterActive: styles__default['default'].enterActive,
103
- appearActive: styles__default['default'].enterActive,
104
- exit: styles__default['default'].exit,
100
+ enterActive: styles__default.default.enterActive,
101
+ appearActive: styles__default.default.enterActive,
102
+ exit: styles__default.default.exit,
105
103
  exitActive: exitClassName,
106
104
  }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
107
105
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
108
- var renderWithNativeScrollbar = function () { return React__default['default'].createElement("div", { className: styles__default['default'].content }, children); };
109
- var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, __assign({}, scrollbarProps, { className: cn__default['default'](styles__default['default'].simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
110
- return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles__default['default'].component, className, (_b = {},
111
- _b[styles__default['default'].rightPlacement] = isRightPlacement,
112
- _b[styles__default['default'].leftPlacement] = isLeftPlacement,
106
+ var renderWithNativeScrollbar = function () { return React__default.default.createElement("div", { className: styles__default.default.content }, children); };
107
+ var renderWithCustomScrollbar = function () { return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, __assign({}, scrollbarProps, { className: cn__default.default(styles__default.default.simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
108
+ return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default.default(styles__default.default.component, className, (_b = {},
109
+ _b[styles__default.default.rightPlacement] = isRightPlacement,
110
+ _b[styles__default.default.leftPlacement] = isLeftPlacement,
113
111
  _b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
114
- React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
112
+ React__default.default.createElement(reactTransitionGroup.CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
115
113
  });
116
114
 
117
115
  exports.ANIMATION_DURATION = ANIMATION_DURATION;
package/cssm/index.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
6
4
  require('react');
7
5
  require('react-transition-group');
package/cssm/index.module.css CHANGED
@@ -1,22 +1,25 @@
1
1
  :root {
2
+ } /* deprecated */ :root {
2
3
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
3
- }
4
- :root {
4
+ } :root {
5
+ } :root {
6
+ } :root {
5
7
 
6
8
  /* Hard */
7
9
 
8
10
  /* Up */
9
11
 
10
12
  /* Hard up */
11
- }
12
- :root {
13
+ } :root {
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
13
18
  --backdrop-visible-background: var(--color-light-bg-overlay);
14
19
  --backdrop-hidden-background: transparent;
15
- }
16
- :root {
20
+ } :root {
17
21
  --drawer-width: 500px;
18
- }
19
- .component {
22
+ } .component {
20
23
  position: fixed;
21
24
  top: 0;
22
25
  height: 100%;
@@ -24,74 +27,54 @@
24
27
  flex: 1;
25
28
  overflow: auto;
26
29
  will-change: transform;
27
- }
28
- .rightPlacement {
30
+ } .rightPlacement {
29
31
  right: 0;
30
32
  align-self: flex-end;
31
- }
32
- .leftPlacement {
33
+ } .leftPlacement {
33
34
  left: 0;
34
35
  align-self: flex-start;
35
- }
36
- .content {
36
+ } .content {
37
37
  width: 100%;
38
38
  display: flex;
39
39
  flex-direction: column;
40
40
  flex: 1;
41
- }
42
- .simplebar {
41
+ } .simplebar {
43
42
  height: 100vh;
44
- }
45
- /* enter */
46
- .enterRight {
43
+ } /* enter */ .enterRight {
47
44
  transform: translateX(100%);
48
- }
49
- .enterLeft {
45
+ } .enterLeft {
50
46
  transform: translateX(-100%);
51
- }
52
- .contentEnter {
47
+ } .contentEnter {
53
48
  opacity: 0;
54
- }
55
- .backdropEnter {
49
+ } .backdropEnter {
56
50
  background-color: var(--backdrop-hidden-background);
57
- }
58
- .enterActive {
51
+ } .enterActive {
59
52
  transition: transform 0.3s ease-in-out;
60
53
  transform: translateX(0);
61
- }
62
- .backdropEnterActive,
54
+ } .backdropEnterActive,
63
55
  .backdropEnterDone {
64
56
  transition: background 0.3s ease-in-out;
65
57
  background-color: var(--backdrop-visible-background);
66
- }
67
- .contentEnterActive {
58
+ } .contentEnterActive {
68
59
  transition: opacity 0.2s ease-in-out 0.3s;
69
60
  opacity: 1;
70
- }
71
- /* exit */
72
- .exit {
61
+ } /* exit */ .exit {
73
62
  transform: translateX(0);
74
- }
75
- .backdropExit {
63
+ } .backdropExit {
76
64
  background-color: var(--backdrop-visible-background);
77
- }
78
- .contentExit {
65
+ } .contentExit {
79
66
  opacity: 1;
80
- }
81
- .exitActiveRight {
67
+ } .exitActiveRight {
82
68
  transition: transform 0.25s ease-in-out 0.1s;
83
69
  transform: translateX(100%);
84
- }
85
- .exitActiveLeft {
70
+ } .exitActiveLeft {
86
71
  transition: transform 0.25s ease-in-out 0.1s;
87
72
  transform: translateX(-100%);
88
- }
89
- .backdropExitActive,
73
+ } .backdropExitActive,
90
74
  .backdropExitDone {
91
75
  transition: background 0.25s ease-in-out 0.1s;
92
76
  background-color: var(--backdrop-hidden-background);
93
- }
94
- .contentExitActive {
77
+ } .contentExitActive {
95
78
  opacity: 0;
96
79
  transition: opacity 0.12s ease-in-out;
97
80
  }
package/esm/Component.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { forwardRef, useMemo } from 'react';
2
2
  import { CSSTransition } from 'react-transition-group';
3
3
  import cn from 'classnames';
4
- import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/esm';
4
+ import { BaseModal, BaseModalContext } from '@alfalab/core-components-base-modal/esm';
5
5
  import { Scrollbar } from '@alfalab/core-components-scrollbar/esm';
6
6
 
7
7
  /******************************************************************************
@@ -43,7 +43,7 @@ function __rest(s, e) {
43
43
  return t;
44
44
  }
45
45
 
46
- var styles = {"component":"drawer__component_1cvyk","rightPlacement":"drawer__rightPlacement_1cvyk","leftPlacement":"drawer__leftPlacement_1cvyk","content":"drawer__content_1cvyk","simplebar":"drawer__simplebar_1cvyk","enterRight":"drawer__enterRight_1cvyk","enterLeft":"drawer__enterLeft_1cvyk","contentEnter":"drawer__contentEnter_1cvyk","backdropEnter":"drawer__backdropEnter_1cvyk","enterActive":"drawer__enterActive_1cvyk","backdropEnterActive":"drawer__backdropEnterActive_1cvyk","backdropEnterDone":"drawer__backdropEnterDone_1cvyk","contentEnterActive":"drawer__contentEnterActive_1cvyk","exit":"drawer__exit_1cvyk","backdropExit":"drawer__backdropExit_1cvyk","contentExit":"drawer__contentExit_1cvyk","exitActiveRight":"drawer__exitActiveRight_1cvyk","exitActiveLeft":"drawer__exitActiveLeft_1cvyk","backdropExitActive":"drawer__backdropExitActive_1cvyk","backdropExitDone":"drawer__backdropExitDone_1cvyk","contentExitActive":"drawer__contentExitActive_1cvyk"};
46
+ var styles = {"component":"drawer__component_1tn4c","rightPlacement":"drawer__rightPlacement_1tn4c","leftPlacement":"drawer__leftPlacement_1tn4c","content":"drawer__content_1tn4c","simplebar":"drawer__simplebar_1tn4c","enterRight":"drawer__enterRight_1tn4c","enterLeft":"drawer__enterLeft_1tn4c","contentEnter":"drawer__contentEnter_1tn4c","backdropEnter":"drawer__backdropEnter_1tn4c","enterActive":"drawer__enterActive_1tn4c","backdropEnterActive":"drawer__backdropEnterActive_1tn4c","backdropEnterDone":"drawer__backdropEnterDone_1tn4c","contentEnterActive":"drawer__contentEnterActive_1tn4c","exit":"drawer__exit_1tn4c","backdropExit":"drawer__backdropExit_1tn4c","contentExit":"drawer__contentExit_1tn4c","exitActiveRight":"drawer__exitActiveRight_1tn4c","exitActiveLeft":"drawer__exitActiveLeft_1tn4c","backdropExitActive":"drawer__backdropExitActive_1tn4c","backdropExitDone":"drawer__backdropExitDone_1tn4c","contentExitActive":"drawer__contentExitActive_1tn4c"};
47
47
  require('./index.css')
48
48
 
49
49
  var ANIMATION_DURATION = 600;
package/esm/index.css CHANGED
@@ -1,23 +1,26 @@
1
- /* hash: 1a7fq */
1
+ /* hash: 1esc9 */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
- }
5
- :root {
5
+ } :root {
6
+ } :root {
7
+ } :root {
6
8
 
7
9
  /* Hard */
8
10
 
9
11
  /* Up */
10
12
 
11
13
  /* Hard up */
12
- }
13
- :root {
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
14
19
  --backdrop-visible-background: var(--color-light-bg-overlay);
15
20
  --backdrop-hidden-background: transparent;
16
- }
17
- :root {
21
+ } :root {
18
22
  --drawer-width: 500px;
19
- }
20
- .drawer__component_1cvyk {
23
+ } .drawer__component_1tn4c {
21
24
  position: fixed;
22
25
  top: 0;
23
26
  height: 100%;
@@ -25,74 +28,54 @@
25
28
  flex: 1;
26
29
  overflow: auto;
27
30
  will-change: transform;
28
- }
29
- .drawer__rightPlacement_1cvyk {
31
+ } .drawer__rightPlacement_1tn4c {
30
32
  right: 0;
31
33
  align-self: flex-end;
32
- }
33
- .drawer__leftPlacement_1cvyk {
34
+ } .drawer__leftPlacement_1tn4c {
34
35
  left: 0;
35
36
  align-self: flex-start;
36
- }
37
- .drawer__content_1cvyk {
37
+ } .drawer__content_1tn4c {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
- }
43
- .drawer__simplebar_1cvyk {
42
+ } .drawer__simplebar_1tn4c {
44
43
  height: 100vh;
45
- }
46
- /* enter */
47
- .drawer__enterRight_1cvyk {
44
+ } /* enter */ .drawer__enterRight_1tn4c {
48
45
  transform: translateX(100%);
49
- }
50
- .drawer__enterLeft_1cvyk {
46
+ } .drawer__enterLeft_1tn4c {
51
47
  transform: translateX(-100%);
52
- }
53
- .drawer__contentEnter_1cvyk {
48
+ } .drawer__contentEnter_1tn4c {
54
49
  opacity: 0;
55
- }
56
- .drawer__backdropEnter_1cvyk {
50
+ } .drawer__backdropEnter_1tn4c {
57
51
  background-color: var(--backdrop-hidden-background);
58
- }
59
- .drawer__enterActive_1cvyk {
52
+ } .drawer__enterActive_1tn4c {
60
53
  transition: transform 0.3s ease-in-out;
61
54
  transform: translateX(0);
62
- }
63
- .drawer__backdropEnterActive_1cvyk,
64
- .drawer__backdropEnterDone_1cvyk {
55
+ } .drawer__backdropEnterActive_1tn4c,
56
+ .drawer__backdropEnterDone_1tn4c {
65
57
  transition: background 0.3s ease-in-out;
66
58
  background-color: var(--backdrop-visible-background);
67
- }
68
- .drawer__contentEnterActive_1cvyk {
59
+ } .drawer__contentEnterActive_1tn4c {
69
60
  transition: opacity 0.2s ease-in-out 0.3s;
70
61
  opacity: 1;
71
- }
72
- /* exit */
73
- .drawer__exit_1cvyk {
62
+ } /* exit */ .drawer__exit_1tn4c {
74
63
  transform: translateX(0);
75
- }
76
- .drawer__backdropExit_1cvyk {
64
+ } .drawer__backdropExit_1tn4c {
77
65
  background-color: var(--backdrop-visible-background);
78
- }
79
- .drawer__contentExit_1cvyk {
66
+ } .drawer__contentExit_1tn4c {
80
67
  opacity: 1;
81
- }
82
- .drawer__exitActiveRight_1cvyk {
68
+ } .drawer__exitActiveRight_1tn4c {
83
69
  transition: transform 0.25s ease-in-out 0.1s;
84
70
  transform: translateX(100%);
85
- }
86
- .drawer__exitActiveLeft_1cvyk {
71
+ } .drawer__exitActiveLeft_1tn4c {
87
72
  transition: transform 0.25s ease-in-out 0.1s;
88
73
  transform: translateX(-100%);
89
- }
90
- .drawer__backdropExitActive_1cvyk,
91
- .drawer__backdropExitDone_1cvyk {
74
+ } .drawer__backdropExitActive_1tn4c,
75
+ .drawer__backdropExitDone_1tn4c {
92
76
  transition: background 0.25s ease-in-out 0.1s;
93
77
  background-color: var(--backdrop-hidden-background);
94
- }
95
- .drawer__contentExitActive_1cvyk {
78
+ } .drawer__contentExitActive_1tn4c {
96
79
  opacity: 0;
97
80
  transition: opacity 0.12s ease-in-out;
98
81
  }
package/index.css CHANGED
@@ -1,23 +1,26 @@
1
- /* hash: 1a7fq */
1
+ /* hash: 1esc9 */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
- }
5
- :root {
5
+ } :root {
6
+ } :root {
7
+ } :root {
6
8
 
7
9
  /* Hard */
8
10
 
9
11
  /* Up */
10
12
 
11
13
  /* Hard up */
12
- }
13
- :root {
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
14
19
  --backdrop-visible-background: var(--color-light-bg-overlay);
15
20
  --backdrop-hidden-background: transparent;
16
- }
17
- :root {
21
+ } :root {
18
22
  --drawer-width: 500px;
19
- }
20
- .drawer__component_1cvyk {
23
+ } .drawer__component_1tn4c {
21
24
  position: fixed;
22
25
  top: 0;
23
26
  height: 100%;
@@ -25,74 +28,54 @@
25
28
  flex: 1;
26
29
  overflow: auto;
27
30
  will-change: transform;
28
- }
29
- .drawer__rightPlacement_1cvyk {
31
+ } .drawer__rightPlacement_1tn4c {
30
32
  right: 0;
31
33
  align-self: flex-end;
32
- }
33
- .drawer__leftPlacement_1cvyk {
34
+ } .drawer__leftPlacement_1tn4c {
34
35
  left: 0;
35
36
  align-self: flex-start;
36
- }
37
- .drawer__content_1cvyk {
37
+ } .drawer__content_1tn4c {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
- }
43
- .drawer__simplebar_1cvyk {
42
+ } .drawer__simplebar_1tn4c {
44
43
  height: 100vh;
45
- }
46
- /* enter */
47
- .drawer__enterRight_1cvyk {
44
+ } /* enter */ .drawer__enterRight_1tn4c {
48
45
  transform: translateX(100%);
49
- }
50
- .drawer__enterLeft_1cvyk {
46
+ } .drawer__enterLeft_1tn4c {
51
47
  transform: translateX(-100%);
52
- }
53
- .drawer__contentEnter_1cvyk {
48
+ } .drawer__contentEnter_1tn4c {
54
49
  opacity: 0;
55
- }
56
- .drawer__backdropEnter_1cvyk {
50
+ } .drawer__backdropEnter_1tn4c {
57
51
  background-color: var(--backdrop-hidden-background);
58
- }
59
- .drawer__enterActive_1cvyk {
52
+ } .drawer__enterActive_1tn4c {
60
53
  transition: transform 0.3s ease-in-out;
61
54
  transform: translateX(0);
62
- }
63
- .drawer__backdropEnterActive_1cvyk,
64
- .drawer__backdropEnterDone_1cvyk {
55
+ } .drawer__backdropEnterActive_1tn4c,
56
+ .drawer__backdropEnterDone_1tn4c {
65
57
  transition: background 0.3s ease-in-out;
66
58
  background-color: var(--backdrop-visible-background);
67
- }
68
- .drawer__contentEnterActive_1cvyk {
59
+ } .drawer__contentEnterActive_1tn4c {
69
60
  transition: opacity 0.2s ease-in-out 0.3s;
70
61
  opacity: 1;
71
- }
72
- /* exit */
73
- .drawer__exit_1cvyk {
62
+ } /* exit */ .drawer__exit_1tn4c {
74
63
  transform: translateX(0);
75
- }
76
- .drawer__backdropExit_1cvyk {
64
+ } .drawer__backdropExit_1tn4c {
77
65
  background-color: var(--backdrop-visible-background);
78
- }
79
- .drawer__contentExit_1cvyk {
66
+ } .drawer__contentExit_1tn4c {
80
67
  opacity: 1;
81
- }
82
- .drawer__exitActiveRight_1cvyk {
68
+ } .drawer__exitActiveRight_1tn4c {
83
69
  transition: transform 0.25s ease-in-out 0.1s;
84
70
  transform: translateX(100%);
85
- }
86
- .drawer__exitActiveLeft_1cvyk {
71
+ } .drawer__exitActiveLeft_1tn4c {
87
72
  transition: transform 0.25s ease-in-out 0.1s;
88
73
  transform: translateX(-100%);
89
- }
90
- .drawer__backdropExitActive_1cvyk,
91
- .drawer__backdropExitDone_1cvyk {
74
+ } .drawer__backdropExitActive_1tn4c,
75
+ .drawer__backdropExitDone_1tn4c {
92
76
  transition: background 0.25s ease-in-out 0.1s;
93
77
  background-color: var(--backdrop-hidden-background);
94
- }
95
- .drawer__contentExitActive_1cvyk {
78
+ } .drawer__contentExitActive_1tn4c {
96
79
  opacity: 0;
97
80
  transition: opacity 0.12s ease-in-out;
98
81
  }
package/index.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
6
4
  require('react');
7
5
  require('react-transition-group');
package/modern/Component.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, { forwardRef, useMemo } from 'react';
2
2
  import { CSSTransition } from 'react-transition-group';
3
3
  import cn from 'classnames';
4
- import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/modern';
4
+ import { BaseModal, BaseModalContext } from '@alfalab/core-components-base-modal/modern';
5
5
  import { Scrollbar } from '@alfalab/core-components-scrollbar/modern';
6
6
 
7
- var styles = {"component":"drawer__component_1cvyk","rightPlacement":"drawer__rightPlacement_1cvyk","leftPlacement":"drawer__leftPlacement_1cvyk","content":"drawer__content_1cvyk","simplebar":"drawer__simplebar_1cvyk","enterRight":"drawer__enterRight_1cvyk","enterLeft":"drawer__enterLeft_1cvyk","contentEnter":"drawer__contentEnter_1cvyk","backdropEnter":"drawer__backdropEnter_1cvyk","enterActive":"drawer__enterActive_1cvyk","backdropEnterActive":"drawer__backdropEnterActive_1cvyk","backdropEnterDone":"drawer__backdropEnterDone_1cvyk","contentEnterActive":"drawer__contentEnterActive_1cvyk","exit":"drawer__exit_1cvyk","backdropExit":"drawer__backdropExit_1cvyk","contentExit":"drawer__contentExit_1cvyk","exitActiveRight":"drawer__exitActiveRight_1cvyk","exitActiveLeft":"drawer__exitActiveLeft_1cvyk","backdropExitActive":"drawer__backdropExitActive_1cvyk","backdropExitDone":"drawer__backdropExitDone_1cvyk","contentExitActive":"drawer__contentExitActive_1cvyk"};
7
+ const styles = {"component":"drawer__component_1tn4c","rightPlacement":"drawer__rightPlacement_1tn4c","leftPlacement":"drawer__leftPlacement_1tn4c","content":"drawer__content_1tn4c","simplebar":"drawer__simplebar_1tn4c","enterRight":"drawer__enterRight_1tn4c","enterLeft":"drawer__enterLeft_1tn4c","contentEnter":"drawer__contentEnter_1tn4c","backdropEnter":"drawer__backdropEnter_1tn4c","enterActive":"drawer__enterActive_1tn4c","backdropEnterActive":"drawer__backdropEnterActive_1tn4c","backdropEnterDone":"drawer__backdropEnterDone_1tn4c","contentEnterActive":"drawer__contentEnterActive_1tn4c","exit":"drawer__exit_1tn4c","backdropExit":"drawer__backdropExit_1tn4c","contentExit":"drawer__contentExit_1tn4c","exitActiveRight":"drawer__exitActiveRight_1tn4c","exitActiveLeft":"drawer__exitActiveLeft_1tn4c","backdropExitActive":"drawer__backdropExitActive_1tn4c","backdropExitDone":"drawer__backdropExitDone_1tn4c","contentExitActive":"drawer__contentExitActive_1tn4c"};
8
8
  require('./index.css')
9
9
 
10
10
  const ANIMATION_DURATION = 600;
package/modern/index.css CHANGED
@@ -1,23 +1,26 @@
1
- /* hash: 1a7fq */
1
+ /* hash: 1esc9 */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
- }
5
- :root {
5
+ } :root {
6
+ } :root {
7
+ } :root {
6
8
 
7
9
  /* Hard */
8
10
 
9
11
  /* Up */
10
12
 
11
13
  /* Hard up */
12
- }
13
- :root {
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
14
19
  --backdrop-visible-background: var(--color-light-bg-overlay);
15
20
  --backdrop-hidden-background: transparent;
16
- }
17
- :root {
21
+ } :root {
18
22
  --drawer-width: 500px;
19
- }
20
- .drawer__component_1cvyk {
23
+ } .drawer__component_1tn4c {
21
24
  position: fixed;
22
25
  top: 0;
23
26
  height: 100%;
@@ -25,74 +28,54 @@
25
28
  flex: 1;
26
29
  overflow: auto;
27
30
  will-change: transform;
28
- }
29
- .drawer__rightPlacement_1cvyk {
31
+ } .drawer__rightPlacement_1tn4c {
30
32
  right: 0;
31
33
  align-self: flex-end;
32
- }
33
- .drawer__leftPlacement_1cvyk {
34
+ } .drawer__leftPlacement_1tn4c {
34
35
  left: 0;
35
36
  align-self: flex-start;
36
- }
37
- .drawer__content_1cvyk {
37
+ } .drawer__content_1tn4c {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
- }
43
- .drawer__simplebar_1cvyk {
42
+ } .drawer__simplebar_1tn4c {
44
43
  height: 100vh;
45
- }
46
- /* enter */
47
- .drawer__enterRight_1cvyk {
44
+ } /* enter */ .drawer__enterRight_1tn4c {
48
45
  transform: translateX(100%);
49
- }
50
- .drawer__enterLeft_1cvyk {
46
+ } .drawer__enterLeft_1tn4c {
51
47
  transform: translateX(-100%);
52
- }
53
- .drawer__contentEnter_1cvyk {
48
+ } .drawer__contentEnter_1tn4c {
54
49
  opacity: 0;
55
- }
56
- .drawer__backdropEnter_1cvyk {
50
+ } .drawer__backdropEnter_1tn4c {
57
51
  background-color: var(--backdrop-hidden-background);
58
- }
59
- .drawer__enterActive_1cvyk {
52
+ } .drawer__enterActive_1tn4c {
60
53
  transition: transform 0.3s ease-in-out;
61
54
  transform: translateX(0);
62
- }
63
- .drawer__backdropEnterActive_1cvyk,
64
- .drawer__backdropEnterDone_1cvyk {
55
+ } .drawer__backdropEnterActive_1tn4c,
56
+ .drawer__backdropEnterDone_1tn4c {
65
57
  transition: background 0.3s ease-in-out;
66
58
  background-color: var(--backdrop-visible-background);
67
- }
68
- .drawer__contentEnterActive_1cvyk {
59
+ } .drawer__contentEnterActive_1tn4c {
69
60
  transition: opacity 0.2s ease-in-out 0.3s;
70
61
  opacity: 1;
71
- }
72
- /* exit */
73
- .drawer__exit_1cvyk {
62
+ } /* exit */ .drawer__exit_1tn4c {
74
63
  transform: translateX(0);
75
- }
76
- .drawer__backdropExit_1cvyk {
64
+ } .drawer__backdropExit_1tn4c {
77
65
  background-color: var(--backdrop-visible-background);
78
- }
79
- .drawer__contentExit_1cvyk {
66
+ } .drawer__contentExit_1tn4c {
80
67
  opacity: 1;
81
- }
82
- .drawer__exitActiveRight_1cvyk {
68
+ } .drawer__exitActiveRight_1tn4c {
83
69
  transition: transform 0.25s ease-in-out 0.1s;
84
70
  transform: translateX(100%);
85
- }
86
- .drawer__exitActiveLeft_1cvyk {
71
+ } .drawer__exitActiveLeft_1tn4c {
87
72
  transition: transform 0.25s ease-in-out 0.1s;
88
73
  transform: translateX(-100%);
89
- }
90
- .drawer__backdropExitActive_1cvyk,
91
- .drawer__backdropExitDone_1cvyk {
74
+ } .drawer__backdropExitActive_1tn4c,
75
+ .drawer__backdropExitDone_1tn4c {
92
76
  transition: background 0.25s ease-in-out 0.1s;
93
77
  background-color: var(--backdrop-hidden-background);
94
- }
95
- .drawer__contentExitActive_1cvyk {
78
+ } .drawer__contentExitActive_1tn4c {
96
79
  opacity: 0;
97
80
  transition: opacity 0.12s ease-in-out;
98
81
  }
package/modern/index.js CHANGED
@@ -1,6 +1,6 @@
1
+ export { ANIMATION_DURATION, Drawer, DrawerContext } from './Component.js';
1
2
  import 'react';
2
3
  import 'react-transition-group';
3
4
  import 'classnames';
4
5
  import '@alfalab/core-components-base-modal/modern';
5
6
  import '@alfalab/core-components-scrollbar/modern';
6
- export { ANIMATION_DURATION, Drawer, DrawerContext } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-drawer",
3
- "version": "4.2.1",
3
+ "version": "4.2.3",
4
4
  "description": "Drawer component",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -19,8 +19,8 @@
19
19
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
20
20
  },
21
21
  "dependencies": {
22
- "@alfalab/core-components-base-modal": "^5.0.6",
23
- "@alfalab/core-components-scrollbar": "^2.1.1",
22
+ "@alfalab/core-components-base-modal": "^5.0.8",
23
+ "@alfalab/core-components-scrollbar": "^2.1.2",
24
24
  "classnames": "^2.3.1"
25
25
  }
26
26
  }