@depup/react-aria-components 1.21.0-depup.0 → 1.22.0-depup.0

package/dist/private/Sheet.mjs

@@ -0,0 +1,814 @@
+import {useRenderProps as $7230ffa83bc0c2cf$export$4d86445c2cf5e3} from "./utils.mjs";
+import {Dialog as $f2ff30fde7b014be$export$3ddf2d174ce01153, DialogTrigger as $f2ff30fde7b014be$export$2e1e1122cf0cba88, OverlayTriggerStateContext as $f2ff30fde7b014be$export$d2f961adcb0afbe} from "./Dialog.mjs";
+import {InternalModalContext as $8b8d26808cb8cb53$export$6bc057cefccad9c8, Modal as $8b8d26808cb8cb53$export$2b77a92f1a5ad772, ModalOverlay as $8b8d26808cb8cb53$export$8948f78d83984c69} from "./Modal.mjs";
+import {filterDOMProps as $dnWcj$filterDOMProps} from "react-aria/filterDOMProps";
+import {isIOS as $dnWcj$isIOS, isSafari as $dnWcj$isSafari} from "react-aria/private/utils/platform";
+import {mergeRefs as $dnWcj$mergeRefs} from "react-aria/mergeRefs";
+import {PressResponder as $dnWcj$PressResponder} from "react-aria/private/interactions/PressResponder";
+import $dnWcj$react, {createContext as $dnWcj$createContext, forwardRef as $dnWcj$forwardRef, useContext as $dnWcj$useContext, useMemo as $dnWcj$useMemo, useState as $dnWcj$useState, useRef as $dnWcj$useRef, useCallback as $dnWcj$useCallback} from "react";
+import {useEffectEvent as $dnWcj$useEffectEvent} from "react-aria/private/utils/useEffectEvent";
+import {useId as $dnWcj$useId} from "react-aria/useId";
+import {useLayoutEffect as $dnWcj$useLayoutEffect} from "react-aria/private/utils/useLayoutEffect";
+import {useLocale as $dnWcj$useLocale} from "react-aria/I18nProvider";
+import {useObjectRef as $dnWcj$useObjectRef} from "react-aria/useObjectRef";
+import {useOverlayTriggerState as $dnWcj$useOverlayTriggerState} from "react-stately/useOverlayTriggerState";
+import {useSyncExternalStore as $dnWcj$useSyncExternalStore} from "use-sync-external-store/shim/index.js";
+
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $f44b3686778108d5$var$InternalSheetContext = /*#__PURE__*/ (0, $dnWcj$createContext)(null);
+let $f44b3686778108d5$var$sheetStack = [];
+let $f44b3686778108d5$var$stackListeners = new Set();
+function $f44b3686778108d5$var$emitStackChange() {
+    // Hoist every mounted sheet's timeline name to the root so a parent
+    // can still resolve the child's timeline by name.
+    // TODO: don't override existing timelines declared in CSS or inline styles.
+    let names = Array.from({
+        length: $f44b3686778108d5$var$sheetStack.length
+    }).map((_, i)=>`--sheet-timeline-${i}`).join(', ');
+    document.documentElement.style.setProperty('timeline-scope', names);
+    $f44b3686778108d5$var$stackListeners.forEach((listener)=>listener());
+}
+function $f44b3686778108d5$var$subscribeStack(listener) {
+    $f44b3686778108d5$var$stackListeners.add(listener);
+    return ()=>{
+        $f44b3686778108d5$var$stackListeners.delete(listener);
+    };
+}
+function $f44b3686778108d5$var$registerSheet(config) {
+    $f44b3686778108d5$var$sheetStack = [
+        ...$f44b3686778108d5$var$sheetStack,
+        config
+    ];
+    $f44b3686778108d5$var$emitStackChange();
+    return ()=>{
+        $f44b3686778108d5$var$sheetStack = $f44b3686778108d5$var$sheetStack.filter((e)=>e.id !== config.id);
+        $f44b3686778108d5$var$emitStackChange();
+    };
+}
+function $f44b3686778108d5$var$getSheetStack() {
+    return $f44b3686778108d5$var$sheetStack;
+}
+const $f44b3686778108d5$var$supportsViewTimeline = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('animation-timeline: view()');
+function $f44b3686778108d5$export$de69b9b0343a1903(props) {
+    return /*#__PURE__*/ (0, $dnWcj$react).createElement((0, $f2ff30fde7b014be$export$2e1e1122cf0cba88), props, /*#__PURE__*/ (0, $dnWcj$react).createElement((0, $dnWcj$PressResponder), {
+        isPressed: false
+    }, props.children));
+}
+// Additional padding added to the viewport to account for browser toolbar.
+// More content than 100lvh is actually visible on iOS, even when the toolbar is collapsed.
+const $f44b3686778108d5$var$VIEWPORT_PADDING = (0, $dnWcj$isIOS)() && (0, $dnWcj$isSafari)() ? 'calc(100lvh - 100svh + 58px)' : '0px';
+const $f44b3686778108d5$var$viewportPadding = (after, axis)=>after && axis === 'y' ? $f44b3686778108d5$var$VIEWPORT_PADDING : '0px';
+const $f44b3686778108d5$export$48dbb295cbd054d8 = /*#__PURE__*/ (0, $dnWcj$forwardRef)(function SheetOverlay(props, domRef) {
+    let { children: children, preventDismissal: preventDismissal = false } = props;
+    let { direction: direction } = (0, $dnWcj$useLocale)();
+    let position = $f44b3686778108d5$var$resolveDirection(props.position ?? 'bottom', direction);
+    let swipeDirection = props.swipeDirection ? $f44b3686778108d5$var$resolveDirection(props.swipeDirection, direction) : position === 'center' ? 'vertical' : position;
+    // Resolve the state the same way ModalOverlay does, so that swiping to close works
+    // both inside a SheetTrigger and when the open state is passed directly to SheetOverlay.
+    let contextState = (0, $dnWcj$useContext)((0, $f2ff30fde7b014be$export$d2f961adcb0afbe));
+    let localState = (0, $dnWcj$useOverlayTriggerState)(props);
+    let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+    let onCloseEvent = (0, $dnWcj$useEffectEvent)(()=>{
+        state.close();
+    });
+    let { axis: axis, before: before, after: after, maxScroll: maxScroll, enteredScroll: enteredScroll, viewRange: viewRange, viewDirection: viewDirection, viewIterations: viewIterations } = $f44b3686778108d5$var$getSwipeConfig(swipeDirection);
+    let id = (0, $dnWcj$useId)();
+    let stackItem = (0, $dnWcj$useMemo)(()=>({
+            id: id,
+            range: viewRange,
+            direction: viewDirection,
+            iterations: viewIterations
+        }), [
+        id,
+        viewRange,
+        viewDirection,
+        viewIterations
+    ]);
+    let [isExpanded, setExpanded] = (0, $dnWcj$useState)(false);
+    let isVisible = (0, $dnWcj$useRef)(false);
+    let ref = (0, $dnWcj$useCallback)((element)=>{
+        if (!element) return;
+        // Sheets that rest at scroll 0 (top/left) mount already entered. Move them to the exit position
+        // before observing, since onEnter may be deferred (e.g. while waiting for the software keyboard),
+        // and the observer would otherwise see the sheet as entered and then close it once onEnter
+        // jumps to the exit position.
+        if (enteredScroll === 0) {
+            let scroller = element.querySelector('[data-sheet-scroll]');
+            if (scroller) {
+                let vp = axis === 'y' ? window.innerHeight : window.innerWidth;
+                $f44b3686778108d5$var$scrollAlongAxis(scroller, axis, maxScroll / 100 * vp);
+            }
+        }
+        // iOS displays content outside the reported viewport, e.g. behind the browser toolbar.
+        // Add additional margin to account for that so that the sheet disappears only when it is entirely invisible.
+        let rootMargin = `0px 0px ${$f44b3686778108d5$var$calcToPx($f44b3686778108d5$var$viewportPadding(after, axis))} 0px`;
+        let hasEntered = false;
+        let observer = new IntersectionObserver((entries)=>{
+            let entry = entries[0];
+            // Expose whether the sheet is resting at its fully-entered detent (all of it revealed). Apps
+            // can use `[data-expanded]` to only make the sheet's inner content scrollable once expanded,
+            // so that at a partial detent a swipe on the content expands the sheet instead (like iOS).
+            setExpanded(entry.intersectionRatio >= 1);
+            isVisible.current = entry.intersectionRatio > 0;
+            hasEntered ||= entry.intersectionRatio > 0;
+            if (hasEntered && entry.intersectionRatio <= 0) {
+                // eslint-disable-next-line react/react-compiler
+                onCloseEvent();
+                element.dispatchEvent(new CustomEvent('react-aria-sheet-close'));
+            }
+        }, {
+            threshold: [
+                0,
+                1
+            ],
+            rootMargin: rootMargin
+        });
+        let el = element.querySelector('[data-sheet-content]');
+        if (el) observer.observe(el);
+        let removeSheet = $f44b3686778108d5$var$registerSheet(stackItem);
+        return ()=>{
+            observer.disconnect();
+            removeSheet();
+        };
+    }, [
+        stackItem,
+        axis,
+        maxScroll,
+        enteredScroll,
+        after
+    ]);
+    let mergedRefs = (0, $dnWcj$useMemo)(()=>(0, $dnWcj$mergeRefs)(ref, domRef), [
+        ref,
+        domRef
+    ]);
+    let sheetStack = (0, $dnWcj$useSyncExternalStore)($f44b3686778108d5$var$subscribeStack, $f44b3686778108d5$var$getSheetStack, $f44b3686778108d5$var$getSheetStack);
+    let index = Math.max(0, sheetStack.findIndex((e)=>e.id === id));
+    let descendants = sheetStack.slice(index + 1);
+    let values = {
+        position: position,
+        swipeDirection: swipeDirection,
+        isExpanded: isExpanded,
+        stackIndex: index,
+        hasDescendants: descendants.length > 0
+    };
+    let sheetProps = $f44b3686778108d5$var$useSheetRenderProps(props, values, 'react-aria-SheetOverlay', {
+        // absolute rather than fixed so the modal is not clipped by iOS Safari.
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: 'max(var(--page-width), 100vw)',
+        height: 'max(var(--page-height), 100dvh)',
+        overflow: 'clip',
+        // @ts-ignore
+        '--sheet-scroll-padding-x': 'calc(100vw - var(--visual-viewport-width))',
+        '--sheet-scroll-padding-y': 'calc(100dvh - var(--visual-viewport-height))'
+    });
+    return /*#__PURE__*/ (0, $dnWcj$react).createElement((0, $8b8d26808cb8cb53$export$8948f78d83984c69), {
+        ...props,
+        isOpen: state.isOpen,
+        defaultOpen: undefined,
+        onOpenChange: state.setOpen,
+        ref: mergedRefs,
+        isDismissable: !preventDismissal,
+        isKeyboardDismissDisabled: preventDismissal,
+        // Moving the VoiceOver cursor into the sheet (via focus, or by making the content behind it
+        // inert) scrolls, which interrupts the enter scroll animation on iOS. Wait until it has entered.
+        UNSTABLE_deferUntilEntered: true,
+        UNSTABLE_overrideFocus: true,
+        ...sheetProps,
+        onEnter: (element)=>{
+            // The overlay is the document-anchored wrapper; the swipe gesture scrolls the inner container.
+            let scroller = element.querySelector('[data-sheet-scroll]');
+            let vp = axis === 'y' ? window.innerHeight + parseFloat($f44b3686778108d5$var$calcToPx($f44b3686778108d5$var$viewportPadding(after, axis))) : window.innerWidth;
+            // Open at the first custom detent when provided, otherwise the fully-entered position.
+            let initial = element.querySelector('[data-sheet-initial]');
+            let scrollToRest = (smooth)=>{
+                if (initial) $f44b3686778108d5$var$scrollDetentIntoView(scroller, initial, axis, after ? 'start' : 'end', smooth);
+                else $f44b3686778108d5$var$scrollAlongAxis(scroller, axis, enteredScroll / 100 * vp, smooth);
+            };
+            if (enteredScroll === 0) {
+                // The rest position is at scroll 0, so the sheet mounts already entered. Jump to the exit
+                // first, then animate back in on the next frame — doing both in the same task can leave
+                // the browser stuck at the jumped-to position instead of running the smooth scroll.
+                $f44b3686778108d5$var$scrollAlongAxis(scroller, axis, maxScroll / 100 * vp);
+                requestAnimationFrame(()=>scrollToRest(true));
+            } else scrollToRest(true);
+            return new Promise((resolve)=>{
+                // eslint-disable-next-line rsp-rules/no-non-composing-event-listener
+                scroller.addEventListener('scrollend', ()=>resolve(), {
+                    once: true
+                });
+            });
+        },
+        onExit: (element)=>{
+            let scroller = element.querySelector('[data-sheet-scroll]');
+            if (!isVisible.current) {
+                // Wait for the end of the scroll gesture in Safari to avoid momentum scrolling re-targeting to the sheet behind.
+                if ((0, $dnWcj$isSafari)() && !(0, $dnWcj$isIOS)()) return new Promise((resolve)=>{
+                    // eslint-disable-next-line rsp-rules/no-non-composing-event-listener
+                    scroller.addEventListener('scrollend', ()=>{
+                        setTimeout(()=>resolve(), 50);
+                    }, {
+                        once: true
+                    });
+                });
+                return;
+            }
+            let vp = axis === 'y' ? window.innerHeight + parseFloat($f44b3686778108d5$var$calcToPx($f44b3686778108d5$var$viewportPadding(after, axis))) : window.innerWidth;
+            let maxScrollPx = maxScroll / 100 * vp;
+            let current = axis === 'y' ? scroller.scrollTop : scroller.scrollLeft;
+            let target;
+            if (after && !before) target = 0;
+            else if (before && !after) target = maxScrollPx;
+            else // Dual direction: exit toward whichever edge is nearest the current position.
+            target = current > enteredScroll / 100 * vp ? maxScrollPx : 0;
+            $f44b3686778108d5$var$scrollAlongAxis(scroller, axis, target, true);
+            // The close event is dispatched on the overlay wrapper by the IntersectionObserver below.
+            return new Promise((resolve)=>{
+                element.addEventListener('react-aria-sheet-close', ()=>resolve(), {
+                    once: true
+                });
+            });
+        }
+    }, (renderProps)=>/*#__PURE__*/ (0, $dnWcj$react).createElement($f44b3686778108d5$var$InternalSheetContext.Provider, {
+            value: {
+                ...props,
+                position: position,
+                swipeDirection: swipeDirection,
+                index: index,
+                descendants: descendants,
+                isEntering: renderProps.isEntering,
+                isExiting: renderProps.isExiting,
+                values: values
+            }
+        }, typeof children === 'function' ? children({
+            ...renderProps,
+            ...values
+        }) : children));
+});
+function $f44b3686778108d5$var$getDataAttributes(values) {
+    return {
+        'data-position': values.position,
+        'data-swipe-direction': values.swipeDirection,
+        'data-expanded': values.isExpanded || undefined,
+        'data-stack-index': values.stackIndex,
+        'data-has-descendants': values.hasDescendants || undefined
+    };
+}
+// Merges the sheet-specific values into the render props, className, and style of a Modal or ModalOverlay.
+function $f44b3686778108d5$var$useSheetRenderProps(props, values, defaultClassName, defaultStyle, overrideStyle) {
+    return {
+        ...$f44b3686778108d5$var$getDataAttributes(values),
+        render: props.render ? (domProps, renderProps)=>props.render(domProps, {
+                ...renderProps,
+                ...values
+            }) : undefined,
+        className: (renderProps)=>typeof props.className === 'function' ? props.className({
+                ...renderProps,
+                ...values
+            }) : props.className || defaultClassName,
+        style: (renderProps)=>({
+                ...defaultStyle,
+                ...typeof props.style === 'function' ? props.style({
+                    ...renderProps,
+                    ...values
+                }) : props.style,
+                ...overrideStyle
+            })
+    };
+}
+function $f44b3686778108d5$var$resolveDirection(value, direction) {
+    if (value === 'start') return direction === 'rtl' ? 'right' : 'left';
+    if (value === 'end') return direction === 'rtl' ? 'left' : 'right';
+    return value;
+}
+// The sheet lives inside an oversized scroll container. Scrolling slides a viewport-sized "stage"
+// (which holds the sheet) on and off screen along the swipe axis, so the browser drives the swipe
+// gesture natively. The container is always 2 viewports along the axis; a fixed 1-viewport window
+// (the actual browser viewport) looks onto it. The stage always sits 1 viewport into the content,
+// and snap markers at the content extremes define the entered/exited resting positions.
+function $f44b3686778108d5$var$getSwipeConfig(swipeDirection) {
+    let axis = swipeDirection === 'top' || swipeDirection === 'bottom' || swipeDirection === 'vertical' ? 'y' : 'x';
+    let before = swipeDirection === 'top' || swipeDirection === 'left' || swipeDirection === 'vertical' || swipeDirection === 'horizontal';
+    let after = swipeDirection === 'bottom' || swipeDirection === 'right' || swipeDirection === 'vertical' || swipeDirection === 'horizontal';
+    // Each exitable side adds a viewport of scroll travel.
+    let maxScroll = (Number(before) + Number(after)) * 100;
+    // When the sheet can only exit toward the start edge (top/left), it rests at scroll 0 and is
+    // swiped toward maxScroll to dismiss. Otherwise it rests 1 viewport in.
+    let enteredScroll = before && !after ? 0 : 100;
+    // Position the container so the rest position lands in the real viewport.
+    let containerOffset = before && !after ? -100 : 0;
+    // The sheet crosses a single viewport edge (the swipe edge), so map the animation to just that
+    // crossing. In view-timeline terms `entry` is the scrollport's end edge (bottom/right, where the
+    // sheet appears from) and `exit` is the start edge (top/left). Direction is chosen so progress 0
+    // is the exited state and 1 is entered, matching keyframes authored from exited -> entered:
+    // `entry` already runs gone -> entered, while `exit` runs entered -> gone and is reversed.
+    //
+    // Dual directions cross both edges, so run the same keyframe over the full `cover` range twice
+    // (iteration count 2) with `alternate`: the view timeline splits its progress across the two
+    // iterations, so it plays exited -> entered -> exited around the centered rest position. This
+    // reuses a single exited -> entered keyframe rather than requiring an author to also write a
+    // symmetric (0%/50%/100%) variant.
+    const viewRange = before && after ? 'cover' : before ? 'exit' : 'entry';
+    const viewDirection = before && after ? 'alternate' : before ? 'reverse' : 'normal';
+    const viewIterations = before && after ? 2 : 1;
+    return {
+        axis: axis,
+        before: before,
+        after: after,
+        maxScroll: maxScroll,
+        enteredScroll: enteredScroll,
+        containerOffset: containerOffset,
+        viewRange: viewRange,
+        viewDirection: viewDirection,
+        viewIterations: viewIterations
+    };
+}
+// The resting [x, y] flex alignment for each sheet position, independent of the swipe direction.
+const $f44b3686778108d5$var$POSITION_ALIGNMENT = {
+    top: [
+        'center',
+        'flex-start'
+    ],
+    bottom: [
+        'center',
+        'flex-end'
+    ],
+    left: [
+        'flex-start',
+        'center'
+    ],
+    right: [
+        'flex-end',
+        'center'
+    ],
+    center: [
+        'center',
+        'center'
+    ]
+};
+// Converts a snap point value to a CSS length: numbers are pixels.
+function $f44b3686778108d5$var$toLength(point) {
+    return typeof point === 'number' ? `${point}px` : point;
+}
+function $f44b3686778108d5$var$SnapPoint({ point: point, align: align, axis: axis }) {
+    let mainUnit = axis === 'y' ? 'dvh' : 'dvw';
+    let offset = $f44b3686778108d5$var$toLength(point);
+    return /*#__PURE__*/ (0, $dnWcj$react).createElement("div", {
+        style: {
+            position: 'absolute',
+            top: axis === 'y' ? offset : 0,
+            left: axis === 'x' ? offset : 0,
+            scrollSnapAlign: align,
+            // A full viewport along the swipe axis so its start/end edge lands at the snap position.
+            width: axis === 'x' ? `100${mainUnit}` : 1,
+            height: axis === 'y' ? `100${mainUnit}` : 1
+        }
+    });
+}
+// A snap marker placed inside the sheet, `point` in from its leading edge. Because it moves with
+// the sheet, snapping it with a `scroll-margin` of one viewport rests the marker at the edge of the
+// visible viewport, leaving exactly `point` of the sheet on screen. Since `point` is an inset rather
+// than part of the margin, percentages resolve relative to the sheet's size.
+function $f44b3686778108d5$var$DetentPoint({ point: point, axis: axis, after: after, isInitial: isInitial }) {
+    let viewport = axis === 'y' ? '100dvh' : '100dvw';
+    let offset = $f44b3686778108d5$var$toLength(point);
+    let common = {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        scrollSnapAlign: after ? 'start' : 'end'
+    };
+    let edge = axis === 'y' ? after ? {
+        top: offset,
+        left: 0,
+        scrollMarginTop: viewport
+    } : {
+        bottom: offset,
+        left: 0,
+        scrollMarginBottom: viewport
+    } : after ? {
+        top: 0,
+        left: offset,
+        scrollMarginLeft: viewport
+    } : {
+        top: 0,
+        right: offset,
+        scrollMarginRight: viewport
+    };
+    return /*#__PURE__*/ (0, $dnWcj$react).createElement("div", {
+        "data-sheet-detent": true,
+        "data-sheet-initial": isInitial || undefined,
+        style: {
+            ...common,
+            ...edge
+        }
+    });
+}
+const $f44b3686778108d5$export$a9bf29f8d87ebbee = /*#__PURE__*/ (0, $dnWcj$forwardRef)(function Sheet(props, domRef) {
+    let ref = (0, $dnWcj$useObjectRef)(domRef);
+    let scrollRef = (0, $dnWcj$useRef)(null);
+    let stageRef = (0, $dnWcj$useRef)(null);
+    let { position: position, swipeDirection: swipeDirection, snapPoints: snapPoints, index: index, descendants: descendants, isEntering: isEntering, isExiting: isExiting, preventDismissal: preventDismissal = false, values: values } = (0, $dnWcj$useContext)($f44b3686778108d5$var$InternalSheetContext);
+    // The ModalOverlay may defer its enter animation (e.g. until the software keyboard opens), during
+    // which isEntering is false. The sheet is not settled until it has opened, so treat it as entering.
+    let isOpen = (0, $dnWcj$useContext)((0, $8b8d26808cb8cb53$export$6bc057cefccad9c8))?.isOpen ?? true;
+    let isTransitioning = !isOpen || isEntering || isExiting;
+    let { direction: direction } = (0, $dnWcj$useLocale)();
+    let { axis: axis, after: after, before: before, containerOffset: containerOffset } = $f44b3686778108d5$var$getSwipeConfig(swipeDirection);
+    let viewport = axis === 'y' ? '100dvh' : '100dvw';
+    // A non-dismissable sheet can still be swiped between its snap points, but not past the smallest
+    // one. Enter/exit animations still need the exit space, so only clamp while settled.
+    let hasSnapPoints = !!snapPoints?.length && before !== after;
+    let isClamped = preventDismissal && !isTransitioning;
+    let snapTravel = $f44b3686778108d5$var$useSnapPointTravel(stageRef, ref, axis, after, preventDismissal && hasSnapPoints ? snapPoints.join(' ') : null);
+    // Scroll travel between the smallest snap point and the fully revealed sheet. It is at least 1px
+    // so the scroll container remains scrollable, which lets the browser show its native overscroll
+    // bounce even when there is nowhere to snap to.
+    let clampedTravel = `${hasSnapPoints ? Math.max(1, snapTravel) : 1}px`;
+    // The stage normally sits 1 viewport in so the sheet can scroll fully off screen toward the start
+    // edge. When clamped, sheets exiting toward the end edge move it so scroll 0 rests at the smallest
+    // snap point. Sheets exiting toward the start edge rest at scroll 0 already, so only the end of
+    // the scroll content (the smallest snap point) moves. Dual direction sheets get 1px either side.
+    // viewportPadding pushes bottom sheets down so that they can scroll beyond the viewport behind the iOS toolbar.
+    let stageStart = isClamped && after ? clampedTravel : `calc(${viewport} + ${$f44b3686778108d5$var$viewportPadding(after, axis)})`;
+    let endMarker;
+    if (isClamped && before && after) endMarker = `calc(${stageStart} + ${viewport} + 1px)`;
+    else if (isClamped && before) endMarker = `calc(${clampedTravel} + ${viewport})`;
+    else endMarker = `calc(${stageStart} + ${viewport}${before && after ? ` + ${viewport}` : ''})`;
+    // Keep the sheet visually in place when switching between the clamped and unclamped geometry.
+    // Scroll snapping is disabled while a non-dismissable sheet enters and exits so the browser
+    // doesn't re-snap when the geometry changes, which would otherwise differ between browsers.
+    let prevStageOffset = (0, $dnWcj$useRef)(null);
+    let prevClamped = (0, $dnWcj$useRef)(isClamped);
+    (0, $dnWcj$useLayoutEffect)(()=>{
+        let stage = stageRef.current;
+        let scroller = scrollRef.current;
+        if (!stage || !scroller) return;
+        let offset = axis === 'y' ? stage.offsetTop : stage.offsetLeft;
+        if (prevClamped.current !== isClamped && prevStageOffset.current != null) {
+            let delta = offset - prevStageOffset.current;
+            if (delta !== 0) {
+                if (axis === 'y') scroller.scrollTop += delta;
+                else scroller.scrollLeft += delta;
+            }
+        }
+        prevClamped.current = isClamped;
+        prevStageOffset.current = offset;
+    });
+    let swipeAnimation = $f44b3686778108d5$var$useSwipeAnimation(props);
+    let style = {
+        // Positioned so the detent markers below anchor to the sheet's own box.
+        position: 'relative',
+        ...swipeAnimation
+    };
+    let overscrollInset;
+    if (props.overscrollPadding && position === swipeDirection) {
+        overscrollInset = axis === 'y' ? '100vh' : '100vw';
+        // Extra padding to allow overscrolling, and a negative margin to offset it.
+        switch(position){
+            case 'top':
+                style.paddingTop = '100vh';
+                style.marginTop = '-100vh';
+                break;
+            case 'bottom':
+                style.paddingBottom = '100vh';
+                style.marginBottom = '-100vh';
+                break;
+            case 'left':
+                style.paddingLeft = '100vw';
+                style.marginLeft = '-100vw';
+                break;
+            case 'right':
+                style.paddingRight = '100vw';
+                style.marginRight = '-100vw';
+                break;
+        }
+    }
+    if (props.stackAnimation && descendants.length > 0 && $f44b3686778108d5$var$supportsViewTimeline) {
+        // Append one animation per descendant sheet, driven by that descendant's view timeline.
+        let stackStyle = {
+            animationName: ()=>props.stackAnimation,
+            animationTimeline: (_, i)=>`--sheet-timeline-${index + 1 + i}`,
+            animationDirection: (d)=>d.direction,
+            animationIterationCount: (d)=>String(d.iterations),
+            animationFillMode: ()=>'both',
+            animationRange: (d)=>d.range,
+            animationComposition: ()=>'accumulate',
+            animationTimingFunction: ()=>'linear'
+        };
+        for (let [key, value] of Object.entries(stackStyle))style[key] = [
+            style[key],
+            ...descendants.map(value)
+        ].filter(Boolean).join(', ');
+    }
+    let sheetProps = $f44b3686778108d5$var$useSheetRenderProps(props, values, 'react-aria-Sheet', {
+        direction: direction
+    }, style);
+    let [x, y] = $f44b3686778108d5$var$POSITION_ALIGNMENT[position];
+    let justifyContent = axis === 'y' ? y : x;
+    let alignItems = axis === 'y' ? x : y;
+    let { scrollX: scrollX, scrollY: scrollY } = typeof window !== 'undefined' ? window : {
+        scrollX: 0,
+        scrollY: 0
+    };
+    return /*#__PURE__*/ (0, $dnWcj$react).createElement("div", {
+        ref: scrollRef,
+        "data-sheet-scroll": true,
+        style: {
+            position: 'absolute',
+            top: axis === 'y' ? `calc(${scrollY}px + ${containerOffset}dvh)` : scrollY,
+            left: axis === 'x' ? `calc(${scrollX}px + ${containerOffset}dvw)` : scrollX,
+            // The container is 2 viewports along the swipe axis and 1 viewport on the cross axis.
+            height: axis === 'y' ? '200dvh' : '100dvh',
+            width: axis === 'x' ? '200dvw' : '100dvw',
+            overflowX: axis === 'x' ? 'auto' : 'hidden',
+            overflowY: axis === 'y' ? 'auto' : 'hidden',
+            // Snapping is only disabled when the geometry changes. Changing it during a swipe to dismiss
+            // cancels the momentum scroll in Safari without firing scrollend, which onExit waits for.
+            scrollSnapType: preventDismissal && isTransitioning ? 'none' : `${axis} mandatory`,
+            overscrollBehaviorY: axis === 'y' ? 'contain' : 'none',
+            overscrollBehaviorX: axis === 'x' ? 'contain' : 'none',
+            scrollbarWidth: 'none',
+            // The scroll geometry is physical, so keep the scroll origin and flex alignment
+            // left-to-right regardless of the document direction.
+            direction: 'ltr'
+        }
+    }, /*#__PURE__*/ (0, $dnWcj$react).createElement($f44b3686778108d5$var$SnapPoint, {
+        point: 0,
+        align: isClamped && after ? 'none' : 'start',
+        axis: axis
+    }), before && after && /*#__PURE__*/ (0, $dnWcj$react).createElement($f44b3686778108d5$var$SnapPoint, {
+        point: stageStart,
+        align: "start",
+        axis: axis
+    }), /*#__PURE__*/ (0, $dnWcj$react).createElement("div", {
+        ref: stageRef,
+        style: {
+            position: 'absolute',
+            // The stage normally sits 1 viewport into the content along the swipe axis.
+            top: axis === 'y' ? stageStart : 0,
+            left: axis === 'x' ? stageStart : 0,
+            height: '100dvh',
+            width: '100dvw',
+            display: 'flex',
+            flexDirection: axis === 'y' ? 'column' : 'row',
+            alignItems: alignItems,
+            justifyContent: justifyContent
+        }
+    }, /*#__PURE__*/ (0, $dnWcj$react).createElement((0, $8b8d26808cb8cb53$export$2b77a92f1a5ad772), {
+        ...props,
+        ref: ref,
+        ...sheetProps
+    }, (renderProps)=>/*#__PURE__*/ (0, $dnWcj$react).createElement((0, $dnWcj$react).Fragment, null, snapPoints && // Excludes the overscroll padding so percentages are relative to the visible sheet.
+        /*#__PURE__*/ (0, $dnWcj$react).createElement("div", {
+            style: {
+                position: 'absolute',
+                inset: 0,
+                ...overscrollInset ? {
+                    [position]: overscrollInset
+                } : null,
+                pointerEvents: 'none'
+            }
+        }, snapPoints.map((point, i)=>/*#__PURE__*/ (0, $dnWcj$react).createElement($f44b3686778108d5$var$DetentPoint, {
+                key: i,
+                point: point,
+                axis: axis,
+                after: after,
+                isInitial: i === 0
+            }))), typeof props.children === 'function' ? props.children({
+            ...renderProps,
+            ...values
+        }) : props.children))), /*#__PURE__*/ (0, $dnWcj$react).createElement($f44b3686778108d5$var$SnapPoint, {
+        point: endMarker,
+        align: isClamped && before ? 'none' : 'end',
+        axis: axis
+    }));
+});
+// Measures how far the sheet must scroll from its smallest snap point to be fully revealed, i.e. the
+// distance from that snap point's marker to the stage's exit edge. Measuring the rendered markers
+// means snap points can use any CSS length, including percentages of the sheet. Uses layout offsets
+// rather than bounding rects so swipe/stack animation transforms don't affect it.
+function $f44b3686778108d5$var$useSnapPointTravel(stageRef, sheetRef, axis, after, // Space-separated snap points, so markers are re-measured when they change. Null to disable.
+snapPointsKey) {
+    let [travel, setTravel] = (0, $dnWcj$useState)(0);
+    (0, $dnWcj$useLayoutEffect)(()=>{
+        let stage = stageRef.current;
+        let sheet = sheetRef.current;
+        if (snapPointsKey == null || !stage || !sheet) return;
+        let measure = ()=>{
+            let stageSize = axis === 'y' ? stage.clientHeight : stage.clientWidth;
+            let max = 0;
+            for (let marker of sheet.querySelectorAll('[data-sheet-detent]')){
+                let offset = 0;
+                let el = marker;
+                while(el && el !== stage){
+                    offset += axis === 'y' ? el.offsetTop : el.offsetLeft;
+                    el = el.offsetParent;
+                }
+                // Markers sit at the snap point's start edge for sheets exiting toward the end edge, and at
+                // its end edge for sheets exiting toward the start edge. The smallest snap point travels most.
+                let size = axis === 'y' ? marker.offsetHeight : marker.offsetWidth;
+                max = Math.max(max, after ? stageSize - offset : offset + size);
+            }
+            setTravel(max);
+        };
+        measure();
+        let observer = new ResizeObserver(measure);
+        observer.observe(stage);
+        observer.observe(sheet);
+        return ()=>observer.disconnect();
+    }, [
+        stageRef,
+        sheetRef,
+        axis,
+        after,
+        snapPointsKey
+    ]);
+    return travel;
+}
+const $f44b3686778108d5$export$d79867882ea90c57 = /*#__PURE__*/ (0, $dnWcj$forwardRef)(function SheetBackdrop(props, ref) {
+    let style = $f44b3686778108d5$var$useSwipeAnimation(props);
+    let { values: values, isEntering: isEntering, isExiting: isExiting } = (0, $dnWcj$useContext)($f44b3686778108d5$var$InternalSheetContext);
+    let state = (0, $dnWcj$useContext)((0, $f2ff30fde7b014be$export$d2f961adcb0afbe));
+    let renderProps = (0, $7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
+        ...props,
+        defaultClassName: 'react-aria-SheetBackdrop',
+        defaultStyle: {
+            ...style,
+            position: 'absolute',
+            inset: 0
+        },
+        values: {
+            ...values,
+            isEntering: isEntering,
+            isExiting: isExiting,
+            state: state
+        }
+    });
+    return /*#__PURE__*/ (0, $dnWcj$react).createElement("div", {
+        ref: ref,
+        ...(0, $dnWcj$filterDOMProps)(props, {
+            global: true
+        }),
+        ...renderProps,
+        ...$f44b3686778108d5$var$getDataAttributes(values),
+        "data-entering": isEntering || undefined,
+        "data-exiting": isExiting || undefined
+    });
+});
+function $f44b3686778108d5$var$useSwipeAnimation(props) {
+    let { swipeDirection: swipeDirection, snapPoints: snapPoints, index: index, isEntering: isEntering, isExiting: isExiting } = (0, $dnWcj$useContext)($f44b3686778108d5$var$InternalSheetContext);
+    let { viewRange: viewRange, viewDirection: viewDirection, viewIterations: viewIterations } = $f44b3686778108d5$var$getSwipeConfig(swipeDirection);
+    if (props.swipeAnimation) {
+        let rangeStart = props.swipeAnimationRange?.start != null ? $f44b3686778108d5$var$toLength(snapPoints?.[props.swipeAnimationRange.start] ?? '0%') : '0%';
+        let rangeEnd = props.swipeAnimationRange?.end != null ? $f44b3686778108d5$var$toLength(snapPoints?.[props.swipeAnimationRange.end] ?? '100%') : '100%';
+        if (swipeDirection === 'top' || swipeDirection === 'left') {
+            rangeStart = `calc(100% - ${rangeStart})`;
+            rangeEnd = `calc(100% - ${rangeEnd})`;
+            [rangeStart, rangeEnd] = [
+                rangeEnd,
+                rangeStart
+            ];
+        }
+        // TODO: fix cover with range
+        if ($f44b3686778108d5$var$supportsViewTimeline) return {
+            animationName: props.swipeAnimation,
+            animationTimeline: `--sheet-timeline-${index}`,
+            animationDirection: viewDirection,
+            animationIterationCount: viewIterations,
+            animationFillMode: 'both',
+            animationRange: `${viewRange} ${rangeStart} ${viewRange} ${rangeEnd}`,
+            animationTimingFunction: 'linear',
+            animationComposition: 'replace'
+        };
+        else if (isEntering || isExiting) // Fallback for Firefox, which doesn't support view timelines.
+        return {
+            animationName: props.swipeAnimation,
+            animationDirection: isExiting ? 'reverse' : 'normal',
+            animationDuration: '300ms',
+            animationIterationCount: '1',
+            animationFillMode: 'both',
+            animationTimingFunction: 'linear',
+            animationComposition: 'replace'
+        };
+    }
+    return {};
+}
+const $f44b3686778108d5$export$fe5ec5b76996e2d3 = /*#__PURE__*/ (0, $dnWcj$forwardRef)(function SheetContent(props, ref) {
+    let { swipeDirection: swipeDirection, index: index } = (0, $dnWcj$useContext)($f44b3686778108d5$var$InternalSheetContext);
+    let { axis: axis, before: before, after: after } = $f44b3686778108d5$var$getSwipeConfig(swipeDirection);
+    let viewportLength = axis === 'y' ? '100dvh' : '100dvw';
+    return /*#__PURE__*/ (0, $dnWcj$react).createElement((0, $f2ff30fde7b014be$export$3ddf2d174ce01153), {
+        ...props,
+        ref: ref,
+        className: props.className || 'react-aria-SheetContent',
+        "data-sheet-content": true,
+        style: {
+            ...props.style,
+            width: '100%',
+            height: '100%',
+            // The dialog is the subject of the view-progress timeline that drives all sheet animations.
+            // It is _not_ the Modal because that may have additional padding for overscroll and therefore never be entirely visible.
+            // The inset crops the scroll container's scrollport down to the visible viewport.
+            // @ts-ignore
+            viewTimelineName: `--sheet-timeline-${index}`,
+            viewTimelineAxis: axis,
+            viewTimelineInset: before && !after ? `${viewportLength} 0` : `0 ${viewportLength}`
+        }
+    });
+});
+function $f44b3686778108d5$var$reduceMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function $f44b3686778108d5$var$scrollAlongAxis(element, axis, value, smooth = false) {
+    let behavior = smooth && !$f44b3686778108d5$var$reduceMotion() ? 'smooth' : undefined;
+    element.scrollTo(axis === 'y' ? {
+        top: value,
+        behavior: behavior
+    } : {
+        left: value,
+        behavior: behavior
+    });
+}
+function $f44b3686778108d5$var$scrollDetentIntoView(scroller, marker, axis, align, smooth = false) {
+    let behavior = smooth && !$f44b3686778108d5$var$reduceMotion() ? 'smooth' : 'auto';
+    let markerRect = marker.getBoundingClientRect();
+    let scrollerRect = scroller.getBoundingClientRect();
+    let style = getComputedStyle(marker);
+    if (axis === 'y') {
+        if (align === 'start') {
+            let margin = parseFloat(style.scrollMarginTop) || 0;
+            // Rest the marker's start edge (less its scroll-margin) at the scrollport's start.
+            let top = markerRect.top - scrollerRect.top + scroller.scrollTop - margin;
+            scroller.scrollTo({
+                top: top,
+                behavior: behavior
+            });
+        } else {
+            let margin = parseFloat(style.scrollMarginBottom) || 0;
+            // Rest the marker's end edge (plus its scroll-margin) at the scrollport's end.
+            let top = markerRect.bottom - scrollerRect.top + scroller.scrollTop + margin - scroller.clientHeight;
+            scroller.scrollTo({
+                top: top,
+                behavior: behavior
+            });
+        }
+    } else if (align === 'start') {
+        let margin = parseFloat(style.scrollMarginLeft) || 0;
+        let left = markerRect.left - scrollerRect.left + scroller.scrollLeft - margin;
+        scroller.scrollTo({
+            left: left,
+            behavior: behavior
+        });
+    } else {
+        let margin = parseFloat(style.scrollMarginRight) || 0;
+        let left = markerRect.right - scrollerRect.left + scroller.scrollLeft + margin - scroller.clientWidth;
+        scroller.scrollTo({
+            left: left,
+            behavior: behavior
+        });
+    }
+}
+function $f44b3686778108d5$var$calcToPx(calc) {
+    if (!calc.startsWith('calc(')) return calc;
+    let measure = document.createElement('div');
+    measure.inert = true;
+    measure.style.position = 'absolute';
+    measure.style.top = '0px';
+    measure.style.left = '0px';
+    measure.style.contain = 'strict';
+    measure.style.height = calc;
+    document.body.appendChild(measure);
+    let height = window.getComputedStyle(measure).height;
+    measure.remove();
+    return height;
+}
+
+
+export {$f44b3686778108d5$export$de69b9b0343a1903 as SheetTrigger, $f44b3686778108d5$export$48dbb295cbd054d8 as SheetOverlay, $f44b3686778108d5$export$a9bf29f8d87ebbee as Sheet, $f44b3686778108d5$export$d79867882ea90c57 as SheetBackdrop, $f44b3686778108d5$export$fe5ec5b76996e2d3 as SheetContent};
+//# sourceMappingURL=Sheet.mjs.map