@via-profit/ui-kit 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 Все заметные изменения пакета `@via-profit/ui-kit`. Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/), версии следуют [семантическому версионированию](https://semver.org/lang/ru/).
 
+## 0.8.0 — 2026-10-13
+
+Drawer: закрытие свайпом.
+
+### Добавлено
+
+- **Modal**: свойство `swipeToClose` у `drawer` — панель закрывается свайпом к своему краю. Она следует за пальцем, короткий свайп возвращает её на место, прокручиваемое содержимое сначала прокручивается. На стороне, обращённой к странице, появляется полоска-ручка, за которую панель перетаскивается мышью.
+
 ## 0.7.0 — 2026-10-09
 
 Swiper: дробный `slidesPerView` и `centered`, вертикальная прокрутка, затухание и бегущая лента.

package/Modal/Drawer/DrawerInner.d.ts

@@ -13,6 +13,12 @@ export type DrawerInnerProps = ModalInnerProps & React.RefAttributes<HTMLDivElem
      * **Default:** `bottom`
      */
     readonly anchor: AnchorVariant;
+    /**
+     * Close the drawer by a swipe towards its edge\
+     * \
+     * **Default:** `false`
+     */
+    readonly swipeToClose?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<DrawerInnerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Modal/Drawer/DrawerInner.js

@@ -18,6 +18,84 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const ModalInner_1 = __importDefault(require("../BaseModal/ModalInner"));
+const useSwipeToClose_1 = __importDefault(require("./useSwipeToClose"));
+/**
+ * The grip on the side facing the page: shows that the drawer can be swiped
+ * and lets a mouse drag it (elsewhere the mouse selects the text)
+ */
+const DrawerHandle = styled_1.default.div `
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  touch-action: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &::before {
+    content: '';
+    border-radius: 1em;
+    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.24).toString()};
+  }
+
+  ${({ $anchor }) => {
+    switch ($anchor) {
+        case 'top':
+            return (0, react_2.css) `
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4em;
+          height: 1.25em;
+          &::before {
+            width: 2.5em;
+            height: 0.25em;
+          }
+        `;
+        case 'left':
+            return (0, react_2.css) `
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 1.25em;
+          height: 4em;
+          &::before {
+            width: 0.25em;
+            height: 2.5em;
+          }
+        `;
+        case 'right':
+            return (0, react_2.css) `
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 1.25em;
+          height: 4em;
+          &::before {
+            width: 0.25em;
+            height: 2.5em;
+          }
+        `;
+        case 'bottom':
+        default:
+            return (0, react_2.css) `
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4em;
+          height: 1.25em;
+          &::before {
+            width: 2.5em;
+            height: 0.25em;
+          }
+        `;
+    }
+}}
+`;
 const StyledDrawerBottomInner = (0, styled_1.default)(ModalInner_1.default) `
   position: fixed;
   margin: 0;
@@ -131,7 +209,16 @@ const StyledDrawerLeftInner = (0, styled_1.default)(ModalInner_1.default) `
     `}
 `;
 const DrawerInner = (props, ref) => {
-    const { children, isOpen, anchor, onRequestClose, dialogID } = props, nativeProps = __rest(props, ["children", "isOpen", "anchor", "onRequestClose", "dialogID"]);
+    const { children, isOpen, anchor, onRequestClose, dialogID, swipeToClose } = props, nativeProps = __rest(props, ["children", "isOpen", "anchor", "onRequestClose", "dialogID", "swipeToClose"]);
+    const elementRef = react_1.default.useRef(null);
+    react_1.default.useImperativeHandle(ref, () => elementRef.current);
+    const swipeHandlers = (0, useSwipeToClose_1.default)({
+        elementRef,
+        enabled: Boolean(swipeToClose),
+        isOpen,
+        anchor,
+        onClose: onRequestClose,
+    });
     const Element = react_1.default.useMemo(() => {
         switch (anchor) {
             case 'top':
@@ -145,6 +232,8 @@ const DrawerInner = (props, ref) => {
                 return StyledDrawerBottomInner;
         }
     }, [anchor]);
-    return (react_1.default.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, swipeHandlers, { ref: elementRef }),
+        swipeToClose && react_1.default.createElement(DrawerHandle, { "$anchor": anchor, "data-drawer-handle": true, "aria-hidden": "true" }),
+        children));
 };
 exports.default = react_1.default.forwardRef(DrawerInner);

