@alfalab/core-components-drawer 7.0.3 → 7.0.4

package/Component.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalContext, type BaseModalProps } from '@alfalab/core-components-base-modal';
 export declare const ANIMATION_DURATION = 600;
-export declare type DrawerProps = Omit<BaseModalProps, 'container'> & {
+export type DrawerProps = Omit<BaseModalProps, 'container'> & {
     /**
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
@@ -24,14 +24,14 @@ export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
      */
-    placement?: "left" | "right" | undefined;
+    placement?: "left" | "right";
     /**
      * Нужно ли использовать нативный скроллбар
      * @default true
      */
-    nativeScrollbar?: boolean | undefined;
+    nativeScrollbar?: boolean;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */
-    contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
+    contentTransitionProps?: Partial<TransitionProps>;
 } & React.RefAttributes<HTMLDivElement>>;

package/Component.js

@@ -71,7 +71,7 @@ var Drawer = React.forwardRef(function (_a, ref) {
             _b[index_module.leftPlacement] = isLeftPlacement,
             _b[index_module.customScrollbar] = !nativeScrollbar,
             _b)), transitionProps: transitionProps, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), restProps.backdropProps) }),
-        React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ nodeRef: nodeRef }, tslib.__assign(tslib.__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }),
+        React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ nodeRef: nodeRef }, contentProps, contentTransitionProps, { appear: true, in: open }),
             React__default.default.createElement("div", { ref: nodeRef, className: index_module.content }, children))));
 });
 Drawer.displayName = 'Drawer';

package/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":["BaseModalContext","styles","forwardRef","__rest","useRef","useMemo","cn","__assign","React","BaseModal","CSSTransition"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":["BaseModalContext","styles","forwardRef","__rest","useRef","useMemo","cn","__assign","React","BaseModal","CSSTransition"],"mappings":"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"}

package/cssm/Component.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalContext, type BaseModalProps } from '@alfalab/core-components-base-modal/cssm';
 export declare const ANIMATION_DURATION = 600;
-export declare type DrawerProps = Omit<BaseModalProps, 'container'> & {
+export type DrawerProps = Omit<BaseModalProps, 'container'> & {
     /**
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
@@ -24,14 +24,14 @@ export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
      */
-    placement?: "left" | "right" | undefined;
+    placement?: "left" | "right";
     /**
      * Нужно ли использовать нативный скроллбар
      * @default true
      */
-    nativeScrollbar?: boolean | undefined;
+    nativeScrollbar?: boolean;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */
-    contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
+    contentTransitionProps?: Partial<TransitionProps>;
 } & React.RefAttributes<HTMLDivElement>>;

package/cssm/Component.js

@@ -72,7 +72,7 @@ var Drawer = React.forwardRef(function (_a, ref) {
             _b[styles__default.default.leftPlacement] = isLeftPlacement,
             _b[styles__default.default.customScrollbar] = !nativeScrollbar,
             _b)), transitionProps: transitionProps, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), restProps.backdropProps) }),
-        React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ nodeRef: nodeRef }, tslib.__assign(tslib.__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }),
+        React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ nodeRef: nodeRef }, contentProps, contentTransitionProps, { appear: true, in: open }),
             React__default.default.createElement("div", { ref: nodeRef, className: styles__default.default.content }, children))));
 });
 Drawer.displayName = 'Drawer';

package/cssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":["BaseModalContext","styles","forwardRef","__rest","useRef","useMemo","cn","__assign","React","BaseModal","CSSTransition"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":["BaseModalContext","styles","forwardRef","__rest","useRef","useMemo","cn","__assign","React","BaseModal","CSSTransition"],"mappings":"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"}

package/esm/Component.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalContext, type BaseModalProps } from '@alfalab/core-components-base-modal/esm';
 export declare const ANIMATION_DURATION = 600;
-export declare type DrawerProps = Omit<BaseModalProps, 'container'> & {
+export type DrawerProps = Omit<BaseModalProps, 'container'> & {
     /**
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
@@ -24,14 +24,14 @@ export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
      */
-    placement?: "left" | "right" | undefined;
+    placement?: "left" | "right";
     /**
      * Нужно ли использовать нативный скроллбар
      * @default true
      */
-    nativeScrollbar?: boolean | undefined;
+    nativeScrollbar?: boolean;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */
-    contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
+    contentTransitionProps?: Partial<TransitionProps>;
 } & React.RefAttributes<HTMLDivElement>>;

package/esm/Component.js

@@ -62,7 +62,7 @@ var Drawer = forwardRef(function (_a, ref) {
             _b[styles.leftPlacement] = isLeftPlacement,
             _b[styles.customScrollbar] = !nativeScrollbar,
             _b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
-        React.createElement(CSSTransition, __assign({ nodeRef: nodeRef }, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }),
+        React.createElement(CSSTransition, __assign({ nodeRef: nodeRef }, contentProps, contentTransitionProps, { appear: true, in: open }),
             React.createElement("div", { ref: nodeRef, className: styles.content }, children))));
 });
 Drawer.displayName = 'Drawer';

