@alfalab/core-components-drawer 4.1.0 → 4.2.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 (12) hide show
  1. package/Component.d.ts +12 -3
  2. package/Component.js +4 -4
  3. package/cssm/Component.d.ts +12 -3
  4. package/cssm/Component.js +3 -3
  5. package/esm/Component.d.ts +12 -3
  6. package/esm/Component.js +4 -4
  7. package/esm/index.css +22 -22
  8. package/index.css +22 -22
  9. package/modern/Component.d.ts +12 -3
  10. package/modern/Component.js +6 -6
  11. package/modern/index.css +22 -22
  12. package/package.json +2 -2
package/Component.d.ts CHANGED
@@ -2,7 +2,8 @@
2
2
  /// <reference types="react" />
3
3
  import React from 'react';
4
4
  import { TransitionProps } from 'react-transition-group/Transition';
5
- import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
5
+ import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
+ import { ScrollbarProps } from "@alfalab/core-components-scrollbar";
6
7
  declare const ANIMATION_DURATION = 600;
7
8
  type DrawerProps = Omit<BaseModalProps, 'container'> & {
8
9
  /**
@@ -15,13 +16,17 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
15
16
  * @default true
16
17
  */
17
18
  nativeScrollbar?: boolean;
19
+ /**
20
+ * Пропсы кастомного скроллбара.
21
+ */
22
+ scrollbarProps?: Partial<Omit<ScrollbarProps, 'children'>>;
18
23
  /**
19
24
  * Пропсы для анимации контента (CSSTransition)
20
25
  */
21
26
  contentTransitionProps?: Partial<TransitionProps>;
22
27
  };
23
28
  declare const DrawerContext: React.Context<BaseModalContext>;
24
- declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "disableBlockingScroll" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
29
+ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
25
30
  /**
26
31
  * Край экрана, с которого может появиться Drawer.
27
32
  * @default "right"
@@ -32,9 +37,13 @@ declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "chil
32
37
  * @default true
33
38
  */
34
39
  nativeScrollbar?: boolean | undefined;
40
+ /**
41
+ * Пропсы кастомного скроллбара.
42
+ */
43
+ scrollbarProps?: Partial<Omit<ScrollbarProps, "children">> | undefined;
35
44
  /**
36
45
  * Пропсы для анимации контента (CSSTransition)
37
46
  */
38
- contentTransitionProps?: Partial<TimeoutProps<undefined>> | Partial<EndListenerProps<undefined>> | undefined;
47
+ contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
39
48
  } & React.RefAttributes<HTMLDivElement>>;
40
49
  export { ANIMATION_DURATION, DrawerProps, DrawerContext, Drawer };
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
15
 
