@cloud-ru/ds-drawer 1.0.0

package/dist/esm/components/Drawer/Drawer.d.ts

@@ -0,0 +1,6 @@
+import { DrawerProps } from './types.js';
+/**
+ * Адаптивный Drawer. Раскладка из `AdaptiveProvider`: на `mobile` — `BottomSheet`, иначе —
+ * desktop-панель. Форс — `<AdaptiveProvider layoutType=…>` / `withLayoutType`.
+ */
+export declare function Drawer(props: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Drawer/Drawer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { DesktopDrawer } from '../../helperComponents/DesktopDrawer/index.js';
+import { MobileDrawer } from '../../helperComponents/MobileDrawer/index.js';
+/**
+ * Адаптивный Drawer. Раскладка из `AdaptiveProvider`: на `mobile` — `BottomSheet`, иначе —
+ * desktop-панель. Форс — `<AdaptiveProvider layoutType=…>` / `withLayoutType`.
+ */
+export function Drawer(props) {
+    const { layoutType } = useAdaptiveLayout();
+    return isMobileLayout(layoutType) ? _jsx(MobileDrawer, { ...props }) : _jsx(DesktopDrawer, { ...props });
+}

package/dist/esm/components/Drawer/constants.d.ts

@@ -0,0 +1 @@
+export declare const NESTED_DRAWER_PUSH_DISTANCE = 24;

package/dist/esm/components/Drawer/constants.js

@@ -0,0 +1 @@
+export const NESTED_DRAWER_PUSH_DISTANCE = 24;

package/dist/esm/components/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Drawer.js';
+export * from './types.js';

package/dist/esm/components/Drawer/index.js

@@ -0,0 +1,2 @@
+export * from './Drawer.js';
+export * from './types.js';

package/dist/esm/components/Drawer/styles.module.css

@@ -0,0 +1,19 @@
+.drawer{
+  box-sizing:border-box;
+}
+
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-drawer-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}

package/dist/esm/components/Drawer/types.d.ts

@@ -0,0 +1,35 @@
+import { BottomSheetActionButton, BottomSheetProps, FooterActionsOrientation } from '@cloud-ru/ds-bottom-sheet';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactElement, ReactNode } from 'react';
+import { DialogBodyProps, DialogHeaderProps } from '../../helperComponents/index.js';
+import { DrawerCustomProps } from '../DrawerCustom/index.js';
+/**
+ * Адаптивный Drawer: desktop — боковая/верхняя/нижняя панель, `mobile` — `BottomSheet`.
+ *
+ * Только desktop: `position`, `width`, `heightAuto`, `nestedDrawer` (на mobile игнорируются).
+ * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`
+ * (на desktop-панели игнорируются — это анатомия `BottomSheet`).
+ */
+export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
+    /** Текстовая строка-подзаголовок под title. */
+    subtitle?: ReactNode;
+    /** CSS-класс */
+    className?: string;
+    /** Медиа-контент */
+    media?: ReactNode;
+    /** Основная кнопка действия — пропсы `Button` (дефолт `view='filled'`, `appearance='primary'`). */
+    approveButton?: BottomSheetActionButton;
+    /** Кнопка отмены — объект пропсов `Button` (по умолчанию `view='outline'`, `appearance='neutral'`). */
+    cancelButton?: BottomSheetActionButton;
+    /** Дополнительная (третья) кнопка — пропсы `Button` (дефолт `view='simple'`, `appearance='neutral'`). */
+    additionalButton?: BottomSheetActionButton;
+    /**
+     * Ориентация кнопок футера. Применяется только при двух кнопках; игнорируется при заданном `footer`.
+     * @default 'horizontal'
+     */
+    footerActionsOrientation?: FooterActionsOrientation;
+    /** Произвольный футер. Приоритетнее `approveButton` / `cancelButton` / `additionalButton`. */
+    footer?: ReactNode;
+    /** Вложенный Drawer */
+    nestedDrawer?: ReactElement<DrawerProps>;
+}>;

package/dist/esm/components/Drawer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/DrawerCustom/DrawerCustom.d.ts

