@qoretechnologies/reqore 0.78.5-pr.708.g432b59a → 0.78.5-pr.708.g79d92e0

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

@@ -1,7 +1,131 @@
 import { IReqoreTheme } from '../../constants/theme';
 import type { IReqoreConfirmationModal } from '../../containers/ReqoreProvider';
+import { IPointerDragDelta } from '../../hooks/usePointerDrag';
 import { IReqorePanelProps } from '../Panel';
 export type TPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * The viewport width (px, inclusive) at or below which a `responsiveLayout`
+ * drawer becomes a sheet when the caller names no breakpoint. 900 is the
+ * number qorus-ide converged on for every one of its drawers: a 620–720px
+ * side panel in a 900px window leaves a sliver of page that is not usable
+ * anyway, so the sheet is the honest layout there. The provider's own
+ * `isMobile` (≤ 480px) is too narrow for drawers that wide — at 600px such a
+ * panel covers the viewport with its handle off-screen — and
+ * `isMobileOrTablet` (≤ 1200px) would put sheets on landscape tablets.
+ */
+export declare const DRAWER_SHEET_BREAKPOINT = 900;
+/**
+ * Which viewport width switches a `responsiveLayout` drawer into a sheet:
+ * `'mobile'` is the provider's `isMobile` (≤ 480px), `'tablet'` is its
+ * `isMobileOrTablet` (≤ 1200px), and a number is a width in px, inclusive.
+ * Omitted, it is `DRAWER_SHEET_BREAKPOINT`. Reqore owns these numbers; a
+ * consumer never carries a media query of its own for this.
+ */
+export type TReqoreDrawerResponsiveBreakpoint = 'mobile' | 'tablet' | number;
+export interface IReqoreDrawerResponsiveLayout {
+    /** Which viewport width switches the layout. Defaults to `DRAWER_SHEET_BREAKPOINT` (900px). */
+    below?: TReqoreDrawerResponsiveBreakpoint;
+    /** The edge the sheet attaches to while the layout is active. Defaults to `'bottom'`. */
+    position?: TPosition;
+    /** The sheet's size on the axis it occupies. Defaults to `'100%'`. */
+    size?: string;
+    /**
+     * The cap on that axis. Defaults to `'90vh'` — the same cap every drawer has
+     * on its cross axis by default, so a bottom sheet rises to 90% of the screen
+     * and leaves a strip of page above it where a tap on the backdrop closes it.
+     * Pass `'100%'` for an edge-to-edge sheet. Separate from the drawer's own
+     * `maxSize` on purpose: that one caps the SIDE drawer's width, and a value
+     * meant as a width must never become a sheet's height.
+     */
+    maxSize?: string;
+}
+export interface IReqoreDrawerResolvedResponsiveLayout {
+    /** Whether the sheet layout is in force for the current viewport. */
+    active: boolean;
+    /** The edge the sheet attaches to; only set while `active`. */
+    position?: TPosition;
+    /** The sheet's size on its axis; only set while `active`. */
+    size?: string;
+    /** The cap on that axis; only set while `active`. */
+    maxSize?: string;
+}
+export declare const DRAWER_RESPONSIVE_LAYOUT_DEFAULTS: Required<IReqoreDrawerResponsiveLayout>;
+/**
+ * What the resolver needs to know about the viewport. The two named flags are
+ * the provider's; `belowSheetBreakpoint` answers "is the viewport at or below
+ * the numeric `below` (or `DRAWER_SHEET_BREAKPOINT` when none is given)" and
+ * is ignored when `below` names a provider breakpoint. The component evaluates
+ * it with one media query; a consumer calling the resolver itself evaluates
+ * it however it already measures the viewport.
+ */
+export interface IReqoreDrawerResponsiveViewport {
+    isMobile: boolean;
+    isMobileOrTablet: boolean;
+    belowSheetBreakpoint: boolean;
+}
+/**
+ * Decides whether a drawer's `responsiveLayout` is in force, and with what
+ * geometry. Pure, so the decision is unit-testable without a viewport: jsdom
+ * has no `matchMedia`, so every breakpoint is fixed `false` in unit tests, and
+ * the rendered sheet is proven in a real browser instead — the
+ * `Dialogs/Drawer` `ResponsiveSheet*` stories do that at 380px and 800px.
+ *
+ * A modal (`_isModal`) is never turned into a sheet: it is already centred
+ * and sized for its content, and it has no edge to attach to.
+ */
+export declare const resolveDrawerResponsiveLayout: (responsiveLayout: boolean | IReqoreDrawerResponsiveLayout | undefined, viewport: IReqoreDrawerResponsiveViewport, isModal?: boolean) => IReqoreDrawerResolvedResponsiveLayout;
+/**
+ * The px width behind a `responsiveLayout` config's numeric `below`, or the
+ * default when it names a provider breakpoint or nothing — the component
+ * always subscribes to exactly one query, so a hook never comes and goes.
+ */
+export declare const drawerSheetBreakpointPx: (responsiveLayout: boolean | IReqoreDrawerResponsiveLayout | undefined) => number;
+/** An offset of the drawer's box from where it would otherwise sit, in px. */
+export interface IReqoreDrawerDragOffset {
+    x: number;
+    y: number;
+}
+/**
+ * What a sheet dragged by `delta` does. `offset` is where to draw it meanwhile: it follows the
+ * finger toward the edge it is attached to and stays put when pulled the other way — a bottom
+ * sheet is not lifted off its edge. `closes` is whether letting go here closes it: past
+ * `SWIPE.distance` of its `size` on that axis, or with a flick (`SWIPE.velocity`) toward the edge.
+ */
+export declare const getSheetSwipe: (position: TPosition, delta: IPointerDragDelta, size: number) => {
+    offset: IReqoreDrawerDragOffset;
+    closes: boolean;
+};
+/** What a modal's drag is held within. */
+export interface IReqoreModalDragBounds {
+    /** The box with no offset applied: where the modal sits at rest. */
+    box: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** The height of the title bar, the part that has to stay reachable. */
+    handleHeight: number;
+}
+/**
+ * `offset` held so the modal's title bar stays whole in the viewport: the box's left and right
+ * edges inside it, the bar fully below the top and above the bottom. The title bar is what the
+ * modal is dragged and closed by, and one pushed off-screen has no way back. A box wider than
+ * the viewport cannot satisfy that on its axis; it is held to always span the viewport instead.
+ */
+export declare const clampModalDragOffset: (offset: IReqoreDrawerDragOffset, { box, viewport, handleHeight }: IReqoreModalDragBounds) => IReqoreDrawerDragOffset;
+/**
+ * Whether a press at `target` lands on the drawer's own title bar — the handle a sheet is swiped
+ * and a modal dragged by — and not on a control in it. The bar is the drawer panel's direct
+ * `.reqore-panel-title`; a panel in the drawer's content has one of its own, and that one is
+ * not a handle. A press on a button (the close control, an action), a link, a field or the
+ * actions' control group is theirs.
+ */
+export declare const isDrawerHeaderGrab: (target: EventTarget | null, box: HTMLElement) => boolean;
 /** The floor an EDGE drawer cannot be dragged below, on the axis it resizes. */
 export declare const DRAWER_MIN_SIZE = "150px";
 /**
@@ -116,6 +240,54 @@ export interface IReqoreDrawerProps extends Omit<IReqorePanelProps, 'size' | 're
     confirmOnClose?: boolean | IReqoreConfirmationModal;
     /** Whether to trap focus within the drawer when open. Defaults to true for modals and drawers with backdrop. */
     focusTrap?: boolean;