16
- /*! *****************************************************************************
16
+ /******************************************************************************
17
17
  Copyright (c) Microsoft Corporation.
18
18
 
19
19
  Permission to use, copy, modify, and/or distribute this software for any
@@ -52,7 +52,7 @@ function __rest(s, e) {
52
52
  return t;
53
53
  }
54
54
 
55
- var styles = {"component":"drawer__component_fy4c0","rightPlacement":"drawer__rightPlacement_fy4c0","leftPlacement":"drawer__leftPlacement_fy4c0","content":"drawer__content_fy4c0","simplebar":"drawer__simplebar_fy4c0","enterRight":"drawer__enterRight_fy4c0","enterLeft":"drawer__enterLeft_fy4c0","contentEnter":"drawer__contentEnter_fy4c0","backdropEnter":"drawer__backdropEnter_fy4c0","enterActive":"drawer__enterActive_fy4c0","backdropEnterActive":"drawer__backdropEnterActive_fy4c0","backdropEnterDone":"drawer__backdropEnterDone_fy4c0","contentEnterActive":"drawer__contentEnterActive_fy4c0","exit":"drawer__exit_fy4c0","backdropExit":"drawer__backdropExit_fy4c0","contentExit":"drawer__contentExit_fy4c0","exitActiveRight":"drawer__exitActiveRight_fy4c0","exitActiveLeft":"drawer__exitActiveLeft_fy4c0","backdropExitActive":"drawer__backdropExitActive_fy4c0","backdropExitDone":"drawer__backdropExitDone_fy4c0","contentExitActive":"drawer__contentExitActive_fy4c0"};
55
+ var styles = {"component":"drawer__component_1ivv1","rightPlacement":"drawer__rightPlacement_1ivv1","leftPlacement":"drawer__leftPlacement_1ivv1","content":"drawer__content_1ivv1","simplebar":"drawer__simplebar_1ivv1","enterRight":"drawer__enterRight_1ivv1","enterLeft":"drawer__enterLeft_1ivv1","contentEnter":"drawer__contentEnter_1ivv1","backdropEnter":"drawer__backdropEnter_1ivv1","enterActive":"drawer__enterActive_1ivv1","backdropEnterActive":"drawer__backdropEnterActive_1ivv1","backdropEnterDone":"drawer__backdropEnterDone_1ivv1","contentEnterActive":"drawer__contentEnterActive_1ivv1","exit":"drawer__exit_1ivv1","backdropExit":"drawer__backdropExit_1ivv1","contentExit":"drawer__contentExit_1ivv1","exitActiveRight":"drawer__exitActiveRight_1ivv1","exitActiveLeft":"drawer__exitActiveLeft_1ivv1","backdropExitActive":"drawer__backdropExitActive_1ivv1","backdropExitDone":"drawer__backdropExitDone_1ivv1","contentExitActive":"drawer__contentExitActive_1ivv1"};
56
56
  require('./index.css')
57
57
 
58
58
  var ANIMATION_DURATION = 600;
@@ -84,7 +84,7 @@ var contentProps = {
84
84
  };
85
85
  var Drawer = React.forwardRef(function (_a, ref) {
86
86
  var _b;
87
- 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"]);
87
+ 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"]);
88
88
  var isRightPlacement = placement === 'right';
89
89
  var isLeftPlacement = placement === 'left';
90
90
  var transitionProps = React.useMemo(function () {
@@ -107,7 +107,7 @@ var Drawer = React.forwardRef(function (_a, ref) {
107
107
  }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
108
108
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
109
109
  var renderWithNativeScrollbar = function () { return React__default['default'].createElement("div", { className: styles.content }, children); };
110
- var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { className: styles.simplebar }, children)); };
110
+ var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, __assign({}, scrollbarProps, { className: cn__default['default'](styles.simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
111
111
  return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles.component, className, (_b = {},
112
112
  _b[styles.rightPlacement] = isRightPlacement,
113
113
  _b[styles.leftPlacement] = isLeftPlacement,
package/cssm/Component.d.ts CHANGED
@@ -2,7 +2,8 @@
2
2
  /// <reference types="react" />
3
3
  import React from 'react';
4
4
  import { TransitionProps } from 'react-transition-group/Transition';
5
- import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
5
+ import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
+ import { ScrollbarProps } from "@alfalab/core-components-scrollbar";
6
7
  declare const ANIMATION_DURATION = 600;
7
8
  type DrawerProps = Omit<BaseModalProps, 'container'> & {
8
9
  /**
@@ -15,13 +16,17 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
15
16
  * @default true
16
17
  */
17
18
  nativeScrollbar?: boolean;
19
+ /**
20
+ * Пропсы кастомного скроллбара.
21
+ */
22
+ scrollbarProps?: Partial<Omit<ScrollbarProps, 'children'>>;
18
23
  /**
19
24
  * Пропсы для анимации контента (CSSTransition)
20
25
  */
21
26
  contentTransitionProps?: Partial<TransitionProps>;
22
27
  };
23
28
  declare const DrawerContext: React.Context<BaseModalContext>;
24
- declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "disableBlockingScroll" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
29
+ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
25
30
  /**
26
31
  * Край экрана, с которого может появиться Drawer.
27
32
  * @default "right"
@@ -32,9 +37,13 @@ declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "chil
32
37
  * @default true
33
38
  */
34
39
  nativeScrollbar?: boolean | undefined;
40
+ /**
41
+ * Пропсы кастомного скроллбара.
42
+ */
43
+ scrollbarProps?: Partial<Omit<ScrollbarProps, "children">> | undefined;
35
44
  /**
36
45
  * Пропсы для анимации контента (CSSTransition)
37
46
  */
38
- contentTransitionProps?: Partial<TimeoutProps<undefined>> | Partial<EndListenerProps<undefined>> | undefined;
47
+ contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
39
48
  } & React.RefAttributes<HTMLDivElement>>;
40
49
  export { ANIMATION_DURATION, DrawerProps, DrawerContext, Drawer };
package/cssm/Component.js CHANGED
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
16
16
  var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
17
17
 
