@alfalab/core-components-drawer 5.0.17 → 5.1.1

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 (14) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +7 -5
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +42 -40
  5. package/index.css +42 -40
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +42 -40
  8. package/moderncssm/Component.d.ts +40 -0
  9. package/moderncssm/Component.js +69 -0
  10. package/moderncssm/index.d.ts +1 -0
  11. package/moderncssm/index.js +1 -0
  12. package/moderncssm/index.module.css +134 -0
  13. package/package.json +4 -4
  14. package/src/index.module.css +4 -4
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"drawer__component_1t73i","customScrollbar":"drawer__customScrollbar_1t73i","rightPlacement":"drawer__rightPlacement_1t73i","leftPlacement":"drawer__leftPlacement_1t73i","content":"drawer__content_1t73i","enterRight":"drawer__enterRight_1t73i","enterLeft":"drawer__enterLeft_1t73i","contentEnter":"drawer__contentEnter_1t73i","backdropEnter":"drawer__backdropEnter_1t73i","enterActive":"drawer__enterActive_1t73i","backdropEnterActive":"drawer__backdropEnterActive_1t73i","backdropEnterDone":"drawer__backdropEnterDone_1t73i","contentEnterActive":"drawer__contentEnterActive_1t73i","exit":"drawer__exit_1t73i","backdropExit":"drawer__backdropExit_1t73i","contentExit":"drawer__contentExit_1t73i","exitActiveRight":"drawer__exitActiveRight_1t73i","exitActiveLeft":"drawer__exitActiveLeft_1t73i","backdropExitActive":"drawer__backdropExitActive_1t73i","backdropExitDone":"drawer__backdropExitDone_1t73i","contentExitActive":"drawer__contentExitActive_1t73i"};
16
+ var styles = {"component":"drawer__component_15qp0","customScrollbar":"drawer__customScrollbar_15qp0","rightPlacement":"drawer__rightPlacement_15qp0","leftPlacement":"drawer__leftPlacement_15qp0","content":"drawer__content_15qp0","enterRight":"drawer__enterRight_15qp0","enterLeft":"drawer__enterLeft_15qp0","contentEnter":"drawer__contentEnter_15qp0","backdropEnter":"drawer__backdropEnter_15qp0","enterActive":"drawer__enterActive_15qp0","backdropEnterActive":"drawer__backdropEnterActive_15qp0","backdropEnterDone":"drawer__backdropEnterDone_15qp0","contentEnterActive":"drawer__contentEnterActive_15qp0","exit":"drawer__exit_15qp0","backdropExit":"drawer__backdropExit_15qp0","contentExit":"drawer__contentExit_15qp0","exitActiveRight":"drawer__exitActiveRight_15qp0","exitActiveLeft":"drawer__exitActiveLeft_15qp0","backdropExitActive":"drawer__backdropExitActive_15qp0","backdropExitDone":"drawer__backdropExitDone_15qp0","contentExitActive":"drawer__contentExitActive_15qp0"};
17
17
  require('./index.css')
18
18
 
19
19
  var ANIMATION_DURATION = 600;
package/cssm/index.module.css CHANGED
@@ -16,9 +16,11 @@
16
16
  --border-radius-circle: 50%;
17
17
 
18
18
  /* новые значения, используйте их */
19
+ --border-radius-6: 6px;
19
20
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
20
21
 
21
22
  /* новые значения, используйте их */