+    /**
+     * Become a full-width sheet on small screens instead of a fixed-size edge
+     * panel. OPT-IN, because it changes geometry a caller may have sized for.
+     *
+     * A `size='720px'` right-hand drawer is unusable at 380px: it covers the
+     * whole viewport, its resize handle sits off-screen and nothing says why
+     * the page behind it stopped responding. With `responsiveLayout`, at or
+     * below the breakpoint — `DRAWER_SHEET_BREAKPOINT` (900px) unless `below`
+     * says `'mobile'` (≤ 480px), `'tablet'` (≤ 1200px) or a px number — the
+     * drawer attaches to the bottom edge (or the `position` given), takes
+     * `100%` of that axis (or the `size` given) up to a `maxSize` of `90vh`
+     * (or the one given; `'100%'` for edge to edge), and drops the affordances
+     * that make no sense on a sheet — `resizable`, `hidable` and `floating` are
+     * off while the layout is active, and a drawer the user had hidden on a
+     * wide screen is shown again rather than left hidden with no control to
+     * bring it back. Above the breakpoint nothing changes.
+     *
+     * These defaults are qorus-ide's `useResponsiveDrawerProps` behaviour moved
+     * into the library: bottom, full width, 90% of the height, at 900px. Pass
+     * `true` for them, or `{ below, position, size, maxSize }` to tune them.
+     * The root carries `.reqore-drawer-sheet` while the layout is active, so a
+     * story or test can assert which branch rendered.
+     *
+     * Reqore owns the breakpoints: consumers must not hand-roll a `matchMedia`
+     * for this — that is exactly the local workaround this prop replaces.
+     * Modals (`ReqoreModal`) ignore it; they are centred and content-sized
+     * already.
+     */
+    responsiveLayout?: boolean | IReqoreDrawerResponsiveLayout;
+    /**
+     * Whether the sheet can be pushed away. While `responsiveLayout` has made the drawer a sheet,
+     * dragging its title bar toward the edge it is attached to follows the finger, and letting go
+     * past `SWIPE.distance` (18%) of the sheet's size on that axis — or with a flick toward the
+     * edge — closes it through the same path as the close button, so `confirmOnClose` still asks
+     * first. A shorter drag springs back; at once under `prefers-reduced-motion` or with
+     * `animations.dialogs` off. The title bar alone is the handle (not a button, an action or a
+     * field in it), so the content scrolls as it always did, and every sheet `position` swipes
+     * toward its own edge. The box carries `.reqore-drawer-swipeable` while it is on and
+     * `.reqore-drawer-dragging` during a drag. Default `true`: a sheet a finger cannot push away
+     * reads as stuck. Nothing outside the sheet layout, and nothing without an `onClose`.
+     */
+    swipeToClose?: boolean;
+    /**
+     * `ReqoreModal`'s `draggable`, handed over under another name so that the HTML attribute of
+     * that name never reaches the DOM — it would start the browser's own drag of the panel.
+     * @internal
+     */
+    _draggable?: boolean;
 }
 export interface IReqoreDrawerStyle extends IReqoreDrawerProps {
     theme: IReqoreTheme;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAMhF,OAAO,EAAsB,iBAAiB,EAAe,MAAM,UAAU,CAAC;AAG9E,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,gFAAgF;AAChF,eAAO,MAAM,eAAe,UAAU,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,eAAe,UAAU,CAAC;AACvC,mCAAmC;AACnC,eAAO,MAAM,gBAAgB,SAAS,CAAC;AAEvC,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,WAAW,CAAC;IACvF,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;;;OAkBG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;IACpD,gHAAgH;IAChH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,KAQzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,KA+C9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,KA6BjC,CAAC;AAsCF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuZrD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Drawer/index.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReqoreDrawer = exports.StyledDrawerResizable = exports.StyledCloseWrapper = exports.StyledWrapper = exports.MODAL_MIN_HEIGHT = exports.MODAL_MIN_WIDTH = exports.DRAWER_MIN_SIZE = void 0;
+exports.ReqoreDrawer = exports.StyledDrawerResizable = exports.StyledCloseWrapper = exports.StyledWrapper = exports.MODAL_MIN_HEIGHT = exports.MODAL_MIN_WIDTH = exports.DRAWER_MIN_SIZE = exports.isDrawerHeaderGrab = exports.clampModalDragOffset = exports.getSheetSwipe = exports.drawerSheetBreakpointPx = exports.resolveDrawerResponsiveLayout = exports.DRAWER_RESPONSIVE_LAYOUT_DEFAULTS = exports.DRAWER_SHEET_BREAKPOINT = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var web_1 = require("@react-spring/web");
 var re_resizable_1 = require("re-resizable");
@@ -47,13 +47,133 @@ var react_dom_1 = require("react-dom");
 var styled_components_1 = require("styled-components");
 var styled_1 = __importDefault(require("../../helpers/styled"));
 var __1 = require("../..");
+var useReqoreMedia_1 = require("../../hooks/useReqoreMedia");
 var animations_1 = require("../../constants/animations");
 var ThemeProvider_1 = __importDefault(require("../../containers/ThemeProvider"));
+var gestures_1 = require("../../helpers/gestures");
 var useFocusTrap_1 = require("../../hooks/useFocusTrap");
+var usePointerDrag_1 = require("../../hooks/usePointerDrag");
+var usePrefersReducedMotion_1 = require("../../hooks/usePrefersReducedMotion");
 var useTheme_1 = require("../../hooks/useTheme");
 var Button_1 = __importDefault(require("../Button"));
 var Panel_1 = require("../Panel");
 var backdrop_1 = require("./backdrop");
+/**
+ * The viewport width (px, inclusive) at or below which a `responsiveLayout`
+ * drawer becomes a sheet when the caller names no breakpoint. 900 is the
+ * number qorus-ide converged on for every one of its drawers: a 620–720px
+ * side panel in a 900px window leaves a sliver of page that is not usable
+ * anyway, so the sheet is the honest layout there. The provider's own
+ * `isMobile` (≤ 480px) is too narrow for drawers that wide — at 600px such a
+ * panel covers the viewport with its handle off-screen — and
+ * `isMobileOrTablet` (≤ 1200px) would put sheets on landscape tablets.
+ */
+exports.DRAWER_SHEET_BREAKPOINT = 900;
+exports.DRAWER_RESPONSIVE_LAYOUT_DEFAULTS = {
+    below: exports.DRAWER_SHEET_BREAKPOINT,
+    position: 'bottom',
+    size: '100%',
+    maxSize: '90vh',
+};
+/**
+ * Decides whether a drawer's `responsiveLayout` is in force, and with what
+ * geometry. Pure, so the decision is unit-testable without a viewport: jsdom
+ * has no `matchMedia`, so every breakpoint is fixed `false` in unit tests, and
+ * the rendered sheet is proven in a real browser instead — the
+ * `Dialogs/Drawer` `ResponsiveSheet*` stories do that at 380px and 800px.
+ *
+ * A modal (`_isModal`) is never turned into a sheet: it is already centred
+ * and sized for its content, and it has no edge to attach to.
+ */
+var resolveDrawerResponsiveLayout = function (responsiveLayout, viewport, isModal) {
+    var _a, _b, _c, _d;
+    if (!responsiveLayout || isModal) {
+        return { active: false };
+    }
+    var config = responsiveLayout === true ? {} : responsiveLayout;
+    var below = (_a = config.below) !== null && _a !== void 0 ? _a : exports.DRAWER_RESPONSIVE_LAYOUT_DEFAULTS.below;
+    var active = below === 'mobile'
+        ? viewport.isMobile
+        : below === 'tablet'
+            ? viewport.isMobileOrTablet
+            : viewport.belowSheetBreakpoint;
+    if (!active) {
+        return { active: false };
+    }
+    return {
+        active: true,
+        position: (_b = config.position) !== null && _b !== void 0 ? _b : exports.DRAWER_RESPONSIVE_LAYOUT_DEFAULTS.position,
+        size: (_c = config.size) !== null && _c !== void 0 ? _c : exports.DRAWER_RESPONSIVE_LAYOUT_DEFAULTS.size,
+        maxSize: (_d = config.maxSize) !== null && _d !== void 0 ? _d : exports.DRAWER_RESPONSIVE_LAYOUT_DEFAULTS.maxSize,
+    };
+};
+exports.resolveDrawerResponsiveLayout = resolveDrawerResponsiveLayout;
+/**
+ * The px width behind a `responsiveLayout` config's numeric `below`, or the
+ * default when it names a provider breakpoint or nothing — the component
+ * always subscribes to exactly one query, so a hook never comes and goes.
+ */
+var drawerSheetBreakpointPx = function (responsiveLayout) {
+    return responsiveLayout && responsiveLayout !== true && typeof responsiveLayout.below === 'number'
+        ? responsiveLayout.below
+        : exports.DRAWER_SHEET_BREAKPOINT;
+};
+exports.drawerSheetBreakpointPx = drawerSheetBreakpointPx;
+/**
+ * What a sheet dragged by `delta` does. `offset` is where to draw it meanwhile: it follows the
+ * finger toward the edge it is attached to and stays put when pulled the other way — a bottom
+ * sheet is not lifted off its edge. `closes` is whether letting go here closes it: past
+ * `SWIPE.distance` of its `size` on that axis, or with a flick (`SWIPE.velocity`) toward the edge.
+ */
+var getSheetSwipe = function (position, delta, size) {
+    var vertical = position === 'top' || position === 'bottom';
+    var towardEdge = position === 'bottom' || position === 'right' ? 1 : -1;
+    var distance = towardEdge * (vertical ? delta.dy : delta.dx);
+    var velocity = towardEdge * (vertical ? delta.vy : delta.vx);
+    var travel = distance > 0 ? towardEdge * distance : 0;
+    return {
+        offset: vertical ? { x: 0, y: travel } : { x: travel, y: 0 },
+        closes: (0, gestures_1.getSwipeStep)(distance, velocity, size) === 1,
+    };
+};
+exports.getSheetSwipe = getSheetSwipe;
+var clampBetween = function (value, a, b) {
+    return Math.min(Math.max(value, Math.min(a, b)), Math.max(a, b));
+};
+/**
+ * `offset` held so the modal's title bar stays whole in the viewport: the box's left and right
+ * edges inside it, the bar fully below the top and above the bottom. The title bar is what the
+ * modal is dragged and closed by, and one pushed off-screen has no way back. A box wider than
+ * the viewport cannot satisfy that on its axis; it is held to always span the viewport instead.
+ */
+var clampModalDragOffset = function (offset, _a) {
+    var box = _a.box, viewport = _a.viewport, handleHeight = _a.handleHeight;
+    return ({
+        x: clampBetween(offset.x, -box.left, viewport.width - box.left - box.width),
+        y: clampBetween(offset.y, -box.top, viewport.height - box.top - handleHeight),
+    });
+};
+exports.clampModalDragOffset = clampModalDragOffset;
+/**
+ * Whether a press at `target` lands on the drawer's own title bar — the handle a sheet is swiped
+ * and a modal dragged by — and not on a control in it. The bar is the drawer panel's direct
+ * `.reqore-panel-title`; a panel in the drawer's content has one of its own, and that one is
+ * not a handle. A press on a button (the close control, an action), a link, a field or the
+ * actions' control group is theirs.
+ */
+var isDrawerHeaderGrab = function (target, box) {
+    var _a;
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    var bar = target.closest('.reqore-panel-title');
+    if (!bar || !((_a = bar.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('reqore-drawer')) || !box.contains(bar)) {
+        return false;
+    }
+    var control = target.closest(usePointerDrag_1.DRAG_CONTROL_SELECTOR);
+    return !control || !bar.contains(control);
+};
+exports.isDrawerHeaderGrab = isDrawerHeaderGrab;
 /** The floor an EDGE drawer cannot be dragged below, on the axis it resizes. */
 exports.DRAWER_MIN_SIZE = '150px';
 /**
@@ -122,7 +242,13 @@ exports.StyledCloseWrapper = styled_1.default.div(templateObject_6 || (templateO
             return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          display: flex;\n          flex-flow: column;\n          top: 0;\n          margin-left: -35px;\n          > * {\n            margin-top: 5px;\n          }\n        "], ["\n          display: flex;\n          flex-flow: column;\n          top: 0;\n          margin-left: -35px;\n          > * {\n            margin-top: 5px;\n          }\n        "])));
     }
 });
-exports.StyledDrawerResizable = (0, styled_1.default)(web_1.animated.div)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  pointer-events: auto;\n\n  ", "\n"], ["\n  pointer-events: auto;\n\n  ", "\n"])), function (_a) {
+exports.StyledDrawerResizable = (0, styled_1.default)(web_1.animated.div)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  pointer-events: auto;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  pointer-events: auto;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $handle = _a.$handle;
+    return $handle && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      /* The drawer's own title bar, not that of a panel in its content. The browser must not\n         pan or zoom from a press there: the drag is ours. */\n      > .reqore-drawer > .reqore-panel-title {\n        touch-action: none;\n        cursor: ", ";\n      }\n    "], ["\n      /* The drawer's own title bar, not that of a panel in its content. The browser must not\n         pan or zoom from a press there: the drag is ours. */\n      > .reqore-drawer > .reqore-panel-title {\n        touch-action: none;\n        cursor: ", ";\n      }\n    "])), $handle === 'drag' ? 'move' : 'grab');
+}, function (_a) {
+    var $handle = _a.$handle, $dragging = _a.$dragging;
+    return $dragging && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      user-select: none;\n\n      > .reqore-drawer > .reqore-panel-title {\n        cursor: ", ";\n      }\n    "], ["\n      user-select: none;\n\n      > .reqore-drawer > .reqore-panel-title {\n        cursor: ", ";\n      }\n    "])), $handle === 'drag' ? 'move' : 'grabbing');
+}, function (_a) {
     var $edgelessPosition = _a.$edgelessPosition;
     if (!$edgelessPosition) {
         return undefined;
@@ -135,7 +261,7 @@ exports.StyledDrawerResizable = (0, styled_1.default)(web_1.animated.div)(templa
         top: ['top', 'left', 'right'],
         bottom: ['bottom', 'left', 'right'],
     };
-    return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      > .reqore-drawer {\n        ", "\n      }\n    "], ["\n      > .reqore-drawer {\n        ", "\n      }\n    "])), sidesToStrip[$edgelessPosition].map(function (side) { return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            border-", ": none;\n          "], ["\n            border-", ": none;\n          "])), side); }));
+    return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      > .reqore-drawer {\n        ", "\n      }\n    "], ["\n      > .reqore-drawer {\n        ", "\n      }\n    "])), sidesToStrip[$edgelessPosition].map(function (side) { return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n            border-", ": none;\n          "], ["\n            border-", ": none;\n          "])), side); }));
 });
 /**
  * It returns an icon name based on the position and whether the panel is hidden or not
@@ -171,10 +297,10 @@ var getSpringConfig = function (isModal, position, floating) {
         };
 };
 exports.ReqoreDrawer = (0, react_1.memo)(function (_a) {
-    var children = _a.children, isOpen = _a.isOpen, isHidden = _a.isHidden, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, _b = _a.position, position = _b === void 0 ? 'right' : _b, maxSize = _a.maxSize, 
+    var children = _a.children, isOpen = _a.isOpen, isHidden = _a.isHidden, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, _b = _a.position, positionProp = _b === void 0 ? 'right' : _b, maxSizeProp = _a.maxSize, 
     // No default here: the fallback differs per layout (see the Resizable
     // below), and a default would make "the caller said nothing" unreadable.
-    minSize = _a.minSize, minWidth = _a.minWidth, minHeight = _a.minHeight, onClose = _a.onClose, _c = _a.hasBackdrop, hasBackdrop = _c === void 0 ? true : _c, size = _a.size, _d = _a.resizable, resizable = _d === void 0 ? true : _d, hidable = _a.hidable, onHideToggle = _a.onHideToggle, className = _a.className, flat = _a.flat, floating = _a.floating, blur = _a.blur, opacity = _a.opacity, intent = _a.intent, _isModal = _a._isModal, width = _a.width, height = _a.height, _e = _a.actions, actions = _e === void 0 ? [] : _e, customZIndex = _a.customZIndex, panelSize = _a.panelSize, confirmOnClose = _a.confirmOnClose, focusTrap = _a.focusTrap, rest = __rest(_a, ["children", "isOpen", "isHidden", "customTheme", "inheritCustomTheme", "position", "maxSize", "minSize", "minWidth", "minHeight", "onClose", "hasBackdrop", "size", "resizable", "hidable", "onHideToggle", "className", "flat", "floating", "blur", "opacity", "intent", "_isModal", "width", "height", "actions", "customZIndex", "panelSize", "confirmOnClose", "focusTrap"]);
+    minSize = _a.minSize, minWidth = _a.minWidth, minHeight = _a.minHeight, onClose = _a.onClose, _c = _a.hasBackdrop, hasBackdrop = _c === void 0 ? true : _c, sizeProp = _a.size, _d = _a.resizable, resizableProp = _d === void 0 ? true : _d, hidableProp = _a.hidable, onHideToggle = _a.onHideToggle, className = _a.className, flat = _a.flat, floatingProp = _a.floating, responsiveLayout = _a.responsiveLayout, swipeToClose = _a.swipeToClose, _draggable = _a._draggable, blur = _a.blur, opacity = _a.opacity, intent = _a.intent, _isModal = _a._isModal, width = _a.width, height = _a.height, _e = _a.actions, actions = _e === void 0 ? [] : _e, customZIndex = _a.customZIndex, panelSize = _a.panelSize, confirmOnClose = _a.confirmOnClose, focusTrap = _a.focusTrap, rest = __rest(_a, ["children", "isOpen", "isHidden", "customTheme", "inheritCustomTheme", "position", "maxSize", "minSize", "minWidth", "minHeight", "onClose", "hasBackdrop", "size", "resizable", "hidable", "onHideToggle", "className", "flat", "floating", "responsiveLayout", "swipeToClose", "_draggable", "blur", "opacity", "intent", "_isModal", "width", "height", "actions", "customZIndex", "panelSize", "confirmOnClose", "focusTrap"]);
     // Ref for the drawer wrapper to enable focus trapping
     var drawerRef = (0, react_1.useRef)(null);
     var animations = (0, __1.useReqoreProperty)('animations');
@@ -182,6 +308,24 @@ exports.ReqoreDrawer = (0, react_1.memo)(function (_a) {
     var customPortalId = (0, __1.useReqoreProperty)('customPortalId');
     var getAndIncreaseZIndex = (0, __1.useReqoreProperty)('getAndIncreaseZIndex');
     var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent, undefined, inheritCustomTheme);
+    var isMobile = (0, __1.useReqoreProperty)('isMobile');
+    var isMobileOrTablet = (0, __1.useReqoreProperty)('isMobileOrTablet');
+    // One query, always subscribed (a hook cannot come and go with the prop):
+    // the numeric sheet breakpoint, or the default when a provider breakpoint
+    // is named and this flag is ignored anyway.
+    var belowSheetBreakpoint = (0, useReqoreMedia_1.useReqoreMedia)("(max-width: ".concat((0, exports.drawerSheetBreakpointPx)(responsiveLayout), "px)"));
+    // The sheet decision is made once per render from the breakpoints, and
+    // every geometry input below is derived from it, so the rest of the
+    // component never has to ask "is the layout active?" again.
+    var sheet = (0, react_1.useMemo)(function () {
+        return (0, exports.resolveDrawerResponsiveLayout)(responsiveLayout, { isMobile: isMobile, isMobileOrTablet: isMobileOrTablet, belowSheetBreakpoint: belowSheetBreakpoint }, _isModal);
+    }, [responsiveLayout, isMobile, isMobileOrTablet, belowSheetBreakpoint, _isModal]);
+    var position = sheet.active ? sheet.position : positionProp;
+    var size = sheet.active ? sheet.size : sizeProp;
+    var maxSize = sheet.active ? sheet.maxSize : maxSizeProp;
+    var resizable = sheet.active ? false : resizableProp;
+    var hidable = sheet.active ? false : hidableProp;
+    var floating = sheet.active ? false : floatingProp;
     var layout = (0, react_1.useMemo)(function () {
         return _isModal
             ? 'center'
@@ -190,6 +334,10 @@ exports.ReqoreDrawer = (0, react_1.memo)(function (_a) {
                 : 'vertical';
     }, [position, _isModal]);
     var _f = (0, react_1.useState)(isHidden || false), _isHidden = _f[0], setIsHidden = _f[1];
+    // A sheet has no hide control, so a drawer hidden on a wide screen is shown
+    // again when the layout becomes active; the user's choice is kept in
+    // `_isHidden` and honoured again once the viewport widens.
+    var hidden = sheet.active ? false : _isHidden;
     var _g = (0, react_1.useState)({
         width: width || (layout === 'horizontal' ? 'auto' : size || '300px'),
         height: height || (layout === 'vertical' ? 'auto' : size || '300px'),
@@ -199,7 +347,7 @@ exports.ReqoreDrawer = (0, react_1.memo)(function (_a) {
     var shouldTrapFocus = focusTrap !== null && focusTrap !== void 0 ? focusTrap : (_isModal || hasBackdrop);
     // Use focus trap to keep focus within the drawer when open
     (0, useFocusTrap_1.useFocusTrap)(drawerRef, {
-        active: isOpen && shouldTrapFocus && !_isHidden,
+        active: isOpen && shouldTrapFocus && !hidden,
         restoreFocus: true,
         autoFocus: true,
     });
@@ -256,6 +404,102 @@ exports.ReqoreDrawer = (0, react_1.memo)(function (_a) {
             }
         }
         : undefined;
+    var isHoverCapable = (0, __1.useReqoreProperty)('isHoverCapable');
+    var reducedMotion = (0, usePrefersReducedMotion_1.usePrefersReducedMotion)();
+    // Motion that is not the finger's own — a sheet let go early springing back — is instant
+    // when the user asked for less of it, or when dialog animations are off.
+    var immediateMotion = animations.dialogs === false || reducedMotion;
+    // A sheet with nothing to close into cannot be swiped. A modal is dragged only where the
+    // pointer can hover: the `move` cursor on its title bar is the affordance, and on a touch
+    // screen a press on a header belongs to the page.
+    var swipeable = sheet.active && swipeToClose !== false && !!onClose;
+    var draggable = !!_isModal && !!_draggable && isHoverCapable;
+    var _h = (0, web_1.useSpring)(function () { return ({ x: 0, y: 0, config: animations_1.SPRING_CONFIG }); }), drag = _h[0], dragApi = _h[1];
+    var dragStartRef = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)(false), closedBySwipe = _j[0], setClosedBySwipe = _j[1];
+    var _k = (0, usePointerDrag_1.usePointerDrag)({
+        enabled: swipeable || draggable,
+        // A sheet moves on one axis, so a press that scrolls along the other is not a swipe.
+        axis: draggable ? 'both' : layout === 'horizontal' ? 'y' : 'x',
+        canStart: function (event) { return (0, exports.isDrawerHeaderGrab)(event.target, event.currentTarget); },
+        onStart: function (box) {
+            var _a, _b;
+            var rect = box.getBoundingClientRect();
+            var offset = { x: drag.x.get(), y: drag.y.get() };
+            dragStartRef.current = {
+                offset: offset,
+                size: layout === 'horizontal' ? rect.height : rect.width,
+                bounds: draggable
+                    ? {
+                        box: {
+                            left: rect.left - offset.x,
+                            top: rect.top - offset.y,
+                            width: rect.width,
+                            height: rect.height,
+                        },
+                        viewport: {
+                            width: document.documentElement.clientWidth,
+                            height: document.documentElement.clientHeight,
+                        },
+                        handleHeight: (_b = (_a = box
+                            .querySelector(':scope > .reqore-drawer > .reqore-panel-title')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) !== null && _b !== void 0 ? _b : 0,
+                    }
+                    : undefined,
+            };
+        },
+        onMove: function (delta) {
+            var start = dragStartRef.current;
+            if (!start) {
+                return;
+            }
+            dragApi.set(start.bounds
+                ? (0, exports.clampModalDragOffset)({ x: start.offset.x + delta.dx, y: start.offset.y + delta.dy }, start.bounds)
+                : (0, exports.getSheetSwipe)(position, delta, start.size).offset);
+        },
+        onEnd: function (delta, committed) {
+            var start = dragStartRef.current;
+            dragStartRef.current = null;
+            // A modal stays where it was let go.
+            if (!start || start.bounds) {
+                return;
+            }
+            if (committed && (0, exports.getSheetSwipe)(position, delta, start.size).closes) {
+                // Closed from where the finger left it: the leave transition carries on from there.
+                setClosedBySwipe(true);
+                handleClose === null || handleClose === void 0 ? void 0 : handleClose();
+            }
+            else {
+                dragApi.start({ x: 0, y: 0, immediate: immediateMotion });
+            }
+        },
+    }), dragging = _k.dragging, dragHandlers = _k.handlers;
+    // A sheet whose swipe asked to close but is still open — `confirmOnClose` is asking, or the
+    // caller closes it later — springs back meanwhile; one that did close keeps its offset, so
+    // the leave transition carries on from where the finger left it.
+    (0, react_1.useEffect)(function () {
+        if (!closedBySwipe) {
+            return;
+        }
+        setClosedBySwipe(false);
+        if (isOpen) {
+            dragApi.start({ x: 0, y: 0, immediate: immediateMotion });
+        }
+    }, [closedBySwipe, isOpen]);
+    // Wherever the box was dragged to, it opens in its place next time.
+    (0, react_1.useEffect)(function () {
+        if (isOpen) {
+            dragApi.set({ x: 0, y: 0 });
+        }
+    }, [isOpen]);
+    // The box's `transform`: the drag's own translate ahead of whatever the enter / leave spring
+    // sets (a modal scales in), so neither overwrites the other. Nothing at rest, so a sheet
+    // keeps the plain box it always had.
+    var dragTransform = (0, react_1.useCallback)(function (spring) {
+        var own = (0, web_1.to)([drag.x, drag.y], function (x, y) {
+            return x || y ? "translate3d(".concat(x, "px, ").concat(y, "px, 0)") : '';
+        });
+        return spring ? (0, web_1.to)([own, spring], function (a, b) { return "".concat(a, " ").concat(b).trim(); }) : own;
+    }, [drag.x, drag.y]);
     var closeButtonProps = (0, react_1.useMemo)(function () { return (__assign({ className: 'reqore-drawer-close-button' }, (rest.closeButtonProps || {}))); }, [rest.closeButtonProps]);
     var panelStyle = (0, react_1.useMemo)(function () { return (__assign({ width: '100%', maxHeight: '100%' }, rest.style)); }, [JSON.stringify(rest.style)]);
     var resizeableStyle = (0, react_1.useMemo)(function () {
@@ -319,18 +563,18 @@ exports.ReqoreDrawer = (0, react_1.memo)(function (_a) {
         width: _isModal
             ? _size.width
             : layout === 'vertical'
-                ? _isHidden
+                ? hidden
                     ? 0
                     : _size.width
                 : 'auto',
         height: _isModal
             ? _size.height
             : layout === 'horizontal'
-                ? _isHidden
+                ? hidden
                     ? 0
                     : _size.height
                 : 'auto',
-    }); }, [_isModal, layout, _isHidden, _size]);
+    }); }, [_isModal, layout, hidden, _size]);
     var onHideToggleClick = (0, react_1.useCallback)(function () {
         setIsHidden(!_isHidden);
         onHideToggle === null || onHideToggle === void 0 ? void 0 : onHideToggle(!_isHidden);
@@ -377,22 +621,24 @@ exports.ReqoreDrawer = (0, react_1.memo)(function (_a) {
             };
     }, [resizable, position, _isModal]);
     return (0, react_dom_1.createPortal)(transitions(function (styles, item) {
-        return item ? ((0, jsx_runtime_1.jsxs)(ThemeProvider_1.default, { theme: theme, customTheme: customTheme, children: [hasBackdrop && !_isHidden ? ((0, jsx_runtime_1.jsx)(backdrop_1.ReqoreBackdrop, { onClose: handleClose, zIndex: zIndex, blur: blur, opacity: styles.opacity })) : null, (0, jsx_runtime_1.jsx)(exports.StyledWrapper, { ref: drawerRef, zIndex: wrapperZIndex, className: 'reqore-drawer-wrapper', role: _isModal || hasBackdrop ? 'dialog' : undefined, "aria-modal": _isModal || hasBackdrop ? 'true' : undefined, children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, __assign({ className: "".concat(className || '', " reqore-drawer-resizable"), maxHeight: layout === 'horizontal' || layout === 'center' ? maxSize || '90vh' : undefined, minHeight: layout === 'center'
+        return item ? ((0, jsx_runtime_1.jsxs)(ThemeProvider_1.default, { theme: theme, customTheme: customTheme, children: [hasBackdrop && !hidden ? ((0, jsx_runtime_1.jsx)(backdrop_1.ReqoreBackdrop, { onClose: handleClose, zIndex: zIndex, blur: blur, opacity: styles.opacity })) : null, (0, jsx_runtime_1.jsx)(exports.StyledWrapper, { ref: drawerRef, zIndex: wrapperZIndex, className: 'reqore-drawer-wrapper', role: _isModal || hasBackdrop ? 'dialog' : undefined, "aria-modal": _isModal || hasBackdrop ? 'true' : undefined, children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, __assign({ className: "".concat(className || '', " reqore-drawer-resizable").concat(sheet.active ? ' reqore-drawer-sheet' : '').concat(swipeable ? ' reqore-drawer-swipeable' : '').concat(draggable ? ' reqore-drawer-draggable' : '').concat(dragging ? ' reqore-drawer-dragging' : ''), maxHeight: layout === 'horizontal' || layout === 'center' ? maxSize || '90vh' : undefined, minHeight: layout === 'center'
                             ? minHeight || minSize || exports.MODAL_MIN_HEIGHT
                             : layout === 'horizontal'
-                                ? _isHidden
+                                ? hidden
                                     ? 0
                                     : minSize || exports.DRAWER_MIN_SIZE
                                 : undefined, maxWidth: layout === 'vertical' || layout === 'center' ? maxSize || '90vw' : undefined, minWidth: layout === 'center'
                             ? minWidth || minSize || exports.MODAL_MIN_WIDTH
                             : layout === 'vertical'
-                                ? _isHidden
+                                ? hidden
                                     ? 0
                                     : minSize || exports.DRAWER_MIN_SIZE
                                 : undefined, as: exports.StyledDrawerResizable }, {
                         $edgelessPosition: !floating && !_isModal ? position : undefined,
-                    }, { style: __assign(__assign({}, resizeableStyle), styles), handleWrapperStyle: handleWrapperStyle, size: sizeObject, onResize: handleResize, enable: enable, children: [_isHidden && hidable ? ((0, jsx_runtime_1.jsx)(exports.StyledCloseWrapper, { className: 'reqore-drawer-controls', position: position, w: layout === 'vertical' ? 0 : _size.width, h: layout === 'horizontal' ? 0 : _size.height, children: (0, jsx_runtime_1.jsx)(Button_1.default, { flat: true, customTheme: theme, className: 'reqore-drawer-control reqore-drawer-hide-button', icon: getHideShowIcon(position, _isHidden), onClick: onHideToggleClick }) })) : null, !_isHidden && ((0, jsx_runtime_1.jsx)(Panel_1.ReqorePanel, __assign({}, rest, { size: panelSize, opacity: opacity, blur: hasBackdrop ? 0 : blur, actions: _actions, customTheme: customTheme, intent: intent, rounded: floating || _isModal ? true : false, flat: flat, onClose: handleClose, closeButtonProps: closeButtonProps, className: "reqore-drawer", style: panelStyle, children: children })))] })) })] })) : null;
+                        $handle: draggable ? 'drag' : swipeable ? 'swipe' : undefined,
+                        $dragging: dragging,
+                    }, dragHandlers, { style: __assign(__assign(__assign({}, resizeableStyle), styles), { transform: dragTransform(styles.transform) }), handleWrapperStyle: handleWrapperStyle, size: sizeObject, onResize: handleResize, enable: enable, children: [hidden && hidable ? ((0, jsx_runtime_1.jsx)(exports.StyledCloseWrapper, { className: 'reqore-drawer-controls', position: position, w: layout === 'vertical' ? 0 : _size.width, h: layout === 'horizontal' ? 0 : _size.height, children: (0, jsx_runtime_1.jsx)(Button_1.default, { flat: true, customTheme: theme, className: 'reqore-drawer-control reqore-drawer-hide-button', icon: getHideShowIcon(position, _isHidden), onClick: onHideToggleClick }) })) : null, !hidden && ((0, jsx_runtime_1.jsx)(Panel_1.ReqorePanel, __assign({}, rest, { size: panelSize, opacity: opacity, blur: hasBackdrop ? 0 : blur, actions: _actions, customTheme: customTheme, intent: intent, rounded: floating || _isModal ? true : false, flat: flat, onClose: handleClose, closeButtonProps: closeButtonProps, className: "reqore-drawer", style: panelStyle, children: children })))] })) })] })) : null;
     }), document.querySelector(customPortalId || '#reqore-portal'));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 //# sourceMappingURL=index.js.map