18
- /*! *****************************************************************************
18
+ /******************************************************************************
19
19
  Copyright (c) Microsoft Corporation.
20
20
 
21
21
  Permission to use, copy, modify, and/or distribute this software for any
@@ -83,7 +83,7 @@ var contentProps = {
83
83
  };
84
84
  var Drawer = React.forwardRef(function (_a, ref) {
85
85
  var _b;
86
- 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"]);
86
+ 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"]);
87
87
  var isRightPlacement = placement === 'right';
88
88
  var isLeftPlacement = placement === 'left';
89
89
  var transitionProps = React.useMemo(function () {
@@ -106,7 +106,7 @@ var Drawer = React.forwardRef(function (_a, ref) {
106
106
  }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
107
107
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
108
108
  var renderWithNativeScrollbar = function () { return React__default['default'].createElement("div", { className: styles__default['default'].content }, children); };
109
- var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { className: styles__default['default'].simplebar }, children)); };
109
+ var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, __assign({}, scrollbarProps, { className: cn__default['default'](styles__default['default'].simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
110
110
  return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles__default['default'].component, className, (_b = {},
111
111
  _b[styles__default['default'].rightPlacement] = isRightPlacement,
112
112
  _b[styles__default['default'].leftPlacement] = isLeftPlacement,
package/esm/Component.d.ts CHANGED
@@ -2,7 +2,8 @@
2
2
  /// <reference types="react" />
3
3
  import React from 'react';
4
4
  import { TransitionProps } from 'react-transition-group/Transition';
5
- import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
5
+ import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
+ import { ScrollbarProps } from "@alfalab/core-components-scrollbar";
6
7
  declare const ANIMATION_DURATION = 600;
7
8
  type DrawerProps = Omit<BaseModalProps, 'container'> & {
8
9
  /**
@@ -15,13 +16,17 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
15
16
  * @default true
16
17
  */
17
18
  nativeScrollbar?: boolean;
19
+ /**
20
+ * Пропсы кастомного скроллбара.
21
+ */
22
+ scrollbarProps?: Partial<Omit<ScrollbarProps, 'children'>>;
18
23
  /**
19
24
  * Пропсы для анимации контента (CSSTransition)
20
25
  */
21
26
  contentTransitionProps?: Partial<TransitionProps>;
22
27
  };
23
28
  declare const DrawerContext: React.Context<BaseModalContext>;
24
- declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "disableBlockingScroll" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
29
+ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
25
30
  /**
26
31
  * Край экрана, с которого может появиться Drawer.
27
32
  * @default "right"
@@ -32,9 +37,13 @@ declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "chil
32
37
  * @default true
33
38
  */
34
39
  nativeScrollbar?: boolean | undefined;
40
+ /**
41
+ * Пропсы кастомного скроллбара.
42
+ */
43
+ scrollbarProps?: Partial<Omit<ScrollbarProps, "children">> | undefined;
35
44
  /**
36
45
  * Пропсы для анимации контента (CSSTransition)
37
46
  */
38
- contentTransitionProps?: Partial<TimeoutProps<undefined>> | Partial<EndListenerProps<undefined>> | undefined;
47
+ contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
39
48
  } & React.RefAttributes<HTMLDivElement>>;
40
49
  export { ANIMATION_DURATION, DrawerProps, DrawerContext, Drawer };
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/esm';
5
5
  import { Scrollbar } from '@alfalab/core-components-scrollbar/esm';
6
6
 
