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

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.9.17 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-icons@15.1.3](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-tooltip@0.4.67](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-tooltip/CHANGELOG.md)
+
+
+
+
+
+## 0.9.16 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.9.15 (2025-11-12)
 
 ### Only dependencies have been changed

package/dist/cjs/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/cjs/components/MobileDrawer/MobileDrawer.js

@@ -0,0 +1,29 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileDrawer = MobileDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@snack-uikit/button");
+const constants_1 = require("../../constants");
+const WithTooltip_1 = require("../../helperComponents/WithTooltip");
+const MobileDrawerCustom_1 = require("../MobileDrawerCustom");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Готовый компонент Drawer */
+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 ((0, jsx_runtime_1.jsxs)(MobileDrawerCustom_1.MobileDrawerCustom, Object.assign({}, rest, { closeButtonEnabled: true, swipeEnabled: false, children: [(0, jsx_runtime_1.jsx)(MobileDrawerCustom_1.MobileDrawerCustom.Header, { title: title, titleTooltip: titleTooltip, subtitle: subtitle, image: image, "data-test-id": constants_1.TEST_IDS.header }), (0, jsx_runtime_1.jsx)(MobileDrawerCustom_1.MobileDrawerCustom.Body, { content: content, "data-test-id": constants_1.TEST_IDS.content }), needFooter ? ((0, jsx_runtime_1.jsx)(MobileDrawerCustom_1.MobileDrawerCustom.Footer, { "data-test-id": constants_1.TEST_IDS.footer, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [approveButton && ((0, jsx_runtime_1.jsx)(WithTooltip_1.WithTooltip, { tooltip: approveButton.tooltip, children: (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({ appearance: 'primary', size: 'm', "data-test-id": constants_1.TEST_IDS.approveButton }, approveButton)) })), cancelButton && ((0, jsx_runtime_1.jsx)(WithTooltip_1.WithTooltip, { tooltip: cancelButton.tooltip, children: (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, Object.assign({ appearance: 'neutral', size: 'm', "data-test-id": constants_1.TEST_IDS.cancelButton }, cancelButton)) })), additionalButton && ((0, jsx_runtime_1.jsx)(WithTooltip_1.WithTooltip, { tooltip: additionalButton.tooltip, children: (0, jsx_runtime_1.jsx)(button_1.ButtonSimple, Object.assign({ appearance: 'neutral', size: 'm', "data-test-id": constants_1.TEST_IDS.additionalButton }, additionalButton)) }))] }) })) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footerPlug }))] })));
+}

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

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

package/dist/cjs/components/MobileDrawer/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("./MobileDrawer"), exports);

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

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

package/dist/cjs/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/cjs/components/MobileDrawerCustom/MobileDrawerCustom.js

