@cloud-ru/uikit-product-mobile-drawer 0.9.15 → 0.9.16

package/dist/cjs/helperComponents/WithTooltip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./WithTooltip"), exports);

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Body';
+export * from './ButtonClose';
+export * from './Footer';
+export * from './Header';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Body"), exports);
+__exportStar(require("./ButtonClose"), exports);
+__exportStar(require("./Footer"), exports);
+__exportStar(require("./Header"), exports);

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/cjs/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { MODAL_MODE, MODE, POSITION, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type ModalMode = ValueOf<typeof MODAL_MODE>;
+export type Position = ValueOf<typeof POSITION>;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,40 @@
+import { ReactElement } from 'react';
+import { MobileTooltipProps } from '@sbercloud/uikit-product-mobile-tooltip';
+import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
+import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
+import { Size } from '../../types';
+import { MobileDrawerCustomProps } from '../MobileDrawerCustom';
+export type DrawerProps = Omit<MobileDrawerCustomProps, 'size' | 'children' | 'nestedDrawer' | 'push' | 'closeButtonEnabled' | 'swipeEnabled'> & Pick<DrawerHeaderProps, 'titleTooltip' | 'image'> & Pick<DrawerBodyProps, 'content'> & {
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Размер */
+    size?: Size;
+    /** Основная кнопка */
+    approveButton?: Omit<ButtonFilledProps, 'size'> & {
+        tooltip?: MobileTooltipProps;
+    };
+    /** Кнопка отмены */
+    cancelButton?: Omit<ButtonOutlineProps, 'size'> & {
+        tooltip?: MobileTooltipProps;
+    };
+    /** Дополнительная кнопка */
+    additionalButton?: Omit<ButtonSimpleProps, 'size'> & {
+        tooltip?: MobileTooltipProps;
+    };
+    /** Вложенный Drawer */
+    nestedDrawer?: ReactElement<DrawerProps>;
+    /**
+     *  Максимальное кол-во строк
+     * <br> - `title` - в заголовке
+     * <br> - `subtitle` - в подзаголовке
+     * @default '{ <br>title: 1; <br>subtitle: 2; }'
+     */
+    truncate?: {
+        title?: number;
+        subtitle?: number;
+    };
+};
+/** Готовый компонент Drawer */
+export declare function MobileDrawer({ title, titleTooltip, subtitle, image, content, approveButton, cancelButton, additionalButton, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MobileDrawer/MobileDrawer.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonFilled, ButtonOutline, ButtonSimple, } from '@snack-uikit/button';
+import { TEST_IDS } from '../../constants';
+import { WithTooltip } from '../../helperComponents/WithTooltip';
+import { MobileDrawerCustom } from '../MobileDrawerCustom';
+import styles from './styles.module.css';
+/** Готовый компонент Drawer */
+export function MobileDrawer(_a) {
+    var { title, titleTooltip, subtitle, image, content, approveButton, cancelButton, additionalButton } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "image", "content", "approveButton", "cancelButton", "additionalButton"]);
+    const needFooter = Boolean(approveButton) || Boolean(cancelButton) || Boolean(additionalButton);
+    return (_jsxs(MobileDrawerCustom, Object.assign({}, rest, { closeButtonEnabled: true, swipeEnabled: false, children: [_jsx(MobileDrawerCustom.Header, { title: title, titleTooltip: titleTooltip, subtitle: subtitle, image: image, "data-test-id": TEST_IDS.header }), _jsx(MobileDrawerCustom.Body, { content: content, "data-test-id": TEST_IDS.content }), needFooter ? (_jsx(MobileDrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, actions: _jsxs(_Fragment, { children: [approveButton && (_jsx(WithTooltip, { tooltip: approveButton.tooltip, children: _jsx(ButtonFilled, Object.assign({ appearance: 'primary', size: 'm', "data-test-id": TEST_IDS.approveButton }, approveButton)) })), cancelButton && (_jsx(WithTooltip, { tooltip: cancelButton.tooltip, children: _jsx(ButtonOutline, Object.assign({ appearance: 'neutral', size: 'm', "data-test-id": TEST_IDS.cancelButton }, cancelButton)) })), additionalButton && (_jsx(WithTooltip, { tooltip: additionalButton.tooltip, children: _jsx(ButtonSimple, Object.assign({ appearance: 'neutral', size: 'm', "data-test-id": TEST_IDS.additionalButton }, additionalButton)) }))] }) })) : (_jsx("div", { className: styles.footerPlug }))] })));
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+.footerPlug{
+  min-height:16px;
+  height:16px;
+}

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