7
- /*! *****************************************************************************
7
+ /******************************************************************************
8
8
  Copyright (c) Microsoft Corporation.
9
9
 
10
10
  Permission to use, copy, modify, and/or distribute this software for any
@@ -43,7 +43,7 @@ function __rest(s, e) {
43
43
  return t;
44
44
  }
45
45
 
46
- var styles = {"component":"drawer__component_fy4c0","rightPlacement":"drawer__rightPlacement_fy4c0","leftPlacement":"drawer__leftPlacement_fy4c0","content":"drawer__content_fy4c0","simplebar":"drawer__simplebar_fy4c0","enterRight":"drawer__enterRight_fy4c0","enterLeft":"drawer__enterLeft_fy4c0","contentEnter":"drawer__contentEnter_fy4c0","backdropEnter":"drawer__backdropEnter_fy4c0","enterActive":"drawer__enterActive_fy4c0","backdropEnterActive":"drawer__backdropEnterActive_fy4c0","backdropEnterDone":"drawer__backdropEnterDone_fy4c0","contentEnterActive":"drawer__contentEnterActive_fy4c0","exit":"drawer__exit_fy4c0","backdropExit":"drawer__backdropExit_fy4c0","contentExit":"drawer__contentExit_fy4c0","exitActiveRight":"drawer__exitActiveRight_fy4c0","exitActiveLeft":"drawer__exitActiveLeft_fy4c0","backdropExitActive":"drawer__backdropExitActive_fy4c0","backdropExitDone":"drawer__backdropExitDone_fy4c0","contentExitActive":"drawer__contentExitActive_fy4c0"};
46
+ var styles = {"component":"drawer__component_1ivv1","rightPlacement":"drawer__rightPlacement_1ivv1","leftPlacement":"drawer__leftPlacement_1ivv1","content":"drawer__content_1ivv1","simplebar":"drawer__simplebar_1ivv1","enterRight":"drawer__enterRight_1ivv1","enterLeft":"drawer__enterLeft_1ivv1","contentEnter":"drawer__contentEnter_1ivv1","backdropEnter":"drawer__backdropEnter_1ivv1","enterActive":"drawer__enterActive_1ivv1","backdropEnterActive":"drawer__backdropEnterActive_1ivv1","backdropEnterDone":"drawer__backdropEnterDone_1ivv1","contentEnterActive":"drawer__contentEnterActive_1ivv1","exit":"drawer__exit_1ivv1","backdropExit":"drawer__backdropExit_1ivv1","contentExit":"drawer__contentExit_1ivv1","exitActiveRight":"drawer__exitActiveRight_1ivv1","exitActiveLeft":"drawer__exitActiveLeft_1ivv1","backdropExitActive":"drawer__backdropExitActive_1ivv1","backdropExitDone":"drawer__backdropExitDone_1ivv1","contentExitActive":"drawer__contentExitActive_1ivv1"};
47
47
  require('./index.css')
48
48
 
49
49
  var ANIMATION_DURATION = 600;
@@ -75,7 +75,7 @@ var contentProps = {
75
75
  };
76
76
  var Drawer = forwardRef(function (_a, ref) {
77
77
  var _b;
78
- 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"]);
78
+ 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"]);
79
79
  var isRightPlacement = placement === 'right';
80
80
  var isLeftPlacement = placement === 'left';
81
81
  var transitionProps = useMemo(function () {
@@ -98,7 +98,7 @@ var Drawer = forwardRef(function (_a, ref) {
98
98
  }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
99
99
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
100
100
  var renderWithNativeScrollbar = function () { return React.createElement("div", { className: styles.content }, children); };
101
- var renderWithCustomScrollbar = function () { return (React.createElement(Scrollbar, { className: styles.simplebar }, children)); };
101
+ var renderWithCustomScrollbar = function () { return (React.createElement(Scrollbar, __assign({}, scrollbarProps, { className: cn(styles.simplebar, scrollbarProps === null || scrollbarProps === void 0 ? void 0 : scrollbarProps.className) }), children)); };
102
102
  return (React.createElement(BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, (_b = {},
103
103
  _b[styles.rightPlacement] = isRightPlacement,
104
104
  _b[styles.leftPlacement] = isLeftPlacement,
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1767q */
1
+ /* hash: npyq5 */
2
2
  :root {
3
3
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
4
  }
@@ -17,7 +17,7 @@
17
17
  :root {
18
18
  --drawer-width: 500px;
19
19
  }