@@ -0,0 +1,72 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileDrawerCustom = MobileDrawerCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("rc-drawer/assets/index.css");
+const classnames_1 = __importDefault(require("classnames"));
+const rc_drawer_1 = __importDefault(require("rc-drawer"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const constants_2 = require("./constants");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MobileDrawerCustom(_a) {
+    var { open: openProp, mode = constants_1.MODE.Regular, position = constants_1.POSITION.Left, onClose, rootClassName, className, size = constants_1.SIZE.S, container, children, hasBorderRadius = false, outline = false, swipeEnabled = true, modalMode = constants_1.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 === constants_1.MODE.Regular;
+    const isPredefinedSize = typeof size === 'string' && constants_1.SIZE_AS_VALUES.includes(size);
+    const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(openProp, false);
+    const hasBlur = [constants_1.MODAL_MODE.Forced, constants_1.MODAL_MODE.Aggressive].includes(modalMode);
+    const hasSwipe = [constants_1.MODAL_MODE.Regular, constants_1.MODAL_MODE.Aggressive].includes(modalMode);
+    const handleClose = () => {
+        setOpen(false);
+        onClose();
+    };
+    (0, utils_1.useModalOpenState)(open, () => hasSwipe && handleClose(), {
+        closeOnPopstate,
+    });
+    const { swipeRef, drawerStyles, maskStyles, drawerMotionProps, swipeProps, showPointer } = (0, hooks_1.useSwipeProps)({
+        position,
+        onSwiped: handleClose,
+        enabled: hasSwipe && swipeEnabled,
+    });
+    // Fix to prevent refresh when swiping on ios
+    (0, react_1.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(), constants_2.DRAWER_CLOSING_TIMEOUT + 50);
+            };
+        }
+    }, [open]);
+    return ((0, jsx_runtime_1.jsx)(rc_drawer_1.default, Object.assign({ mask: isRegular, maskClosable: isRegular, keyboard: isRegular, maskClassName: (0, classnames_1.default)(styles_module_scss_1.default.mask, {
+            [styles_module_scss_1.default.maskBlur]: hasBlur,
+        }), width: !isPredefinedSize && (position === constants_1.POSITION.Right || position === constants_1.POSITION.Left) ? size : 'null',
+        height: !isPredefinedSize && (position === constants_1.POSITION.Top || position === constants_1.POSITION.Bottom) ? size : 'null', open: open, placement: position, destroyOnClose: true, push: false, afterOpenChange: setOpen, onClose: modalMode === constants_1.MODAL_MODE.Regular ? handleClose : undefined, getContainer: container, className: styles_module_scss_1.default.drawer, rootClassName: (0, classnames_1.default)(styles_module_scss_1.default.drawerRoot, rootClassName, {
+            [styles_module_scss_1.default.drawerBlur]: hasBlur,
+        }) }, (0, utils_1.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 constants_2.motionProps.motion === 'function' ? constants_2.motionProps.motion(position) : constants_2.motionProps.motion)), drawerMotionProps), maskMotion: constants_2.motionProps.maskMotion, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(className, styles_module_scss_1.default.content) }, (swipeEnabled && hasSwipe ? swipeProps : undefined), { ref: swipeRef, "data-swipe": swipeEnabled || undefined, "data-pointers": showPointer || undefined, children: [swipeEnabled && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.swiper, "data-position": position }), children, closeButtonEnabled && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerElements, children: (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonClose, { onClick: onClose }) }))] })) })));
+}
+(function (MobileDrawerCustom) {
+    MobileDrawerCustom.Header = helperComponents_1.DrawerHeader;
+    MobileDrawerCustom.Body = helperComponents_1.DrawerBody;
+    MobileDrawerCustom.Footer = helperComponents_1.DrawerFooter;
+})(MobileDrawerCustom || (exports.MobileDrawerCustom = MobileDrawerCustom = {}));

package/dist/cjs/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/cjs/components/MobileDrawerCustom/constants.js

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

package/dist/cjs/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/cjs/components/MobileDrawerCustom/hooks.js

@@ -0,0 +1,164 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwipeProps = useSwipeProps;
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+const TRANSFORM = 0;
+const SWIPE_DURATION = 500;
+function useSwipeProps({ onSwiped, position, enabled }) {
+    var _a, _b, _c;
+    const swipeRef = (0, react_1.useRef)(null);
+    const canCloseDrawer = (0, react_1.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 = (0, react_1.useRef)(0);
+    const getInitialDrag = () => ({
+        initial: TRANSFORM,
+        start: 0,
+        isDown: false,
+        drag: 0,
+        finished: true,
+        pointers: true,
+    });
+    const [drag, setDrag] = (0, react_1.useState)(getInitialDrag);
+    const [styles, setStyles] = (0, react_1.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(utils_1.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 === constants_1.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 = (0, utils_1.useSwipeable)({
+        onSwipeStart: handleSwipeStart,
+        onSwiping: handleSwiping,
+        onSwiped: handleSwiped,
+        enabled,
+        availableDirections: [constants_1.POSITION_TO_SWIPE_DIRECTION_MAP[position]],
+        trackMouse: true,
+    }), { ref } = _d, swipeProps = __rest(_d, ["ref"]);
+    return {
+        swipeRef: (0, merge_refs_1.default)(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/cjs/components/MobileDrawerCustom/index.d.ts

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

package/dist/cjs/components/MobileDrawerCustom/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("./MobileDrawerCustom"), exports);

package/dist/cjs/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;
+}
+/********/