@alfalab/core-components 33.0.2 → 33.1.0

package/date-time-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: gcrae */
+/* hash: 7zgp1 */
 :root {
 
     /* Hard */
@@ -39,26 +39,26 @@
 :root {
     --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.date-time-input__component_1u8zj {
+.date-time-input__component_1nnw3 {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-time-input__calendarContainer_1u8zj {
+.date-time-input__calendarContainer_1nnw3 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-time-input__calendarContainer_1u8zj {
+.date-time-input__calendarContainer_1nnw3 {
         width: 100%;
         min-width: 288px
 }
     }
-.date-time-input__calendarResponsive_1u8zj {
+.date-time-input__calendarResponsive_1nnw3 {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-time-input__block_1u8zj {
+.date-time-input__block_1nnw3 {
     width: 100%;
 }

package/divider/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"divider__component_1gpqc"};
+var styles = {"component":"divider__component_1rbty"};
 require('./index.css');
 
 var Divider = function (_a) {

package/divider/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"divider__component_1gpqc"};
+var styles = {"component":"divider__component_1rbty"};
 require('./index.css');
 
 var Divider = function (_a) {

package/divider/esm/index.css

@@ -13,7 +13,7 @@
 :root {
     --divider-color: var(--color-light-border-primary);
 }
-.divider__component_1gpqc {
+.divider__component_1rbty {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/divider/index.css

@@ -13,7 +13,7 @@
 :root {
     --divider-color: var(--color-light-border-primary);
 }
-.divider__component_1gpqc {
+.divider__component_1rbty {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/divider/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"divider__component_1gpqc"};
+var styles = {"component":"divider__component_1rbty"};
 require('./index.css');
 
 const Divider = ({ className, dataTestId }) => (React.createElement("hr", { className: cn(styles.component, className), "data-test-id": dataTestId }));

package/divider/modern/index.css

@@ -13,7 +13,7 @@
 :root {
     --divider-color: var(--color-light-border-primary);
 }
-.divider__component_1gpqc {
+.divider__component_1rbty {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/drawer/Component.d.ts

@@ -5,6 +5,16 @@ import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps, BaseModalContext } from "../base-modal";
 declare const ANIMATION_DURATION = 600;
 type DrawerProps = Omit<BaseModalProps, 'container'> & {
+    /**
+     * Край экрана, с которого может появиться Drawer.
+     * @default "right"
+     */
+    placement?: 'left' | 'right';
+    /**
+     * Нужно ли использовать нативный скроллбар
+     * @default true
+     */
+    nativeScrollbar?: boolean;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */
@@ -12,6 +22,16 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
 };
 declare const DrawerContext: React.Context<BaseModalContext>;
 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"> & {
+    /**
+     * Край экрана, с которого может появиться Drawer.
+     * @default "right"
+     */
+    placement?: "left" | "right" | undefined;
+    /**
+     * Нужно ли использовать нативный скроллбар
+     * @default true
+     */
+    nativeScrollbar?: boolean | undefined;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */

package/drawer/Component.js

@@ -4,6 +4,7 @@ var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../base-modal');
+var coreComponentsScrollbar = require('../scrollbar');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,43 +50,67 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"drawer__component_1uydh","content":"drawer__content_1uydh","enter":"drawer__enter_1uydh","contentEnter":"drawer__contentEnter_1uydh","backdropEnter":"drawer__backdropEnter_1uydh","enterActive":"drawer__enterActive_1uydh","backdropEnterActive":"drawer__backdropEnterActive_1uydh","backdropEnterDone":"drawer__backdropEnterDone_1uydh","contentEnterActive":"drawer__contentEnterActive_1uydh","exit":"drawer__exit_1uydh","backdropExit":"drawer__backdropExit_1uydh","contentExit":"drawer__contentExit_1uydh","exitActive":"drawer__exitActive_1uydh","backdropExitActive":"drawer__backdropExitActive_1uydh","backdropExitDone":"drawer__backdropExitDone_1uydh","contentExitActive":"drawer__contentExitActive_1uydh"};
+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"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;
 var DrawerContext = coreComponentsBaseModal.BaseModalContext;
+var backdropProps = {
+    classNames: {
+        enter: styles.backdropEnter,
+        appear: styles.backdropEnter,
+        enterActive: styles.backdropEnterActive,
+        appearActive: styles.backdropEnterActive,
+        enterDone: styles.backdropEnterDone,
+        appearDone: styles.backdropEnterDone,
+        exit: styles.backdropExit,
+        exitActive: styles.backdropExitActive,
+        exitDone: styles.backdropExitDone,
+    },
+    timeout: ANIMATION_DURATION,
+};
+var contentProps = {
+    classNames: {
+        enter: styles.contentEnter,
+        appear: styles.contentEnter,
+        enterActive: styles.contentEnterActive,
+        appearActive: styles.contentEnterActive,
+        exit: styles.contentExit,
+        exitActive: styles.contentExitActive,
+    },
+    timeout: ANIMATION_DURATION,
+};
 var Drawer = React.forwardRef(function (_a, ref) {
-    var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, restProps = __rest(_a, ["open", "className", "children", "contentTransitionProps"]);
-    var transitionProps = React.useMemo(function () { return (__assign({ classNames: {
-            enter: styles.enter,
-            appear: styles.enter,
-            enterActive: styles.enterActive,
-            appearActive: styles.enterActive,
-            exit: styles.exit,
-            exitActive: styles.exitActive,
-        }, timeout: ANIMATION_DURATION }, restProps.transitionProps)); }, [restProps.transitionProps]);
-    var backdropProps = React.useMemo(function () { return (__assign({ classNames: {
-            enter: styles.backdropEnter,
-            appear: styles.backdropEnter,
-            enterActive: styles.backdropEnterActive,
-            appearActive: styles.backdropEnterActive,
-            enterDone: styles.backdropEnterDone,
-            appearDone: styles.backdropEnterDone,
-            exit: styles.backdropExit,
-            exitActive: styles.backdropExitActive,
-            exitDone: styles.backdropExitDone,
-        }, timeout: ANIMATION_DURATION }, restProps.backdropProps)); }, [restProps.backdropProps]);
-    var contentProps = React.useMemo(function () { return (__assign({ classNames: {
-            enter: styles.contentEnter,
-            appear: styles.contentEnter,
-            enterActive: styles.contentEnterActive,
-            appearActive: styles.contentEnterActive,
-            exit: styles.contentExit,
-            exitActive: styles.contentExitActive,
-        }, timeout: ANIMATION_DURATION }, contentTransitionProps)); }, [contentTransitionProps]);
-    return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles.component, className), transitionProps: transitionProps, backdropProps: backdropProps }),
-        React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true }, contentProps, { in: open }),
-            React__default['default'].createElement("div", { className: styles.content }, children))));
+    var _b;
+    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"]);
+    var isRightPlacement = placement === 'right';
+    var isLeftPlacement = placement === 'left';
+    var transitionProps = React.useMemo(function () {
+        var _a, _b;
+        var enterClassName = cn__default['default']((_a = {},
+            _a[styles.enterRight] = isRightPlacement,
+            _a[styles.enterLeft] = isLeftPlacement,
+            _a));
+        var exitClassName = cn__default['default']((_b = {},
+            _b[styles.exitActiveRight] = isRightPlacement,
+            _b[styles.exitActiveLeft] = isLeftPlacement,
+            _b));
+        return __assign({ classNames: {
+                enter: enterClassName,
+                appear: enterClassName,
+                enterActive: styles.enterActive,
+                appearActive: styles.enterActive,
+                exit: styles.exit,
+                exitActive: exitClassName,
+            }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
+    }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
+    var renderWithNativeScrollbar = function () { return React__default['default'].createElement("div", { className: styles.content }, children); };
+    var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { className: styles.simplebar }, children)); };
+    return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles.component, className, (_b = {},
+            _b[styles.rightPlacement] = isRightPlacement,
+            _b[styles.leftPlacement] = isLeftPlacement,
+            _b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
+        React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
 });
 
 exports.ANIMATION_DURATION = ANIMATION_DURATION;

package/drawer/cssm/Component.d.ts

@@ -5,6 +5,16 @@ import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps, BaseModalContext } from "../../base-modal";
 declare const ANIMATION_DURATION = 600;
 type DrawerProps = Omit<BaseModalProps, 'container'> & {
+    /**
+     * Край экрана, с которого может появиться Drawer.
+     * @default "right"
+     */
+    placement?: 'left' | 'right';
+    /**
+     * Нужно ли использовать нативный скроллбар
+     * @default true
+     */
+    nativeScrollbar?: boolean;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */
@@ -12,6 +22,16 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
 };
 declare const DrawerContext: React.Context<BaseModalContext>;
 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"> & {
+    /**
+     * Край экрана, с которого может появиться Drawer.
+     * @default "right"
+     */
+    placement?: "left" | "right" | undefined;
+    /**
+     * Нужно ли использовать нативный скроллбар
+     * @default true
+     */
+    nativeScrollbar?: boolean | undefined;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */

package/drawer/cssm/Component.js

@@ -4,6 +4,7 @@ var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../../base-modal/cssm');
+var coreComponentsScrollbar = require('../../scrollbar/cssm');
 var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -53,38 +54,62 @@ function __rest(s, e) {
 
 var ANIMATION_DURATION = 600;
 var DrawerContext = coreComponentsBaseModal.BaseModalContext;
+var backdropProps = {
+    classNames: {
+        enter: styles__default['default'].backdropEnter,
+        appear: styles__default['default'].backdropEnter,
+        enterActive: styles__default['default'].backdropEnterActive,
+        appearActive: styles__default['default'].backdropEnterActive,
+        enterDone: styles__default['default'].backdropEnterDone,
+        appearDone: styles__default['default'].backdropEnterDone,
+        exit: styles__default['default'].backdropExit,
+        exitActive: styles__default['default'].backdropExitActive,
+        exitDone: styles__default['default'].backdropExitDone,
+    },
+    timeout: ANIMATION_DURATION,
+};
+var contentProps = {
+    classNames: {
+        enter: styles__default['default'].contentEnter,
+        appear: styles__default['default'].contentEnter,
+        enterActive: styles__default['default'].contentEnterActive,
+        appearActive: styles__default['default'].contentEnterActive,
+        exit: styles__default['default'].contentExit,
+        exitActive: styles__default['default'].contentExitActive,
+    },
+    timeout: ANIMATION_DURATION,
+};
 var Drawer = React.forwardRef(function (_a, ref) {
-    var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, restProps = __rest(_a, ["open", "className", "children", "contentTransitionProps"]);
-    var transitionProps = React.useMemo(function () { return (__assign({ classNames: {
-            enter: styles__default['default'].enter,
-            appear: styles__default['default'].enter,
-            enterActive: styles__default['default'].enterActive,
-            appearActive: styles__default['default'].enterActive,
-            exit: styles__default['default'].exit,
-            exitActive: styles__default['default'].exitActive,
-        }, timeout: ANIMATION_DURATION }, restProps.transitionProps)); }, [restProps.transitionProps]);
-    var backdropProps = React.useMemo(function () { return (__assign({ classNames: {
-            enter: styles__default['default'].backdropEnter,
-            appear: styles__default['default'].backdropEnter,
-            enterActive: styles__default['default'].backdropEnterActive,
-            appearActive: styles__default['default'].backdropEnterActive,
-            enterDone: styles__default['default'].backdropEnterDone,
-            appearDone: styles__default['default'].backdropEnterDone,
-            exit: styles__default['default'].backdropExit,
-            exitActive: styles__default['default'].backdropExitActive,
-            exitDone: styles__default['default'].backdropExitDone,
-        }, timeout: ANIMATION_DURATION }, restProps.backdropProps)); }, [restProps.backdropProps]);
-    var contentProps = React.useMemo(function () { return (__assign({ classNames: {
-            enter: styles__default['default'].contentEnter,
-            appear: styles__default['default'].contentEnter,
-            enterActive: styles__default['default'].contentEnterActive,
-            appearActive: styles__default['default'].contentEnterActive,
-            exit: styles__default['default'].contentExit,
-            exitActive: styles__default['default'].contentExitActive,
-        }, timeout: ANIMATION_DURATION }, contentTransitionProps)); }, [contentTransitionProps]);
-    return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles__default['default'].component, className), transitionProps: transitionProps, backdropProps: backdropProps }),
-        React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true }, contentProps, { in: open }),
-            React__default['default'].createElement("div", { className: styles__default['default'].content }, children))));
+    var _b;
+    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"]);
+    var isRightPlacement = placement === 'right';
+    var isLeftPlacement = placement === 'left';
+    var transitionProps = React.useMemo(function () {
+        var _a, _b;
+        var enterClassName = cn__default['default']((_a = {},
+            _a[styles__default['default'].enterRight] = isRightPlacement,
+            _a[styles__default['default'].enterLeft] = isLeftPlacement,
+            _a));
+        var exitClassName = cn__default['default']((_b = {},
+            _b[styles__default['default'].exitActiveRight] = isRightPlacement,
+            _b[styles__default['default'].exitActiveLeft] = isLeftPlacement,
+            _b));
+        return __assign({ classNames: {
+                enter: enterClassName,
+                appear: enterClassName,
+                enterActive: styles__default['default'].enterActive,
+                appearActive: styles__default['default'].enterActive,
+                exit: styles__default['default'].exit,
+                exitActive: exitClassName,
+            }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
+    }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
+    var renderWithNativeScrollbar = function () { return React__default['default'].createElement("div", { className: styles__default['default'].content }, children); };
+    var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { className: styles__default['default'].simplebar }, children)); };
+    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 = {},
+            _b[styles__default['default'].rightPlacement] = isRightPlacement,
+            _b[styles__default['default'].leftPlacement] = isLeftPlacement,
+            _b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
+        React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
 });
 
 exports.ANIMATION_DURATION = ANIMATION_DURATION;