20
- .drawer__component_fy4c0 {
20
+ .drawer__component_1ivv1 {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  height: 100%;
@@ -26,73 +26,73 @@
26
26
  overflow: auto;
27
27
  will-change: transform;
28
28
  }
29
- .drawer__rightPlacement_fy4c0 {
29
+ .drawer__rightPlacement_1ivv1 {
30
30
  right: 0;
31
31
  align-self: flex-end;
32
32
  }
33
- .drawer__leftPlacement_fy4c0 {
33
+ .drawer__leftPlacement_1ivv1 {
34
34
  left: 0;
35
35
  align-self: flex-start;
36
36
  }
37
- .drawer__content_fy4c0 {
37
+ .drawer__content_1ivv1 {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
42
  }
43
- .drawer__simplebar_fy4c0 {
43
+ .drawer__simplebar_1ivv1 {
44
44
  height: 100vh;
45
45
  }
46
46
  /* enter */
47
- .drawer__enterRight_fy4c0 {
47
+ .drawer__enterRight_1ivv1 {
48
48
  transform: translateX(100%);
49
49
  }
50
- .drawer__enterLeft_fy4c0 {
50
+ .drawer__enterLeft_1ivv1 {
51
51
  transform: translateX(-100%);
52
52
  }
53
- .drawer__contentEnter_fy4c0 {
53
+ .drawer__contentEnter_1ivv1 {
54
54
  opacity: 0;
55
55
  }
56
- .drawer__backdropEnter_fy4c0 {
56
+ .drawer__backdropEnter_1ivv1 {
57
57
  background-color: var(--backdrop-hidden-background);
58
58
  }
59
- .drawer__enterActive_fy4c0 {
59
+ .drawer__enterActive_1ivv1 {
60
60
  transition: transform 0.3s ease-in-out;
61
61
  transform: translateX(0);
62
62
  }
63
- .drawer__backdropEnterActive_fy4c0,
64
- .drawer__backdropEnterDone_fy4c0 {
63
+ .drawer__backdropEnterActive_1ivv1,
64
+ .drawer__backdropEnterDone_1ivv1 {
65
65
  transition: background 0.3s ease-in-out;
66
66
  background-color: var(--backdrop-visible-background);
67
67
  }
68
- .drawer__contentEnterActive_fy4c0 {
68
+ .drawer__contentEnterActive_1ivv1 {
69
69
  transition: opacity 0.2s ease-in-out 0.3s;
70
70
  opacity: 1;
71
71
  }
72
72
  /* exit */
73
- .drawer__exit_fy4c0 {
73
+ .drawer__exit_1ivv1 {
74
74
  transform: translateX(0);
75
75
  }
76
- .drawer__backdropExit_fy4c0 {
76
+ .drawer__backdropExit_1ivv1 {
77
77
  background-color: var(--backdrop-visible-background);
78
78
  }
79
- .drawer__contentExit_fy4c0 {
79
+ .drawer__contentExit_1ivv1 {
80
80
  opacity: 1;
81
81
  }
82
- .drawer__exitActiveRight_fy4c0 {
82
+ .drawer__exitActiveRight_1ivv1 {
83
83
  transition: transform 0.25s ease-in-out 0.1s;
84
84
  transform: translateX(100%);
85
85
  }
86
- .drawer__exitActiveLeft_fy4c0 {
86
+ .drawer__exitActiveLeft_1ivv1 {
87
87
  transition: transform 0.25s ease-in-out 0.1s;
88
88
  transform: translateX(-100%);
89
89
  }
90
- .drawer__backdropExitActive_fy4c0,
91
- .drawer__backdropExitDone_fy4c0 {
90
+ .drawer__backdropExitActive_1ivv1,
91
+ .drawer__backdropExitDone_1ivv1 {
92
92
  transition: background 0.25s ease-in-out 0.1s;
93
93
  background-color: var(--backdrop-hidden-background);
94
94
  }
95
- .drawer__contentExitActive_fy4c0 {
95
+ .drawer__contentExitActive_1ivv1 {
96
96
  opacity: 0;
97
97
  transition: opacity 0.12s ease-in-out;
98
98
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1767q */
1
+ /* hash: npyq5 */
2
2
  :root {
3
3
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
4
  }
@@ -17,7 +17,7 @@
17
17
  :root {
18
18
  --drawer-width: 500px;
19
19
  }
20
- .drawer__component_fy4c0 {
20
+ .drawer__component_1ivv1 {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  height: 100%;
@@ -26,73 +26,73 @@
26
26
  overflow: auto;
27
27
  will-change: transform;
28
28
  }
29
- .drawer__rightPlacement_fy4c0 {
29
+ .drawer__rightPlacement_1ivv1 {
30
30
  right: 0;
31
31
  align-self: flex-end;
32
32
  }
33
- .drawer__leftPlacement_fy4c0 {
33
+ .drawer__leftPlacement_1ivv1 {
34
34
  left: 0;
35
35
  align-self: flex-start;
36
36
  }
37
- .drawer__content_fy4c0 {
37
+ .drawer__content_1ivv1 {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
42
  }
43
- .drawer__simplebar_fy4c0 {
43
+ .drawer__simplebar_1ivv1 {
44
44
  height: 100vh;
45
45
  }
46
46
  /* enter */
47
- .drawer__enterRight_fy4c0 {
47
+ .drawer__enterRight_1ivv1 {
48
48
  transform: translateX(100%);
49
49
  }
50
- .drawer__enterLeft_fy4c0 {
50
+ .drawer__enterLeft_1ivv1 {
51
51
  transform: translateX(-100%);
52
52
  }
53
- .drawer__contentEnter_fy4c0 {
53
+ .drawer__contentEnter_1ivv1 {
54
54
  opacity: 0;
55
55
  }
56
- .drawer__backdropEnter_fy4c0 {
56
+ .drawer__backdropEnter_1ivv1 {
57
57
  background-color: var(--backdrop-hidden-background);
58
58
  }
59
- .drawer__enterActive_fy4c0 {
59
+ .drawer__enterActive_1ivv1 {
60
60
  transition: transform 0.3s ease-in-out;
61
61
  transform: translateX(0);
62
62
  }
63
- .drawer__backdropEnterActive_fy4c0,
64
- .drawer__backdropEnterDone_fy4c0 {
63
+ .drawer__backdropEnterActive_1ivv1,
64
+ .drawer__backdropEnterDone_1ivv1 {
65
65
  transition: background 0.3s ease-in-out;
66
66
  background-color: var(--backdrop-visible-background);
67
67
  }
68
- .drawer__contentEnterActive_fy4c0 {
68
+ .drawer__contentEnterActive_1ivv1 {
69
69
  transition: opacity 0.2s ease-in-out 0.3s;
70
70
  opacity: 1;
71
71
  }
72
72
  /* exit */
73
- .drawer__exit_fy4c0 {
73
+ .drawer__exit_1ivv1 {
74
74
  transform: translateX(0);
75
75
  }
76
- .drawer__backdropExit_fy4c0 {
76
+ .drawer__backdropExit_1ivv1 {
77
77
  background-color: var(--backdrop-visible-background);
78
78
  }
79
- .drawer__contentExit_fy4c0 {
79
+ .drawer__contentExit_1ivv1 {
80
80
  opacity: 1;
81
81
  }
82
- .drawer__exitActiveRight_fy4c0 {
82
+ .drawer__exitActiveRight_1ivv1 {
83
83
  transition: transform 0.25s ease-in-out 0.1s;
84
84
  transform: translateX(100%);
85
85
  }
86
- .drawer__exitActiveLeft_fy4c0 {
86
+ .drawer__exitActiveLeft_1ivv1 {
87
87
  transition: transform 0.25s ease-in-out 0.1s;
88
88
  transform: translateX(-100%);
89
89
  }
90
- .drawer__backdropExitActive_fy4c0,
91
- .drawer__backdropExitDone_fy4c0 {
90
+ .drawer__backdropExitActive_1ivv1,
91
+ .drawer__backdropExitDone_1ivv1 {
92
92
  transition: background 0.25s ease-in-out 0.1s;
93
93
  background-color: var(--backdrop-hidden-background);
94
94
  }
95
- .drawer__contentExitActive_fy4c0 {
95
+ .drawer__contentExitActive_1ivv1 {
96
96
  opacity: 0;
97
97
  transition: opacity 0.12s ease-in-out;
98
98
  }
package/modern/Component.d.ts CHANGED
@@ -2,7 +2,8 @@
2
2
  /// <reference types="react" />
3
3
  import React from 'react';
4
4
  import { TransitionProps } from 'react-transition-group/Transition';
5
- import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
5
+ import { BaseModalContext, BaseModalProps } from "@alfalab/core-components-base-modal";
6
+ import { ScrollbarProps } from "@alfalab/core-components-scrollbar";
6
7
  declare const ANIMATION_DURATION = 600;
7
8
  type DrawerProps = Omit<BaseModalProps, 'container'> & {
8
9
  /**
@@ -15,13 +16,17 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
15
16
  * @default true
16
17
  */
17
18
  nativeScrollbar?: boolean;
19
+ /**
20
+ * Пропсы кастомного скроллбара.
21
+ */
22
+ scrollbarProps?: Partial<Omit<ScrollbarProps, 'children'>>;
18
23
  /**
19
24
  * Пропсы для анимации контента (CSSTransition)
20
25
  */
21
26
  contentTransitionProps?: Partial<TransitionProps>;
22
27
  };
23
28
  declare const DrawerContext: React.Context<BaseModalContext>;
24
- declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "disableBlockingScroll" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
29
+ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
25
30
  /**
26
31
  * Край экрана, с которого может появиться Drawer.
27
32
  * @default "right"
@@ -32,9 +37,13 @@ declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "chil
32
37
  * @default true
33
38
  */
34
39
  nativeScrollbar?: boolean | undefined;
40
+ /**
41
+ * Пропсы кастомного скроллбара.
42
+ */
43
+ scrollbarProps?: Partial<Omit<ScrollbarProps, "children">> | undefined;
35
44
  /**
36
45
  * Пропсы для анимации контента (CSSTransition)
37
46
  */
38
- contentTransitionProps?: Partial<TimeoutProps<undefined>> | Partial<EndListenerProps<undefined>> | undefined;
47
+ contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
39
48
  } & React.RefAttributes<HTMLDivElement>>;
40
49
  export { ANIMATION_DURATION, DrawerProps, DrawerContext, Drawer };
package/modern/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/modern';
5
5
  import { Scrollbar } from '@alfalab/core-components-scrollbar/modern';
6
6
 
7
- var styles = {"component":"drawer__component_fy4c0","rightPlacement":"drawer__rightPlacement_fy4c0","leftPlacement":"drawer__leftPlacement_fy4c0","content":"drawer__content_fy4c0","simplebar":"drawer__simplebar_fy4c0","enterRight":"drawer__enterRight_fy4c0","enterLeft":"drawer__enterLeft_fy4c0","contentEnter":"drawer__contentEnter_fy4c0","backdropEnter":"drawer__backdropEnter_fy4c0","enterActive":"drawer__enterActive_fy4c0","backdropEnterActive":"drawer__backdropEnterActive_fy4c0","backdropEnterDone":"drawer__backdropEnterDone_fy4c0","contentEnterActive":"drawer__contentEnterActive_fy4c0","exit":"drawer__exit_fy4c0","backdropExit":"drawer__backdropExit_fy4c0","contentExit":"drawer__contentExit_fy4c0","exitActiveRight":"drawer__exitActiveRight_fy4c0","exitActiveLeft":"drawer__exitActiveLeft_fy4c0","backdropExitActive":"drawer__backdropExitActive_fy4c0","backdropExitDone":"drawer__backdropExitDone_fy4c0","contentExitActive":"drawer__contentExitActive_fy4c0"};
7
+ var styles = {"component":"drawer__component_1ivv1","rightPlacement":"drawer__rightPlacement_1ivv1","leftPlacement":"drawer__leftPlacement_1ivv1","content":"drawer__content_1ivv1","simplebar":"drawer__simplebar_1ivv1","enterRight":"drawer__enterRight_1ivv1","enterLeft":"drawer__enterLeft_1ivv1","contentEnter":"drawer__contentEnter_1ivv1","backdropEnter":"drawer__backdropEnter_1ivv1","enterActive":"drawer__enterActive_1ivv1","backdropEnterActive":"drawer__backdropEnterActive_1ivv1","backdropEnterDone":"drawer__backdropEnterDone_1ivv1","contentEnterActive":"drawer__contentEnterActive_1ivv1","exit":"drawer__exit_1ivv1","backdropExit":"drawer__backdropExit_1ivv1","contentExit":"drawer__contentExit_1ivv1","exitActiveRight":"drawer__exitActiveRight_1ivv1","exitActiveLeft":"drawer__exitActiveLeft_1ivv1","backdropExitActive":"drawer__backdropExitActive_1ivv1","backdropExitDone":"drawer__backdropExitDone_1ivv1","contentExitActive":"drawer__contentExitActive_1ivv1"};
8
8
  require('./index.css')
9
9
 
10
10
  const ANIMATION_DURATION = 600;
@@ -34,7 +34,7 @@ const contentProps = {
34
34
  },
35
35
  timeout: ANIMATION_DURATION,
36
36
  };
37
- const Drawer = forwardRef(({ open, className, children, contentTransitionProps, nativeScrollbar = true, placement = 'right', ...restProps }, ref) => {
37
+ const Drawer = forwardRef(({ open, className, children, contentTransitionProps, nativeScrollbar = true, placement = 'right', scrollbarProps, ...restProps }, ref) => {
38
38
  const isRightPlacement = placement === 'right';
39
39
  const isLeftPlacement = placement === 'left';
40
40
  const transitionProps = useMemo(() => {
@@ -60,12 +60,12 @@ const Drawer = forwardRef(({ open, className, children, contentTransitionProps,
60
60
  };
61
61
  }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
62
62
  const renderWithNativeScrollbar = () => React.createElement("div", { className: styles.content }, children);
63
- const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { className: styles.simplebar }, children));
64
- return (React.createElement(BaseModal, Object.assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, {
63
+ const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { ...scrollbarProps, className: cn(styles.simplebar, scrollbarProps?.className) }, children));
64
+ return (React.createElement(BaseModal, { ...restProps, scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, {
65
65
  [styles.rightPlacement]: isRightPlacement,
66
66
  [styles.leftPlacement]: isLeftPlacement,
67
- }), transitionProps: transitionProps, backdropProps: { ...backdropProps, ...restProps.backdropProps } }),
68
- React.createElement(CSSTransition, Object.assign({}, { ...contentProps, ...contentTransitionProps }, { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
67
+ }), transitionProps: transitionProps, backdropProps: { ...backdropProps, ...restProps.backdropProps } },
68
+ React.createElement(CSSTransition, { ...{ ...contentProps, ...contentTransitionProps }, appear: true, in: open }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
69
69
  });
70
70
 
71
71
  export { ANIMATION_DURATION, Drawer, DrawerContext };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1767q */
1
+ /* hash: npyq5 */
2
2
  :root {
3
3
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
4
4
  }
@@ -17,7 +17,7 @@
17
17
  :root {
18
18
  --drawer-width: 500px;
19
19
  }
20
- .drawer__component_fy4c0 {
20
+ .drawer__component_1ivv1 {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  height: 100%;
@@ -26,73 +26,73 @@
26
26
  overflow: auto;
27
27
  will-change: transform;
28
28
  }
29
- .drawer__rightPlacement_fy4c0 {
29
+ .drawer__rightPlacement_1ivv1 {
30
30
  right: 0;
31
31
  align-self: flex-end;
32
32
  }
33
- .drawer__leftPlacement_fy4c0 {
33
+ .drawer__leftPlacement_1ivv1 {
34
34
  left: 0;
35
35
  align-self: flex-start;
36
36
  }
37
- .drawer__content_fy4c0 {
37
+ .drawer__content_1ivv1 {
38
38
  width: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
42
  }
43
- .drawer__simplebar_fy4c0 {
43
+ .drawer__simplebar_1ivv1 {
44
44
  height: 100vh;
45
45
  }
46
46
  /* enter */
47
- .drawer__enterRight_fy4c0 {
47
+ .drawer__enterRight_1ivv1 {
48
48
  transform: translateX(100%);
49
49
  }
50
- .drawer__enterLeft_fy4c0 {
50
+ .drawer__enterLeft_1ivv1 {
51
51
  transform: translateX(-100%);
52
52
  }
53
- .drawer__contentEnter_fy4c0 {
53
+ .drawer__contentEnter_1ivv1 {
54
54
  opacity: 0;
55
55
  }
56
- .drawer__backdropEnter_fy4c0 {
56
+ .drawer__backdropEnter_1ivv1 {
57
57
  background-color: var(--backdrop-hidden-background);
58
58
  }
59
- .drawer__enterActive_fy4c0 {
59
+ .drawer__enterActive_1ivv1 {
60
60
  transition: transform 0.3s ease-in-out;
61
61
  transform: translateX(0);
62
62
  }
63
- .drawer__backdropEnterActive_fy4c0,
64
- .drawer__backdropEnterDone_fy4c0 {
63
+ .drawer__backdropEnterActive_1ivv1,
64
+ .drawer__backdropEnterDone_1ivv1 {
65
65
  transition: background 0.3s ease-in-out;
66
66
  background-color: var(--backdrop-visible-background);
67
67
  }
68
- .drawer__contentEnterActive_fy4c0 {
68
+ .drawer__contentEnterActive_1ivv1 {
69
69
  transition: opacity 0.2s ease-in-out 0.3s;
70
70
  opacity: 1;
71
71
  }
72
72
  /* exit */
73
- .drawer__exit_fy4c0 {
73
+ .drawer__exit_1ivv1 {
74
74
  transform: translateX(0);
75
75
  }
76
- .drawer__backdropExit_fy4c0 {
76
+ .drawer__backdropExit_1ivv1 {
77
77
  background-color: var(--backdrop-visible-background);
78
78
  }
79
- .drawer__contentExit_fy4c0 {
79
+ .drawer__contentExit_1ivv1 {
80
80
  opacity: 1;
81
81
  }
82
- .drawer__exitActiveRight_fy4c0 {
82
+ .drawer__exitActiveRight_1ivv1 {
83
83
  transition: transform 0.25s ease-in-out 0.1s;
84
84
  transform: translateX(100%);
85
85
  }
86
- .drawer__exitActiveLeft_fy4c0 {
86
+ .drawer__exitActiveLeft_1ivv1 {
87
87
  transition: transform 0.25s ease-in-out 0.1s;
88
88
  transform: translateX(-100%);
89
89
  }
90
- .drawer__backdropExitActive_fy4c0,
91
- .drawer__backdropExitDone_fy4c0 {
90
+ .drawer__backdropExitActive_1ivv1,
91
+ .drawer__backdropExitDone_1ivv1 {
92
92
  transition: background 0.25s ease-in-out 0.1s;
93
93
  background-color: var(--backdrop-hidden-background);
94
94
  }
95
- .drawer__contentExitActive_fy4c0 {
95
+ .drawer__contentExitActive_1ivv1 {
96
96
  opacity: 0;
97
97
  transition: opacity 0.12s ease-in-out;
98
98
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-drawer",
3
- "version": "4.1.0",
3
+ "version": "4.2.0",
4
4
  "description": "Drawer component",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -19,7 +19,7 @@
19
19
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
20
20
  },
21
21
  "dependencies": {
22
- "@alfalab/core-components-base-modal": "^5.0.4",
22
+ "@alfalab/core-components-base-modal": "^5.0.5",
23
23
  "@alfalab/core-components-scrollbar": "^2.1.1",
24
24
  "classnames": "^2.3.1"
25
25
  }