23
+ --gap-0: 0;
22
24
  } :root {
23
25
  } :root {
24
26
  } :root {
@@ -27,7 +29,7 @@
27
29
  } :root {
28
30
  --drawer-width: 500px;
29
31
  } .component {
30
- top: 0;
32
+ top: var(--gap-0);
31
33
  height: 100%;
32
34
  width: var(--drawer-width);
33
35
  flex: 1;
@@ -52,13 +54,13 @@
52
54
  border-width: 4px;
53
55
  background-clip: padding-box;
54
56
  } .customScrollbar::-webkit-scrollbar-thumb:vertical {
55
- border-radius: var(--border-radius-circle) / 6px;
57
+ border-radius: var(--border-radius-circle) / var(--border-radius-6);
56
58
  min-height: 40px;
57
59
  } .customScrollbar::-webkit-scrollbar-thumb:vertical:hover {
58
60
  border-radius: var(--border-radius-circle) / 7px;
59
61
  border-width: 4px 3px;
60
62
  } .customScrollbar::-webkit-scrollbar-thumb:horizontal {
61
- border-radius: 6px / var(--border-radius-circle);
63
+ border-radius: var(--border-radius-6) / var(--border-radius-circle);
62
64
  min-width: 40px;
63
65
  } .customScrollbar::-webkit-scrollbar-thumb:horizontal:hover {
64
66
  border-radius: 7px / var(--border-radius-circle);
@@ -72,10 +74,10 @@
72
74
  .customScrollbar::-webkit-scrollbar-corner {
73
75
  display: none;
74
76
  } .rightPlacement {
75
- right: 0;
77
+ right: var(--gap-0);
76
78
  align-self: flex-end;
77
79
  } .leftPlacement {
78
- left: 0;
80
+ left: var(--gap-0);
79
81
  align-self: flex-start;
80
82
  } .content {
81
83
  width: 100%;
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
4
4
  import cn from 'classnames';
5
5
  import { BaseModal, BaseModalContext } from '@alfalab/core-components-base-modal/esm';
6
6
 
7
- var styles = {"component":"drawer__component_1t73i","customScrollbar":"drawer__customScrollbar_1t73i","rightPlacement":"drawer__rightPlacement_1t73i","leftPlacement":"drawer__leftPlacement_1t73i","content":"drawer__content_1t73i","enterRight":"drawer__enterRight_1t73i","enterLeft":"drawer__enterLeft_1t73i","contentEnter":"drawer__contentEnter_1t73i","backdropEnter":"drawer__backdropEnter_1t73i","enterActive":"drawer__enterActive_1t73i","backdropEnterActive":"drawer__backdropEnterActive_1t73i","backdropEnterDone":"drawer__backdropEnterDone_1t73i","contentEnterActive":"drawer__contentEnterActive_1t73i","exit":"drawer__exit_1t73i","backdropExit":"drawer__backdropExit_1t73i","contentExit":"drawer__contentExit_1t73i","exitActiveRight":"drawer__exitActiveRight_1t73i","exitActiveLeft":"drawer__exitActiveLeft_1t73i","backdropExitActive":"drawer__backdropExitActive_1t73i","backdropExitDone":"drawer__backdropExitDone_1t73i","contentExitActive":"drawer__contentExitActive_1t73i"};
7
+ var styles = {"component":"drawer__component_15qp0","customScrollbar":"drawer__customScrollbar_15qp0","rightPlacement":"drawer__rightPlacement_15qp0","leftPlacement":"drawer__leftPlacement_15qp0","content":"drawer__content_15qp0","enterRight":"drawer__enterRight_15qp0","enterLeft":"drawer__enterLeft_15qp0","contentEnter":"drawer__contentEnter_15qp0","backdropEnter":"drawer__backdropEnter_15qp0","enterActive":"drawer__enterActive_15qp0","backdropEnterActive":"drawer__backdropEnterActive_15qp0","backdropEnterDone":"drawer__backdropEnterDone_15qp0","contentEnterActive":"drawer__contentEnterActive_15qp0","exit":"drawer__exit_15qp0","backdropExit":"drawer__backdropExit_15qp0","contentExit":"drawer__contentExit_15qp0","exitActiveRight":"drawer__exitActiveRight_15qp0","exitActiveLeft":"drawer__exitActiveLeft_15qp0","backdropExitActive":"drawer__backdropExitActive_15qp0","backdropExitDone":"drawer__backdropExitDone_15qp0","contentExitActive":"drawer__contentExitActive_15qp0"};
8
8
  require('./index.css')
9
9
 
10
10
  var ANIMATION_DURATION = 600;
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: r12i2 */
1
+ /* hash: pmkh2 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -17,9 +17,11 @@
17
17
  --border-radius-circle: 50%;
18
18
 
19
19
  /* новые значения, используйте их */
20
+ --border-radius-6: 6px;
20
21
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
22
 
22
23
  /* новые значения, используйте их */
24
+ --gap-0: 0;
23
25
  } :root {
24
26
  } :root {
25
27
  } :root {
@@ -27,97 +29,97 @@
27
29
  --backdrop-hidden-background: transparent;
28
30
  } :root {
29
31
  --drawer-width: 500px;
30
- } .drawer__component_1t73i {
31
- top: 0;
32
+ } .drawer__component_15qp0 {
33
+ top: var(--gap-0);
32
34
  height: 100%;
33
35
  width: var(--drawer-width);
34
36
  flex: 1;
35
37
  overflow: auto;
36
38
  will-change: transform;
37
- } .drawer__component_1t73i.drawer__component_1t73i {
39
+ } .drawer__component_15qp0.drawer__component_15qp0 {
38
40
  position: fixed;
39
- } .drawer__customScrollbar_1t73i {
41
+ } .drawer__customScrollbar_15qp0 {
40
42
  overflow: auto;
41
43
  cursor: auto;
42
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar {
44
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar {
43
45
  width: 12px;
44
46
  height: 12px;
45
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-track {
47
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-track {
46
48
  background-color: transparent;
47
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-track-piece {
49
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-track-piece {
48
50
  background-color: transparent;
49
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb {
51
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb {
50
52
  background-color: var(--color-light-neutral-translucent-500);
51
53
  border-color: transparent;
52
54
  border-style: solid;
53
55
  border-width: 4px;
54
56
  background-clip: padding-box;
55
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:vertical {
56
- border-radius: var(--border-radius-circle) / 6px;
57
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:vertical {
58
+ border-radius: var(--border-radius-circle) / var(--border-radius-6);
57
59
  min-height: 40px;
58
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:vertical:hover {
60
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:vertical:hover {
59
61
  border-radius: var(--border-radius-circle) / 7px;
60
62
  border-width: 4px 3px;
61
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:horizontal {
62
- border-radius: 6px / var(--border-radius-circle);
63
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:horizontal {
64
+ border-radius: var(--border-radius-6) / var(--border-radius-circle);
63
65
  min-width: 40px;
64
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:horizontal:hover {
66
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:horizontal:hover {
65
67
  border-radius: 7px / var(--border-radius-circle);
66
68
  border-width: 3px 4px;
67
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:active {
69
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:active {
68
70
  background-color: var(--color-light-text-secondary);
69
- } .drawer__customScrollbar_1t73i::-webkit-resizer {
71
+ } .drawer__customScrollbar_15qp0::-webkit-resizer {
70
72
  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
71
73
  no-repeat right bottom;
72
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-button,
73
- .drawer__customScrollbar_1t73i::-webkit-scrollbar-corner {
74
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-button,
75
+ .drawer__customScrollbar_15qp0::-webkit-scrollbar-corner {
74
76
  display: none;
75
- } .drawer__rightPlacement_1t73i {
76
- right: 0;
77
+ } .drawer__rightPlacement_15qp0 {
78
+ right: var(--gap-0);
77
79
  align-self: flex-end;
78
- } .drawer__leftPlacement_1t73i {
79
- left: 0;
80
+ } .drawer__leftPlacement_15qp0 {
81
+ left: var(--gap-0);
80
82
  align-self: flex-start;
81
- } .drawer__content_1t73i {
83
+ } .drawer__content_15qp0 {
82
84
  width: 100%;
83
85
  display: flex;
84
86
  flex-direction: column;
85
87
  flex: 1;
86
- } /* enter */ .drawer__enterRight_1t73i {
88
+ } /* enter */ .drawer__enterRight_15qp0 {
87
89
  transform: translateX(100%);
88
- } .drawer__enterLeft_1t73i {
90
+ } .drawer__enterLeft_15qp0 {
89
91
  transform: translateX(-100%);
90
- } .drawer__contentEnter_1t73i {
92
+ } .drawer__contentEnter_15qp0 {
91
93
  opacity: 0;
92
- } .drawer__backdropEnter_1t73i {
94
+ } .drawer__backdropEnter_15qp0 {
93
95
  background-color: var(--backdrop-hidden-background);
94
- } .drawer__enterActive_1t73i {
96
+ } .drawer__enterActive_15qp0 {
95
97
  transition: transform 0.3s ease-in-out;
96
98
  transform: translateX(0);
97
- } .drawer__backdropEnterActive_1t73i,
98
- .drawer__backdropEnterDone_1t73i {
99
+ } .drawer__backdropEnterActive_15qp0,
100
+ .drawer__backdropEnterDone_15qp0 {
99
101
  transition: background 0.3s ease-in-out;
100
102
  background-color: var(--backdrop-visible-background);
101
- } .drawer__contentEnterActive_1t73i {
103
+ } .drawer__contentEnterActive_15qp0 {
102
104
  transition: opacity 0.2s ease-in-out 0.3s;
103
105
  opacity: 1;
104
- } /* exit */ .drawer__exit_1t73i {
106
+ } /* exit */ .drawer__exit_15qp0 {
105
107
  transform: translateX(0);
106
- } .drawer__backdropExit_1t73i {
108
+ } .drawer__backdropExit_15qp0 {
107
109
  background-color: var(--backdrop-visible-background);
108
- } .drawer__contentExit_1t73i {
110
+ } .drawer__contentExit_15qp0 {
109
111
  opacity: 1;
110
- } .drawer__exitActiveRight_1t73i {
112
+ } .drawer__exitActiveRight_15qp0 {
111
113
  transition: transform 0.25s ease-in-out 0.1s;
112
114
  transform: translateX(100%);
113
- } .drawer__exitActiveLeft_1t73i {
115
+ } .drawer__exitActiveLeft_15qp0 {
114
116
  transition: transform 0.25s ease-in-out 0.1s;
115
117
  transform: translateX(-100%);
116
- } .drawer__backdropExitActive_1t73i,
117
- .drawer__backdropExitDone_1t73i {
118
+ } .drawer__backdropExitActive_15qp0,
119
+ .drawer__backdropExitDone_15qp0 {
118
120
  transition: background 0.25s ease-in-out 0.1s;
119
121
  background-color: var(--backdrop-hidden-background);
120
- } .drawer__contentExitActive_1t73i {
122
+ } .drawer__contentExitActive_15qp0 {
121
123
  opacity: 0;
122
124
  transition: opacity 0.12s ease-in-out;
123
125
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: r12i2 */
1
+ /* hash: pmkh2 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -17,9 +17,11 @@
17
17
  --border-radius-circle: 50%;
18
18
 
19
19
  /* новые значения, используйте их */
20
+ --border-radius-6: 6px;
20
21
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
22
 
22
23
  /* новые значения, используйте их */
24
+ --gap-0: 0;
23
25
  } :root {
24
26
  } :root {
25
27
  } :root {
@@ -27,97 +29,97 @@
27
29
  --backdrop-hidden-background: transparent;
28
30
  } :root {
29
31
  --drawer-width: 500px;
30
- } .drawer__component_1t73i {
31
- top: 0;
32
+ } .drawer__component_15qp0 {
33
+ top: var(--gap-0);
32
34
  height: 100%;
33
35
  width: var(--drawer-width);
34
36
  flex: 1;
35
37
  overflow: auto;
36
38
  will-change: transform;
37
- } .drawer__component_1t73i.drawer__component_1t73i {
39
+ } .drawer__component_15qp0.drawer__component_15qp0 {
38
40
  position: fixed;
39
- } .drawer__customScrollbar_1t73i {
41
+ } .drawer__customScrollbar_15qp0 {
40
42
  overflow: auto;
41
43
  cursor: auto;
42
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar {
44
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar {
43
45
  width: 12px;
44
46
  height: 12px;
45
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-track {
47
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-track {
46
48
  background-color: transparent;
47
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-track-piece {
49
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-track-piece {
48
50
  background-color: transparent;
49
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb {
51
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb {
50
52
  background-color: var(--color-light-neutral-translucent-500);
51
53
  border-color: transparent;
52
54
  border-style: solid;
53
55
  border-width: 4px;
54
56
  background-clip: padding-box;
55
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:vertical {
56
- border-radius: var(--border-radius-circle) / 6px;
57
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:vertical {
58
+ border-radius: var(--border-radius-circle) / var(--border-radius-6);
57
59
  min-height: 40px;
58
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:vertical:hover {
60
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:vertical:hover {
59
61
  border-radius: var(--border-radius-circle) / 7px;
60
62
  border-width: 4px 3px;
61
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:horizontal {
62
- border-radius: 6px / var(--border-radius-circle);
63
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:horizontal {
64
+ border-radius: var(--border-radius-6) / var(--border-radius-circle);
63
65
  min-width: 40px;
64
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:horizontal:hover {
66
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:horizontal:hover {
65
67
  border-radius: 7px / var(--border-radius-circle);
66
68
  border-width: 3px 4px;
67
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:active {
69
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:active {
68
70
  background-color: var(--color-light-text-secondary);
69
- } .drawer__customScrollbar_1t73i::-webkit-resizer {
71
+ } .drawer__customScrollbar_15qp0::-webkit-resizer {
70
72
  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
71
73
  no-repeat right bottom;
72
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-button,
73
- .drawer__customScrollbar_1t73i::-webkit-scrollbar-corner {
74
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-button,
75
+ .drawer__customScrollbar_15qp0::-webkit-scrollbar-corner {
74
76
  display: none;
75
- } .drawer__rightPlacement_1t73i {
76
- right: 0;
77
+ } .drawer__rightPlacement_15qp0 {
78
+ right: var(--gap-0);
77
79
  align-self: flex-end;
78
- } .drawer__leftPlacement_1t73i {
79
- left: 0;
80
+ } .drawer__leftPlacement_15qp0 {
81
+ left: var(--gap-0);
80
82
  align-self: flex-start;
81
- } .drawer__content_1t73i {
83
+ } .drawer__content_15qp0 {
82
84
  width: 100%;
83
85
  display: flex;
84
86
  flex-direction: column;
85
87
  flex: 1;
86
- } /* enter */ .drawer__enterRight_1t73i {
88
+ } /* enter */ .drawer__enterRight_15qp0 {
87
89
  transform: translateX(100%);
88
- } .drawer__enterLeft_1t73i {
90
+ } .drawer__enterLeft_15qp0 {
89
91
  transform: translateX(-100%);
90
- } .drawer__contentEnter_1t73i {
92
+ } .drawer__contentEnter_15qp0 {
91
93
  opacity: 0;
92
- } .drawer__backdropEnter_1t73i {
94
+ } .drawer__backdropEnter_15qp0 {
93
95
  background-color: var(--backdrop-hidden-background);
94
- } .drawer__enterActive_1t73i {
96
+ } .drawer__enterActive_15qp0 {
95
97
  transition: transform 0.3s ease-in-out;
96
98
  transform: translateX(0);
97
- } .drawer__backdropEnterActive_1t73i,
98
- .drawer__backdropEnterDone_1t73i {
99
+ } .drawer__backdropEnterActive_15qp0,
100
+ .drawer__backdropEnterDone_15qp0 {
99
101
  transition: background 0.3s ease-in-out;
100
102
  background-color: var(--backdrop-visible-background);
101
- } .drawer__contentEnterActive_1t73i {
103
+ } .drawer__contentEnterActive_15qp0 {
102
104
  transition: opacity 0.2s ease-in-out 0.3s;
103
105
  opacity: 1;
104
- } /* exit */ .drawer__exit_1t73i {
106
+ } /* exit */ .drawer__exit_15qp0 {
105
107
  transform: translateX(0);
106
- } .drawer__backdropExit_1t73i {
108
+ } .drawer__backdropExit_15qp0 {
107
109
  background-color: var(--backdrop-visible-background);
108
- } .drawer__contentExit_1t73i {
110
+ } .drawer__contentExit_15qp0 {
109
111
  opacity: 1;
110
- } .drawer__exitActiveRight_1t73i {
112
+ } .drawer__exitActiveRight_15qp0 {
111
113
  transition: transform 0.25s ease-in-out 0.1s;
112
114
  transform: translateX(100%);
113
- } .drawer__exitActiveLeft_1t73i {
115
+ } .drawer__exitActiveLeft_15qp0 {
114
116
  transition: transform 0.25s ease-in-out 0.1s;
115
117
  transform: translateX(-100%);
116
- } .drawer__backdropExitActive_1t73i,
117
- .drawer__backdropExitDone_1t73i {
118
+ } .drawer__backdropExitActive_15qp0,
119
+ .drawer__backdropExitDone_15qp0 {
118
120
  transition: background 0.25s ease-in-out 0.1s;
119
121
  background-color: var(--backdrop-hidden-background);
120
- } .drawer__contentExitActive_1t73i {
122
+ } .drawer__contentExitActive_15qp0 {
121
123
  opacity: 0;
122
124
  transition: opacity 0.12s ease-in-out;
123
125
  }
package/modern/Component.js CHANGED
@@ -3,7 +3,7 @@ import { CSSTransition } from 'react-transition-group';
3
3
  import cn from 'classnames';
4
4
  import { BaseModal, BaseModalContext } from '@alfalab/core-components-base-modal/modern';
5
5
 
6
- const styles = {"component":"drawer__component_1t73i","customScrollbar":"drawer__customScrollbar_1t73i","rightPlacement":"drawer__rightPlacement_1t73i","leftPlacement":"drawer__leftPlacement_1t73i","content":"drawer__content_1t73i","enterRight":"drawer__enterRight_1t73i","enterLeft":"drawer__enterLeft_1t73i","contentEnter":"drawer__contentEnter_1t73i","backdropEnter":"drawer__backdropEnter_1t73i","enterActive":"drawer__enterActive_1t73i","backdropEnterActive":"drawer__backdropEnterActive_1t73i","backdropEnterDone":"drawer__backdropEnterDone_1t73i","contentEnterActive":"drawer__contentEnterActive_1t73i","exit":"drawer__exit_1t73i","backdropExit":"drawer__backdropExit_1t73i","contentExit":"drawer__contentExit_1t73i","exitActiveRight":"drawer__exitActiveRight_1t73i","exitActiveLeft":"drawer__exitActiveLeft_1t73i","backdropExitActive":"drawer__backdropExitActive_1t73i","backdropExitDone":"drawer__backdropExitDone_1t73i","contentExitActive":"drawer__contentExitActive_1t73i"};
6
+ const styles = {"component":"drawer__component_15qp0","customScrollbar":"drawer__customScrollbar_15qp0","rightPlacement":"drawer__rightPlacement_15qp0","leftPlacement":"drawer__leftPlacement_15qp0","content":"drawer__content_15qp0","enterRight":"drawer__enterRight_15qp0","enterLeft":"drawer__enterLeft_15qp0","contentEnter":"drawer__contentEnter_15qp0","backdropEnter":"drawer__backdropEnter_15qp0","enterActive":"drawer__enterActive_15qp0","backdropEnterActive":"drawer__backdropEnterActive_15qp0","backdropEnterDone":"drawer__backdropEnterDone_15qp0","contentEnterActive":"drawer__contentEnterActive_15qp0","exit":"drawer__exit_15qp0","backdropExit":"drawer__backdropExit_15qp0","contentExit":"drawer__contentExit_15qp0","exitActiveRight":"drawer__exitActiveRight_15qp0","exitActiveLeft":"drawer__exitActiveLeft_15qp0","backdropExitActive":"drawer__backdropExitActive_15qp0","backdropExitDone":"drawer__backdropExitDone_15qp0","contentExitActive":"drawer__contentExitActive_15qp0"};
7
7
  require('./index.css')
8
8
 
9
9
  const ANIMATION_DURATION = 600;
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: r12i2 */
1
+ /* hash: pmkh2 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -17,9 +17,11 @@
17
17
  --border-radius-circle: 50%;
18
18
 
19
19
  /* новые значения, используйте их */
20
+ --border-radius-6: 6px;
20
21
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
22
 
22
23
  /* новые значения, используйте их */
24
+ --gap-0: 0;
23
25
  } :root {
24
26
  } :root {
25
27
  } :root {
@@ -27,97 +29,97 @@
27
29
  --backdrop-hidden-background: transparent;
28
30
  } :root {
29
31
  --drawer-width: 500px;
30
- } .drawer__component_1t73i {
31
- top: 0;
32
+ } .drawer__component_15qp0 {
33
+ top: var(--gap-0);
32
34
  height: 100%;
33
35
  width: var(--drawer-width);
34
36
  flex: 1;
35
37
  overflow: auto;
36
38
  will-change: transform;
37
- } .drawer__component_1t73i.drawer__component_1t73i {
39
+ } .drawer__component_15qp0.drawer__component_15qp0 {
38
40
  position: fixed;
39
- } .drawer__customScrollbar_1t73i {
41
+ } .drawer__customScrollbar_15qp0 {
40
42
  overflow: auto;
41
43
  cursor: auto;
42
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar {
44
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar {
43
45
  width: 12px;
44
46
  height: 12px;
45
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-track {
47
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-track {
46
48
  background-color: transparent;
47
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-track-piece {
49
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-track-piece {
48
50
  background-color: transparent;
49
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb {
51
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb {
50
52
  background-color: var(--color-light-neutral-translucent-500);
51
53
  border-color: transparent;
52
54
  border-style: solid;
53
55
  border-width: 4px;
54
56
  background-clip: padding-box;
55
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:vertical {
56
- border-radius: var(--border-radius-circle) / 6px;
57
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:vertical {
58
+ border-radius: var(--border-radius-circle) / var(--border-radius-6);
57
59
  min-height: 40px;
58
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:vertical:hover {
60
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:vertical:hover {
59
61
  border-radius: var(--border-radius-circle) / 7px;
60
62
  border-width: 4px 3px;
61
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:horizontal {
62
- border-radius: 6px / var(--border-radius-circle);
63
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:horizontal {
64
+ border-radius: var(--border-radius-6) / var(--border-radius-circle);
63
65
  min-width: 40px;
64
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:horizontal:hover {
66
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:horizontal:hover {
65
67
  border-radius: 7px / var(--border-radius-circle);
66
68
  border-width: 3px 4px;
67
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-thumb:active {
69
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-thumb:active {
68
70
  background-color: var(--color-light-text-secondary);
69
- } .drawer__customScrollbar_1t73i::-webkit-resizer {
71
+ } .drawer__customScrollbar_15qp0::-webkit-resizer {
70
72
  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
71
73
  no-repeat right bottom;
72
- } .drawer__customScrollbar_1t73i::-webkit-scrollbar-button,
73
- .drawer__customScrollbar_1t73i::-webkit-scrollbar-corner {
74
+ } .drawer__customScrollbar_15qp0::-webkit-scrollbar-button,
75
+ .drawer__customScrollbar_15qp0::-webkit-scrollbar-corner {
74
76
  display: none;
75
- } .drawer__rightPlacement_1t73i {
76
- right: 0;
77
+ } .drawer__rightPlacement_15qp0 {
78
+ right: var(--gap-0);
77
79
  align-self: flex-end;
78
- } .drawer__leftPlacement_1t73i {
79
- left: 0;
80
+ } .drawer__leftPlacement_15qp0 {
81
+ left: var(--gap-0);
80
82
  align-self: flex-start;
81
- } .drawer__content_1t73i {
83
+ } .drawer__content_15qp0 {
82
84
  width: 100%;
83
85
  display: flex;
84
86
  flex-direction: column;
85
87
  flex: 1;
86
- } /* enter */ .drawer__enterRight_1t73i {
88
+ } /* enter */ .drawer__enterRight_15qp0 {
87
89
  transform: translateX(100%);
88
- } .drawer__enterLeft_1t73i {
90
+ } .drawer__enterLeft_15qp0 {
89
91
  transform: translateX(-100%);
90
- } .drawer__contentEnter_1t73i {
92
+ } .drawer__contentEnter_15qp0 {
91
93
  opacity: 0;
92
- } .drawer__backdropEnter_1t73i {
94
+ } .drawer__backdropEnter_15qp0 {
93
95
  background-color: var(--backdrop-hidden-background);
94
- } .drawer__enterActive_1t73i {
96
+ } .drawer__enterActive_15qp0 {
95
97
  transition: transform 0.3s ease-in-out;
96
98
  transform: translateX(0);
97
- } .drawer__backdropEnterActive_1t73i,
98
- .drawer__backdropEnterDone_1t73i {
99
+ } .drawer__backdropEnterActive_15qp0,
100
+ .drawer__backdropEnterDone_15qp0 {
99
101
  transition: background 0.3s ease-in-out;
100
102
  background-color: var(--backdrop-visible-background);
101
- } .drawer__contentEnterActive_1t73i {
103
+ } .drawer__contentEnterActive_15qp0 {
102
104
  transition: opacity 0.2s ease-in-out 0.3s;
103
105
  opacity: 1;
104
- } /* exit */ .drawer__exit_1t73i {
106
+ } /* exit */ .drawer__exit_15qp0 {
105
107
  transform: translateX(0);
106
- } .drawer__backdropExit_1t73i {
108
+ } .drawer__backdropExit_15qp0 {
107
109
  background-color: var(--backdrop-visible-background);
108
- } .drawer__contentExit_1t73i {
110
+ } .drawer__contentExit_15qp0 {
109
111
  opacity: 1;
110
- } .drawer__exitActiveRight_1t73i {
112
+ } .drawer__exitActiveRight_15qp0 {
111
113
  transition: transform 0.25s ease-in-out 0.1s;
112
114
  transform: translateX(100%);
113
- } .drawer__exitActiveLeft_1t73i {
115
+ } .drawer__exitActiveLeft_15qp0 {
114
116
  transition: transform 0.25s ease-in-out 0.1s;
115
117
  transform: translateX(-100%);
116
- } .drawer__backdropExitActive_1t73i,
117
- .drawer__backdropExitDone_1t73i {
118
+ } .drawer__backdropExitActive_15qp0,
119
+ .drawer__backdropExitDone_15qp0 {
118
120
  transition: background 0.25s ease-in-out 0.1s;
119
121
  background-color: var(--backdrop-hidden-background);
120
- } .drawer__contentExitActive_1t73i {
122
+ } .drawer__contentExitActive_15qp0 {
121
123
  opacity: 0;
122
124
  transition: opacity 0.12s ease-in-out;
123
125
  }
package/moderncssm/Component.d.ts ADDED
@@ -0,0 +1,40 @@
1
+ /// <reference types="react-transition-group" />
2
+ /// <reference types="react" />
3
+ import React from 'react';
4
+ import { TransitionProps } from 'react-transition-group/Transition';
5
+ import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
+ declare const ANIMATION_DURATION = 600;
7
+ type DrawerProps = Omit<BaseModalProps, 'container'> & {
8
+ /**
9
+ * Край экрана, с которого может появиться Drawer.
10
+ * @default "right"
11
+ */
12
+ placement?: 'left' | 'right';
13
+ /**
14
+ * Нужно ли использовать нативный скроллбар
15
+ * @default true
16
+ */
17
+ nativeScrollbar?: boolean;
18
+ /**
19
+ * Пропсы для анимации контента (CSSTransition)
20
+ */
21
+ contentTransitionProps?: Partial<TransitionProps>;
22
+ };
23
+ declare const DrawerContext: React.Context<BaseModalContext>;
24
+ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
25
+ /**
26
+ * Край экрана, с которого может появиться Drawer.
27
+ * @default "right"
28
+ */
29
+ placement?: "left" | "right" | undefined;
30
+ /**
31
+ * Нужно ли использовать нативный скроллбар
32
+ * @default true
33
+ */
34
+ nativeScrollbar?: boolean | undefined;
35
+ /**
36
+ * Пропсы для анимации контента (CSSTransition)
37
+ */
38
+ contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
39
+ } & React.RefAttributes<HTMLDivElement>>;
40
+ export { ANIMATION_DURATION, DrawerProps, DrawerContext, Drawer };
package/moderncssm/Component.js ADDED
@@ -0,0 +1,69 @@
1
+ import React, { forwardRef, useMemo } from 'react';
2
+ import { CSSTransition } from 'react-transition-group';
3
+ import cn from 'classnames';
4
+ import { BaseModal, BaseModalContext } from '@alfalab/core-components-base-modal/moderncssm';
5
+ import styles from './index.module.css';
6
+
7
+ const ANIMATION_DURATION = 600;
8
+ const DrawerContext = BaseModalContext;
9
+ const backdropProps = {
10
+ classNames: {
11
+ enter: styles.backdropEnter,
12
+ appear: styles.backdropEnter,
13
+ enterActive: styles.backdropEnterActive,
14
+ appearActive: styles.backdropEnterActive,
15
+ enterDone: styles.backdropEnterDone,
16
+ appearDone: styles.backdropEnterDone,
17
+ exit: styles.backdropExit,
18
+ exitActive: styles.backdropExitActive,
19
+ exitDone: styles.backdropExitDone,
20
+ },
21
+ timeout: ANIMATION_DURATION,
22
+ };
23
+ const contentProps = {
24
+ classNames: {
25
+ enter: styles.contentEnter,
26
+ appear: styles.contentEnter,
27
+ enterActive: styles.contentEnterActive,
28
+ appearActive: styles.contentEnterActive,
29
+ exit: styles.contentExit,
30
+ exitActive: styles.contentExitActive,
31
+ },
32
+ timeout: ANIMATION_DURATION,
33
+ };
34
+ const Drawer = forwardRef(({ open, className, children, contentTransitionProps, nativeScrollbar = true, placement = 'right', ...restProps }, ref) => {
35
+ const isRightPlacement = placement === 'right';
36
+ const isLeftPlacement = placement === 'left';
37
+ const transitionProps = useMemo(() => {
38
+ const enterClassName = cn({
39
+ [styles.enterRight]: isRightPlacement,
40
+ [styles.enterLeft]: isLeftPlacement,
41
+ });
42
+ const exitClassName = cn({
43
+ [styles.exitActiveRight]: isRightPlacement,
44
+ [styles.exitActiveLeft]: isLeftPlacement,
45
+ });
46
+ return {
47
+ classNames: {
48
+ enter: enterClassName,
49
+ appear: enterClassName,
50
+ enterActive: styles.enterActive,
51
+ appearActive: styles.enterActive,
52
+ exit: styles.exit,
53
+ exitActive: exitClassName,
54
+ },
55
+ timeout: ANIMATION_DURATION,
56
+ ...restProps.transitionProps,
57
+ };
58
+ }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
59
+ return (React.createElement(BaseModal, { ...restProps, scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, {
60
+ [styles.rightPlacement]: isRightPlacement,
61
+ [styles.leftPlacement]: isLeftPlacement,
62
+ [styles.customScrollbar]: !nativeScrollbar,
63
+ }), transitionProps: transitionProps, backdropProps: { ...backdropProps, ...restProps.backdropProps } },
64
+ React.createElement(CSSTransition, { ...{ ...contentProps, ...contentTransitionProps }, appear: true, in: open },
65
+ React.createElement("div", { className: styles.content }, children))));
66
+ });
67
+ Drawer.displayName = 'Drawer';
68
+
69
+ export { ANIMATION_DURATION, Drawer, DrawerContext };
package/moderncssm/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Component";
package/moderncssm/index.js ADDED
@@ -0,0 +1 @@
1
+ export { ANIMATION_DURATION, Drawer, DrawerContext } from './Component.js';
package/moderncssm/index.module.css ADDED
@@ -0,0 +1,134 @@
1
+ /* */
2
+ :root {
3
+ --backdrop-visible-background: var(--color-light-overlay-default);
4
+ --backdrop-hidden-background: transparent;
5
+ }
6
+ :root {
7
+ --drawer-width: 500px;
8
+ }
9
+ .component {
10
+ top: var(--gap-0);
11
+ height: 100%;
12
+ width: var(--drawer-width);
13
+ flex: 1;
14
+ overflow: auto;
15
+ will-change: transform;
16
+ }
17
+ .component.component {
18
+ position: fixed;
19
+ }
20
+ .customScrollbar {
21
+ overflow: auto;
22
+ cursor: auto;
23
+ }
24
+ .customScrollbar::-webkit-scrollbar {
25
+ width: 12px;
26
+ height: 12px;
27
+ }
28
+ .customScrollbar::-webkit-scrollbar-track {
29
+ background-color: transparent;
30
+ }
31
+ .customScrollbar::-webkit-scrollbar-track-piece {
32
+ background-color: transparent;
33
+ }
34
+ .customScrollbar::-webkit-scrollbar-thumb {
35
+ background-color: var(--color-light-neutral-translucent-500);
36
+ border-color: transparent;
37
+ border-style: solid;
38
+ border-width: 4px;
39
+ background-clip: padding-box;
40
+ }
41
+ .customScrollbar::-webkit-scrollbar-thumb:vertical {
42
+ border-radius: var(--border-radius-circle) / var(--border-radius-6);
43
+ min-height: 40px;
44
+ }
45
+ .customScrollbar::-webkit-scrollbar-thumb:vertical:hover {
46
+ border-radius: var(--border-radius-circle) / 7px;
47
+ border-width: 4px 3px;
48
+ }
49
+ .customScrollbar::-webkit-scrollbar-thumb:horizontal {
50
+ border-radius: var(--border-radius-6) / var(--border-radius-circle);
51
+ min-width: 40px;
52
+ }
53
+ .customScrollbar::-webkit-scrollbar-thumb:horizontal:hover {
54
+ border-radius: 7px / var(--border-radius-circle);
55
+ border-width: 3px 4px;
56
+ }
57
+ .customScrollbar::-webkit-scrollbar-thumb:active {
58
+ background-color: var(--color-light-text-secondary);
59
+ }
60
+ .customScrollbar::-webkit-resizer {
61
+ background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
62
+ no-repeat right bottom;
63
+ }
64
+ .customScrollbar::-webkit-scrollbar-button,
65
+ .customScrollbar::-webkit-scrollbar-corner {
66
+ display: none;
67
+ }
68
+ .rightPlacement {
69
+ right: var(--gap-0);
70
+ align-self: flex-end;
71
+ }
72
+ .leftPlacement {
73
+ left: var(--gap-0);
74
+ align-self: flex-start;
75
+ }
76
+ .content {
77
+ width: 100%;
78
+ display: flex;
79
+ flex-direction: column;
80
+ flex: 1;
81
+ }
82
+ /* enter */
83
+ .enterRight {
84
+ transform: translateX(100%);
85
+ }
86
+ .enterLeft {
87
+ transform: translateX(-100%);
88
+ }
89
+ .contentEnter {
90
+ opacity: 0;
91
+ }
92
+ .backdropEnter {
93
+ background-color: var(--backdrop-hidden-background);
94
+ }
95
+ .enterActive {
96
+ transition: transform 0.3s ease-in-out;
97
+ transform: translateX(0);
98
+ }
99
+ .backdropEnterActive,
100
+ .backdropEnterDone {
101
+ transition: background 0.3s ease-in-out;
102
+ background-color: var(--backdrop-visible-background);
103
+ }
104
+ .contentEnterActive {
105
+ transition: opacity 0.2s ease-in-out 0.3s;
106
+ opacity: 1;
107
+ }
108
+ /* exit */
109
+ .exit {
110
+ transform: translateX(0);
111
+ }
112
+ .backdropExit {
113
+ background-color: var(--backdrop-visible-background);
114
+ }
115
+ .contentExit {
116
+ opacity: 1;
117
+ }
118
+ .exitActiveRight {
119
+ transition: transform 0.25s ease-in-out 0.1s;
120
+ transform: translateX(100%);
121
+ }
122
+ .exitActiveLeft {
123
+ transition: transform 0.25s ease-in-out 0.1s;
124
+ transform: translateX(-100%);
125
+ }
126
+ .backdropExitActive,
127
+ .backdropExitDone {
128
+ transition: background 0.25s ease-in-out 0.1s;
129
+ background-color: var(--backdrop-hidden-background);
130
+ }
131
+ .contentExitActive {
132
+ opacity: 0;
133
+ transition: opacity 0.12s ease-in-out;
134
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-drawer",
3
- "version": "5.0.17",
3
+ "version": "5.1.1",
4
4
  "description": "Drawer component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,11 +15,11 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-base-modal": "^5.7.11",
18
+ "@alfalab/core-components-base-modal": "^5.8.1",
19
19
  "classnames": "^2.3.1",
20
20
  "react-transition-group": "^4.4.5",
21
21
  "tslib": "^2.4.0"
22
22
  },
23
- "themesVersion": "13.0.2",
24
- "varsVersion": "9.11.1"
23
+ "themesVersion": "13.2.0",
24
+ "varsVersion": "9.13.0"
25
25
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-themes/src/default.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
  @import '@alfalab/core-components-backdrop/src/vars.css';
3
3
 
4
4
  :root {
@@ -6,7 +6,7 @@
6
6
  }
7
7
 
8
8
  .component {
9
- top: 0;
9
+ top: var(--gap-0);
10
10
  height: 100%;
11
11
  width: var(--drawer-width);
12
12
  flex: 1;
@@ -23,12 +23,12 @@
23
23
  }
24
24
 
25
25
  .rightPlacement {
26
- right: 0;
26
+ right: var(--gap-0);
27
27
  align-self: flex-end;
28
28
  }
29
29
 
30
30
  .leftPlacement {
31
- left: 0;
31
+ left: var(--gap-0);
32
32
  align-self: flex-start;
33
33
  }
34
34