@@ -0,0 +1,50 @@
+import 'rc-drawer/assets/index.css';
+import { PropsWithChildren } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { DrawerBody, DrawerBodyProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps } from '../../helperComponents';
+import { ModalMode, Mode, Position, Size } from '../../types';
+export type MobileDrawerCustomProps = WithSupportProps<PropsWithChildren<{
+    /** Управление состоянием показан/не показан. */
+    open: boolean;
+    /** Колбэк закрытия */
+    onClose(): void;
+    /** Режим отображения */
+    mode?: Mode;
+    /**
+     * Режим отображения для модального окна:
+     * <br> - __`Regular`__ -  есть закрытие по свайпу, клик на оверлей и нажатие кнопки `Esc` закрывают модалку
+     * <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc`
+     * <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
+     * @default Mode.Regular
+     */
+    modalMode?: ModalMode;
+    /** Расположение открытого Drawer */
+    position?: Position;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+    /** CSS-класс для корневого элемента */
+    rootClassName?: string;
+    /** Размер */
+    size?: Size | string | number;
+    /** Контейнер в котором будет рендерится Drawer. По-умолчанию - body */
+    container?: string | HTMLElement;
+    /** Есть ли радиус у дровера */
+    hasBorderRadius?: boolean;
+    /** Есть ли бордер у дровера */
+    outline?: boolean;
+    /** Работает ли закрытие на свайп */
+    swipeEnabled?: boolean;
+    /** Показывать ли кнопку закрытия */
+    closeButtonEnabled?: boolean;
+    /** Закрывать при перемещении по истории браузера */
+    closeOnPopstate?: boolean;
+}>>;
+export declare function MobileDrawerCustom({ open: openProp, mode, position, onClose, rootClassName, className, size, container, children, hasBorderRadius, outline, swipeEnabled, modalMode, closeButtonEnabled, closeOnPopstate, ...rest }: MobileDrawerCustomProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MobileDrawerCustom {
+    type HeaderProps = DrawerHeaderProps;
+    type BodyProps = DrawerBodyProps;
+    type FooterProps = DrawerFooterProps;
+    const Header: typeof DrawerHeader;
+    const Body: typeof DrawerBody;
+    const Footer: typeof DrawerFooter;
+}

package/dist/esm/components/MobileDrawerCustom/MobileDrawerCustom.js

@@ -0,0 +1,66 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'rc-drawer/assets/index.css';
+import cn from 'classnames';
+import RcDrawer from 'rc-drawer';
+import { useEffect } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { extractSupportProps, useModalOpenState } from '@snack-uikit/utils';
+import { MODAL_MODE, MODE, POSITION, SIZE, SIZE_AS_VALUES } from '../../constants';
+import { ButtonClose, DrawerBody, DrawerFooter, DrawerHeader, } from '../../helperComponents';
+import { DRAWER_CLOSING_TIMEOUT, motionProps } from './constants';
+import { useSwipeProps } from './hooks';
+import styles from './styles.module.css';
+export function MobileDrawerCustom(_a) {
+    var { open: openProp, mode = MODE.Regular, position = POSITION.Left, onClose, rootClassName, className, size = SIZE.S, container, children, hasBorderRadius = false, outline = false, swipeEnabled = true, modalMode = MODAL_MODE.Regular, closeButtonEnabled = true, closeOnPopstate } = _a, rest = __rest(_a, ["open", "mode", "position", "onClose", "rootClassName", "className", "size", "container", "children", "hasBorderRadius", "outline", "swipeEnabled", "modalMode", "closeButtonEnabled", "closeOnPopstate"]);
+    const isRegular = mode === MODE.Regular;
+    const isPredefinedSize = typeof size === 'string' && SIZE_AS_VALUES.includes(size);
+    const [open, setOpen] = useUncontrolledProp(openProp, false);
+    const hasBlur = [MODAL_MODE.Forced, MODAL_MODE.Aggressive].includes(modalMode);
+    const hasSwipe = [MODAL_MODE.Regular, MODAL_MODE.Aggressive].includes(modalMode);
+    const handleClose = () => {
+        setOpen(false);
+        onClose();
+    };
+    useModalOpenState(open, () => hasSwipe && handleClose(), {
+        closeOnPopstate,
+    });
+    const { swipeRef, drawerStyles, maskStyles, drawerMotionProps, swipeProps, showPointer } = useSwipeProps({
+        position,
+        onSwiped: handleClose,
+        enabled: hasSwipe && swipeEnabled,
+    });
+    // Fix to prevent refresh when swiping on ios
+    useEffect(() => {
+        const hasOtherDrawers = () => Boolean(document.querySelector('[data-content-wrapper]'));
+        const disableRefresh = () => (document.documentElement.style.overscrollBehaviorY = 'none');
+        const enableRefresh = () => (document.documentElement.style.overscrollBehaviorY = '');
+        if (open && !document.documentElement.style.overscrollBehaviorY) {
+            disableRefresh();
+            return () => {
+                setTimeout(() => !hasOtherDrawers() && enableRefresh(), DRAWER_CLOSING_TIMEOUT + 50);
+            };
+        }
+    }, [open]);
+    return (_jsx(RcDrawer, Object.assign({ mask: isRegular, maskClosable: isRegular, keyboard: isRegular, maskClassName: cn(styles.mask, {
+            [styles.maskBlur]: hasBlur,
+        }), width: !isPredefinedSize && (position === POSITION.Right || position === POSITION.Left) ? size : 'null',
+        height: !isPredefinedSize && (position === POSITION.Top || position === POSITION.Bottom) ? size : 'null', open: open, placement: position, destroyOnClose: true, push: false, afterOpenChange: setOpen, onClose: modalMode === MODAL_MODE.Regular ? handleClose : undefined, getContainer: container, className: styles.drawer, rootClassName: cn(styles.drawerRoot, rootClassName, {
+            [styles.drawerBlur]: hasBlur,
+        }) }, extractSupportProps(rest), { "data-content-wrapper": true, "data-blur": hasBlur || undefined, "data-border-radius": hasBorderRadius || undefined, "data-outline": outline || undefined, "data-size": isPredefinedSize ? size : undefined, "data-mode": mode, "data-position": position, contentWrapperStyle: drawerStyles, maskStyle: maskStyles, motion: Object.assign(Object.assign({}, (typeof motionProps.motion === 'function' ? motionProps.motion(position) : motionProps.motion)), drawerMotionProps), maskMotion: motionProps.maskMotion, children: _jsxs("div", Object.assign({ className: cn(className, styles.content) }, (swipeEnabled && hasSwipe ? swipeProps : undefined), { ref: swipeRef, "data-swipe": swipeEnabled || undefined, "data-pointers": showPointer || undefined, children: [swipeEnabled && _jsx("div", { className: styles.swiper, "data-position": position }), children, closeButtonEnabled && (_jsx("div", { className: styles.headerElements, children: _jsx(ButtonClose, { onClick: onClose }) }))] })) })));
+}
+(function (MobileDrawerCustom) {
+    MobileDrawerCustom.Header = DrawerHeader;
+    MobileDrawerCustom.Body = DrawerBody;
+    MobileDrawerCustom.Footer = DrawerFooter;
+})(MobileDrawerCustom || (MobileDrawerCustom = {}));

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

@@ -0,0 +1,10 @@
+import './motion.css';
+import type { DrawerProps } from 'rc-drawer';
+import type { SwipeDirections } from '@snack-uikit/utils';
+import { Position } from '../../types';
+export declare const maskMotion: DrawerProps['maskMotion'];
+export declare const motion: DrawerProps['motion'];
+export declare const motionProps: Partial<DrawerProps>;
+export declare const SWIPE_DIRECTION_TO_POSITION_MAP: Record<SwipeDirections, Position>;
+export declare const POSITION_TO_SWIPE_DIRECTION_MAP: Record<Position, SwipeDirections>;
+export declare const DRAWER_CLOSING_TIMEOUT = 300;

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

@@ -0,0 +1,21 @@
+import './motion.css';
+export const maskMotion = {
+    motionAppear: true,
+    motionName: 'maskMotionMobile',
+};
+export const motion = placement => ({
+    motionAppear: true,
+    motionName: `panelMotionMobile-${placement}`,
+});
+export const motionProps = {
+    maskMotion,
+    motion,
+};
+export const SWIPE_DIRECTION_TO_POSITION_MAP = {
+    Right: 'right',
+    Left: 'left',
+    Up: 'top',
+    Down: 'bottom',
+};
+export const POSITION_TO_SWIPE_DIRECTION_MAP = Object.fromEntries(Object.entries(SWIPE_DIRECTION_TO_POSITION_MAP).map(([key, value]) => [value, key]));
+export const DRAWER_CLOSING_TIMEOUT = 300;

package/dist/esm/components/MobileDrawerCustom/hooks.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+import { Position } from '../../types';
+type UseSwipePropsProps = {
+    onSwiped(): void;
+    position: Position;
+    enabled: boolean;
+};
+export declare function useSwipeProps({ onSwiped, position, enabled }: UseSwipePropsProps): {
+    swipeRef: import("react").Ref<HTMLDivElement>;
+    drawerStyles: CSSProperties | undefined;
+    maskStyles: CSSProperties | undefined;
+    showPointer: boolean;
+    swipeProps: {
+        onMouseDown?(event: import("react").MouseEvent): void;
+        "data-swipe-directions"?: string;
+    };
+    drawerMotionProps: {
+        onLeaveActive: () => void;
+        onLeaveEnd: () => void;
+    };
+};
+export {};

package/dist/esm/components/MobileDrawerCustom/hooks.js

@@ -0,0 +1,158 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import mergeRefs from 'merge-refs';
+import { useRef, useState } from 'react';
+import { DATA_SWIPE_DIRECTIONS_ATTRIBUTE, useSwipeable } from '@snack-uikit/utils';
+import { POSITION_TO_SWIPE_DIRECTION_MAP, SWIPE_DIRECTION_TO_POSITION_MAP } from './constants';
+const TRANSFORM = 0;
+const SWIPE_DURATION = 500;
+export function useSwipeProps({ onSwiped, position, enabled }) {
+    var _a, _b, _c;
+    const swipeRef = useRef(null);
+    const canCloseDrawer = useRef(true);
+    const itemSize = (_c = (position === 'bottom' || position === 'top' ? (_a = swipeRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight : (_b = swipeRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth)) !== null && _c !== void 0 ? _c : 0;
+    const swipeStart = useRef(0);
+    const getInitialDrag = () => ({
+        initial: TRANSFORM,
+        start: 0,
+        isDown: false,
+        drag: 0,
+        finished: true,
+        pointers: true,
+    });
+    const [drag, setDrag] = useState(getInitialDrag);
+    const [styles, setStyles] = useState();
+    const getDrawerTransform = (value) => {
+        switch (position) {
+            case 'bottom':
+            case 'top':
+                return `translateY(${TRANSFORM - value}px)`;
+            case 'right':
+            case 'left':
+            default:
+                return `translateX(${TRANSFORM - value}px)`;
+        }
+    };
+    const getMaskOpacity = (value) => 1 + value / itemSize;
+    const resetStyles = () => {
+        setStyles(undefined);
+        setDrag(getInitialDrag());
+    };
+    const isContainedInArea = ({ element, condition, }) => {
+        if (!element) {
+            return false;
+        }
+        if (element === swipeRef.current) {
+            return false;
+        }
+        if (!element.parentElement) {
+            return false;
+        }
+        return condition(element) || isContainedInArea({ element: element.parentElement, condition });
+    };
+    const isSwipeEnabled = (eventData) => {
+        const element = eventData.event.target;
+        const equalDirectionsCondition = (el) => {
+            var _a, _b;
+            const directions = (_b = (_a = el.getAttribute(DATA_SWIPE_DIRECTIONS_ATTRIBUTE)) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+            return directions.some(direction => direction === eventData.dir);
+        };
+        if (isContainedInArea({ element, condition: equalDirectionsCondition })) {
+            return false;
+        }
+        return position === SWIPE_DIRECTION_TO_POSITION_MAP[eventData.dir];
+    };
+    const handleSwipeStart = () => {
+        swipeStart.current = Date.now();
+    };
+    const handleSwiping = eventData => {
+        if (!isSwipeEnabled(eventData)) {
+            return;
+        }
+        if (!canCloseDrawer.current) {
+            return;
+        }
+        let adjustedDrag = 0;
+        const element = eventData.event.target;
+        switch (position) {
+            case 'left':
+                if (isContainedInArea({ element, condition: el => el.scrollWidth - el.offsetWidth > el.scrollLeft })) {
+                    canCloseDrawer.current = false;
+                    return;
+                }
+                adjustedDrag = Math.max(0, -eventData.deltaX);
+                break;
+            case 'right':
+                if (isContainedInArea({ element, condition: el => el.scrollLeft > 0 })) {
+                    canCloseDrawer.current = false;
+                    return;
+                }
+                adjustedDrag = Math.min(0, -eventData.deltaX);
+                break;
+            case 'top':
+                if (isContainedInArea({ element, condition: el => el.scrollHeight - el.offsetHeight > el.scrollTop })) {
+                    canCloseDrawer.current = false;
+                    return;
+                }
+                adjustedDrag = Math.max(0, -eventData.deltaY);
+                break;
+            case 'bottom':
+                if (isContainedInArea({ element, condition: el => el.scrollTop > 0 })) {
+                    canCloseDrawer.current = false;
+                    return;
+                }
+                adjustedDrag = Math.min(0, -eventData.deltaY);
+                break;
+            default:
+                break;
+        }
+        setDrag(prevDrag => (Object.assign(Object.assign({}, prevDrag), { drag: adjustedDrag, pointers: eventData.absX < Number.MIN_SAFE_INTEGER })));
+        setStyles({
+            drawer: { transform: getDrawerTransform(adjustedDrag), transition: 'none' },
+            mask: { opacity: getMaskOpacity(adjustedDrag), transition: 'none' },
+        });
+    };
+    const handleSwiped = eventData => {
+        if (!isSwipeEnabled(eventData)) {
+            return resetStyles();
+        }
+        if (Date.now() - swipeStart.current > SWIPE_DURATION) {
+            return resetStyles();
+        }
+        if (!canCloseDrawer.current) {
+            canCloseDrawer.current = true;
+            return resetStyles();
+        }
+        onSwiped();
+        setStyles({ drawer: { transform: getDrawerTransform(drag.drag) }, mask: { opacity: getMaskOpacity(drag.drag) } });
+        setDrag(prevDrag => (Object.assign(Object.assign({}, prevDrag), { drag: 0, isDown: false, finished: true, pointers: true })));
+    };
+    const _d = useSwipeable({
+        onSwipeStart: handleSwipeStart,
+        onSwiping: handleSwiping,
+        onSwiped: handleSwiped,
+        enabled,
+        availableDirections: [POSITION_TO_SWIPE_DIRECTION_MAP[position]],
+        trackMouse: true,
+    }), { ref } = _d, swipeProps = __rest(_d, ["ref"]);
+    return {
+        swipeRef: mergeRefs(ref, swipeRef),
+        drawerStyles: styles === null || styles === void 0 ? void 0 : styles.drawer,
+        maskStyles: styles === null || styles === void 0 ? void 0 : styles.mask,
+        showPointer: !drag.pointers,
+        swipeProps,
+        drawerMotionProps: {
+            onLeaveActive: () => setStyles(undefined),
+            onLeaveEnd: () => setStyles(undefined),
+        },
+    };
+}

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

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

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

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

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

@@ -0,0 +1,117 @@
+.maskMotionMobile {
+  opacity: unset;
+}
+.maskMotionMobile-enter, .maskMotionMobile-appear {
+  opacity: 0;
+}
+.maskMotionMobile-enter-active, .maskMotionMobile-appear-active {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.maskMotionMobile-leave {
+  opacity: 1;
+}
+.maskMotionMobile-leave-active {
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.panelMotionMobile {
+  transform: unset;
+}
+
+/** LEFT */
+.panelMotionMobile-left-enter-start, .panelMotionMobile-left-appear-start, .panelMotionMobile-left-leave-start {
+  transition: none !important;
+}
+.panelMotionMobile-left-enter-active, .panelMotionMobile-left-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotionMobile-left-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotionMobile-left-enter, .panelMotionMobile-left-appear {
+  transform: translateX(-100%);
+}
+.panelMotionMobile-left-enter-active, .panelMotionMobile-left-appear-active {
+  transform: translateX(0);
+}
+.panelMotionMobile-left-leave {
+  transform: translateX(0);
+}
+.panelMotionMobile-left-leave-active {
+  transform: translateX(-100%) !important;
+}
+/*********/
+
+/** RIGHT */
+.panelMotionMobile-right-enter-start, .panelMotionMobile-right-appear-start, .panelMotionMobile-right-leave-start {
+  transition: none !important;
+}
+.panelMotionMobile-right-enter-active, .panelMotionMobile-right-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotionMobile-right-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotionMobile-right-enter, .panelMotionMobile-right-appear {
+  transform: translateX(100%);
+}
+.panelMotionMobile-right-enter-active, .panelMotionMobile-right-appear-active {
+  transform: translateX(0);
+}
+.panelMotionMobile-right-leave {
+  transform: translateX(0);
+}
+.panelMotionMobile-right-leave-active {
+  transform: translateX(100%) !important;
+}
+/**********/
+
+/** BOTTOM */
+.panelMotionMobile-bottom-enter-start, .panelMotionMobile-bottom-appear-start, .panelMotionMobile-bottom-leave-start {
+  transition: none !important;
+}
+.panelMotionMobile-bottom-enter-active, .panelMotionMobile-bottom-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotionMobile-bottom-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotionMobile-bottom-enter, .panelMotionMobile-bottom-appear {
+  transform: translateY(100%);
+}
+.panelMotionMobile-bottom-enter-active, .panelMotionMobile-bottom-appear-active {
+  transform: translateY(0);
+}
+.panelMotionMobile-bottom-leave {
+  transform: translateY(0);
+}
+.panelMotionMobile-bottom-leave-active {
+  transform: translateY(100%) !important;
+}
+/***********/
+
+/** TOP */
+.panelMotionMobile-top-enter-start, .panelMotionMobile-top-appear-start, .panelMotionMobile-top-leave-start {
+  transition: none !important;
+}
+.panelMotionMobile-top-enter-active, .panelMotionMobile-top-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotionMobile-top-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotionMobile-top-enter, .panelMotionMobile-top-appear {
+  transform: translateY(-100%);
+}
+.panelMotionMobile-top-enter-active, .panelMotionMobile-top-appear-active {
+  transform: translateY(0);
+}
+.panelMotionMobile-top-leave {
+  transform: translateY(0);
+}
+.panelMotionMobile-top-leave-active {
+  transform: translateY(-100%) !important;
+}
+/********/