@@ -0,0 +1,15 @@
+import { DialogBody, DialogBodyProps, DialogFooterProps, DialogHeaderProps } from '../../helperComponents/index.js';
+import { DrawerCustomProps } from './types.js';
+/**
+ * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
+ * Композиция одна (surface-aware слоты `.Header/.Body/.Footer`). Форс — `withLayoutType`.
+ */
+export declare function DrawerCustom(props: DrawerCustomProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerCustom {
+    type HeaderProps = DialogHeaderProps;
+    type BodyProps = DialogBodyProps;
+    type FooterProps = DialogFooterProps;
+    const Header: typeof import("@cloud-ru/ds-popup-private").PopupHeader;
+    const Body: typeof DialogBody;
+    const Footer: typeof import("@cloud-ru/ds-popup-private").PopupFooter;
+}

package/dist/esm/components/DrawerCustom/DrawerCustom.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { BottomSheetCustom, OVERLAY_SURFACE, OverlaySurfaceProvider } from '@cloud-ru/ds-bottom-sheet';
+import { PopupCloseButton } from '@cloud-ru/ds-popup-private';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { extractSupportProps, useModalOpenState } from '@cloud-ru/ds-utils';
+import RcDrawerImport from '@rc-component/drawer';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { TEST_IDS, WIDTH_AS_VALUES } from '../../constants.js';
+import { DialogBody, DialogFooter, DialogHeader, } from '../../helperComponents/index.js';
+import { interopDefault } from '../../utils/interopDefault.js';
+import { motionProps } from './constants.js';
+import { useDrawerFocusTrap } from './hooks/index.js';
+import { useDrawerResize } from './hooks/useDrawerResize.js';
+import styles from './styles.module.css';
+const RcDrawer = interopDefault(RcDrawerImport);
+/** Desktop-frame дровера: rc-drawer + position/width/push/nestedDrawer + close-button. Surface='drawer'. */
+function DrawerFrame(props) {
+    const { showBlackout = true, showButtonClosed = true, open, onClose, rootClassName, className, push, container, children, nestedDrawer, closeOnPopstate, position, heightAuto, width: widthProp, resizable: resizableProp, disableMotions = false, ...rest } = props;
+    const heightAutoVertical = Boolean(heightAuto && (position === 'top' || position === 'bottom'));
+    const resizable = heightAutoVertical ? undefined : resizableProp;
+    const { tooltip, checkElement, width: userWidth, resizable: drawerResizable, } = useDrawerResize({
+        resizable,
+        position,
+    });
+    const width = resizable ? (userWidth ?? widthProp) : widthProp;
+    const isPredefinedWidth = typeof width === 'string' && WIDTH_AS_VALUES.includes(width);
+    // Wrapper height/inset задаёт CSS по `[data-height-auto]`; здесь только стили секции.
+    const drawerPanelStyle = useMemo(() => {
+        if (!heightAutoVertical) {
+            return undefined;
+        }
+        return {
+            height: 'auto',
+            maxHeight: '100%',
+            minHeight: 0,
+            overflow: 'hidden',
+        };
+    }, [heightAutoVertical]);
+    // Esc обрабатывает rc-drawer (`keyboard={showBlackout}`) — он уважает стек порталов и закрывает
+    // только верхний дровер. `CloseWatcher` подключаем лишь там, где rc-drawer Esc не слушает
+    // (`showBlackout=false`): иначе два независимых обработчика закрывают и вложенный, и родительский.
+    useModalOpenState(open, onClose, { closeOnPopstate, closeByCloseWatcher: !showBlackout });
+    const focusTrapRef = useDrawerFocusTrap(Boolean(open));
+    // Без явного container портал идёт через PortalContextProvider (как у Modal): скоуп к локальному
+    // элементу и отказ от body-level scroll lock, который rc-drawer ставит при рендере в document.body.
+    const portalContextRef = usePortalContext();
+    const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
+    return (_jsx(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: cn(styles.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
+            section: cn(styles.drawer, className),
+        }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : motionProps), children: _jsxs("div", { ref: focusTrapRef, className: styles.focusScope, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
+}
+/**
+ * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
+ * Композиция одна (surface-aware слоты `.Header/.Body/.Footer`). Форс — `withLayoutType`.
+ */
+export function DrawerCustom(props) {
+    const { layoutType } = useAdaptiveLayout();
+    if (isMobileLayout(layoutType)) {
+        const { open, onClose, children, className, rootClassName, container, closeOnPopstate, showBlackout, snapPoints, swipeEnabled, safeArea, disableMotions, ...rest } = props;
+        return (_jsx(BottomSheetCustom, { open: open, onClose: onClose, container: container, className: className, rootClassName: rootClassName, closeOnPopstate: closeOnPopstate, showBackdrop: showBlackout, snapPoints: snapPoints, swipeEnabled: swipeEnabled, safeArea: safeArea, disableMotions: disableMotions, ...extractSupportProps(rest), children: children }));
+    }
+    return _jsx(DrawerFrame, { ...props });
+}
+(function (DrawerCustom) {
+    DrawerCustom.Header = DialogHeader;
+    DrawerCustom.Body = DialogBody;
+    DrawerCustom.Footer = DialogFooter;
+})(DrawerCustom || (DrawerCustom = {}));

package/dist/esm/components/DrawerCustom/constants.d.ts

@@ -0,0 +1,4 @@
+import { DrawerProps } from '@rc-component/drawer';
+export declare const maskMotion: DrawerProps['maskMotion'];
+export declare const motion: DrawerProps['motion'];
+export declare const motionProps: Partial<DrawerProps>;

package/dist/esm/components/DrawerCustom/constants.js

@@ -0,0 +1,13 @@
+export const maskMotion = {
+    motionAppear: true,
+    motionName: 'maskMotion',
+};
+export const motion = placement => ({
+    motionAppear: true,
+    motionDeadline: 300,
+    motionName: `panelMotion-${placement}`,
+});
+export const motionProps = {
+    maskMotion,
+    motion,
+};

package/dist/esm/components/DrawerCustom/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useDrawerFocusTrap.js';

package/dist/esm/components/DrawerCustom/hooks/index.js

@@ -0,0 +1 @@
+export * from './useDrawerFocusTrap.js';

package/dist/esm/components/DrawerCustom/hooks/useDrawerFocusTrap.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Focus scope для Drawer-панели:
+ *  - запоминает activeElement до открытия и возвращает фокус после закрытия;
+ *  - устанавливает фокус на контейнер при открытии (без прыжка на первый focusable);
+ *  - цикличный Tab / Shift+Tab внутри контейнера.
+ *
+ * Возвращает ref, который нужно повесить на корневой DOM-узел панели.
+ */
+export declare function useDrawerFocusTrap(active: boolean): import("react").RefObject<HTMLDivElement>;

package/dist/esm/components/DrawerCustom/hooks/useDrawerFocusTrap.js

@@ -0,0 +1,80 @@
+import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useEffect, useRef } from 'react';
+import { tabbable } from 'tabbable';
+/**
+ * Focus scope для Drawer-панели:
+ *  - запоминает activeElement до открытия и возвращает фокус после закрытия;
+ *  - устанавливает фокус на контейнер при открытии (без прыжка на первый focusable);
+ *  - цикличный Tab / Shift+Tab внутри контейнера.
+ *
+ * Возвращает ref, который нужно повесить на корневой DOM-узел панели.
+ */
+export function useDrawerFocusTrap(active) {
+    const containerRef = useRef(null);
+    useLayoutEffect(() => {
+        if (!active) {
+            return;
+        }
+        // Панель rc-drawer монтируется отдельным коммитом, поэтому `containerRef` здесь ещё пуст —
+        // возврат фокуса от него не зависит и на его отсутствие завязываться нельзя.
+        // Начальный фокус ставит сам rc-drawer (autoFocus на panelRef).
+        const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        return () => {
+            if (previous &&
+                previous !== document.body &&
+                previous !== document.documentElement &&
+                document.documentElement.contains(previous)) {
+                previous.focus({ preventScroll: true });
+            }
+        };
+    }, [active]);
+    useEffect(() => {
+        if (!active) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Tab') {
+                return;
+            }
+            const container = containerRef.current;
+            if (!container) {
+                return;
+            }
+            const activeElement = document.activeElement;
+            if (!(activeElement instanceof HTMLElement)) {
+                return;
+            }
+            const focusInsideDialog = container.contains(activeElement);
+            const nodes = tabbable(container);
+            if (nodes.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const first = nodes[0];
+            const last = nodes[nodes.length - 1];
+            if (!focusInsideDialog) {
+                // Фокус ушёл наружу (rc-drawer sentinel / body) — вернём внутрь.
+                event.preventDefault();
+                if (event.shiftKey) {
+                    last?.focus();
+                }
+                else {
+                    first?.focus();
+                }
+                return;
+            }
+            if (event.shiftKey && activeElement === first) {
+                event.preventDefault();
+                last?.focus();
+                return;
+            }
+            if (!event.shiftKey && activeElement === last) {
+                event.preventDefault();
+                first?.focus();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [active]);
+    return containerRef;
+}

package/dist/esm/components/DrawerCustom/hooks/useDrawerResize.d.ts

@@ -0,0 +1,15 @@
+import { DrawerProps } from '@rc-component/drawer';
+import { DrawerCustomProps } from '../types.js';
+type UseDrawerResizeParams = Pick<DrawerCustomProps, 'position' | 'resizable'>;
+type UseDrawerResizeResult = {
+    /** JSX Тултипа для ползунка изменения ширины */
+    tooltip: React.ReactNode;
+    /** Функция поиска ползунка в DOM-дереве. Стоит вызывать тогда, когда он отрендерен. */
+    checkElement: () => void;
+    /** Ресайз-хендлер для rc-drawer */
+    resizable: DrawerProps['resizable'];
+    /** Ширина ползунка в пикселях */
+    width?: number;
+};
+export declare function useDrawerResize({ position, resizable: resizableProp }: UseDrawerResizeParams): UseDrawerResizeResult;
+export {};

package/dist/esm/components/DrawerCustom/hooks/useDrawerResize.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { isBrowser } from '@cloud-ru/ds-utils';
+import { useCallback, useMemo, useRef, useState } from 'react';
+const DRAGGER_SELECTOR = '.rc-drawer-resizable-dragger';
+export function useDrawerResize({ position, resizable: resizableProp }) {
+    const targetRef = useRef(null);
+    const targetRefCallbackRef = useRef();
+    const [width, setWidth] = useState(resizableProp?.default);
+    const [muted, setMuted] = useState(false);
+    const [open, setOpen] = useState(false);
+    const draggerTooltip = resizableProp?.draggerTooltip;
+    const checkElement = useCallback(() => {
+        if (isBrowser() && draggerTooltip) {
+            const element = document.querySelector(DRAGGER_SELECTOR);
+            if (!element)
+                return;
+            targetRefCallbackRef.current ? targetRefCallbackRef.current(element) : (targetRef.current = element);
+        }
+    }, [draggerTooltip]);
+    const tooltip = draggerTooltip ? (_jsx(Tooltip, { placement: position, offset: 4, tip: draggerTooltip, open: open && !muted, onOpenChange: setOpen, children: ({ ref: targetRefCallback }) => {
+            if (!targetRefCallback)
+                return null;
+            targetRef.current ? targetRefCallback(targetRef.current) : (targetRefCallbackRef.current = targetRefCallback);
+        } })) : null;
+    const resizable = useMemo(() => resizableProp
+        ? {
+            onResize: value => {
+                if (value < (resizableProp?.min || 0))
+                    return;
+                if (value > (resizableProp?.max || Infinity))
+                    return;
+                setWidth(value);
+                resizableProp?.onResize?.(value);
+            },
+            onResizeEnd: () => {
+                setOpen(false);
+                setMuted(false);
+                resizableProp?.onResizeEnd?.(width ?? 0);
+            },
+            onResizeStart: () => {
+                setMuted(true);
+            },
+        }
+        : undefined, [resizableProp, width]);
+    return { tooltip, checkElement, resizable, width };
+}

package/dist/esm/components/DrawerCustom/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DrawerCustom.js';
+export type { DrawerCustomProps } from './types.js';

package/dist/esm/components/DrawerCustom/index.js

@@ -0,0 +1 @@
+export * from './DrawerCustom.js';

package/dist/esm/components/DrawerCustom/motion.css

@@ -0,0 +1,93 @@
+.rc-drawer.rc-drawer-open .rc-drawer-mask{
+  opacity:unset;
+  transition:none;
+}
+
+.rc-drawer .rc-drawer-mask.maskMotion{
+  opacity:unset;
+}
+.rc-drawer .rc-drawer-mask.maskMotion-enter, .rc-drawer .rc-drawer-mask.maskMotion-appear{
+  opacity:0;
+}
+.rc-drawer .rc-drawer-mask.maskMotion-enter-active, .rc-drawer .rc-drawer-mask.maskMotion-appear-active{
+  opacity:1;
+  transition:opacity 0.2s;
+}
+.rc-drawer .rc-drawer-mask.maskMotion-leave{
+  opacity:1;
+}
+.rc-drawer .rc-drawer-mask.maskMotion-leave-active{
+  opacity:0;
+  transition:opacity 0.1s;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion{
+  transform:unset;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave-start{
+  transition:none !important;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear{
+  transform:translateX(-100%);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear-active{
+  transform:translateX(0);
+  transition:transform 0.2s ease-in-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave{
+  transform:translateX(0);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave-active{
+  transform:translateX(-100%) !important;
+  transition:transform 0.1s ease-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave-start{
+  transition:none !important;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear{
+  transform:translateX(100%);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear-active{
+  transform:translateX(0);
+  transition:transform 0.2s ease-in-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave{
+  transform:translateX(0);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave-active{
+  transform:translateX(100%) !important;
+  transition:transform 0.1s ease-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave-start{
+  transition:none !important;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear{
+  transform:translateY(-100%);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear-active{
+  transform:translateY(0);
+  transition:transform 0.2s ease-in-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave{
+  transform:translateY(0);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave-active{
+  transform:translateY(-100%) !important;
+  transition:transform 0.1s ease-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave-start{
+  transition:none !important;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear{
+  transform:translateY(100%);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear-active{
+  transform:translateY(0);
+  transition:transform 0.2s ease-in-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave{
+  transform:translateY(0);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave-active{
+  transform:translateY(100%) !important;
+  transition:transform 0.1s ease-out;
+}