@alfalab/core-components-drawer 4.2.12 → 5.0.0

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 (20) hide show
  1. package/Component.d.ts +0 -9
  2. package/Component.js +5 -6
  3. package/cssm/Component.d.ts +0 -9
  4. package/cssm/Component.js +4 -5
  5. package/cssm/index.js +0 -1
  6. package/cssm/index.module.css +33 -3
  7. package/esm/Component.d.ts +0 -9
  8. package/esm/Component.js +5 -6
  9. package/esm/index.css +53 -23
  10. package/esm/index.js +0 -1
  11. package/index.css +53 -23
  12. package/index.js +0 -1
  13. package/modern/Component.d.ts +0 -9
  14. package/modern/Component.js +5 -6
  15. package/modern/index.css +53 -23
  16. package/modern/index.js +0 -1
  17. package/package.json +2 -3
  18. package/src/Component.tsx +125 -0
  19. package/src/index.module.css +106 -0
  20. package/src/index.ts +1 -0
package/Component.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  import React from 'react';
4
4
  import { TransitionProps } from 'react-transition-group/Transition';
5
5
  import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
- import { ScrollbarProps } from "@alfalab/core-components-scrollbar";
7
6
  declare const ANIMATION_DURATION = 600;
8
7
  type DrawerProps = Omit<BaseModalProps, 'container'> & {
9
8
  /**
@@ -16,10 +15,6 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
16
15
  * @default true
17
16
  */
18
17
  nativeScrollbar?: boolean;
19
- /**
20
- * Пропсы кастомного скроллбара.
21
- */
22
- scrollbarProps?: Partial<Omit<ScrollbarProps, 'children'>>;
23
18
  /**
24
19
  * Пропсы для анимации контента (CSSTransition)
25
20
  */
@@ -37,10 +32,6 @@ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "cont
37
32
  * @default true
38
33
  */
39
34
  nativeScrollbar?: boolean | undefined;
40
- /**
41
- * Пропсы кастомного скроллбара.
42
- */
43
- scrollbarProps?: Partial<Omit<ScrollbarProps, "children">> | undefined;
44
35
  /**
45
36
  * Пропсы для анимации контента (CSSTransition)
46
37
  */
package/Component.js CHANGED
@@ -7,14 +7,13 @@ var React = require('react');
7
7
  var reactTransitionGroup = require('react-transition-group');
8
8
  var cn = require('classnames');
9
9
  var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
10
- var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar');
11
10
 
12
11
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
13
12
 
14
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
15
 
17
- var styles = {"component":"drawer__component_1dduk","rightPlacement":"drawer__rightPlacement_1dduk","leftPlacement":"drawer__leftPlacement_1dduk","content":"drawer__content_1dduk","simplebar":"drawer__simplebar_1dduk","enterRight":"drawer__enterRight_1dduk","enterLeft":"drawer__enterLeft_1dduk","contentEnter":"drawer__contentEnter_1dduk","backdropEnter":"drawer__backdropEnter_1dduk","enterActive":"drawer__enterActive_1dduk","backdropEnterActive":"drawer__backdropEnterActive_1dduk","backdropEnterDone":"drawer__backdropEnterDone_1dduk","contentEnterActive":"drawer__contentEnterActive_1dduk","exit":"drawer__exit_1dduk","backdropExit":"drawer__backdropExit_1dduk","contentExit":"drawer__contentExit_1dduk","exitActiveRight":"drawer__exitActiveRight_1dduk","exitActiveLeft":"drawer__exitActiveLeft_1dduk","backdropExitActive":"drawer__backdropExitActive_1dduk","backdropExitDone":"drawer__backdropExitDone_1dduk","contentExitActive":"drawer__contentExitActive_1dduk"};
16
+ var styles = {"component":"drawer__component_12v9h","customScrollbar":"drawer__customScrollbar_12v9h","rightPlacement":"drawer__rightPlacement_12v9h","leftPlacement":"drawer__leftPlacement_12v9h","content":"drawer__content_12v9h","enterRight":"drawer__enterRight_12v9h","enterLeft":"drawer__enterLeft_12v9h","contentEnter":"drawer__contentEnter_12v9h","backdropEnter":"drawer__backdropEnter_12v9h","enterActive":"drawer__enterActive_12v9h","backdropEnterActive":"drawer__backdropEnterActive_12v9h","backdropEnterDone":"drawer__backdropEnterDone_12v9h","contentEnterActive":"drawer__contentEnterActive_12v9h","exit":"drawer__exit_12v9h","backdropExit":"drawer__backdropExit_12v9h","contentExit":"drawer__contentExit_12v9h","exitActiveRight":"drawer__exitActiveRight_12v9h","exitActiveLeft":"drawer__exitActiveLeft_12v9h","backdropExitActive":"drawer__backdropExitActive_12v9h","backdropExitDone":"drawer__backdropExitDone_12v9h","contentExitActive":"drawer__contentExitActive_12v9h"};
18
17
  require('./index.css')
19
18
 
20
19
  var ANIMATION_DURATION = 600;
@@ -46,7 +45,7 @@ var contentProps = {
46
45
  };
47
46
  var Drawer = React.forwardRef(function (_a, ref) {
48
47
  var _b;
49
- var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, scrollbarProps = _a.scrollbarProps, restProps = tslib.__rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement", "scrollbarProps"]);
48
+ var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, restProps = tslib.__rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement"]);
50
49
  var isRightPlacement = placement === 'right';
51
50
  var isLeftPlacement = placement === 'left';
52
51
  var transitionProps = React.useMemo(function () {
@@ -68,13 +67,13 @@ var Drawer = React.forwardRef(function (_a, ref) {
68
67
  exitActive: exitClassName,
69
68
  }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
70
69
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
71
- var renderWithNativeScrollbar = function () { return React__default.default.createElement("div", { className: styles.content }, children); };
72
- var renderWithCustomScrollbar = function () { return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, tslib.__assign({}, scrollbarProps, { className: cn__default.default(styles.simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
73
70
  return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default.default(styles.component, className, (_b = {},
74
71
  _b[styles.rightPlacement] = isRightPlacement,
75
72
  _b[styles.leftPlacement] = isLeftPlacement,
73
+ _b[styles.customScrollbar] = !nativeScrollbar,
76
74
  _b)), transitionProps: transitionProps, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), restProps.backdropProps) }),
77
- React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({}, tslib.__assign(tslib.__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
75
+ React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({}, tslib.__assign(tslib.__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }),
76
+ React__default.default.createElement("div", { className: styles.content }, children))));
78
77
  });
79
78
 
80
79
  exports.ANIMATION_DURATION = ANIMATION_DURATION;
package/cssm/Component.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  import React from 'react';
4
4
  import { TransitionProps } from 'react-transition-group/Transition';
5
5
  import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
- import { ScrollbarProps } from "@alfalab/core-components-scrollbar";
7
6
  declare const ANIMATION_DURATION = 600;
8
7
  type DrawerProps = Omit<BaseModalProps, 'container'> & {
9
8
  /**
@@ -16,10 +15,6 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
16
15
  * @default true
17
16
  */
18
17
  nativeScrollbar?: boolean;
19
- /**
20
- * Пропсы кастомного скроллбара.
21
- */
22
- scrollbarProps?: Partial<Omit<ScrollbarProps, 'children'>>;
23
18
  /**
24
19
  * Пропсы для анимации контента (CSSTransition)
25
20
  */
@@ -37,10 +32,6 @@ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "cont
37
32
  * @default true
38
33
  */
39
34
  nativeScrollbar?: boolean | undefined;
40
- /**
41
- * Пропсы кастомного скроллбара.
42
- */
43
- scrollbarProps?: Partial<Omit<ScrollbarProps, "children">> | undefined;
44
35
  /**
45
36
  * Пропсы для анимации контента (CSSTransition)
46
37
  */
package/cssm/Component.js CHANGED
@@ -7,7 +7,6 @@ var React = require('react');
7
7
  var reactTransitionGroup = require('react-transition-group');
8
8
  var cn = require('classnames');
9
9
  var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
10
- var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar/cssm');
11
10
  var styles = require('./index.module.css');
12
11
 
13
12
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -45,7 +44,7 @@ var contentProps = {
45
44
  };
46
45
  var Drawer = React.forwardRef(function (_a, ref) {
47
46
  var _b;
48
- var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, scrollbarProps = _a.scrollbarProps, restProps = tslib.__rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement", "scrollbarProps"]);
47
+ var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, restProps = tslib.__rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement"]);
49
48
  var isRightPlacement = placement === 'right';
50
49
  var isLeftPlacement = placement === 'left';
51
50
  var transitionProps = React.useMemo(function () {
@@ -67,13 +66,13 @@ var Drawer = React.forwardRef(function (_a, ref) {
67
66
  exitActive: exitClassName,
68
67
  }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
69
68
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
70
- var renderWithNativeScrollbar = function () { return React__default.default.createElement("div", { className: styles__default.default.content }, children); };
71
- var renderWithCustomScrollbar = function () { return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, tslib.__assign({}, scrollbarProps, { className: cn__default.default(styles__default.default.simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
72
69
  return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default.default(styles__default.default.component, className, (_b = {},
73
70
  _b[styles__default.default.rightPlacement] = isRightPlacement,
74
71
  _b[styles__default.default.leftPlacement] = isLeftPlacement,
72
+ _b[styles__default.default.customScrollbar] = !nativeScrollbar,
75
73
  _b)), transitionProps: transitionProps, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), restProps.backdropProps) }),
76
- React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({}, tslib.__assign(tslib.__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
74
+ React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({}, tslib.__assign(tslib.__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }),
75
+ React__default.default.createElement("div", { className: styles__default.default.content }, children))));
77
76
  });
78
77
 
79
78
  exports.ANIMATION_DURATION = ANIMATION_DURATION;
package/cssm/index.js CHANGED
@@ -8,7 +8,6 @@ require('react');
8
8
  require('react-transition-group');
9
9
  require('classnames');
10
10
  require('@alfalab/core-components-base-modal/cssm');
11
- require('@alfalab/core-components-scrollbar/cssm');
12
11
  require('./index.module.css');
13
12
 
14
13
 
package/cssm/index.module.css CHANGED
@@ -1,6 +1,8 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
3
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* 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 */
4
+ --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
5
+ --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6);
4
6
  } :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 */
5
7
  } :root {
6
8
  } :root {
@@ -11,6 +13,7 @@
11
13
 
12
14
  /* Hard up */
13
15
  } :root {
16
+ --border-radius-circle: 50%;
14
17
  } :root {
15
18
  } :root {
16
19
  } :root {
@@ -27,7 +30,36 @@
27
30
  flex: 1;
28
31
  overflow: auto;
29
32
  will-change: transform;
30
- } .rightPlacement {
33
+ } .customScrollbar {
34
+ overflow: auto;
35
+ overflow: overlay;
36
+ cursor: auto;
37
+ } .customScrollbar::-webkit-scrollbar {
38
+ width: 12px;
39
+ } .customScrollbar::-webkit-scrollbar-track {
40
+ background-color: transparent;
41
+ } .customScrollbar::-webkit-scrollbar-track-piece {
42
+ background-color: transparent;
43
+ } .customScrollbar::-webkit-scrollbar-thumb {
44
+ background-color: var(--color-light-graphic-primary-alpha-30);
45
+ border-radius: var(--border-radius-circle) / 6px;
46
+ border-color: transparent;
47
+ border-style: solid;
48
+ border-width: 4px;
49
+ background-clip: padding-box;
50
+ min-height: 40px;
51
+ } .customScrollbar::-webkit-scrollbar-thumb:hover {
52
+ border-radius: var(--border-radius-circle) / 7px;
53
+ border-width: 4px 3px;
54
+ } .customScrollbar::-webkit-scrollbar-thumb:active {
55
+ background-color: var(--color-light-graphic-primary-alpha-60);
56
+ } .customScrollbar::-webkit-resizer {
57
+ 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>')
58
+ no-repeat right bottom;
59
+ } .customScrollbar::-webkit-scrollbar-button,
60
+ .customScrollbar::-webkit-scrollbar-corner {
61
+ display: none;
62
+ } .rightPlacement {
31
63
  right: 0;
32
64
  align-self: flex-end;
33
65
  } .leftPlacement {
@@ -38,8 +70,6 @@
38
70
  display: flex;
39
71
  flex-direction: column;
40
72
  flex: 1;
41
- } .simplebar {
42
- height: 100vh;
43
73
  } /* enter */ .enterRight {
44
74
  transform: translateX(100%);
45
75
  } .enterLeft {
package/esm/Component.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  import React from 'react';
4
4
  import { TransitionProps } from 'react-transition-group/Transition';
5
5
  import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
- import { ScrollbarProps } from "@alfalab/core-components-scrollbar";
7
6
  declare const ANIMATION_DURATION = 600;
8
7
  type DrawerProps = Omit<BaseModalProps, 'container'> & {
9
8
  /**
@@ -16,10 +15,6 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
16
15
  * @default true
17
16
  */
18
17
  nativeScrollbar?: boolean;
19
- /**
20
- * Пропсы кастомного скроллбара.
21
- */
22
- scrollbarProps?: Partial<Omit<ScrollbarProps, 'children'>>;
23
18
  /**
24
19
  * Пропсы для анимации контента (CSSTransition)
25
20
  */
@@ -37,10 +32,6 @@ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "cont
37
32
  * @default true
38
33
  */
39
34
  nativeScrollbar?: boolean | undefined;
40
- /**
41
- * Пропсы кастомного скроллбара.
42
- */
43
- scrollbarProps?: Partial<Omit<ScrollbarProps, "children">> | undefined;
44
35
  /**
45
36
  * Пропсы для анимации контента (CSSTransition)
46
37
  */
package/esm/Component.js CHANGED
@@ -3,9 +3,8 @@ import React, { forwardRef, useMemo } from 'react';
3
3
  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
- import { Scrollbar } from '@alfalab/core-components-scrollbar/esm';
7
6
 
8
- var styles = {"component":"drawer__component_1dduk","rightPlacement":"drawer__rightPlacement_1dduk","leftPlacement":"drawer__leftPlacement_1dduk","content":"drawer__content_1dduk","simplebar":"drawer__simplebar_1dduk","enterRight":"drawer__enterRight_1dduk","enterLeft":"drawer__enterLeft_1dduk","contentEnter":"drawer__contentEnter_1dduk","backdropEnter":"drawer__backdropEnter_1dduk","enterActive":"drawer__enterActive_1dduk","backdropEnterActive":"drawer__backdropEnterActive_1dduk","backdropEnterDone":"drawer__backdropEnterDone_1dduk","contentEnterActive":"drawer__contentEnterActive_1dduk","exit":"drawer__exit_1dduk","backdropExit":"drawer__backdropExit_1dduk","contentExit":"drawer__contentExit_1dduk","exitActiveRight":"drawer__exitActiveRight_1dduk","exitActiveLeft":"drawer__exitActiveLeft_1dduk","backdropExitActive":"drawer__backdropExitActive_1dduk","backdropExitDone":"drawer__backdropExitDone_1dduk","contentExitActive":"drawer__contentExitActive_1dduk"};
7
+ var styles = {"component":"drawer__component_12v9h","customScrollbar":"drawer__customScrollbar_12v9h","rightPlacement":"drawer__rightPlacement_12v9h","leftPlacement":"drawer__leftPlacement_12v9h","content":"drawer__content_12v9h","enterRight":"drawer__enterRight_12v9h","enterLeft":"drawer__enterLeft_12v9h","contentEnter":"drawer__contentEnter_12v9h","backdropEnter":"drawer__backdropEnter_12v9h","enterActive":"drawer__enterActive_12v9h","backdropEnterActive":"drawer__backdropEnterActive_12v9h","backdropEnterDone":"drawer__backdropEnterDone_12v9h","contentEnterActive":"drawer__contentEnterActive_12v9h","exit":"drawer__exit_12v9h","backdropExit":"drawer__backdropExit_12v9h","contentExit":"drawer__contentExit_12v9h","exitActiveRight":"drawer__exitActiveRight_12v9h","exitActiveLeft":"drawer__exitActiveLeft_12v9h","backdropExitActive":"drawer__backdropExitActive_12v9h","backdropExitDone":"drawer__backdropExitDone_12v9h","contentExitActive":"drawer__contentExitActive_12v9h"};
9
8
  require('./index.css')
10
9
 
11
10
  var ANIMATION_DURATION = 600;
@@ -37,7 +36,7 @@ var contentProps = {
37
36
  };
38
37
  var Drawer = forwardRef(function (_a, ref) {
39
38
  var _b;
40
- var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, scrollbarProps = _a.scrollbarProps, restProps = __rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement", "scrollbarProps"]);
39
+ var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, restProps = __rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement"]);
41
40
  var isRightPlacement = placement === 'right';
42
41
  var isLeftPlacement = placement === 'left';
43
42
  var transitionProps = useMemo(function () {
@@ -59,13 +58,13 @@ var Drawer = forwardRef(function (_a, ref) {
59
58
  exitActive: exitClassName,
60
59
  }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
61
60
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
62
- var renderWithNativeScrollbar = function () { return React.createElement("div", { className: styles.content }, children); };
63
- var renderWithCustomScrollbar = function () { return (React.createElement(Scrollbar, __assign({}, scrollbarProps, { className: cn(styles.simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
64
61
  return (React.createElement(BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, (_b = {},
65
62
  _b[styles.rightPlacement] = isRightPlacement,
66
63
  _b[styles.leftPlacement] = isLeftPlacement,
64
+ _b[styles.customScrollbar] = !nativeScrollbar,
67
65
  _b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
68
- React.createElement(CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
66
+ React.createElement(CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }),
67
+ React.createElement("div", { className: styles.content }, children))));
69
68
  });
70
69
 
71
70
  export { ANIMATION_DURATION, Drawer, DrawerContext };
package/esm/index.css CHANGED
@@ -1,7 +1,9 @@
1
- /* hash: 1prhc */
1
+ /* hash: 9t1mk */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* 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 */
5
+ --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
6
+ --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6);
5
7
  } :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 */
6
8
  } :root {
7
9
  } :root {
@@ -12,6 +14,7 @@
12
14
 
13
15
  /* Hard up */
14
16
  } :root {
17
+ --border-radius-circle: 50%;
15
18
  } :root {
16
19
  } :root {
17
20
  } :root {
@@ -20,7 +23,7 @@
20
23
  --backdrop-hidden-background: transparent;
21
24
  } :root {
22
25
  --drawer-width: 500px;
23
- } .drawer__component_1dduk {
26
+ } .drawer__component_12v9h {
24
27
  position: fixed;
25
28
  top: 0;
26
29
  height: 100%;
@@ -28,54 +31,81 @@
28
31
  flex: 1;
29
32
  overflow: auto;
30
33
  will-change: transform;
31
- } .drawer__rightPlacement_1dduk {
34
+ } .drawer__customScrollbar_12v9h {
35
+ overflow: auto;
36
+ overflow: overlay;
37
+ cursor: auto;
38
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar {
39
+ width: 12px;
40
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-track {
41
+ background-color: transparent;
42
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-track-piece {
43
+ background-color: transparent;
44
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb {
45
+ background-color: var(--color-light-graphic-primary-alpha-30);
46
+ border-radius: var(--border-radius-circle) / 6px;
47
+ border-color: transparent;
48
+ border-style: solid;
49
+ border-width: 4px;
50
+ background-clip: padding-box;
51
+ min-height: 40px;
52
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb:hover {
53
+ border-radius: var(--border-radius-circle) / 7px;
54
+ border-width: 4px 3px;
55
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb:active {
56
+ background-color: var(--color-light-graphic-primary-alpha-60);
57
+ } .drawer__customScrollbar_12v9h::-webkit-resizer {
58
+ 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>')
59
+ no-repeat right bottom;
60
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-button,
61
+ .drawer__customScrollbar_12v9h::-webkit-scrollbar-corner {
62
+ display: none;
63
+ } .drawer__rightPlacement_12v9h {
32
64
  right: 0;
33
65
  align-self: flex-end;
34
- } .drawer__leftPlacement_1dduk {
66
+ } .drawer__leftPlacement_12v9h {
35
67
  left: 0;
36
68
  align-self: flex-start;
37
- } .drawer__content_1dduk {
69
+ } .drawer__content_12v9h {
38
70
  width: 100%;
39
71
  display: flex;
40
72
  flex-direction: column;
41
73
  flex: 1;
42
- } .drawer__simplebar_1dduk {
43
- height: 100vh;
44
- } /* enter */ .drawer__enterRight_1dduk {
74
+ } /* enter */ .drawer__enterRight_12v9h {
45
75
  transform: translateX(100%);
46
- } .drawer__enterLeft_1dduk {
76
+ } .drawer__enterLeft_12v9h {
47
77
  transform: translateX(-100%);
48
- } .drawer__contentEnter_1dduk {
78
+ } .drawer__contentEnter_12v9h {
49
79
  opacity: 0;
50
- } .drawer__backdropEnter_1dduk {
80
+ } .drawer__backdropEnter_12v9h {
51
81
  background-color: var(--backdrop-hidden-background);
52
- } .drawer__enterActive_1dduk {
82
+ } .drawer__enterActive_12v9h {
53
83
  transition: transform 0.3s ease-in-out;
54
84
  transform: translateX(0);
55
- } .drawer__backdropEnterActive_1dduk,
56
- .drawer__backdropEnterDone_1dduk {
85
+ } .drawer__backdropEnterActive_12v9h,
86
+ .drawer__backdropEnterDone_12v9h {
57
87
  transition: background 0.3s ease-in-out;
58
88
  background-color: var(--backdrop-visible-background);
59
- } .drawer__contentEnterActive_1dduk {
89
+ } .drawer__contentEnterActive_12v9h {
60
90
  transition: opacity 0.2s ease-in-out 0.3s;
61
91
  opacity: 1;
62
- } /* exit */ .drawer__exit_1dduk {
92
+ } /* exit */ .drawer__exit_12v9h {
63
93
  transform: translateX(0);
64
- } .drawer__backdropExit_1dduk {
94
+ } .drawer__backdropExit_12v9h {
65
95
  background-color: var(--backdrop-visible-background);
66
- } .drawer__contentExit_1dduk {
96
+ } .drawer__contentExit_12v9h {
67
97
  opacity: 1;
68
- } .drawer__exitActiveRight_1dduk {
98
+ } .drawer__exitActiveRight_12v9h {
69
99
  transition: transform 0.25s ease-in-out 0.1s;
70
100
  transform: translateX(100%);
71
- } .drawer__exitActiveLeft_1dduk {
101
+ } .drawer__exitActiveLeft_12v9h {
72
102
  transition: transform 0.25s ease-in-out 0.1s;
73
103
  transform: translateX(-100%);
74
- } .drawer__backdropExitActive_1dduk,
75
- .drawer__backdropExitDone_1dduk {
104
+ } .drawer__backdropExitActive_12v9h,
105
+ .drawer__backdropExitDone_12v9h {
76
106
  transition: background 0.25s ease-in-out 0.1s;
77
107
  background-color: var(--backdrop-hidden-background);
78
- } .drawer__contentExitActive_1dduk {
108
+ } .drawer__contentExitActive_12v9h {
79
109
  opacity: 0;
80
110
  transition: opacity 0.12s ease-in-out;
81
111
  }
package/esm/index.js CHANGED
@@ -4,4 +4,3 @@ import 'react';
4
4
  import 'react-transition-group';
5
5
  import 'classnames';
6
6
  import '@alfalab/core-components-base-modal/esm';
7
- import '@alfalab/core-components-scrollbar/esm';
package/index.css CHANGED
@@ -1,7 +1,9 @@
1
- /* hash: 1prhc */
1
+ /* hash: 9t1mk */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* 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 */
5
+ --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
6
+ --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6);
5
7
  } :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 */
6
8
  } :root {
7
9
  } :root {
@@ -12,6 +14,7 @@
12
14
 
13
15
  /* Hard up */
14
16
  } :root {
17
+ --border-radius-circle: 50%;
15
18
  } :root {
16
19
  } :root {
17
20
  } :root {
@@ -20,7 +23,7 @@
20
23
  --backdrop-hidden-background: transparent;
21
24
  } :root {
22
25
  --drawer-width: 500px;
23
- } .drawer__component_1dduk {
26
+ } .drawer__component_12v9h {
24
27
  position: fixed;
25
28
  top: 0;
26
29
  height: 100%;
@@ -28,54 +31,81 @@
28
31
  flex: 1;
29
32
  overflow: auto;
30
33
  will-change: transform;
31
- } .drawer__rightPlacement_1dduk {
34
+ } .drawer__customScrollbar_12v9h {
35
+ overflow: auto;
36
+ overflow: overlay;
37
+ cursor: auto;
38
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar {
39
+ width: 12px;
40
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-track {
41
+ background-color: transparent;
42
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-track-piece {
43
+ background-color: transparent;
44
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb {
45
+ background-color: var(--color-light-graphic-primary-alpha-30);
46
+ border-radius: var(--border-radius-circle) / 6px;
47
+ border-color: transparent;
48
+ border-style: solid;
49
+ border-width: 4px;
50
+ background-clip: padding-box;
51
+ min-height: 40px;
52
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb:hover {
53
+ border-radius: var(--border-radius-circle) / 7px;
54
+ border-width: 4px 3px;
55
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb:active {
56
+ background-color: var(--color-light-graphic-primary-alpha-60);
57
+ } .drawer__customScrollbar_12v9h::-webkit-resizer {
58
+ 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>')
59
+ no-repeat right bottom;
60
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-button,
61
+ .drawer__customScrollbar_12v9h::-webkit-scrollbar-corner {
62
+ display: none;
63
+ } .drawer__rightPlacement_12v9h {
32
64
  right: 0;
33
65
  align-self: flex-end;
34
- } .drawer__leftPlacement_1dduk {
66
+ } .drawer__leftPlacement_12v9h {
35
67
  left: 0;
36
68
  align-self: flex-start;
37
- } .drawer__content_1dduk {
69
+ } .drawer__content_12v9h {
38
70
  width: 100%;
39
71
  display: flex;
40
72
  flex-direction: column;
41
73
  flex: 1;
42
- } .drawer__simplebar_1dduk {
43
- height: 100vh;
44
- } /* enter */ .drawer__enterRight_1dduk {
74
+ } /* enter */ .drawer__enterRight_12v9h {
45
75
  transform: translateX(100%);
46
- } .drawer__enterLeft_1dduk {
76
+ } .drawer__enterLeft_12v9h {
47
77
  transform: translateX(-100%);
48
- } .drawer__contentEnter_1dduk {
78
+ } .drawer__contentEnter_12v9h {
49
79
  opacity: 0;
50
- } .drawer__backdropEnter_1dduk {
80
+ } .drawer__backdropEnter_12v9h {
51
81
  background-color: var(--backdrop-hidden-background);
52
- } .drawer__enterActive_1dduk {
82
+ } .drawer__enterActive_12v9h {
53
83
  transition: transform 0.3s ease-in-out;
54
84
  transform: translateX(0);
55
- } .drawer__backdropEnterActive_1dduk,
56
- .drawer__backdropEnterDone_1dduk {
85
+ } .drawer__backdropEnterActive_12v9h,
86
+ .drawer__backdropEnterDone_12v9h {
57
87
  transition: background 0.3s ease-in-out;
58
88
  background-color: var(--backdrop-visible-background);
59
- } .drawer__contentEnterActive_1dduk {
89
+ } .drawer__contentEnterActive_12v9h {
60
90
  transition: opacity 0.2s ease-in-out 0.3s;
61
91
  opacity: 1;
62
- } /* exit */ .drawer__exit_1dduk {
92
+ } /* exit */ .drawer__exit_12v9h {
63
93
  transform: translateX(0);
64
- } .drawer__backdropExit_1dduk {
94
+ } .drawer__backdropExit_12v9h {
65
95
  background-color: var(--backdrop-visible-background);
66
- } .drawer__contentExit_1dduk {
96
+ } .drawer__contentExit_12v9h {
67
97
  opacity: 1;
68
- } .drawer__exitActiveRight_1dduk {
98
+ } .drawer__exitActiveRight_12v9h {
69
99
  transition: transform 0.25s ease-in-out 0.1s;
70
100
  transform: translateX(100%);
71
- } .drawer__exitActiveLeft_1dduk {
101
+ } .drawer__exitActiveLeft_12v9h {
72
102
  transition: transform 0.25s ease-in-out 0.1s;
73
103
  transform: translateX(-100%);
74
- } .drawer__backdropExitActive_1dduk,
75
- .drawer__backdropExitDone_1dduk {
104
+ } .drawer__backdropExitActive_12v9h,
105
+ .drawer__backdropExitDone_12v9h {
76
106
  transition: background 0.25s ease-in-out 0.1s;
77
107
  background-color: var(--backdrop-hidden-background);
78
- } .drawer__contentExitActive_1dduk {
108
+ } .drawer__contentExitActive_12v9h {
79
109
  opacity: 0;
80
110
  transition: opacity 0.12s ease-in-out;
81
111
  }
package/index.js CHANGED
@@ -8,7 +8,6 @@ require('react');
8
8
  require('react-transition-group');
9
9
  require('classnames');
10
10
  require('@alfalab/core-components-base-modal');
11
- require('@alfalab/core-components-scrollbar');
12
11
 
13
12
 
14
13
 
package/modern/Component.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  import React from 'react';
4
4
  import { TransitionProps } from 'react-transition-group/Transition';
5
5
  import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
- import { ScrollbarProps } from "@alfalab/core-components-scrollbar";
7
6
  declare const ANIMATION_DURATION = 600;
8
7
  type DrawerProps = Omit<BaseModalProps, 'container'> & {
9
8
  /**
@@ -16,10 +15,6 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
16
15
  * @default true
17
16
  */
18
17
  nativeScrollbar?: boolean;
19
- /**
20
- * Пропсы кастомного скроллбара.
21
- */
22
- scrollbarProps?: Partial<Omit<ScrollbarProps, 'children'>>;
23
18
  /**
24
19
  * Пропсы для анимации контента (CSSTransition)
25
20
  */
@@ -37,10 +32,6 @@ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "cont
37
32
  * @default true
38
33
  */
39
34
  nativeScrollbar?: boolean | undefined;
40
- /**
41
- * Пропсы кастомного скроллбара.
42
- */
43
- scrollbarProps?: Partial<Omit<ScrollbarProps, "children">> | undefined;
44
35
  /**
45
36
  * Пропсы для анимации контента (CSSTransition)
46
37
  */
package/modern/Component.js CHANGED
@@ -2,9 +2,8 @@ import React, { forwardRef, useMemo } from 'react';
2
2
  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
- import { Scrollbar } from '@alfalab/core-components-scrollbar/modern';
6
5
 
7
- const styles = {"component":"drawer__component_1dduk","rightPlacement":"drawer__rightPlacement_1dduk","leftPlacement":"drawer__leftPlacement_1dduk","content":"drawer__content_1dduk","simplebar":"drawer__simplebar_1dduk","enterRight":"drawer__enterRight_1dduk","enterLeft":"drawer__enterLeft_1dduk","contentEnter":"drawer__contentEnter_1dduk","backdropEnter":"drawer__backdropEnter_1dduk","enterActive":"drawer__enterActive_1dduk","backdropEnterActive":"drawer__backdropEnterActive_1dduk","backdropEnterDone":"drawer__backdropEnterDone_1dduk","contentEnterActive":"drawer__contentEnterActive_1dduk","exit":"drawer__exit_1dduk","backdropExit":"drawer__backdropExit_1dduk","contentExit":"drawer__contentExit_1dduk","exitActiveRight":"drawer__exitActiveRight_1dduk","exitActiveLeft":"drawer__exitActiveLeft_1dduk","backdropExitActive":"drawer__backdropExitActive_1dduk","backdropExitDone":"drawer__backdropExitDone_1dduk","contentExitActive":"drawer__contentExitActive_1dduk"};
6
+ const styles = {"component":"drawer__component_12v9h","customScrollbar":"drawer__customScrollbar_12v9h","rightPlacement":"drawer__rightPlacement_12v9h","leftPlacement":"drawer__leftPlacement_12v9h","content":"drawer__content_12v9h","enterRight":"drawer__enterRight_12v9h","enterLeft":"drawer__enterLeft_12v9h","contentEnter":"drawer__contentEnter_12v9h","backdropEnter":"drawer__backdropEnter_12v9h","enterActive":"drawer__enterActive_12v9h","backdropEnterActive":"drawer__backdropEnterActive_12v9h","backdropEnterDone":"drawer__backdropEnterDone_12v9h","contentEnterActive":"drawer__contentEnterActive_12v9h","exit":"drawer__exit_12v9h","backdropExit":"drawer__backdropExit_12v9h","contentExit":"drawer__contentExit_12v9h","exitActiveRight":"drawer__exitActiveRight_12v9h","exitActiveLeft":"drawer__exitActiveLeft_12v9h","backdropExitActive":"drawer__backdropExitActive_12v9h","backdropExitDone":"drawer__backdropExitDone_12v9h","contentExitActive":"drawer__contentExitActive_12v9h"};
8
7
  require('./index.css')
9
8
 
10
9
  const ANIMATION_DURATION = 600;
@@ -34,7 +33,7 @@ const contentProps = {
34
33
  },
35
34
  timeout: ANIMATION_DURATION,
36
35
  };
37
- const Drawer = forwardRef(({ open, className, children, contentTransitionProps, nativeScrollbar = true, placement = 'right', scrollbarProps, ...restProps }, ref) => {
36
+ const Drawer = forwardRef(({ open, className, children, contentTransitionProps, nativeScrollbar = true, placement = 'right', ...restProps }, ref) => {
38
37
  const isRightPlacement = placement === 'right';
39
38
  const isLeftPlacement = placement === 'left';
40
39
  const transitionProps = useMemo(() => {
@@ -59,13 +58,13 @@ const Drawer = forwardRef(({ open, className, children, contentTransitionProps,
59
58
  ...restProps.transitionProps,
60
59
  };
61
60
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
62
- const renderWithNativeScrollbar = () => React.createElement("div", { className: styles.content }, children);
63
- const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { ...scrollbarProps, className: cn(styles.simplebar, scrollbarProps?.className) }, children));
64
61
  return (React.createElement(BaseModal, { ...restProps, scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, {
65
62
  [styles.rightPlacement]: isRightPlacement,
66
63
  [styles.leftPlacement]: isLeftPlacement,
64
+ [styles.customScrollbar]: !nativeScrollbar,
67
65
  }), transitionProps: transitionProps, backdropProps: { ...backdropProps, ...restProps.backdropProps } },
68
- React.createElement(CSSTransition, { ...{ ...contentProps, ...contentTransitionProps }, appear: true, in: open }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
66
+ React.createElement(CSSTransition, { ...{ ...contentProps, ...contentTransitionProps }, appear: true, in: open },
67
+ React.createElement("div", { className: styles.content }, children))));
69
68
  });
70
69
 
71
70
  export { ANIMATION_DURATION, Drawer, DrawerContext };
package/modern/index.css CHANGED
@@ -1,7 +1,9 @@
1
- /* hash: 1prhc */
1
+ /* hash: 9t1mk */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* 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 */
5
+ --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
6
+ --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6);
5
7
  } :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 */
6
8
  } :root {
7
9
  } :root {
@@ -12,6 +14,7 @@
12
14
 
13
15
  /* Hard up */
14
16
  } :root {
17
+ --border-radius-circle: 50%;
15
18
  } :root {
16
19
  } :root {
17
20
  } :root {
@@ -20,7 +23,7 @@
20
23
  --backdrop-hidden-background: transparent;
21
24
  } :root {
22
25
  --drawer-width: 500px;
23
- } .drawer__component_1dduk {
26
+ } .drawer__component_12v9h {
24
27
  position: fixed;
25
28
  top: 0;
26
29
  height: 100%;
@@ -28,54 +31,81 @@
28
31
  flex: 1;
29
32
  overflow: auto;
30
33
  will-change: transform;
31
- } .drawer__rightPlacement_1dduk {
34
+ } .drawer__customScrollbar_12v9h {
35
+ overflow: auto;
36
+ overflow: overlay;
37
+ cursor: auto;
38
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar {
39
+ width: 12px;
40
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-track {
41
+ background-color: transparent;
42
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-track-piece {
43
+ background-color: transparent;
44
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb {
45
+ background-color: var(--color-light-graphic-primary-alpha-30);
46
+ border-radius: var(--border-radius-circle) / 6px;
47
+ border-color: transparent;
48
+ border-style: solid;
49
+ border-width: 4px;
50
+ background-clip: padding-box;
51
+ min-height: 40px;
52
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb:hover {
53
+ border-radius: var(--border-radius-circle) / 7px;
54
+ border-width: 4px 3px;
55
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-thumb:active {
56
+ background-color: var(--color-light-graphic-primary-alpha-60);
57
+ } .drawer__customScrollbar_12v9h::-webkit-resizer {
58
+ 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>')
59
+ no-repeat right bottom;
60
+ } .drawer__customScrollbar_12v9h::-webkit-scrollbar-button,
61
+ .drawer__customScrollbar_12v9h::-webkit-scrollbar-corner {
62
+ display: none;
63
+ } .drawer__rightPlacement_12v9h {
32
64
  right: 0;
33
65
  align-self: flex-end;
34
- } .drawer__leftPlacement_1dduk {
66
+ } .drawer__leftPlacement_12v9h {
35
67
  left: 0;
36
68
  align-self: flex-start;
37
- } .drawer__content_1dduk {
69
+ } .drawer__content_12v9h {
38
70
  width: 100%;
39
71
  display: flex;
40
72
  flex-direction: column;
41
73
  flex: 1;
42
- } .drawer__simplebar_1dduk {
43
- height: 100vh;
44
- } /* enter */ .drawer__enterRight_1dduk {
74
+ } /* enter */ .drawer__enterRight_12v9h {
45
75
  transform: translateX(100%);
46
- } .drawer__enterLeft_1dduk {
76
+ } .drawer__enterLeft_12v9h {
47
77
  transform: translateX(-100%);
48
- } .drawer__contentEnter_1dduk {
78
+ } .drawer__contentEnter_12v9h {
49
79
  opacity: 0;
50
- } .drawer__backdropEnter_1dduk {
80
+ } .drawer__backdropEnter_12v9h {
51
81
  background-color: var(--backdrop-hidden-background);
52
- } .drawer__enterActive_1dduk {
82
+ } .drawer__enterActive_12v9h {
53
83
  transition: transform 0.3s ease-in-out;
54
84
  transform: translateX(0);
55
- } .drawer__backdropEnterActive_1dduk,
56
- .drawer__backdropEnterDone_1dduk {
85
+ } .drawer__backdropEnterActive_12v9h,
86
+ .drawer__backdropEnterDone_12v9h {
57
87
  transition: background 0.3s ease-in-out;
58
88
  background-color: var(--backdrop-visible-background);
59
- } .drawer__contentEnterActive_1dduk {
89
+ } .drawer__contentEnterActive_12v9h {
60
90
  transition: opacity 0.2s ease-in-out 0.3s;
61
91
  opacity: 1;
62
- } /* exit */ .drawer__exit_1dduk {
92
+ } /* exit */ .drawer__exit_12v9h {
63
93
  transform: translateX(0);
64
- } .drawer__backdropExit_1dduk {
94
+ } .drawer__backdropExit_12v9h {
65
95
  background-color: var(--backdrop-visible-background);
66
- } .drawer__contentExit_1dduk {
96
+ } .drawer__contentExit_12v9h {
67
97
  opacity: 1;
68
- } .drawer__exitActiveRight_1dduk {
98
+ } .drawer__exitActiveRight_12v9h {
69
99
  transition: transform 0.25s ease-in-out 0.1s;
70
100
  transform: translateX(100%);
71
- } .drawer__exitActiveLeft_1dduk {
101
+ } .drawer__exitActiveLeft_12v9h {
72
102
  transition: transform 0.25s ease-in-out 0.1s;
73
103
  transform: translateX(-100%);
74
- } .drawer__backdropExitActive_1dduk,
75
- .drawer__backdropExitDone_1dduk {
104
+ } .drawer__backdropExitActive_12v9h,
105
+ .drawer__backdropExitDone_12v9h {
76
106
  transition: background 0.25s ease-in-out 0.1s;
77
107
  background-color: var(--backdrop-hidden-background);
78
- } .drawer__contentExitActive_1dduk {
108
+ } .drawer__contentExitActive_12v9h {
79
109
  opacity: 0;
80
110
  transition: opacity 0.12s ease-in-out;
81
111
  }
package/modern/index.js CHANGED
@@ -3,4 +3,3 @@ import 'react';
3
3
  import 'react-transition-group';
4
4
  import 'classnames';
5
5
  import '@alfalab/core-components-base-modal/modern';
6
- import '@alfalab/core-components-scrollbar/modern';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-drawer",
3
- "version": "4.2.12",
3
+ "version": "5.0.0",
4
4
  "description": "Drawer component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,8 +15,7 @@
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.2.1",
19
- "@alfalab/core-components-scrollbar": "^2.1.6",
18
+ "@alfalab/core-components-base-modal": "^5.3.0",
20
19
  "classnames": "^2.3.1",
21
20
  "tslib": "^2.4.0"
22
21
  }
package/src/Component.tsx ADDED
@@ -0,0 +1,125 @@
1
+ import React, { forwardRef, useMemo } from 'react';
2
+ import { CSSTransition } from 'react-transition-group';
3
+ import { TransitionProps } from 'react-transition-group/Transition';
4
+ import cn from 'classnames';
5
+
6
+ import { BaseModal, BaseModalContext, BaseModalProps } from '@alfalab/core-components-base-modal';
7
+
8
+ import styles from './index.module.css';
9
+
10
+ export const ANIMATION_DURATION = 600;
11
+
12
+ export type DrawerProps = Omit<BaseModalProps, 'container'> & {
13
+ /**
14
+ * Край экрана, с которого может появиться Drawer.
15
+ * @default "right"
16
+ */
17
+ placement?: 'left' | 'right';
18
+
19
+ /**
20
+ * Нужно ли использовать нативный скроллбар
21
+ * @default true
22
+ */
23
+ nativeScrollbar?: boolean;
24
+
25
+ /**
26
+ * Пропсы для анимации контента (CSSTransition)
27
+ */
28
+ contentTransitionProps?: Partial<TransitionProps>;
29
+ };
30
+
31
+ export const DrawerContext = BaseModalContext;
32
+
33
+ const backdropProps = {
34
+ classNames: {
35
+ enter: styles.backdropEnter,
36
+ appear: styles.backdropEnter,
37
+ enterActive: styles.backdropEnterActive,
38
+ appearActive: styles.backdropEnterActive,
39
+ enterDone: styles.backdropEnterDone,
40
+ appearDone: styles.backdropEnterDone,
41
+ exit: styles.backdropExit,
42
+ exitActive: styles.backdropExitActive,
43
+ exitDone: styles.backdropExitDone,
44
+ },
45
+ timeout: ANIMATION_DURATION,
46
+ };
47
+
48
+ const contentProps = {
49
+ classNames: {
50
+ enter: styles.contentEnter,
51
+ appear: styles.contentEnter,
52
+ enterActive: styles.contentEnterActive,
53
+ appearActive: styles.contentEnterActive,
54
+ exit: styles.contentExit,
55
+ exitActive: styles.contentExitActive,
56
+ },
57
+ timeout: ANIMATION_DURATION,
58
+ };
59
+
60
+ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
61
+ (
62
+ {
63
+ open,
64
+ className,
65
+ children,
66
+ contentTransitionProps,
67
+ nativeScrollbar = true,
68
+ placement = 'right',
69
+ ...restProps
70
+ },
71
+ ref,
72
+ ) => {
73
+ const isRightPlacement = placement === 'right';
74
+ const isLeftPlacement = placement === 'left';
75
+
76
+ const transitionProps = useMemo(() => {
77
+ const enterClassName = cn({
78
+ [styles.enterRight]: isRightPlacement,
79
+ [styles.enterLeft]: isLeftPlacement,
80
+ });
81
+
82
+ const exitClassName = cn({
83
+ [styles.exitActiveRight]: isRightPlacement,
84
+ [styles.exitActiveLeft]: isLeftPlacement,
85
+ });
86
+
87
+ return {
88
+ classNames: {
89
+ enter: enterClassName,
90
+ appear: enterClassName,
91
+ enterActive: styles.enterActive,
92
+ appearActive: styles.enterActive,
93
+ exit: styles.exit,
94
+ exitActive: exitClassName,
95
+ },
96
+ timeout: ANIMATION_DURATION,
97
+ ...restProps.transitionProps,
98
+ };
99
+ }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
100
+
101
+ return (
102
+ <BaseModal
103
+ {...restProps}
104
+ scrollHandler='content'
105
+ ref={ref}
106
+ open={open}
107
+ className={cn(styles.component, className, {
108
+ [styles.rightPlacement]: isRightPlacement,
109
+ [styles.leftPlacement]: isLeftPlacement,
110
+ [styles.customScrollbar]: !nativeScrollbar,
111
+ })}
112
+ transitionProps={transitionProps}
113
+ backdropProps={{ ...backdropProps, ...restProps.backdropProps }}
114
+ >
115
+ <CSSTransition
116
+ {...{ ...contentProps, ...contentTransitionProps }}
117
+ appear={true}
118
+ in={open}
119
+ >
120
+ <div className={styles.content}>{children}</div>
121
+ </CSSTransition>
122
+ </BaseModal>
123
+ );
124
+ },
125
+ );
package/src/index.module.css ADDED
@@ -0,0 +1,106 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
2
+ @import '@alfalab/core-components-backdrop/src/vars.css';
3
+
4
+ :root {
5
+ --drawer-width: 500px;
6
+ }
7
+
8
+ .component {
9
+ position: fixed;
10
+ top: 0;
11
+ height: 100%;
12
+ width: var(--drawer-width);
13
+ flex: 1;
14
+ overflow: auto;
15
+ will-change: transform;
16
+ }
17
+
18
+ .customScrollbar {
19
+ @mixin custom-scrollbar;
20
+ }
21
+
22
+ .rightPlacement {
23
+ right: 0;
24
+ align-self: flex-end;
25
+ }
26
+
27
+ .leftPlacement {
28
+ left: 0;
29
+ align-self: flex-start;
30
+ }
31
+
32
+ .content {
33
+ width: 100%;
34
+ display: flex;
35
+ flex-direction: column;
36
+ flex: 1;
37
+ }
38
+
39
+ /* enter */
40
+
41
+ .enterRight {
42
+ transform: translateX(100%);
43
+ }
44
+
45
+ .enterLeft {
46
+ transform: translateX(-100%);
47
+ }
48
+
49
+ .contentEnter {
50
+ opacity: 0;
51
+ }
52
+
53
+ .backdropEnter {
54
+ background-color: var(--backdrop-hidden-background);
55
+ }
56
+
57
+ .enterActive {
58
+ transition: transform 0.3s ease-in-out;
59
+ transform: translateX(0);
60
+ }
61
+
62
+ .backdropEnterActive,
63
+ .backdropEnterDone {
64
+ transition: background 0.3s ease-in-out;
65
+ background-color: var(--backdrop-visible-background);
66
+ }
67
+
68
+ .contentEnterActive {
69
+ transition: opacity 0.2s ease-in-out 0.3s;
70
+ opacity: 1;
71
+ }
72
+
73
+ /* exit */
74
+
75
+ .exit {
76
+ transform: translateX(0);
77
+ }
78
+
79
+ .backdropExit {
80
+ background-color: var(--backdrop-visible-background);
81
+ }
82
+
83
+ .contentExit {
84
+ opacity: 1;
85
+ }
86
+
87
+ .exitActiveRight {
88
+ transition: transform 0.25s ease-in-out 0.1s;
89
+ transform: translateX(100%);
90
+ }
91
+
92
+ .exitActiveLeft {
93
+ transition: transform 0.25s ease-in-out 0.1s;
94
+ transform: translateX(-100%);
95
+ }
96
+
97
+ .backdropExitActive,
98
+ .backdropExitDone {
99
+ transition: background 0.25s ease-in-out 0.1s;
100
+ background-color: var(--backdrop-hidden-background);
101
+ }
102
+
103
+ .contentExitActive {
104
+ opacity: 0;
105
+ transition: opacity 0.12s ease-in-out;
106
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';