@alfalab/core-components 33.0.0 → 33.0.1-beta.1

package/date-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 18exz */
+/* hash: kbrxb */
 :root {
 
     /* Hard */
@@ -7,7 +7,7 @@
 
     /* Hard up */
 }
-.date-input__nativeInput_16sjf {
+.date-input__nativeInput_kiich {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -18,9 +18,9 @@
             appearance: none;
     z-index: 1
 }
-.date-input__nativeInput_16sjf::-webkit-calendar-picker-indicator {
+.date-input__nativeInput_kiich::-webkit-calendar-picker-indicator {
         display: none;
     }
-.date-input__nativeInput_16sjf::-webkit-inner-spin-button {
+.date-input__nativeInput_kiich::-webkit-inner-spin-button {
         display: none;
     }

package/date-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 18exz */
+/* hash: kbrxb */
 :root {
 
     /* Hard */
@@ -7,7 +7,7 @@
 
     /* Hard up */
 }
-.date-input__nativeInput_16sjf {
+.date-input__nativeInput_kiich {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -18,9 +18,9 @@
             appearance: none;
     z-index: 1
 }
-.date-input__nativeInput_16sjf::-webkit-calendar-picker-indicator {
+.date-input__nativeInput_kiich::-webkit-calendar-picker-indicator {
         display: none;
     }
-.date-input__nativeInput_16sjf::-webkit-inner-spin-button {
+.date-input__nativeInput_kiich::-webkit-inner-spin-button {
         display: none;
     }

package/date-input/modern/Component.js

@@ -7,7 +7,7 @@ import { Input } from '../../input/modern';
 import { format, parseDateString, isCompleteDateInput, isValid, NATIVE_DATE_FORMAT, formatDate } from './utils/format.js';
 import { isInputDateSupported } from './utils/native-supports.js';
 
-var styles = {"nativeInput":"date-input__nativeInput_16sjf"};
+var styles = {"nativeInput":"date-input__nativeInput_kiich"};
 require('./index.css');
 
 const DateInput = forwardRef(({ mobileMode = 'input', defaultValue = '', rightAddons, error, value: propValue, onBlur, onChange, onComplete, ...restProps }, ref) => {

package/date-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 18exz */
+/* hash: kbrxb */
 :root {
 
     /* Hard */
@@ -7,7 +7,7 @@
 
     /* Hard up */
 }
-.date-input__nativeInput_16sjf {
+.date-input__nativeInput_kiich {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -18,9 +18,9 @@
             appearance: none;
     z-index: 1
 }
-.date-input__nativeInput_16sjf::-webkit-calendar-picker-indicator {
+.date-input__nativeInput_kiich::-webkit-calendar-picker-indicator {
         display: none;
     }
-.date-input__nativeInput_16sjf::-webkit-inner-spin-button {
+.date-input__nativeInput_kiich::-webkit-inner-spin-button {
         display: none;
     }

package/date-range-input/Component.d.ts

@@ -136,9 +136,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
         title?: string | undefined;
         onClose?: (() => void) | undefined;
         yearsAmount?: number | undefined;
-        hasHeader?: boolean | undefined; /**
-         * Дополнительный класс
-         */
+        hasHeader?: boolean | undefined;
         allowSelectionFromEmptyRange?: boolean | undefined;
     } & Record<string, unknown>) | undefined;
     /**

package/date-range-input/Component.js

@@ -59,7 +59,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"date-range-input__component_190r7","calendarContainer":"date-range-input__calendarContainer_190r7","calendarResponsive":"date-range-input__calendarResponsive_190r7","block":"date-range-input__block_190r7"};
+var styles = {"component":"date-range-input__component_11yys","calendarContainer":"date-range-input__calendarContainer_11yys","calendarResponsive":"date-range-input__calendarResponsive_11yys","block":"date-range-input__block_11yys"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

package/date-range-input/cssm/Component.d.ts

@@ -136,9 +136,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
         title?: string | undefined;
         onClose?: (() => void) | undefined;
         yearsAmount?: number | undefined;
-        hasHeader?: boolean | undefined; /**
-         * Дополнительный класс
-         */
+        hasHeader?: boolean | undefined;
         allowSelectionFromEmptyRange?: boolean | undefined;
     } & Record<string, unknown>) | undefined;
     /**

package/date-range-input/esm/Component.d.ts

@@ -136,9 +136,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
         title?: string | undefined;
         onClose?: (() => void) | undefined;
         yearsAmount?: number | undefined;
-        hasHeader?: boolean | undefined; /**
-         * Дополнительный класс
-         */
+        hasHeader?: boolean | undefined;
         allowSelectionFromEmptyRange?: boolean | undefined;
     } & Record<string, unknown>) | undefined;
     /**

package/date-range-input/esm/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"date-range-input__component_190r7","calendarContainer":"date-range-input__calendarContainer_190r7","calendarResponsive":"date-range-input__calendarResponsive_190r7","block":"date-range-input__block_190r7"};
+var styles = {"component":"date-range-input__component_11yys","calendarContainer":"date-range-input__calendarContainer_11yys","calendarResponsive":"date-range-input__calendarResponsive_11yys","block":"date-range-input__block_11yys"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

package/date-range-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1elx3 */
+/* hash: 1lqno */
 :root {
 
     /* Hard */
@@ -39,26 +39,26 @@
 :root {
     --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.date-range-input__component_190r7 {
+.date-range-input__component_11yys {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-range-input__calendarContainer_190r7 {
+.date-range-input__calendarContainer_11yys {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-range-input__calendarContainer_190r7 {
+.date-range-input__calendarContainer_11yys {
         width: 100%;
         min-width: 288px
 }
     }
-.date-range-input__calendarResponsive_190r7 {
+.date-range-input__calendarResponsive_11yys {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-range-input__block_190r7 {
+.date-range-input__block_11yys {
     width: 100%;
 }

package/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1elx3 */
+/* hash: 1lqno */
 :root {
 
     /* Hard */
@@ -39,26 +39,26 @@
 :root {
     --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.date-range-input__component_190r7 {
+.date-range-input__component_11yys {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-range-input__calendarContainer_190r7 {
+.date-range-input__calendarContainer_11yys {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-range-input__calendarContainer_190r7 {
+.date-range-input__calendarContainer_11yys {
         width: 100%;
         min-width: 288px
 }
     }
-.date-range-input__calendarResponsive_190r7 {
+.date-range-input__calendarResponsive_11yys {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-range-input__block_190r7 {
+.date-range-input__block_11yys {
     width: 100%;
 }

package/date-range-input/modern/Component.d.ts

@@ -136,9 +136,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
         title?: string | undefined;
         onClose?: (() => void) | undefined;
         yearsAmount?: number | undefined;
-        hasHeader?: boolean | undefined; /**
-         * Дополнительный класс
-         */
+        hasHeader?: boolean | undefined;
         allowSelectionFromEmptyRange?: boolean | undefined;
     } & Record<string, unknown>) | undefined;
     /**

package/date-range-input/modern/Component.js

@@ -11,7 +11,7 @@ import { Popover } from '../../popover/modern';
 import { IconButton } from '../../icon-button/modern';
 import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from './utils/format.js';
 
-var styles = {"component":"date-range-input__component_190r7","calendarContainer":"date-range-input__calendarContainer_190r7","calendarResponsive":"date-range-input__calendarResponsive_190r7","block":"date-range-input__block_190r7"};
+var styles = {"component":"date-range-input__component_11yys","calendarContainer":"date-range-input__calendarContainer_11yys","calendarResponsive":"date-range-input__calendarResponsive_11yys","block":"date-range-input__block_11yys"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

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

@@ -1,4 +1,4 @@
-/* hash: 1elx3 */
+/* hash: 1lqno */
 :root {
 
     /* Hard */
@@ -39,26 +39,26 @@
 :root {
     --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.date-range-input__component_190r7 {
+.date-range-input__component_11yys {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-range-input__calendarContainer_190r7 {
+.date-range-input__calendarContainer_11yys {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-range-input__calendarContainer_190r7 {
+.date-range-input__calendarContainer_11yys {
         width: 100%;
         min-width: 288px
 }
     }
-.date-range-input__calendarResponsive_190r7 {
+.date-range-input__calendarResponsive_11yys {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-range-input__block_190r7 {
+.date-range-input__block_11yys {
     width: 100%;
 }

package/date-time-input/Component.js

@@ -58,7 +58,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"date-time-input__component_1ok8j","calendarContainer":"date-time-input__calendarContainer_1ok8j","calendarResponsive":"date-time-input__calendarResponsive_1ok8j","block":"date-time-input__block_1ok8j"};
+var styles = {"component":"date-time-input__component_ff8p7","calendarContainer":"date-time-input__calendarContainer_ff8p7","calendarResponsive":"date-time-input__calendarResponsive_ff8p7","block":"date-time-input__block_ff8p7"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

package/date-time-input/esm/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"date-time-input__component_1ok8j","calendarContainer":"date-time-input__calendarContainer_1ok8j","calendarResponsive":"date-time-input__calendarResponsive_1ok8j","block":"date-time-input__block_1ok8j"};
+var styles = {"component":"date-time-input__component_ff8p7","calendarContainer":"date-time-input__calendarContainer_ff8p7","calendarResponsive":"date-time-input__calendarResponsive_ff8p7","block":"date-time-input__block_ff8p7"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

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

@@ -1,4 +1,4 @@
-/* hash: 18o3q */
+/* hash: tnwzk */
 :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_1ok8j {
+.date-time-input__component_ff8p7 {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-time-input__calendarContainer_1ok8j {
+.date-time-input__calendarContainer_ff8p7 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-time-input__calendarContainer_1ok8j {
+.date-time-input__calendarContainer_ff8p7 {
         width: 100%;
         min-width: 288px
 }
     }
-.date-time-input__calendarResponsive_1ok8j {
+.date-time-input__calendarResponsive_ff8p7 {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-time-input__block_1ok8j {
+.date-time-input__block_ff8p7 {
     width: 100%;
 }

package/date-time-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 18o3q */
+/* hash: tnwzk */
 :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_1ok8j {
+.date-time-input__component_ff8p7 {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-time-input__calendarContainer_1ok8j {
+.date-time-input__calendarContainer_ff8p7 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-time-input__calendarContainer_1ok8j {
+.date-time-input__calendarContainer_ff8p7 {
         width: 100%;
         min-width: 288px
 }
     }
-.date-time-input__calendarResponsive_1ok8j {
+.date-time-input__calendarResponsive_ff8p7 {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-time-input__block_1ok8j {
+.date-time-input__block_ff8p7 {
     width: 100%;
 }

package/date-time-input/modern/Component.js

@@ -11,7 +11,7 @@ import { Popover } from '../../popover/modern';
 import { IconButton } from '../../icon-button/modern';
 import { getDateWithoutTime, setTimeToDate, DATE_MASK, format, getFullDateTime, isCompleteDateInput, isValid, parseTimestampToDate } from './utils/format.js';
 
-var styles = {"component":"date-time-input__component_1ok8j","calendarContainer":"date-time-input__calendarContainer_1ok8j","calendarResponsive":"date-time-input__calendarResponsive_1ok8j","block":"date-time-input__block_1ok8j"};
+var styles = {"component":"date-time-input__component_ff8p7","calendarContainer":"date-time-input__calendarContainer_ff8p7","calendarResponsive":"date-time-input__calendarResponsive_ff8p7","block":"date-time-input__block_ff8p7"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

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

@@ -1,4 +1,4 @@
-/* hash: 18o3q */
+/* hash: tnwzk */
 :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_1ok8j {
+.date-time-input__component_ff8p7 {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-time-input__calendarContainer_1ok8j {
+.date-time-input__calendarContainer_ff8p7 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-time-input__calendarContainer_1ok8j {
+.date-time-input__calendarContainer_ff8p7 {
         width: 100%;
         min-width: 288px
 }
     }
-.date-time-input__calendarResponsive_1ok8j {
+.date-time-input__calendarResponsive_ff8p7 {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-time-input__block_1ok8j {
+.date-time-input__block_ff8p7 {
     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_ok3n7"};
+var styles = {"component":"divider__component_s3t50"};
 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_ok3n7"};
+var styles = {"component":"divider__component_s3t50"};
 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_ok3n7 {
+.divider__component_s3t50 {
     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_ok3n7 {
+.divider__component_s3t50 {
     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_ok3n7"};
+var styles = {"component":"divider__component_s3t50"};
 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_ok3n7 {
+.divider__component_s3t50 {
     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_wxw8m","content":"drawer__content_wxw8m","enter":"drawer__enter_wxw8m","contentEnter":"drawer__contentEnter_wxw8m","backdropEnter":"drawer__backdropEnter_wxw8m","enterActive":"drawer__enterActive_wxw8m","backdropEnterActive":"drawer__backdropEnterActive_wxw8m","backdropEnterDone":"drawer__backdropEnterDone_wxw8m","contentEnterActive":"drawer__contentEnterActive_wxw8m","exit":"drawer__exit_wxw8m","backdropExit":"drawer__backdropExit_wxw8m","contentExit":"drawer__contentExit_wxw8m","exitActive":"drawer__exitActive_wxw8m","backdropExitActive":"drawer__backdropExitActive_wxw8m","backdropExitDone":"drawer__backdropExitDone_wxw8m","contentExitActive":"drawer__contentExitActive_wxw8m"};
+var styles = {"component":"drawer__component_wc4jz","rightPlacement":"drawer__rightPlacement_wc4jz","leftPlacement":"drawer__leftPlacement_wc4jz","content":"drawer__content_wc4jz","simplebar":"drawer__simplebar_wc4jz","enterRight":"drawer__enterRight_wc4jz","enterLeft":"drawer__enterLeft_wc4jz","contentEnter":"drawer__contentEnter_wc4jz","backdropEnter":"drawer__backdropEnter_wc4jz","enterActive":"drawer__enterActive_wc4jz","backdropEnterActive":"drawer__backdropEnterActive_wc4jz","backdropEnterDone":"drawer__backdropEnterDone_wc4jz","contentEnterActive":"drawer__contentEnterActive_wc4jz","exit":"drawer__exit_wc4jz","backdropExit":"drawer__backdropExit_wc4jz","contentExit":"drawer__contentExit_wc4jz","exitActiveRight":"drawer__exitActiveRight_wc4jz","exitActiveLeft":"drawer__exitActiveLeft_wc4jz","backdropExitActive":"drawer__backdropExitActive_wc4jz","backdropExitDone":"drawer__backdropExitDone_wc4jz","contentExitActive":"drawer__contentExitActive_wc4jz"};
 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;