@johly/vaul-svelte 1.0.0-next.8

package/dist/use-position-fixed.svelte.js

@@ -0,0 +1,114 @@
+import { isSafari } from "./internal/browser.js";
+import { onMount } from "svelte";
+import { on } from "svelte/events";
+import { watch } from "runed";
+let previousBodyPosition = null;
+/**
+ * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
+ * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
+ * Issues that this hook solves:
+ * https://github.com/emilkowalski/vaul/issues/435
+ * https://github.com/emilkowalski/vaul/issues/433
+ * And more that I discovered, but were just not reported.
+ */
+export function usePositionFixed({ open, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles, }) {
+    let activeUrl = $state(typeof window !== "undefined" ? window.location.href : "");
+    let scrollPos = 0;
+    function setPositionFixed() {
+        // All browsers on iOS will return true here.
+        if (!isSafari())
+            return;
+        // If previousBodyPosition is already set, don't set it again.
+        if (previousBodyPosition === null && open.current && !noBodyStyles.current) {
+            previousBodyPosition = {
+                position: document.body.style.position,
+                top: document.body.style.top,
+                left: document.body.style.left,
+                height: document.body.style.height,
+                right: "unset",
+            };
+            // Update the dom inside an animation frame
+            const { scrollX, innerHeight } = window;
+            document.body.style.setProperty("position", "fixed", "important");
+            Object.assign(document.body.style, {
+                top: `${-scrollPos}px`,
+                left: `${-scrollX}px`,
+                right: "0px",
+                height: "auto",
+            });
+            window.setTimeout(() => window.requestAnimationFrame(() => {
+                // Attempt to check if the bottom bar appeared due to the position change
+                const bottomBarHeight = innerHeight - window.innerHeight;
+                if (bottomBarHeight && scrollPos >= innerHeight) {
+                    // Move the content further up so that the bottom bar doesn't hide it
+                    document.body.style.top = `${-(scrollPos + bottomBarHeight)}px`;
+                }
+            }), 300);
+        }
+    }
+    function restorePositionSetting() {
+        // All browsers on iOS will return true here.
+        if (!isSafari())
+            return;
+        if (previousBodyPosition !== null && !noBodyStyles.current) {
+            // Convert the position from "px" to Int
+            const y = -parseInt(document.body.style.top, 10);
+            const x = -parseInt(document.body.style.left, 10);
+            // Restore styles
+            Object.assign(document.body.style, previousBodyPosition);
+            window.requestAnimationFrame(() => {
+                if (preventScrollRestoration.current && activeUrl !== window.location.href) {
+                    activeUrl = window.location.href;
+                    return;
+                }
+                window.scrollTo(x, y);
+            });
+            previousBodyPosition = null;
+        }
+    }
+    onMount(() => {
+        function onScroll() {
+            scrollPos = window.scrollY;
+        }
+        onScroll();
+        return on(window, "scroll", onScroll);
+    });
+    watch([() => modal.current, () => activeUrl], () => {
+        if (!modal.current)
+            return;
+        return () => {
+            if (typeof document === "undefined")
+                return;
+            // Another drawer is opened, safe to ignore the execution
+            const hasDrawerOpened = !!document.querySelector("[data-vaul-drawer]");
+            if (hasDrawerOpened)
+                return;
+            restorePositionSetting();
+        };
+    });
+    watch([
+        () => open.current,
+        () => hasBeenOpened(),
+        () => activeUrl,
+        () => modal.current,
+        () => nested.current,
+    ], () => {
+        if (nested.current || !hasBeenOpened())
+            return;
+        // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
+        if (open.current) {
+            // avoid for standalone mode (PWA)
+            const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
+            !isStandalone && setPositionFixed();
+            if (!modal.current) {
+                window.setTimeout(() => {
+                    restorePositionSetting();
+                }, 500);
+            }
+        }
+        else {
+            restorePositionSetting();
+        }
+    });
+    return { restorePositionSetting };
+}