package/Modal/Drawer/index.d.ts

@@ -41,6 +41,14 @@ export interface DrawerProps extends Omit<BaseModalProps, 'overrides'> {
      * **Default**: `'Close'`
      */
     readonly closeButtonLabel?: string;
+    /**
+     * Close the drawer by a swipe towards its edge: down for `bottom`, left for `left` and so on.
+     * A short swipe returns the drawer back. The content scrolls first, the drawer follows
+     * the finger when the content is at its edge. A mouse drags the drawer by the handle\
+     * \
+     * **Default:** `false`
+     */
+    readonly swipeToClose?: boolean;
     /**
      * Overridable components map
      */

package/Modal/Drawer/index.js

@@ -57,7 +57,7 @@ const DrawerFooter_1 = __importDefault(require("./DrawerFooter"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
 const Drawer = props => {
-    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
+    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides, swipeToClose } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides", "swipeToClose"]);
     const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
     const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
         typeof toolbar !== 'undefined' ||
@@ -67,8 +67,8 @@ const Drawer = props => {
     // Created once: a component created during the render is a new type on every render,
     // so React would remount the whole drawer content (inputs lose the focus and the state)
     const Inner = React.useMemo(() => React.forwardRef(function Inner(innerProps, ref) {
-        return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
-    }), [anchor, dialogID, hasTitle]);
+        return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, swipeToClose: swipeToClose, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
+    }), [anchor, dialogID, hasTitle, swipeToClose]);
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || DrawerContainer_1.default,
         Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || DrawerHeader_1.default,

package/Modal/Drawer/useSwipeToClose.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { AnchorVariant } from './DrawerInner';
+export type UseSwipeToCloseOptions = {
+    /**
+     * The drawer element: it follows the finger
+     */
+    readonly elementRef: React.RefObject<HTMLDivElement | null>;
+    readonly enabled: boolean;
+    readonly isOpen: boolean;
+    readonly anchor: AnchorVariant;
+    readonly onClose: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+/**
+ * Closes the drawer by a swipe towards its edge.
+ *
+ * The pointer events move the drawer. A touch would be taken by the browser for the scroll
+ * (and the pointer cancelled), so the native `touchmove` is prevented while the drawer is dragged
+ */
+declare const useSwipeToClose: (options: UseSwipeToCloseOptions) => {
+    onPointerDown?: undefined;
+    onPointerMove?: undefined;
+    onPointerUp?: undefined;
+    onPointerCancel?: undefined;
+} | {
+    onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerCancel: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+export default useSwipeToClose;

package/Modal/Drawer/useSwipeToClose.js

@@ -0,0 +1,238 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+// The finger moves this far before the gesture is recognized as a drag or a scroll
+const SLOP = 6;
+// The drawer is closed when dragged by this part of its size or thrown faster than this
+const CLOSE_RATIO = 0.25;
+const CLOSE_VELOCITY = 0.5; // px per ms
+const RETURN_TRANSITION = 'transform 240ms ease-out';
+const initialState = {
+    mode: 'idle',
+    pointerId: -1,
+    startX: 0,
+    startY: 0,
+    offset: 0,
+    lastOffset: 0,
+    lastTime: 0,
+    velocity: 0,
+};
+const isVertical = (anchor) => anchor === 'bottom' || anchor === 'top';
+/**
+ * The movement of the finger towards the edge of the drawer: positive closes it
+ */
+const getClosingDelta = (anchor, dx, dy) => {
+    switch (anchor) {
+        case 'top':
+            return -dy;
+        case 'left':
+            return -dx;
+        case 'right':
+            return dx;
+        case 'bottom':
+        default:
+            return dy;
+    }
+};
+const getTransform = (anchor, offset) => {
+    switch (anchor) {
+        case 'top':
+            return `translateY(${-offset}px)`;
+        case 'left':
+            return `translateX(${-offset}px)`;
+        case 'right':
+            return `translateX(${offset}px)`;
+        case 'bottom':
+        default:
+            return `translateY(${offset}px)`;
+    }
+};
+/**
+ * Whether an element between the target and the drawer can scroll the way the finger moves.
+ * Then the finger scrolls the content: the drawer is dragged only when the content is at its edge
+ */
+const canScrollWithGesture = (target, root, anchor) => {
+    let element = target instanceof Element ? target : null;
+    while (element && element !== root) {
+        if (element instanceof HTMLElement) {
+            const style = window.getComputedStyle(element);
+            const overflow = isVertical(anchor) ? style.overflowY : style.overflowX;
+            const scrollable = overflow === 'auto' || overflow === 'scroll';
+            if (scrollable) {
+                const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = element;
+                switch (anchor) {
+                    case 'bottom':
+                        if (scrollTop > 0) {
+                            return true;
+                        }
+                        break;
+                    case 'top':
+                        if (scrollTop + clientHeight < scrollHeight - 1) {
+                            return true;
+                        }
+                        break;
+                    case 'left':
+                        if (scrollLeft + clientWidth < scrollWidth - 1) {
+                            return true;
+                        }
+                        break;
+                    case 'right':
+                        if (scrollLeft > 0) {
+                            return true;
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+        element = element.parentElement;
+    }
+    return false;
+};
+/**
+ * Closes the drawer by a swipe towards its edge.
+ *
+ * The pointer events move the drawer. A touch would be taken by the browser for the scroll
+ * (and the pointer cancelled), so the native `touchmove` is prevented while the drawer is dragged
+ */
+const useSwipeToClose = (options) => {
+    const { elementRef, enabled, isOpen, anchor, onClose } = options;
+    const stateRef = react_1.default.useRef(Object.assign({}, initialState));
+    const setOffset = react_1.default.useCallback((offset, transition) => {
+        const element = elementRef.current;
+        if (element) {
+            element.style.transition = transition;
+            element.style.transform = offset > 0 ? getTransform(anchor, offset) : '';
+        }
+    }, [anchor, elementRef]);
+    const restore = react_1.default.useCallback(() => {
+        const element = elementRef.current;
+        if (element) {
+            element.style.transition = '';
+            element.style.transform = '';
+        }
+    }, [elementRef]);
+    // A drawer closed by a swipe keeps its offset while it slides out: reset it for the next opening
+    react_1.default.useEffect(() => {
+        if (isOpen) {
+            stateRef.current = Object.assign({}, initialState);
+            restore();
+        }
+    }, [isOpen, restore]);
+    /**
+     * Decides on the first noticeable movement whether it drags the drawer or scrolls the content
+     */
+    const update = react_1.default.useCallback((clientX, clientY, target) => {
+        const state = stateRef.current;
+        const element = elementRef.current;
+        if (!element || (state.mode !== 'pending' && state.mode !== 'drag')) {
+            return;
+        }
+        const dx = clientX - state.startX;
+        const dy = clientY - state.startY;
+        const closing = getClosingDelta(anchor, dx, dy);
+        if (state.mode === 'pending') {
+            const main = isVertical(anchor) ? Math.abs(dy) : Math.abs(dx);
+            const cross = isVertical(anchor) ? Math.abs(dx) : Math.abs(dy);
+            if (main < SLOP && cross < SLOP) {
+                return;
+            }
+            const isDrag = closing > 0 && main >= cross && !canScrollWithGesture(target, element, anchor);
+            state.mode = isDrag ? 'drag' : 'scroll';
+            if (!isDrag) {
+                return;
+            }
+            // The drag starts from here, without a jump by the slop
+            state.startX = clientX;
+            state.startY = clientY;
+            state.lastTime = performance.now();
+        }
+        const offset = Math.max(0, getClosingDelta(anchor, clientX - state.startX, clientY - state.startY));
+        const now = performance.now();
+        const elapsed = now - state.lastTime;
+        if (elapsed > 0) {
+            state.velocity = (offset - state.lastOffset) / elapsed;
+        }
+        state.lastOffset = offset;
+        state.lastTime = now;
+        state.offset = offset;
+        setOffset(offset, 'none');
+    }, [anchor, elementRef, setOffset]);
+    // A non-passive listener: only it may stop the browser from scrolling under the drag
+    react_1.default.useEffect(() => {
+        const element = elementRef.current;
+        if (!enabled || !element) {
+            return undefined;
+        }
+        const handleTouchMove = (event) => {
+            const touch = event.touches[0];
+            if (touch) {
+                update(touch.clientX, touch.clientY, event.target);
+            }
+            if (stateRef.current.mode === 'drag' && event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        element.addEventListener('touchmove', handleTouchMove, { passive: false });
+        return () => {
+            element.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, [enabled, elementRef, update]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (!event.isPrimary || event.button !== 0) {
+            return;
+        }
+        // A mouse drags only by the handle: everywhere else it selects the text
+        const target = event.target instanceof Element ? event.target : null;
+        if (event.pointerType === 'mouse') {
+            if (!(target === null || target === void 0 ? void 0 : target.closest('[data-drawer-handle]'))) {
+                return;
+            }
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        stateRef.current = Object.assign(Object.assign({}, initialState), { mode: 'pending', pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, lastTime: performance.now() });
+    }, []);
+    const onPointerMove = react_1.default.useCallback((event) => {
+        if (event.pointerId === stateRef.current.pointerId) {
+            update(event.clientX, event.clientY, event.target);
+        }
+    }, [update]);
+    const finish = react_1.default.useCallback((event, cancelled) => {
+        const state = stateRef.current;
+        if (event.pointerId !== state.pointerId) {
+            return;
+        }
+        const wasDragged = state.mode === 'drag';
+        const element = elementRef.current;
+        const size = element ? (isVertical(anchor) ? element.offsetHeight : element.offsetWidth) : 0;
+        const shouldClose = wasDragged &&
+            !cancelled &&
+            (state.offset > size * CLOSE_RATIO || state.velocity > CLOSE_VELOCITY);
+        stateRef.current = Object.assign({}, initialState);
+        if (!wasDragged) {
+            return;
+        }
+        if (shouldClose) {
+            // The offset is kept: the drawer slides out from where the finger left it.
+            // The own transitions of the drawer are back, the drag turned them off
+            if (element) {
+                element.style.transition = '';
+            }
+            onClose(event);
+            return;
+        }
+        setOffset(0, RETURN_TRANSITION);
+    }, [anchor, elementRef, onClose, setOffset]);
+    const onPointerUp = react_1.default.useCallback((event) => finish(event, false), [finish]);
+    const onPointerCancel = react_1.default.useCallback((event) => finish(event, true), [finish]);
+    if (!enabled) {
+        return {};
+    }
+    return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel };
+};
+exports.default = useSwipeToClose;

package/esm/Modal/Drawer/DrawerInner.js

@@ -13,6 +13,84 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import ModalInner from '../BaseModal/ModalInner';
+import useSwipeToClose from './useSwipeToClose';
+/**
+ * The grip on the side facing the page: shows that the drawer can be swiped
+ * and lets a mouse drag it (elsewhere the mouse selects the text)
+ */
+const DrawerHandle = styled.div `
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  touch-action: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &::before {
+    content: '';
+    border-radius: 1em;
+    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.24).toString()};
+  }
+
+  ${({ $anchor }) => {
+    switch ($anchor) {
+        case 'top':
+            return css `
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4em;
+          height: 1.25em;
+          &::before {
+            width: 2.5em;
+            height: 0.25em;
+          }
+        `;
+        case 'left':
+            return css `
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 1.25em;
+          height: 4em;
+          &::before {
+            width: 0.25em;
+            height: 2.5em;
+          }
+        `;
+        case 'right':
+            return css `
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 1.25em;
+          height: 4em;
+          &::before {
+            width: 0.25em;
+            height: 2.5em;
+          }
+        `;
+        case 'bottom':
+        default:
+            return css `
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4em;
+          height: 1.25em;
+          &::before {
+            width: 2.5em;
+            height: 0.25em;
+          }
+        `;
+    }
+}}
+`;
 const StyledDrawerBottomInner = styled(ModalInner) `
   position: fixed;
   margin: 0;
@@ -126,7 +204,16 @@ const StyledDrawerLeftInner = styled(ModalInner) `
     `}
 `;
 const DrawerInner = (props, ref) => {
-    const { children, isOpen, anchor, onRequestClose, dialogID } = props, nativeProps = __rest(props, ["children", "isOpen", "anchor", "onRequestClose", "dialogID"]);
+    const { children, isOpen, anchor, onRequestClose, dialogID, swipeToClose } = props, nativeProps = __rest(props, ["children", "isOpen", "anchor", "onRequestClose", "dialogID", "swipeToClose"]);
+    const elementRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => elementRef.current);
+    const swipeHandlers = useSwipeToClose({
+        elementRef,
+        enabled: Boolean(swipeToClose),
+        isOpen,
+        anchor,
+        onClose: onRequestClose,
+    });
     const Element = React.useMemo(() => {
         switch (anchor) {
             case 'top':
@@ -140,6 +227,8 @@ const DrawerInner = (props, ref) => {
                 return StyledDrawerBottomInner;
         }
     }, [anchor]);
-    return (React.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
+    return (React.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, swipeHandlers, { ref: elementRef }),
+        swipeToClose && React.createElement(DrawerHandle, { "$anchor": anchor, "data-drawer-handle": true, "aria-hidden": "true" }),
+        children));
 };
 export default React.forwardRef(DrawerInner);

package/esm/Modal/Drawer/index.js

@@ -19,7 +19,7 @@ import Footer from './DrawerFooter';
 import Overlay from '../BaseModal/ModalOverlay';
 import useDialogID from '../BaseModal/useDialogID';
 const Drawer = props => {
-    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
+    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides, swipeToClose } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides", "swipeToClose"]);
     const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
     const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
         typeof toolbar !== 'undefined' ||
@@ -29,8 +29,8 @@ const Drawer = props => {
     // Created once: a component created during the render is a new type on every render,
     // so React would remount the whole drawer content (inputs lose the focus and the state)
     const Inner = React.useMemo(() => React.forwardRef(function Inner(innerProps, ref) {
-        return (React.createElement(DrawerInner, Object.assign({ anchor: anchor, dialogID: dialogID, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
-    }), [anchor, dialogID, hasTitle]);
+        return (React.createElement(DrawerInner, Object.assign({ anchor: anchor, dialogID: dialogID, swipeToClose: swipeToClose, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
+    }), [anchor, dialogID, hasTitle, swipeToClose]);
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
         Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,

package/esm/Modal/Drawer/useSwipeToClose.js

@@ -0,0 +1,233 @@
+import React from 'react';
+// The finger moves this far before the gesture is recognized as a drag or a scroll
+const SLOP = 6;
+// The drawer is closed when dragged by this part of its size or thrown faster than this
+const CLOSE_RATIO = 0.25;
+const CLOSE_VELOCITY = 0.5; // px per ms
+const RETURN_TRANSITION = 'transform 240ms ease-out';
+const initialState = {
+    mode: 'idle',
+    pointerId: -1,
+    startX: 0,
+    startY: 0,
+    offset: 0,
+    lastOffset: 0,
+    lastTime: 0,
+    velocity: 0,
+};
+const isVertical = (anchor) => anchor === 'bottom' || anchor === 'top';
+/**
+ * The movement of the finger towards the edge of the drawer: positive closes it
+ */
+const getClosingDelta = (anchor, dx, dy) => {
+    switch (anchor) {
+        case 'top':
+            return -dy;
+        case 'left':
+            return -dx;
+        case 'right':
+            return dx;
+        case 'bottom':
+        default:
+            return dy;
+    }
+};
+const getTransform = (anchor, offset) => {
+    switch (anchor) {
+        case 'top':
+            return `translateY(${-offset}px)`;
+        case 'left':
+            return `translateX(${-offset}px)`;
+        case 'right':
+            return `translateX(${offset}px)`;
+        case 'bottom':
+        default:
+            return `translateY(${offset}px)`;
+    }
+};
+/**
+ * Whether an element between the target and the drawer can scroll the way the finger moves.
+ * Then the finger scrolls the content: the drawer is dragged only when the content is at its edge
+ */
+const canScrollWithGesture = (target, root, anchor) => {
+    let element = target instanceof Element ? target : null;
+    while (element && element !== root) {
+        if (element instanceof HTMLElement) {
+            const style = window.getComputedStyle(element);
+            const overflow = isVertical(anchor) ? style.overflowY : style.overflowX;
+            const scrollable = overflow === 'auto' || overflow === 'scroll';
+            if (scrollable) {
+                const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = element;
+                switch (anchor) {
+                    case 'bottom':
+                        if (scrollTop > 0) {
+                            return true;
+                        }
+                        break;
+                    case 'top':
+                        if (scrollTop + clientHeight < scrollHeight - 1) {
+                            return true;
+                        }
+                        break;
+                    case 'left':
+                        if (scrollLeft + clientWidth < scrollWidth - 1) {
+                            return true;
+                        }
+                        break;
+                    case 'right':
+                        if (scrollLeft > 0) {
+                            return true;
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+        element = element.parentElement;
+    }
+    return false;
+};
+/**
+ * Closes the drawer by a swipe towards its edge.
+ *
+ * The pointer events move the drawer. A touch would be taken by the browser for the scroll
+ * (and the pointer cancelled), so the native `touchmove` is prevented while the drawer is dragged
+ */
+const useSwipeToClose = (options) => {
+    const { elementRef, enabled, isOpen, anchor, onClose } = options;
+    const stateRef = React.useRef(Object.assign({}, initialState));
+    const setOffset = React.useCallback((offset, transition) => {
+        const element = elementRef.current;
+        if (element) {
+            element.style.transition = transition;
+            element.style.transform = offset > 0 ? getTransform(anchor, offset) : '';
+        }
+    }, [anchor, elementRef]);
+    const restore = React.useCallback(() => {
+        const element = elementRef.current;
+        if (element) {
+            element.style.transition = '';
+            element.style.transform = '';
+        }
+    }, [elementRef]);
+    // A drawer closed by a swipe keeps its offset while it slides out: reset it for the next opening
+    React.useEffect(() => {
+        if (isOpen) {
+            stateRef.current = Object.assign({}, initialState);
+            restore();
+        }
+    }, [isOpen, restore]);
+    /**
+     * Decides on the first noticeable movement whether it drags the drawer or scrolls the content
+     */
+    const update = React.useCallback((clientX, clientY, target) => {
+        const state = stateRef.current;
+        const element = elementRef.current;
+        if (!element || (state.mode !== 'pending' && state.mode !== 'drag')) {
+            return;
+        }
+        const dx = clientX - state.startX;
+        const dy = clientY - state.startY;
+        const closing = getClosingDelta(anchor, dx, dy);
+        if (state.mode === 'pending') {
+            const main = isVertical(anchor) ? Math.abs(dy) : Math.abs(dx);
+            const cross = isVertical(anchor) ? Math.abs(dx) : Math.abs(dy);
+            if (main < SLOP && cross < SLOP) {
+                return;
+            }
+            const isDrag = closing > 0 && main >= cross && !canScrollWithGesture(target, element, anchor);
+            state.mode = isDrag ? 'drag' : 'scroll';
+            if (!isDrag) {
+                return;
+            }
+            // The drag starts from here, without a jump by the slop
+            state.startX = clientX;
+            state.startY = clientY;
+            state.lastTime = performance.now();
+        }
+        const offset = Math.max(0, getClosingDelta(anchor, clientX - state.startX, clientY - state.startY));
+        const now = performance.now();
+        const elapsed = now - state.lastTime;
+        if (elapsed > 0) {
+            state.velocity = (offset - state.lastOffset) / elapsed;
+        }
+        state.lastOffset = offset;
+        state.lastTime = now;
+        state.offset = offset;
+        setOffset(offset, 'none');
+    }, [anchor, elementRef, setOffset]);
+    // A non-passive listener: only it may stop the browser from scrolling under the drag
+    React.useEffect(() => {
+        const element = elementRef.current;
+        if (!enabled || !element) {
+            return undefined;
+        }
+        const handleTouchMove = (event) => {
+            const touch = event.touches[0];
+            if (touch) {
+                update(touch.clientX, touch.clientY, event.target);
+            }
+            if (stateRef.current.mode === 'drag' && event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        element.addEventListener('touchmove', handleTouchMove, { passive: false });
+        return () => {
+            element.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, [enabled, elementRef, update]);
+    const onPointerDown = React.useCallback((event) => {
+        if (!event.isPrimary || event.button !== 0) {
+            return;
+        }
+        // A mouse drags only by the handle: everywhere else it selects the text
+        const target = event.target instanceof Element ? event.target : null;
+        if (event.pointerType === 'mouse') {
+            if (!(target === null || target === void 0 ? void 0 : target.closest('[data-drawer-handle]'))) {
+                return;
+            }
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        stateRef.current = Object.assign(Object.assign({}, initialState), { mode: 'pending', pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, lastTime: performance.now() });
+    }, []);
+    const onPointerMove = React.useCallback((event) => {
+        if (event.pointerId === stateRef.current.pointerId) {
+            update(event.clientX, event.clientY, event.target);
+        }
+    }, [update]);
+    const finish = React.useCallback((event, cancelled) => {
+        const state = stateRef.current;
+        if (event.pointerId !== state.pointerId) {
+            return;
+        }
+        const wasDragged = state.mode === 'drag';
+        const element = elementRef.current;
+        const size = element ? (isVertical(anchor) ? element.offsetHeight : element.offsetWidth) : 0;
+        const shouldClose = wasDragged &&
+            !cancelled &&
+            (state.offset > size * CLOSE_RATIO || state.velocity > CLOSE_VELOCITY);
+        stateRef.current = Object.assign({}, initialState);
+        if (!wasDragged) {
+            return;
+        }
+        if (shouldClose) {
+            // The offset is kept: the drawer slides out from where the finger left it.
+            // The own transitions of the drawer are back, the drag turned them off
+            if (element) {
+                element.style.transition = '';
+            }
+            onClose(event);
+            return;
+        }
+        setOffset(0, RETURN_TRANSITION);
+    }, [anchor, elementRef, onClose, setOffset]);
+    const onPointerUp = React.useCallback((event) => finish(event, false), [finish]);
+    const onPointerCancel = React.useCallback((event) => finish(event, true), [finish]);
+    if (!enabled) {
+        return {};
+    }
+    return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel };
+};
+export default useSwipeToClose;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -770,6 +770,11 @@
       "import": "./esm/Modal/Drawer/index.js",
       "require": "./Modal/Drawer/index.js"
     },
+    "./Modal/Drawer/useSwipeToClose": {
+      "types": "./Modal/Drawer/useSwipeToClose.d.ts",
+      "import": "./esm/Modal/Drawer/useSwipeToClose.js",
+      "require": "./Modal/Drawer/useSwipeToClose.js"
+    },
     "./Modal/MessageBox/MessageBoxContainer": {
       "types": "./Modal/MessageBox/MessageBoxContainer.d.ts",
       "import": "./esm/Modal/MessageBox/MessageBoxContainer.js",