package/esm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":[],"mappings":"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"}

package/esm/index.css

@@ -17,7 +17,7 @@
 :root {
     --drawer-width: 500px;
 }
-.drawer__component_fcy44 {
+.drawer__component_1eccs {
     top: var(--gap-0);
     height: 100%;
     width: var(--drawer-width);
@@ -25,119 +25,119 @@
     overflow: auto;
     will-change: transform;
 }
-.drawer__component_fcy44.drawer__component_fcy44 {
+.drawer__component_1eccs.drawer__component_1eccs {
     position: fixed;
 }
-.drawer__customScrollbar_fcy44 {
+.drawer__customScrollbar_1eccs {
     overflow: auto;
     cursor: auto;
 }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar {
         width: 12px;
         height: 12px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-track {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-track {
         background-color: transparent;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-track-piece {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-track-piece {
         background-color: transparent;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:vertical {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:vertical:hover {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:horizontal {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:horizontal {
         border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:horizontal:hover {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:active {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
     }
-.drawer__customScrollbar_fcy44::-webkit-resizer {
+.drawer__customScrollbar_1eccs::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-button,
-    .drawer__customScrollbar_fcy44::-webkit-scrollbar-corner {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-button,
+    .drawer__customScrollbar_1eccs::-webkit-scrollbar-corner {
         display: none;
     }
-.drawer__rightPlacement_fcy44 {
+.drawer__rightPlacement_1eccs {
     right: var(--gap-0);
     align-self: flex-end;
 }
-.drawer__leftPlacement_fcy44 {
+.drawer__leftPlacement_1eccs {
     left: var(--gap-0);
     align-self: flex-start;
 }
-.drawer__content_fcy44 {
+.drawer__content_1eccs {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.drawer__enterRight_fcy44 {
+.drawer__enterRight_1eccs {
     transform: translateX(100%);
 }
-.drawer__enterLeft_fcy44 {
+.drawer__enterLeft_1eccs {
     transform: translateX(-100%);
 }
-.drawer__contentEnter_fcy44 {
+.drawer__contentEnter_1eccs {
     opacity: 0;
 }
-.drawer__backdropEnter_fcy44 {
+.drawer__backdropEnter_1eccs {
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__enterActive_fcy44 {
+.drawer__enterActive_1eccs {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
 }
-.drawer__backdropEnterActive_fcy44,
-.drawer__backdropEnterDone_fcy44 {
+.drawer__backdropEnterActive_1eccs,
+.drawer__backdropEnterDone_1eccs {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentEnterActive_fcy44 {
+.drawer__contentEnterActive_1eccs {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
 }
-.drawer__exit_fcy44 {
+.drawer__exit_1eccs {
     transform: translateX(0);
 }
-.drawer__backdropExit_fcy44 {
+.drawer__backdropExit_1eccs {
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentExit_fcy44 {
+.drawer__contentExit_1eccs {
     opacity: 1;
 }
-.drawer__exitActiveRight_fcy44 {
+.drawer__exitActiveRight_1eccs {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
 }
-.drawer__exitActiveLeft_fcy44 {
+.drawer__exitActiveLeft_1eccs {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(-100%);
 }
-.drawer__backdropExitActive_fcy44,
-.drawer__backdropExitDone_fcy44 {
+.drawer__backdropExitActive_1eccs,
+.drawer__backdropExitDone_1eccs {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__contentExitActive_fcy44 {
+.drawer__contentExitActive_1eccs {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"drawer__component_fcy44","customScrollbar":"drawer__customScrollbar_fcy44","rightPlacement":"drawer__rightPlacement_fcy44","leftPlacement":"drawer__leftPlacement_fcy44","content":"drawer__content_fcy44","enterRight":"drawer__enterRight_fcy44","enterLeft":"drawer__enterLeft_fcy44","contentEnter":"drawer__contentEnter_fcy44","backdropEnter":"drawer__backdropEnter_fcy44","enterActive":"drawer__enterActive_fcy44","backdropEnterActive":"drawer__backdropEnterActive_fcy44","backdropEnterDone":"drawer__backdropEnterDone_fcy44","contentEnterActive":"drawer__contentEnterActive_fcy44","exit":"drawer__exit_fcy44","backdropExit":"drawer__backdropExit_fcy44","contentExit":"drawer__contentExit_fcy44","exitActiveRight":"drawer__exitActiveRight_fcy44","exitActiveLeft":"drawer__exitActiveLeft_fcy44","backdropExitActive":"drawer__backdropExitActive_fcy44","backdropExitDone":"drawer__backdropExitDone_fcy44","contentExitActive":"drawer__contentExitActive_fcy44"};
+var styles = {"component":"drawer__component_1eccs","customScrollbar":"drawer__customScrollbar_1eccs","rightPlacement":"drawer__rightPlacement_1eccs","leftPlacement":"drawer__leftPlacement_1eccs","content":"drawer__content_1eccs","enterRight":"drawer__enterRight_1eccs","enterLeft":"drawer__enterLeft_1eccs","contentEnter":"drawer__contentEnter_1eccs","backdropEnter":"drawer__backdropEnter_1eccs","enterActive":"drawer__enterActive_1eccs","backdropEnterActive":"drawer__backdropEnterActive_1eccs","backdropEnterDone":"drawer__backdropEnterDone_1eccs","contentEnterActive":"drawer__contentEnterActive_1eccs","exit":"drawer__exit_1eccs","backdropExit":"drawer__backdropExit_1eccs","contentExit":"drawer__contentExit_1eccs","exitActiveRight":"drawer__exitActiveRight_1eccs","exitActiveLeft":"drawer__exitActiveLeft_1eccs","backdropExitActive":"drawer__backdropExitActive_1eccs","backdropExitDone":"drawer__backdropExitDone_1eccs","contentExitActive":"drawer__contentExitActive_1eccs"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n    --drawer-width: 500px;\n}\n\n.component {\n    top: var(--gap-0);\n    height: 100%;\n    width: var(--drawer-width);\n    flex: 1;\n    overflow: auto;\n    will-change: transform;\n}\n\n.component.component {\n    position: fixed;\n}\n\n.customScrollbar {\n    @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n    right: var(--gap-0);\n    align-self: flex-end;\n}\n\n.leftPlacement {\n    left: var(--gap-0);\n    align-self: flex-start;\n}\n\n.content {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n    transform: translateX(100%);\n}\n\n.enterLeft {\n    transform: translateX(-100%);\n}\n\n.contentEnter {\n    opacity: 0;\n}\n\n.backdropEnter {\n    background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n    transition: transform 0.3s ease-in-out;\n    transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n    transition: background 0.3s ease-in-out;\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n    transition: opacity 0.2s ease-in-out 0.3s;\n    opacity: 1;\n}\n\n/* exit */\n\n.exit {\n    transform: translateX(0);\n}\n\n.backdropExit {\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n    opacity: 1;\n}\n\n.exitActiveRight {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(100%);\n}\n\n.exitActiveLeft {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n    transition: background 0.25s ease-in-out 0.1s;\n    background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n    opacity: 0;\n    transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n    --drawer-width: 500px;\n}\n\n.component {\n    top: var(--gap-0);\n    height: 100%;\n    width: var(--drawer-width);\n    flex: 1;\n    overflow: auto;\n    will-change: transform;\n}\n\n.component.component {\n    position: fixed;\n}\n\n.customScrollbar {\n    @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n    right: var(--gap-0);\n    align-self: flex-end;\n}\n\n.leftPlacement {\n    left: var(--gap-0);\n    align-self: flex-start;\n}\n\n.content {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n    transform: translateX(100%);\n}\n\n.enterLeft {\n    transform: translateX(-100%);\n}\n\n.contentEnter {\n    opacity: 0;\n}\n\n.backdropEnter {\n    background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n    transition: transform 0.3s ease-in-out;\n    transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n    transition: background 0.3s ease-in-out;\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n    transition: opacity 0.2s ease-in-out 0.3s;\n    opacity: 1;\n}\n\n/* exit */\n\n.exit {\n    transform: translateX(0);\n}\n\n.backdropExit {\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n    opacity: 1;\n}\n\n.exitActiveRight {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(100%);\n}\n\n.exitActiveLeft {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n    transition: background 0.25s ease-in-out 0.1s;\n    background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n    opacity: 0;\n    transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}

package/index.css

@@ -17,7 +17,7 @@
 :root {
     --drawer-width: 500px;
 }
-.drawer__component_fcy44 {
+.drawer__component_1eccs {
     top: var(--gap-0);
     height: 100%;
     width: var(--drawer-width);
@@ -25,119 +25,119 @@
     overflow: auto;
     will-change: transform;
 }
-.drawer__component_fcy44.drawer__component_fcy44 {
+.drawer__component_1eccs.drawer__component_1eccs {
     position: fixed;
 }
-.drawer__customScrollbar_fcy44 {
+.drawer__customScrollbar_1eccs {
     overflow: auto;
     cursor: auto;
 }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar {
         width: 12px;
         height: 12px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-track {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-track {
         background-color: transparent;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-track-piece {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-track-piece {
         background-color: transparent;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:vertical {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:vertical:hover {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:horizontal {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:horizontal {
         border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:horizontal:hover {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:active {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
     }
-.drawer__customScrollbar_fcy44::-webkit-resizer {
+.drawer__customScrollbar_1eccs::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-button,
-    .drawer__customScrollbar_fcy44::-webkit-scrollbar-corner {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-button,
+    .drawer__customScrollbar_1eccs::-webkit-scrollbar-corner {
         display: none;
     }
-.drawer__rightPlacement_fcy44 {
+.drawer__rightPlacement_1eccs {
     right: var(--gap-0);
     align-self: flex-end;
 }
-.drawer__leftPlacement_fcy44 {
+.drawer__leftPlacement_1eccs {
     left: var(--gap-0);
     align-self: flex-start;
 }
-.drawer__content_fcy44 {
+.drawer__content_1eccs {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.drawer__enterRight_fcy44 {
+.drawer__enterRight_1eccs {
     transform: translateX(100%);
 }
-.drawer__enterLeft_fcy44 {
+.drawer__enterLeft_1eccs {
     transform: translateX(-100%);
 }
-.drawer__contentEnter_fcy44 {
+.drawer__contentEnter_1eccs {
     opacity: 0;
 }
-.drawer__backdropEnter_fcy44 {
+.drawer__backdropEnter_1eccs {
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__enterActive_fcy44 {
+.drawer__enterActive_1eccs {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
 }
-.drawer__backdropEnterActive_fcy44,
-.drawer__backdropEnterDone_fcy44 {
+.drawer__backdropEnterActive_1eccs,
+.drawer__backdropEnterDone_1eccs {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentEnterActive_fcy44 {
+.drawer__contentEnterActive_1eccs {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
 }
-.drawer__exit_fcy44 {
+.drawer__exit_1eccs {
     transform: translateX(0);
 }
-.drawer__backdropExit_fcy44 {
+.drawer__backdropExit_1eccs {
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentExit_fcy44 {
+.drawer__contentExit_1eccs {
     opacity: 1;
 }
-.drawer__exitActiveRight_fcy44 {
+.drawer__exitActiveRight_1eccs {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
 }
-.drawer__exitActiveLeft_fcy44 {
+.drawer__exitActiveLeft_1eccs {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(-100%);
 }
-.drawer__backdropExitActive_fcy44,
-.drawer__backdropExitDone_fcy44 {
+.drawer__backdropExitActive_1eccs,
+.drawer__backdropExitDone_1eccs {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__contentExitActive_fcy44 {
+.drawer__contentExitActive_1eccs {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"drawer__component_fcy44","customScrollbar":"drawer__customScrollbar_fcy44","rightPlacement":"drawer__rightPlacement_fcy44","leftPlacement":"drawer__leftPlacement_fcy44","content":"drawer__content_fcy44","enterRight":"drawer__enterRight_fcy44","enterLeft":"drawer__enterLeft_fcy44","contentEnter":"drawer__contentEnter_fcy44","backdropEnter":"drawer__backdropEnter_fcy44","enterActive":"drawer__enterActive_fcy44","backdropEnterActive":"drawer__backdropEnterActive_fcy44","backdropEnterDone":"drawer__backdropEnterDone_fcy44","contentEnterActive":"drawer__contentEnterActive_fcy44","exit":"drawer__exit_fcy44","backdropExit":"drawer__backdropExit_fcy44","contentExit":"drawer__contentExit_fcy44","exitActiveRight":"drawer__exitActiveRight_fcy44","exitActiveLeft":"drawer__exitActiveLeft_fcy44","backdropExitActive":"drawer__backdropExitActive_fcy44","backdropExitDone":"drawer__backdropExitDone_fcy44","contentExitActive":"drawer__contentExitActive_fcy44"};
+var styles = {"component":"drawer__component_1eccs","customScrollbar":"drawer__customScrollbar_1eccs","rightPlacement":"drawer__rightPlacement_1eccs","leftPlacement":"drawer__leftPlacement_1eccs","content":"drawer__content_1eccs","enterRight":"drawer__enterRight_1eccs","enterLeft":"drawer__enterLeft_1eccs","contentEnter":"drawer__contentEnter_1eccs","backdropEnter":"drawer__backdropEnter_1eccs","enterActive":"drawer__enterActive_1eccs","backdropEnterActive":"drawer__backdropEnterActive_1eccs","backdropEnterDone":"drawer__backdropEnterDone_1eccs","contentEnterActive":"drawer__contentEnterActive_1eccs","exit":"drawer__exit_1eccs","backdropExit":"drawer__backdropExit_1eccs","contentExit":"drawer__contentExit_1eccs","exitActiveRight":"drawer__exitActiveRight_1eccs","exitActiveLeft":"drawer__exitActiveLeft_1eccs","backdropExitActive":"drawer__backdropExitActive_1eccs","backdropExitDone":"drawer__backdropExitDone_1eccs","contentExitActive":"drawer__contentExitActive_1eccs"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n    --drawer-width: 500px;\n}\n\n.component {\n    top: var(--gap-0);\n    height: 100%;\n    width: var(--drawer-width);\n    flex: 1;\n    overflow: auto;\n    will-change: transform;\n}\n\n.component.component {\n    position: fixed;\n}\n\n.customScrollbar {\n    @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n    right: var(--gap-0);\n    align-self: flex-end;\n}\n\n.leftPlacement {\n    left: var(--gap-0);\n    align-self: flex-start;\n}\n\n.content {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n    transform: translateX(100%);\n}\n\n.enterLeft {\n    transform: translateX(-100%);\n}\n\n.contentEnter {\n    opacity: 0;\n}\n\n.backdropEnter {\n    background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n    transition: transform 0.3s ease-in-out;\n    transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n    transition: background 0.3s ease-in-out;\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n    transition: opacity 0.2s ease-in-out 0.3s;\n    opacity: 1;\n}\n\n/* exit */\n\n.exit {\n    transform: translateX(0);\n}\n\n.backdropExit {\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n    opacity: 1;\n}\n\n.exitActiveRight {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(100%);\n}\n\n.exitActiveLeft {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n    transition: background 0.25s ease-in-out 0.1s;\n    background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n    opacity: 0;\n    transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n    --drawer-width: 500px;\n}\n\n.component {\n    top: var(--gap-0);\n    height: 100%;\n    width: var(--drawer-width);\n    flex: 1;\n    overflow: auto;\n    will-change: transform;\n}\n\n.component.component {\n    position: fixed;\n}\n\n.customScrollbar {\n    @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n    right: var(--gap-0);\n    align-self: flex-end;\n}\n\n.leftPlacement {\n    left: var(--gap-0);\n    align-self: flex-start;\n}\n\n.content {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n    transform: translateX(100%);\n}\n\n.enterLeft {\n    transform: translateX(-100%);\n}\n\n.contentEnter {\n    opacity: 0;\n}\n\n.backdropEnter {\n    background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n    transition: transform 0.3s ease-in-out;\n    transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n    transition: background 0.3s ease-in-out;\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n    transition: opacity 0.2s ease-in-out 0.3s;\n    opacity: 1;\n}\n\n/* exit */\n\n.exit {\n    transform: translateX(0);\n}\n\n.backdropExit {\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n    opacity: 1;\n}\n\n.exitActiveRight {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(100%);\n}\n\n.exitActiveLeft {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n    transition: background 0.25s ease-in-out 0.1s;\n    background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n    opacity: 0;\n    transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}

package/modern/Component.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalContext, type BaseModalProps } from '@alfalab/core-components-base-modal/modern';
 export declare const ANIMATION_DURATION = 600;
-export declare type DrawerProps = Omit<BaseModalProps, 'container'> & {
+export type DrawerProps = Omit<BaseModalProps, 'container'> & {
     /**
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
@@ -24,14 +24,14 @@ export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
      */
-    placement?: "left" | "right" | undefined;
+    placement?: "left" | "right";
     /**
      * Нужно ли использовать нативный скроллбар
      * @default true
      */
-    nativeScrollbar?: boolean | undefined;
+    nativeScrollbar?: boolean;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */
-    contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
+    contentTransitionProps?: Partial<TransitionProps>;
 } & React.RefAttributes<HTMLDivElement>>;

package/modern/Component.js

@@ -62,7 +62,7 @@ const Drawer = forwardRef(({ open, className, children, contentTransitionProps,
             [styles.leftPlacement]: isLeftPlacement,
             [styles.customScrollbar]: !nativeScrollbar,
         }), transitionProps: transitionProps, backdropProps: { ...backdropProps, ...restProps.backdropProps } },
-        React.createElement(CSSTransition, { nodeRef: nodeRef, ...{ ...contentProps, ...contentTransitionProps }, appear: true, in: open },
+        React.createElement(CSSTransition, { nodeRef: nodeRef, ...contentProps, ...contentTransitionProps, appear: true, in: open },
             React.createElement("div", { ref: nodeRef, className: styles.content }, children))));
 });
 Drawer.displayName = 'Drawer';

package/modern/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":[],"mappings":"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"}

package/modern/index.css

@@ -17,7 +17,7 @@
 :root {
     --drawer-width: 500px;
 }
-.drawer__component_fcy44 {
+.drawer__component_1eccs {
     top: var(--gap-0);
     height: 100%;
     width: var(--drawer-width);
@@ -25,119 +25,119 @@
     overflow: auto;
     will-change: transform;
 }
-.drawer__component_fcy44.drawer__component_fcy44 {
+.drawer__component_1eccs.drawer__component_1eccs {
     position: fixed;
 }
-.drawer__customScrollbar_fcy44 {
+.drawer__customScrollbar_1eccs {
     overflow: auto;
     cursor: auto;
 }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar {
         width: 12px;
         height: 12px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-track {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-track {
         background-color: transparent;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-track-piece {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-track-piece {
         background-color: transparent;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:vertical {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:vertical:hover {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:horizontal {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:horizontal {
         border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:horizontal:hover {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-thumb:active {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
     }
-.drawer__customScrollbar_fcy44::-webkit-resizer {
+.drawer__customScrollbar_1eccs::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
     }
-.drawer__customScrollbar_fcy44::-webkit-scrollbar-button,
-    .drawer__customScrollbar_fcy44::-webkit-scrollbar-corner {
+.drawer__customScrollbar_1eccs::-webkit-scrollbar-button,
+    .drawer__customScrollbar_1eccs::-webkit-scrollbar-corner {
         display: none;
     }
-.drawer__rightPlacement_fcy44 {
+.drawer__rightPlacement_1eccs {
     right: var(--gap-0);
     align-self: flex-end;
 }
-.drawer__leftPlacement_fcy44 {
+.drawer__leftPlacement_1eccs {
     left: var(--gap-0);
     align-self: flex-start;
 }
-.drawer__content_fcy44 {
+.drawer__content_1eccs {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.drawer__enterRight_fcy44 {
+.drawer__enterRight_1eccs {
     transform: translateX(100%);
 }
-.drawer__enterLeft_fcy44 {
+.drawer__enterLeft_1eccs {
     transform: translateX(-100%);
 }
-.drawer__contentEnter_fcy44 {
+.drawer__contentEnter_1eccs {
     opacity: 0;
 }
-.drawer__backdropEnter_fcy44 {
+.drawer__backdropEnter_1eccs {
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__enterActive_fcy44 {
+.drawer__enterActive_1eccs {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
 }
-.drawer__backdropEnterActive_fcy44,
-.drawer__backdropEnterDone_fcy44 {
+.drawer__backdropEnterActive_1eccs,
+.drawer__backdropEnterDone_1eccs {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentEnterActive_fcy44 {
+.drawer__contentEnterActive_1eccs {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
 }
-.drawer__exit_fcy44 {
+.drawer__exit_1eccs {
     transform: translateX(0);
 }
-.drawer__backdropExit_fcy44 {
+.drawer__backdropExit_1eccs {
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentExit_fcy44 {
+.drawer__contentExit_1eccs {
     opacity: 1;
 }
-.drawer__exitActiveRight_fcy44 {
+.drawer__exitActiveRight_1eccs {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
 }
-.drawer__exitActiveLeft_fcy44 {
+.drawer__exitActiveLeft_1eccs {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(-100%);
 }
-.drawer__backdropExitActive_fcy44,
-.drawer__backdropExitDone_fcy44 {
+.drawer__backdropExitActive_1eccs,
+.drawer__backdropExitDone_1eccs {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__contentExitActive_fcy44 {
+.drawer__contentExitActive_1eccs {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"drawer__component_fcy44","customScrollbar":"drawer__customScrollbar_fcy44","rightPlacement":"drawer__rightPlacement_fcy44","leftPlacement":"drawer__leftPlacement_fcy44","content":"drawer__content_fcy44","enterRight":"drawer__enterRight_fcy44","enterLeft":"drawer__enterLeft_fcy44","contentEnter":"drawer__contentEnter_fcy44","backdropEnter":"drawer__backdropEnter_fcy44","enterActive":"drawer__enterActive_fcy44","backdropEnterActive":"drawer__backdropEnterActive_fcy44","backdropEnterDone":"drawer__backdropEnterDone_fcy44","contentEnterActive":"drawer__contentEnterActive_fcy44","exit":"drawer__exit_fcy44","backdropExit":"drawer__backdropExit_fcy44","contentExit":"drawer__contentExit_fcy44","exitActiveRight":"drawer__exitActiveRight_fcy44","exitActiveLeft":"drawer__exitActiveLeft_fcy44","backdropExitActive":"drawer__backdropExitActive_fcy44","backdropExitDone":"drawer__backdropExitDone_fcy44","contentExitActive":"drawer__contentExitActive_fcy44"};
+const styles = {"component":"drawer__component_1eccs","customScrollbar":"drawer__customScrollbar_1eccs","rightPlacement":"drawer__rightPlacement_1eccs","leftPlacement":"drawer__leftPlacement_1eccs","content":"drawer__content_1eccs","enterRight":"drawer__enterRight_1eccs","enterLeft":"drawer__enterLeft_1eccs","contentEnter":"drawer__contentEnter_1eccs","backdropEnter":"drawer__backdropEnter_1eccs","enterActive":"drawer__enterActive_1eccs","backdropEnterActive":"drawer__backdropEnterActive_1eccs","backdropEnterDone":"drawer__backdropEnterDone_1eccs","contentEnterActive":"drawer__contentEnterActive_1eccs","exit":"drawer__exit_1eccs","backdropExit":"drawer__backdropExit_1eccs","contentExit":"drawer__contentExit_1eccs","exitActiveRight":"drawer__exitActiveRight_1eccs","exitActiveLeft":"drawer__exitActiveLeft_1eccs","backdropExitActive":"drawer__backdropExitActive_1eccs","backdropExitDone":"drawer__backdropExitDone_1eccs","contentExitActive":"drawer__contentExitActive_1eccs"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n    --drawer-width: 500px;\n}\n\n.component {\n    top: var(--gap-0);\n    height: 100%;\n    width: var(--drawer-width);\n    flex: 1;\n    overflow: auto;\n    will-change: transform;\n}\n\n.component.component {\n    position: fixed;\n}\n\n.customScrollbar {\n    @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n    right: var(--gap-0);\n    align-self: flex-end;\n}\n\n.leftPlacement {\n    left: var(--gap-0);\n    align-self: flex-start;\n}\n\n.content {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n    transform: translateX(100%);\n}\n\n.enterLeft {\n    transform: translateX(-100%);\n}\n\n.contentEnter {\n    opacity: 0;\n}\n\n.backdropEnter {\n    background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n    transition: transform 0.3s ease-in-out;\n    transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n    transition: background 0.3s ease-in-out;\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n    transition: opacity 0.2s ease-in-out 0.3s;\n    opacity: 1;\n}\n\n/* exit */\n\n.exit {\n    transform: translateX(0);\n}\n\n.backdropExit {\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n    opacity: 1;\n}\n\n.exitActiveRight {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(100%);\n}\n\n.exitActiveLeft {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n    transition: background 0.25s ease-in-out 0.1s;\n    background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n    opacity: 0;\n    transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n    --drawer-width: 500px;\n}\n\n.component {\n    top: var(--gap-0);\n    height: 100%;\n    width: var(--drawer-width);\n    flex: 1;\n    overflow: auto;\n    will-change: transform;\n}\n\n.component.component {\n    position: fixed;\n}\n\n.customScrollbar {\n    @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n    right: var(--gap-0);\n    align-self: flex-end;\n}\n\n.leftPlacement {\n    left: var(--gap-0);\n    align-self: flex-start;\n}\n\n.content {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n    transform: translateX(100%);\n}\n\n.enterLeft {\n    transform: translateX(-100%);\n}\n\n.contentEnter {\n    opacity: 0;\n}\n\n.backdropEnter {\n    background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n    transition: transform 0.3s ease-in-out;\n    transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n    transition: background 0.3s ease-in-out;\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n    transition: opacity 0.2s ease-in-out 0.3s;\n    opacity: 1;\n}\n\n/* exit */\n\n.exit {\n    transform: translateX(0);\n}\n\n.backdropExit {\n    background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n    opacity: 1;\n}\n\n.exitActiveRight {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(100%);\n}\n\n.exitActiveLeft {\n    transition: transform 0.25s ease-in-out 0.1s;\n    transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n    transition: background 0.25s ease-in-out 0.1s;\n    background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n    opacity: 0;\n    transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}

package/moderncssm/Component.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalContext, type BaseModalProps } from '@alfalab/core-components-base-modal/moderncssm';
 export declare const ANIMATION_DURATION = 600;
-export declare type DrawerProps = Omit<BaseModalProps, 'container'> & {
+export type DrawerProps = Omit<BaseModalProps, 'container'> & {
     /**
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
@@ -24,14 +24,14 @@ export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps
      * Край экрана, с которого может появиться Drawer.
      * @default "right"
      */
-    placement?: "left" | "right" | undefined;
+    placement?: "left" | "right";
     /**
      * Нужно ли использовать нативный скроллбар
      * @default true
      */
-    nativeScrollbar?: boolean | undefined;
+    nativeScrollbar?: boolean;
     /**
      * Пропсы для анимации контента (CSSTransition)
      */
-    contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
+    contentTransitionProps?: Partial<TransitionProps>;
 } & React.RefAttributes<HTMLDivElement>>;

package/moderncssm/Component.js

@@ -62,7 +62,7 @@ const Drawer = forwardRef(({ open, className, children, contentTransitionProps,
             [styles.leftPlacement]: isLeftPlacement,
             [styles.customScrollbar]: !nativeScrollbar,
         }), transitionProps: transitionProps, backdropProps: { ...backdropProps, ...restProps.backdropProps } },
-        React.createElement(CSSTransition, { nodeRef: nodeRef, ...{ ...contentProps, ...contentTransitionProps }, appear: true, in: open },
+        React.createElement(CSSTransition, { nodeRef: nodeRef, ...contentProps, ...contentTransitionProps, appear: true, in: open },
             React.createElement("div", { ref: nodeRef, className: styles.content }, children))));
 });
 Drawer.displayName = 'Drawer';

package/moderncssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { type TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport {\n    BaseModal,\n    BaseModalContext,\n    type BaseModalProps,\n} from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n    /**\n     * Край экрана, с которого может появиться Drawer.\n     * @default \"right\"\n     */\n    placement?: 'left' | 'right';\n\n    /**\n     * Нужно ли использовать нативный скроллбар\n     * @default true\n     */\n    nativeScrollbar?: boolean;\n\n    /**\n     * Пропсы для анимации контента (CSSTransition)\n     */\n    contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n    transitionClassNames: {\n        enter: styles.backdropEnter,\n        appear: styles.backdropEnter,\n        enterActive: styles.backdropEnterActive,\n        appearActive: styles.backdropEnterActive,\n        enterDone: styles.backdropEnterDone,\n        appearDone: styles.backdropEnterDone,\n        exit: styles.backdropExit,\n        exitActive: styles.backdropExitActive,\n        exitDone: styles.backdropExitDone,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n    classNames: {\n        enter: styles.contentEnter,\n        appear: styles.contentEnter,\n        enterActive: styles.contentEnterActive,\n        appearActive: styles.contentEnterActive,\n        exit: styles.contentExit,\n        exitActive: styles.contentExitActive,\n    },\n    timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n    (\n        {\n            open,\n            className,\n            children,\n            contentTransitionProps,\n            nativeScrollbar = true,\n            placement = 'right',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const nodeRef = useRef<HTMLDivElement>(null);\n        const isRightPlacement = placement === 'right';\n        const isLeftPlacement = placement === 'left';\n\n        const transitionProps = useMemo(() => {\n            const enterClassName = cn({\n                [styles.enterRight]: isRightPlacement,\n                [styles.enterLeft]: isLeftPlacement,\n            });\n\n            const exitClassName = cn({\n                [styles.exitActiveRight]: isRightPlacement,\n                [styles.exitActiveLeft]: isLeftPlacement,\n            });\n\n            return {\n                classNames: {\n                    enter: enterClassName,\n                    appear: enterClassName,\n                    enterActive: styles.enterActive,\n                    appearActive: styles.enterActive,\n                    exit: styles.exit,\n                    exitActive: exitClassName,\n                },\n                timeout: ANIMATION_DURATION,\n                ...restProps.transitionProps,\n            };\n        }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n        return (\n            <BaseModal\n                {...restProps}\n                scrollHandler='content'\n                ref={ref}\n                open={open}\n                className={cn(styles.component, className, {\n                    [styles.rightPlacement]: isRightPlacement,\n                    [styles.leftPlacement]: isLeftPlacement,\n                    [styles.customScrollbar]: !nativeScrollbar,\n                })}\n                transitionProps={transitionProps}\n                backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n            >\n                <CSSTransition\n                    nodeRef={nodeRef}\n                    {...{ ...contentProps, ...contentTransitionProps }}\n                    appear={true}\n                    in={open}\n                >\n                    <div ref={nodeRef} className={styles.content}>\n                        {children}\n                    </div>\n                </CSSTransition>\n            </BaseModal>\n        );\n    },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-drawer",
-    "version": "7.0.3",
+    "version": "7.0.4",
     "description": "Drawer component",
     "keywords": [],
     "license": "MIT",
@@ -10,13 +10,13 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^7.1.1",
+        "@alfalab/core-components-base-modal": "^7.1.2",
         "classnames": "^2.5.1",
         "react-transition-group": "^4.4.5",
         "tslib": "^2.4.0"
     },
     "devDependencies": {
-        "@alfalab/core-components-button": "^13.0.2"
+        "@alfalab/core-components-button": "^13.1.1"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0",
@@ -26,6 +26,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.0.1",
-    "varsVersion": "11.0.1"
+    "themesVersion": "15.0.2",
+    "varsVersion": "11.0.2"
 }

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/no-typography-index.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../backdrop/src/vars.css';
 
 :root {