package/dist/use-prevent-scroll.svelte.d.ts

@@ -0,0 +1,15 @@
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled: () => boolean;
+    focusCallback?: () => void;
+}
+export declare function isScrollable(node: Element): boolean;
+export declare function getScrollParent(node: Element): Element;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+export declare function usePreventScroll(opts: PreventScrollOptions): void;
+export declare function isInput(target: Element): boolean;
+export {};

package/dist/use-prevent-scroll.svelte.js

@@ -0,0 +1,235 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
+import { watch } from "runed";
+import { isBrowser, isIOS } from "./internal/browser.js";
+import { on } from "svelte/events";
+const KEYBOARD_BUFFER = 24;
+function chain(...callbacks) {
+    return (...args) => {
+        for (let callback of callbacks) {
+            if (typeof callback === "function") {
+                callback(...args);
+            }
+        }
+    };
+}
+const visualViewport = isBrowser && window.visualViewport;
+export function isScrollable(node) {
+    let style = window.getComputedStyle(node);
+    return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+}
+export function getScrollParent(node) {
+    if (isScrollable(node)) {
+        node = node.parentElement;
+    }
+    while (node && !isScrollable(node)) {
+        node = node.parentElement;
+    }
+    return node || document.scrollingElement || document.documentElement;
+}
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+    "checkbox",
+    "radio",
+    "range",
+    "color",
+    "file",
+    "image",
+    "button",
+    "submit",
+    "reset",
+]);
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+let preventScrollCount = 0;
+let restore;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+export function usePreventScroll(opts) {
+    watch(opts.isDisabled, () => {
+        if (opts.isDisabled()) {
+            return;
+        }
+        preventScrollCount++;
+        if (preventScrollCount === 1) {
+            if (isIOS()) {
+                restore = preventScrollMobileSafari();
+            }
+        }
+        return () => {
+            preventScrollCount--;
+            if (preventScrollCount === 0) {
+                restore?.();
+            }
+        };
+    });
+}
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    above work or Safari will still try to scroll the page when focusing an input.
+// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
+//    to navigate to an input with the next/previous buttons that's outside a modal.
+function preventScrollMobileSafari() {
+    let scrollable;
+    let lastY = 0;
+    const onTouchStart = (e) => {
+        // Store the nearest scrollable parent element from the element that the user touched.
+        scrollable = getScrollParent(e.target);
+        if (scrollable === document.documentElement && scrollable === document.body) {
+            return;
+        }
+        lastY = e.changedTouches[0].pageY;
+    };
+    let onTouchMove = (e) => {
+        // Prevent scrolling the window.
+        if (!scrollable ||
+            scrollable === document.documentElement ||
+            scrollable === document.body) {
+            e.preventDefault();
+            return;
+        }
+        // Prevent scrolling up when at the top and scrolling down when at the bottom
+        // of a nested scrollable area, otherwise mobile Safari will start scrolling
+        // the window instead. Unfortunately, this disables bounce scrolling when at
+        // the top but it's the best we can do.
+        let y = e.changedTouches[0].pageY;
+        let scrollTop = scrollable.scrollTop;
+        let bottom = scrollable.scrollHeight - scrollable.clientHeight;
+        if (bottom === 0) {
+            return;
+        }
+        if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
+            e.preventDefault();
+        }
+        lastY = y;
+    };
+    let onTouchEnd = (e) => {
+        let target = e.target;
+        // Apply this change if we're not already focused on the target element
+        if (isInput(target) && target !== document.activeElement) {
+            e.preventDefault();
+            // Apply a transform to trick Safari into thinking the input is at the top of the page
+            // so it doesn't try to scroll it into view. When tapping on an input, this needs to
+            // be done before the "focus" event, so we have to focus the element ourselves.
+            target.style.transform = "translateY(-2000px)";
+            target.focus();
+            requestAnimationFrame(() => {
+                target.style.transform = "";
+            });
+        }
+    };
+    const onFocus = (e) => {
+        let target = e.target;
+        if (isInput(target)) {
+            // Transform also needs to be applied in the focus event in cases where focus moves
+            // other than tapping on an input directly, e.g. the next/previous buttons in the
+            // software keyboard. In these cases, it seems applying the transform in the focus event
+            // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+            target.style.transform = "translateY(-2000px)";
+            requestAnimationFrame(() => {
+                target.style.transform = "";
+                // This will have prevented the browser from scrolling the focused element into view,
+                // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+                if (visualViewport) {
+                    if (visualViewport.height < window.innerHeight) {
+                        // If the keyboard is already visible, do this after one additional frame
+                        // to wait for the transform to be removed.
+                        requestAnimationFrame(() => {
+                            scrollIntoView(target);
+                        });
+                    }
+                    else {
+                        // Otherwise, wait for the visual viewport to resize before scrolling so we can
+                        // measure the correct position to scroll to.
+                        visualViewport.addEventListener("resize", () => scrollIntoView(target), {
+                            once: true,
+                        });
+                    }
+                }
+            });
+        }
+    };
+    let onWindowScroll = () => {
+        // Last resort. If the window scrolled, scroll it back to the top.
+        // It should always be at the top because the body will have a negative margin (see below).
+        window.scrollTo(0, 0);
+    };
+    // Record the original scroll position so we can restore it.
+    // Then apply a negative margin to the body to offset it by the scroll position. This will
+    // enable us to scroll the window to the top, which is required for the rest of this to work.
+    let scrollX = window.pageXOffset;
+    let scrollY = window.pageYOffset;
+    let restoreStyles = chain(setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`)
+    // setStyle(document.documentElement, 'overflow', 'hidden'),
+    // setStyle(document.body, 'marginTop', `-${scrollY}px`),
+    );
+    // Scroll to the top. The negative margin on the body will make this appear the same.
+    window.scrollTo(0, 0);
+    let removeEvents = chain(on(document, "touchstart", onTouchStart, { passive: false, capture: true }), on(document, "touchmove", onTouchMove, { passive: false, capture: true }), on(document, "touchend", onTouchEnd, { passive: false, capture: true }), on(document, "focus", onFocus, { capture: true }), on(window, "scroll", onWindowScroll));
+    return () => {
+        // Restore styles and scroll the page back to where it was.
+        restoreStyles();
+        removeEvents();
+        window.scrollTo(scrollX, scrollY);
+    };
+}
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
+function setStyle(element, style, value) {
+    // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
+    let cur = element.style[style];
+    // @ts-expect-error - TS doesn't like dynamic keys on CSSStyleDeclaration
+    element.style[style] = value;
+    return () => {
+        // @ts-expect-error - TS doesn't like dynamic keys on CSSStyleDeclaration
+        element.style[style] = cur;
+    };
+}
+function scrollIntoView(target) {
+    let root = document.scrollingElement || document.documentElement;
+    while (target && target !== root) {
+        // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+        let scrollable = getScrollParent(target);
+        if (scrollable !== document.documentElement &&
+            scrollable !== document.body &&
+            scrollable !== target) {
+            let scrollableTop = scrollable.getBoundingClientRect().top;
+            let targetTop = target.getBoundingClientRect().top;
+            let targetBottom = target.getBoundingClientRect().bottom;
+            // Buffer is needed for some edge cases
+            const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
+            if (targetBottom > keyboardHeight) {
+                scrollable.scrollTop += targetTop - scrollableTop;
+            }
+        }
+        // @ts-expect-error - sh
+        target = scrollable.parentElement;
+    }
+}
+export function isInput(target) {
+    return ((target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+        target instanceof HTMLTextAreaElement ||
+        (target instanceof HTMLElement && target.isContentEditable));
+}

package/dist/use-scale-background.svelte.d.ts

@@ -0,0 +1 @@
+export declare function useScaleBackground(): void;

package/dist/use-scale-background.svelte.js

@@ -0,0 +1,57 @@
+import { watch } from "runed";
+import { BORDER_RADIUS, TRANSITIONS, WINDOW_TOP_OFFSET } from "./internal/constants.js";
+import { assignStyle, chain, isVertical } from "./helpers.js";
+import { noop } from "./internal/noop.js";
+import { DrawerContext } from "./context.js";
+export function useScaleBackground() {
+    const ctx = DrawerContext.get();
+    let timeoutId = null;
+    const initialBackgroundColor = typeof document !== "undefined" ? document.body.style.backgroundColor : "";
+    function getScale() {
+        return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
+    }
+    watch([
+        () => ctx.open.current,
+        () => ctx.shouldScaleBackground.current,
+        () => ctx.setBackgroundColorOnScale.current,
+    ], () => {
+        if (ctx.open.current && ctx.shouldScaleBackground.current) {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            const wrapper = document.querySelector("[data-vaul-drawer-wrapper]") ||
+                document.querySelector("[data-vaul-drawer-wrapper]");
+            if (!wrapper)
+                return;
+            chain(ctx.setBackgroundColorOnScale.current && !ctx.noBodyStyles.current
+                ? assignStyle(document.body, { background: "black" })
+                : noop, assignStyle(wrapper, {
+                transformOrigin: isVertical(ctx.direction.current) ? "top" : "left",
+                transitionProperty: "transform, border-radius",
+                transitionDuration: `${TRANSITIONS.DURATION}s`,
+                transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+            }));
+            const wrapperStylesCleanup = assignStyle(wrapper, {
+                borderRadius: `${BORDER_RADIUS}px`,
+                overflow: "hidden",
+                ...(isVertical(ctx.direction.current)
+                    ? {
+                        transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
+                    }
+                    : {
+                        transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
+                    }),
+            });
+            return () => {
+                wrapperStylesCleanup();
+                timeoutId = window.setTimeout(() => {
+                    if (initialBackgroundColor) {
+                        document.body.style.background = initialBackgroundColor;
+                    }
+                    else {
+                        document.body.style.removeProperty("background");
+                    }
+                }, TRANSITIONS.DURATION * 1000);
+            };
+        }
+    });
+}

package/dist/use-snap-points.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { ReadableBoxedValues, WritableBoxedValues } from "svelte-toolbelt";
+import type { DrawerDirection, Getters } from "./types.js";
+export declare function useSnapPoints({ snapPoints, drawerNode: drawerNode, overlayNode: overlayNode, fadeFromIndex, setOpenTime, direction, container, snapToSequentialPoint, activeSnapPoint, open, isReleasing, }: Getters<{
+    drawerNode: HTMLElement | null;
+    overlayNode: HTMLElement | null;
+    isReleasing: boolean;
+}> & {
+    setOpenTime: (time: Date) => void;
+} & WritableBoxedValues<{
+    activeSnapPoint: number | string | null | undefined;
+    open: boolean;
+}> & ReadableBoxedValues<{
+    direction: DrawerDirection;
+    container: HTMLElement | null | undefined;
+    snapToSequentialPoint: boolean;
+    fadeFromIndex: number | undefined;
+    snapPoints: (number | string)[] | undefined;
+}>): {
+    readonly isLastSnapPoint: true | null;
+    readonly shouldFade: boolean;
+    readonly activeSnapPointIndex: number | undefined;
+    readonly snapPointsOffset: number[];
+    getPercentageDragged: (absDraggedDistance: number, isDraggingDown: boolean) => number | null;
+    onRelease: ({ draggedDistance, closeDrawer, velocity, dismissible, }: {
+        draggedDistance: number;
+        closeDrawer: () => void;
+        velocity: number;
+        dismissible: boolean;
+    }) => void;
+    onDrag: ({ draggedDistance }: {
+        draggedDistance: number;
+    }) => void;
+};
+export declare function isBottomOrRight(direction: DrawerDirection): boolean;