@alfalab/core-components-drawer 4.2.1 → 4.2.2

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 (11) hide show
  1. package/Component.js +10 -12
  2. package/cssm/Component.js +34 -36
  3. package/cssm/index.js +0 -2
  4. package/esm/Component.js +2 -2
  5. package/esm/index.css +22 -22
  6. package/index.css +22 -22
  7. package/index.js +0 -2
  8. package/modern/Component.js +2 -2
  9. package/modern/index.css +22 -22
  10. package/modern/index.js +1 -1
  11. 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_1ttso","rightPlacement":"drawer__rightPlacement_1ttso","leftPlacement":"drawer__leftPlacement_1ttso","content":"drawer__content_1ttso","simplebar":"drawer__simplebar_1ttso","enterRight":"drawer__enterRight_1ttso","enterLeft":"drawer__enterLeft_1ttso","contentEnter":"drawer__contentEnter_1ttso","backdropEnter":"drawer__backdropEnter_1ttso","enterActive":"drawer__enterActive_1ttso","backdropEnterActive":"drawer__backdropEnterActive_1ttso","backdropEnterDone":"drawer__backdropEnterDone_1ttso","contentEnterActive":"drawer__contentEnterActive_1ttso","exit":"drawer__exit_1ttso","backdropExit":"drawer__backdropExit_1ttso","contentExit":"drawer__contentExit_1ttso","exitActiveRight":"drawer__exitActiveRight_1ttso","exitActiveLeft":"drawer__exitActiveLeft_1ttso","backdropExitActive":"drawer__backdropExitActive_1ttso","backdropExitDone":"drawer__backdropExitDone_1ttso","contentExitActive":"drawer__contentExitActive_1ttso"};
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/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_1ttso","rightPlacement":"drawer__rightPlacement_1ttso","leftPlacement":"drawer__leftPlacement_1ttso","content":"drawer__content_1ttso","simplebar":"drawer__simplebar_1ttso","enterRight":"drawer__enterRight_1ttso","enterLeft":"drawer__enterLeft_1ttso","contentEnter":"drawer__contentEnter_1ttso","backdropEnter":"drawer__backdropEnter_1ttso","enterActive":"drawer__enterActive_1ttso","backdropEnterActive":"drawer__backdropEnterActive_1ttso","backdropEnterDone":"drawer__backdropEnterDone_1ttso","contentEnterActive":"drawer__contentEnterActive_1ttso","exit":"drawer__exit_1ttso","backdropExit":"drawer__backdropExit_1ttso","contentExit":"drawer__contentExit_1ttso","exitActiveRight":"drawer__exitActiveRight_1ttso","exitActiveLeft":"drawer__exitActiveLeft_1ttso","backdropExitActive":"drawer__backdropExitActive_1ttso","backdropExitDone":"drawer__backdropExitDone_1ttso","contentExitActive":"drawer__contentExitActive_1ttso"};
47
47
  require('./index.css')
48
48
 
49
49
  var ANIMATION_DURATION = 600;
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1a7fq */
1
+ /* hash: r5g1g */
2
2
  :root {
3
3
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
4
  }
@@ -17,7 +17,7 @@
17
17
  :root {
18
18
  --drawer-width: 500px;
19
19
  }