package/drawer/cssm/index.js

@@ -5,6 +5,7 @@ require('react');
 require('react-transition-group');
 require('classnames');
 require('../../base-modal/cssm');
+require('../../scrollbar/cssm');
 require('./index.module.css');
 
 

package/drawer/cssm/index.module.css

@@ -19,24 +19,36 @@
 .component {
     position: fixed;
     top: 0;
-    right: 0;
     height: 100%;
     width: var(--drawer-width);
     flex: 1;
-    align-self: flex-end;
     overflow: auto;
     will-change: transform;
 }
+.rightPlacement {
+    right: 0;
+    align-self: flex-end;
+}
+.leftPlacement {
+    left: 0;
+    align-self: flex-start;
+}
 .content {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
+.simplebar {
+    height: 100vh;
+}
 /* enter */
-.enter {
+.enterRight {
     transform: translateX(100%);
 }
+.enterLeft {
+    transform: translateX(-100%);
+}
 .contentEnter {
     opacity: 0;
 }
@@ -66,10 +78,14 @@
 .contentExit {
     opacity: 1;
 }
-.exitActive {
+.exitActiveRight {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
 }
+.exitActiveLeft {
+    transition: transform 0.25s ease-in-out 0.1s;
+    transform: translateX(-100%);
+}
 .backdropExitActive,
 .backdropExitDone {
     transition: background 0.25s ease-in-out 0.1s;

package/drawer/esm/Component.d.ts

@@ -5,6 +5,16 @@ import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps, BaseModalContext } from "../../base-modal";
 declare const ANIMATION_DURATION = 600;
 type DrawerProps = Omit<BaseModalProps, 'container'> & {
+    /**
+     * Край экрана, с которого может появиться Drawer.
+     * @default "right"
+     */
+    placement?: 'left' | 'right';
+    /**
+     * Нужно ли использовать нативный скроллбар
+     * @default true
+     */
+    nativeScrollbar?: boolean;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */
@@ -12,6 +22,16 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
 };
 declare const DrawerContext: React.Context<BaseModalContext>;
 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"> & {
+    /**
+     * Край экрана, с которого может появиться Drawer.
+     * @default "right"
+     */
+    placement?: "left" | "right" | undefined;
+    /**
+     * Нужно ли использовать нативный скроллбар
+     * @default true
+     */
+    nativeScrollbar?: boolean | undefined;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */

package/drawer/esm/Component.js

@@ -2,6 +2,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
 import { BaseModalContext, BaseModal } from '../../base-modal/esm';
+import { Scrollbar } from '../../scrollbar/esm';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -42,43 +43,67 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"drawer__component_1uydh","content":"drawer__content_1uydh","enter":"drawer__enter_1uydh","contentEnter":"drawer__contentEnter_1uydh","backdropEnter":"drawer__backdropEnter_1uydh","enterActive":"drawer__enterActive_1uydh","backdropEnterActive":"drawer__backdropEnterActive_1uydh","backdropEnterDone":"drawer__backdropEnterDone_1uydh","contentEnterActive":"drawer__contentEnterActive_1uydh","exit":"drawer__exit_1uydh","backdropExit":"drawer__backdropExit_1uydh","contentExit":"drawer__contentExit_1uydh","exitActive":"drawer__exitActive_1uydh","backdropExitActive":"drawer__backdropExitActive_1uydh","backdropExitDone":"drawer__backdropExitDone_1uydh","contentExitActive":"drawer__contentExitActive_1uydh"};
+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"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;
 var DrawerContext = BaseModalContext;
+var backdropProps = {
+    classNames: {
+        enter: styles.backdropEnter,
+        appear: styles.backdropEnter,
+        enterActive: styles.backdropEnterActive,
+        appearActive: styles.backdropEnterActive,
+        enterDone: styles.backdropEnterDone,
+        appearDone: styles.backdropEnterDone,
+        exit: styles.backdropExit,
+        exitActive: styles.backdropExitActive,
+        exitDone: styles.backdropExitDone,
+    },
+    timeout: ANIMATION_DURATION,
+};
+var contentProps = {
+    classNames: {
+        enter: styles.contentEnter,
+        appear: styles.contentEnter,
+        enterActive: styles.contentEnterActive,
+        appearActive: styles.contentEnterActive,
+        exit: styles.contentExit,
+        exitActive: styles.contentExitActive,
+    },
+    timeout: ANIMATION_DURATION,
+};
 var Drawer = forwardRef(function (_a, ref) {
-    var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, restProps = __rest(_a, ["open", "className", "children", "contentTransitionProps"]);
-    var transitionProps = useMemo(function () { return (__assign({ classNames: {
-            enter: styles.enter,
-            appear: styles.enter,
-            enterActive: styles.enterActive,
-            appearActive: styles.enterActive,
-            exit: styles.exit,
-            exitActive: styles.exitActive,
-        }, timeout: ANIMATION_DURATION }, restProps.transitionProps)); }, [restProps.transitionProps]);
-    var backdropProps = useMemo(function () { return (__assign({ classNames: {
-            enter: styles.backdropEnter,
-            appear: styles.backdropEnter,
-            enterActive: styles.backdropEnterActive,
-            appearActive: styles.backdropEnterActive,
-            enterDone: styles.backdropEnterDone,
-            appearDone: styles.backdropEnterDone,
-            exit: styles.backdropExit,
-            exitActive: styles.backdropExitActive,
-            exitDone: styles.backdropExitDone,
-        }, timeout: ANIMATION_DURATION }, restProps.backdropProps)); }, [restProps.backdropProps]);
-    var contentProps = useMemo(function () { return (__assign({ classNames: {
-            enter: styles.contentEnter,
-            appear: styles.contentEnter,
-            enterActive: styles.contentEnterActive,
-            appearActive: styles.contentEnterActive,
-            exit: styles.contentExit,
-            exitActive: styles.contentExitActive,
-        }, timeout: ANIMATION_DURATION }, contentTransitionProps)); }, [contentTransitionProps]);
-    return (React.createElement(BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className), transitionProps: transitionProps, backdropProps: backdropProps }),
-        React.createElement(CSSTransition, __assign({ appear: true }, contentProps, { in: open }),
-            React.createElement("div", { className: styles.content }, children))));
+    var _b;
+    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"]);
+    var isRightPlacement = placement === 'right';
+    var isLeftPlacement = placement === 'left';
+    var transitionProps = useMemo(function () {
+        var _a, _b;
+        var enterClassName = cn((_a = {},
+            _a[styles.enterRight] = isRightPlacement,
+            _a[styles.enterLeft] = isLeftPlacement,
+            _a));
+        var exitClassName = cn((_b = {},
+            _b[styles.exitActiveRight] = isRightPlacement,
+            _b[styles.exitActiveLeft] = isLeftPlacement,
+            _b));
+        return __assign({ classNames: {
+                enter: enterClassName,
+                appear: enterClassName,
+                enterActive: styles.enterActive,
+                appearActive: styles.enterActive,
+                exit: styles.exit,
+                exitActive: exitClassName,
+            }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
+    }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
+    var renderWithNativeScrollbar = function () { return React.createElement("div", { className: styles.content }, children); };
+    var renderWithCustomScrollbar = function () { return (React.createElement(Scrollbar, { className: styles.simplebar }, children)); };
+    return (React.createElement(BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, (_b = {},
+            _b[styles.rightPlacement] = isRightPlacement,
+            _b[styles.leftPlacement] = isLeftPlacement,
+            _b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
+        React.createElement(CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
 });
 
 export { ANIMATION_DURATION, Drawer, DrawerContext };