20
- .drawer__component_1cvyk {
20
+ .drawer__component_1ttso {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  height: 100%;
@@ -26,73 +26,73 @@
26
26
  overflow: auto;
27
27
  will-change: transform;
28
28
  }
29
- .drawer__rightPlacement_1cvyk {
29
+ .drawer__rightPlacement_1ttso {
30
30
  right: 0;
31
31
  align-self: flex-end;
32
32
  }
33
- .drawer__leftPlacement_1cvyk {
33
+ .drawer__leftPlacement_1ttso {
34
34
  left: 0;
35
35
  align-self: flex-start;
36
36
  }
37
- .drawer__content_1cvyk {
37
+ .drawer__content_1ttso {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
42
  }
43
- .drawer__simplebar_1cvyk {
43
+ .drawer__simplebar_1ttso {
44
44
  height: 100vh;
45
45
  }
46
46
  /* enter */
47
- .drawer__enterRight_1cvyk {
47
+ .drawer__enterRight_1ttso {
48
48
  transform: translateX(100%);
49
49
  }
50
- .drawer__enterLeft_1cvyk {
50
+ .drawer__enterLeft_1ttso {
51
51
  transform: translateX(-100%);
52
52
  }
53
- .drawer__contentEnter_1cvyk {
53
+ .drawer__contentEnter_1ttso {
54
54
  opacity: 0;
55
55
  }
56
- .drawer__backdropEnter_1cvyk {
56
+ .drawer__backdropEnter_1ttso {
57
57
  background-color: var(--backdrop-hidden-background);
58
58
  }
59
- .drawer__enterActive_1cvyk {
59
+ .drawer__enterActive_1ttso {
60
60
  transition: transform 0.3s ease-in-out;
61
61
  transform: translateX(0);
62
62
  }
63
- .drawer__backdropEnterActive_1cvyk,
64
- .drawer__backdropEnterDone_1cvyk {
63
+ .drawer__backdropEnterActive_1ttso,
64
+ .drawer__backdropEnterDone_1ttso {
65
65
  transition: background 0.3s ease-in-out;
66
66
  background-color: var(--backdrop-visible-background);
67
67
  }
68
- .drawer__contentEnterActive_1cvyk {
68
+ .drawer__contentEnterActive_1ttso {
69
69
  transition: opacity 0.2s ease-in-out 0.3s;
70
70
  opacity: 1;
71
71
  }
72
72
  /* exit */
73
- .drawer__exit_1cvyk {
73
+ .drawer__exit_1ttso {
74
74
  transform: translateX(0);
75
75
  }
76
- .drawer__backdropExit_1cvyk {
76
+ .drawer__backdropExit_1ttso {
77
77
  background-color: var(--backdrop-visible-background);
78
78
  }
79
- .drawer__contentExit_1cvyk {
79
+ .drawer__contentExit_1ttso {
80
80
  opacity: 1;
81
81
  }
82
- .drawer__exitActiveRight_1cvyk {
82
+ .drawer__exitActiveRight_1ttso {
83
83
  transition: transform 0.25s ease-in-out 0.1s;
84
84
  transform: translateX(100%);
85
85
  }
86
- .drawer__exitActiveLeft_1cvyk {
86
+ .drawer__exitActiveLeft_1ttso {
87
87
  transition: transform 0.25s ease-in-out 0.1s;
88
88
  transform: translateX(-100%);
89
89
  }
90
- .drawer__backdropExitActive_1cvyk,
91
- .drawer__backdropExitDone_1cvyk {
90
+ .drawer__backdropExitActive_1ttso,
91
+ .drawer__backdropExitDone_1ttso {
92
92
  transition: background 0.25s ease-in-out 0.1s;
93
93
  background-color: var(--backdrop-hidden-background);
94
94
  }
95
- .drawer__contentExitActive_1cvyk {
95
+ .drawer__contentExitActive_1ttso {
96
96
  opacity: 0;
97
97
  transition: opacity 0.12s ease-in-out;
98
98
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1a7fq */
1
+ /* hash: r5g1g */
2
2
  :root {
3
3
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
4
  }
@@ -17,7 +17,7 @@
17
17
  :root {
18
18
  --drawer-width: 500px;
19
19
  }
20
- .drawer__component_1cvyk {
20
+ .drawer__component_1ttso {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  height: 100%;
@@ -26,73 +26,73 @@
26
26
  overflow: auto;
27
27
  will-change: transform;
28
28
  }
29
- .drawer__rightPlacement_1cvyk {
29
+ .drawer__rightPlacement_1ttso {
30
30
  right: 0;
31
31
  align-self: flex-end;
32
32
  }
33
- .drawer__leftPlacement_1cvyk {
33
+ .drawer__leftPlacement_1ttso {
34
34
  left: 0;
35
35
  align-self: flex-start;
36
36
  }
37
- .drawer__content_1cvyk {
37
+ .drawer__content_1ttso {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
42
  }
43
- .drawer__simplebar_1cvyk {
43
+ .drawer__simplebar_1ttso {
44
44
  height: 100vh;
45
45
  }
46
46
  /* enter */
47
- .drawer__enterRight_1cvyk {
47
+ .drawer__enterRight_1ttso {
48
48
  transform: translateX(100%);
49
49
  }
50
- .drawer__enterLeft_1cvyk {
50
+ .drawer__enterLeft_1ttso {
51
51
  transform: translateX(-100%);
52
52
  }
53
- .drawer__contentEnter_1cvyk {
53
+ .drawer__contentEnter_1ttso {
54
54
  opacity: 0;
55
55
  }
56
- .drawer__backdropEnter_1cvyk {
56
+ .drawer__backdropEnter_1ttso {
57
57
  background-color: var(--backdrop-hidden-background);
58
58
  }
59
- .drawer__enterActive_1cvyk {
59
+ .drawer__enterActive_1ttso {
60
60
  transition: transform 0.3s ease-in-out;
61
61
  transform: translateX(0);
62
62
  }
63
- .drawer__backdropEnterActive_1cvyk,
64
- .drawer__backdropEnterDone_1cvyk {
63
+ .drawer__backdropEnterActive_1ttso,
64
+ .drawer__backdropEnterDone_1ttso {
65
65
  transition: background 0.3s ease-in-out;
66
66
  background-color: var(--backdrop-visible-background);
67
67
  }
68
- .drawer__contentEnterActive_1cvyk {
68
+ .drawer__contentEnterActive_1ttso {
69
69
  transition: opacity 0.2s ease-in-out 0.3s;
70
70
  opacity: 1;
71
71
  }
72
72
  /* exit */
73
- .drawer__exit_1cvyk {
73
+ .drawer__exit_1ttso {
74
74
  transform: translateX(0);
75
75
  }
76
- .drawer__backdropExit_1cvyk {
76
+ .drawer__backdropExit_1ttso {
77
77
  background-color: var(--backdrop-visible-background);
78
78
  }
79
- .drawer__contentExit_1cvyk {
79
+ .drawer__contentExit_1ttso {
80
80
  opacity: 1;
81
81
  }
82
- .drawer__exitActiveRight_1cvyk {
82
+ .drawer__exitActiveRight_1ttso {
83
83
  transition: transform 0.25s ease-in-out 0.1s;
84
84
  transform: translateX(100%);
85
85
  }
86
- .drawer__exitActiveLeft_1cvyk {
86
+ .drawer__exitActiveLeft_1ttso {
87
87
  transition: transform 0.25s ease-in-out 0.1s;
88
88
  transform: translateX(-100%);
89
89
  }
90
- .drawer__backdropExitActive_1cvyk,
91
- .drawer__backdropExitDone_1cvyk {
90
+ .drawer__backdropExitActive_1ttso,
91
+ .drawer__backdropExitDone_1ttso {
92
92
  transition: background 0.25s ease-in-out 0.1s;
93
93
  background-color: var(--backdrop-hidden-background);
94
94
  }
95
- .drawer__contentExitActive_1cvyk {
95
+ .drawer__contentExitActive_1ttso {
96
96
  opacity: 0;
97
97
  transition: opacity 0.12s ease-in-out;
98
98
  }
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_1ttso","rightPlacement":"drawer__rightPlacement_1ttso","leftPlacement":"drawer__leftPlacement_1ttso","content":"drawer__content_1ttso","simplebar":"drawer__simplebar_1ttso","enterRight":"drawer__enterRight_1ttso","enterLeft":"drawer__enterLeft_1ttso","contentEnter":"drawer__contentEnter_1ttso","backdropEnter":"drawer__backdropEnter_1ttso","enterActive":"drawer__enterActive_1ttso","backdropEnterActive":"drawer__backdropEnterActive_1ttso","backdropEnterDone":"drawer__backdropEnterDone_1ttso","contentEnterActive":"drawer__contentEnterActive_1ttso","exit":"drawer__exit_1ttso","backdropExit":"drawer__backdropExit_1ttso","contentExit":"drawer__contentExit_1ttso","exitActiveRight":"drawer__exitActiveRight_1ttso","exitActiveLeft":"drawer__exitActiveLeft_1ttso","backdropExitActive":"drawer__backdropExitActive_1ttso","backdropExitDone":"drawer__backdropExitDone_1ttso","contentExitActive":"drawer__contentExitActive_1ttso"};
8
8
  require('./index.css')
9
9
 
10
10
  const ANIMATION_DURATION = 600;
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1a7fq */
1
+ /* hash: r5g1g */
2
2
  :root {
3
3
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
4
  }
@@ -17,7 +17,7 @@
17
17
  :root {
18
18
  --drawer-width: 500px;
19
19
  }
20
- .drawer__component_1cvyk {
20
+ .drawer__component_1ttso {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  height: 100%;
@@ -26,73 +26,73 @@
26
26
  overflow: auto;
27
27
  will-change: transform;
28
28
  }
29
- .drawer__rightPlacement_1cvyk {
29
+ .drawer__rightPlacement_1ttso {
30
30
  right: 0;
31
31
  align-self: flex-end;
32
32
  }
33
- .drawer__leftPlacement_1cvyk {
33
+ .drawer__leftPlacement_1ttso {
34
34
  left: 0;
35
35
  align-self: flex-start;
36
36
  }
37
- .drawer__content_1cvyk {
37
+ .drawer__content_1ttso {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
42
  }
43
- .drawer__simplebar_1cvyk {
43
+ .drawer__simplebar_1ttso {
44
44
  height: 100vh;
45
45
  }
46
46
  /* enter */
47
- .drawer__enterRight_1cvyk {
47
+ .drawer__enterRight_1ttso {
48
48
  transform: translateX(100%);
49
49
  }
50
- .drawer__enterLeft_1cvyk {
50
+ .drawer__enterLeft_1ttso {
51
51
  transform: translateX(-100%);
52
52
  }
53
- .drawer__contentEnter_1cvyk {
53
+ .drawer__contentEnter_1ttso {
54
54
  opacity: 0;
55
55
  }
56
- .drawer__backdropEnter_1cvyk {
56
+ .drawer__backdropEnter_1ttso {
57
57
  background-color: var(--backdrop-hidden-background);
58
58
  }
59
- .drawer__enterActive_1cvyk {
59
+ .drawer__enterActive_1ttso {
60
60
  transition: transform 0.3s ease-in-out;
61
61
  transform: translateX(0);
62
62
  }
63
- .drawer__backdropEnterActive_1cvyk,
64
- .drawer__backdropEnterDone_1cvyk {
63
+ .drawer__backdropEnterActive_1ttso,
64
+ .drawer__backdropEnterDone_1ttso {
65
65
  transition: background 0.3s ease-in-out;
66
66
  background-color: var(--backdrop-visible-background);
67
67
  }
68
- .drawer__contentEnterActive_1cvyk {
68
+ .drawer__contentEnterActive_1ttso {
69
69
  transition: opacity 0.2s ease-in-out 0.3s;
70
70
  opacity: 1;
71
71
  }
72
72
  /* exit */
73
- .drawer__exit_1cvyk {
73
+ .drawer__exit_1ttso {
74
74
  transform: translateX(0);
75
75
  }
76
- .drawer__backdropExit_1cvyk {
76
+ .drawer__backdropExit_1ttso {
77
77
  background-color: var(--backdrop-visible-background);
78
78
  }
79
- .drawer__contentExit_1cvyk {
79
+ .drawer__contentExit_1ttso {
80
80
  opacity: 1;
81
81
  }
82
- .drawer__exitActiveRight_1cvyk {
82
+ .drawer__exitActiveRight_1ttso {
83
83
  transition: transform 0.25s ease-in-out 0.1s;
84
84
  transform: translateX(100%);
85
85
  }
86
- .drawer__exitActiveLeft_1cvyk {
86
+ .drawer__exitActiveLeft_1ttso {
87
87
  transition: transform 0.25s ease-in-out 0.1s;
88
88
  transform: translateX(-100%);
89
89
  }
90
- .drawer__backdropExitActive_1cvyk,
91
- .drawer__backdropExitDone_1cvyk {
90
+ .drawer__backdropExitActive_1ttso,
91
+ .drawer__backdropExitDone_1ttso {
92
92
  transition: background 0.25s ease-in-out 0.1s;
93
93
  background-color: var(--backdrop-hidden-background);
94
94
  }
95
- .drawer__contentExitActive_1cvyk {
95
+ .drawer__contentExitActive_1ttso {
96
96
  opacity: 0;
97
97
  transition: opacity 0.12s ease-in-out;
98
98
  }
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.2",
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.7",
23
+ "@alfalab/core-components-scrollbar": "^2.1.2",
24
24
  "classnames": "^2.3.1"
25
25
  }
26
26
  }