sheer-ui 0.4.2 → 0.5.0

package/dist/internal/vaul/use-drawer-content.svelte.js

@@ -0,0 +1,178 @@
+import {} from 'svelte';
+import { attachRef } from '../tools/index.js';
+import * as DrawerPrimitive from '../../components/dialog/index.js';
+import { BORDER_RADIUS, TRANSITIONS, WINDOW_TOP_OFFSET } from './constants.js';
+import { assignStyle, isVertical } from './helpers.js';
+import { getDrawer } from './use-drawer-root.svelte.js';
+function useScaleBackground() {
+    const ctx = getDrawer();
+    let timeoutId = null;
+    let initialBackgroundColor;
+    const getScale = () => (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
+    $effect(() => {
+        if (ctx.open.current && ctx.shouldScaleBackground.current) {
+            initialBackgroundColor ??= document.body.style.backgroundColor;
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            const wrapper = document.querySelector('[data-vaul-drawer-wrapper]');
+            if (!wrapper)
+                return;
+            // These styles are applied for good: upstream vaul chains their restore fns but discards
+            // the chain, so the transition styles persist (the close animation needs them) and the
+            // body background is restored by the timeout in the teardown below instead.
+            if (ctx.setBackgroundColorOnScale.current && !ctx.noBodyStyles.current)
+                assignStyle(document.body, { background: 'black' });
+            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(() => initialBackgroundColor
+                    ? (document.body.style.background = initialBackgroundColor)
+                    : document.body.style.removeProperty('background'), TRANSITIONS.DURATION * 1000);
+            };
+        }
+    });
+}
+export function useDrawerContent(opts) {
+    const ctx = getDrawer();
+    // The attachment forwards through DialogPrimitive.Content to the real element,
+    // pushing the node into context on mount and clearing it on unmount.
+    const attachment = attachRef(opts.ref, (node) => ctx.setDrawerNode(node));
+    let delayedSnapPoints = $state(false);
+    let pointerStart = null;
+    let lastKnownPointerEvent = null;
+    let wasBeyondThePoint = false;
+    const hasSnapPoints = $derived(ctx.snapPoints.current && ctx.snapPoints.current.length > 0);
+    useScaleBackground();
+    function isDeltaInDirection(delta, direction, threshold = 0) {
+        if (wasBeyondThePoint)
+            return true;
+        const deltaX = Math.abs(delta.x);
+        const deltaY = Math.abs(delta.y);
+        const isDeltaX = deltaX > deltaY;
+        const dFactor = direction === 'bottom' || direction === 'right' ? 1 : -1;
+        const isHorizontal = direction === 'left' || direction === 'right';
+        const primaryDelta = isHorizontal ? deltaX : deltaY;
+        const isReverseDirection = (isHorizontal ? delta.x : delta.y) * dFactor < 0;
+        if (!isReverseDirection && primaryDelta >= 0 && primaryDelta <= threshold) {
+            return isHorizontal ? isDeltaX : !isDeltaX;
+        }
+        wasBeyondThePoint = true;
+        return true;
+    }
+    $effect(() => {
+        if (hasSnapPoints && ctx.open.current) {
+            window.requestAnimationFrame(() => {
+                delayedSnapPoints = true;
+            });
+        }
+        else {
+            delayedSnapPoints = false;
+        }
+    });
+    function handleOnPointerUp(e) {
+        pointerStart = null;
+        wasBeyondThePoint = false;
+        ctx.onRelease(e);
+    }
+    function onpointerdown(e) {
+        if (ctx.handleOnly.current)
+            return;
+        opts.onpointerdown.current?.(e);
+        pointerStart = { x: e.pageX, y: e.pageY };
+        ctx.onPress(e);
+    }
+    function onOpenAutoFocus(e) {
+        opts.onOpenAutoFocus.current?.(e);
+        if (!ctx.autoFocus.current) {
+            e.preventDefault();
+        }
+    }
+    function onInteractOutside(e) {
+        opts.onInteractOutside.current?.(e);
+        if (!ctx.modal.current || e.defaultPrevented) {
+            e.preventDefault();
+            return;
+        }
+        if (ctx.keyboardIsOpen) {
+            ctx.keyboardIsOpen = false;
+        }
+    }
+    function onFocusOutside(e) {
+        if (!ctx.modal.current) {
+            e.preventDefault();
+            return;
+        }
+    }
+    function onpointermove(e) {
+        lastKnownPointerEvent = e;
+        if (ctx.handleOnly.current)
+            return;
+        opts.onpointermove.current?.(e);
+        if (!pointerStart)
+            return;
+        const yPosition = e.pageY - pointerStart.y;
+        const xPosition = e.pageX - pointerStart.x;
+        const swipeStartThreshold = e.pointerType === 'touch' ? 10 : 2;
+        const delta = { x: xPosition, y: yPosition };
+        const isAllowedToSwipe = isDeltaInDirection(delta, ctx.direction.current, swipeStartThreshold);
+        if (isAllowedToSwipe) {
+            ctx.onDrag(e);
+        }
+        else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
+            pointerStart = null;
+        }
+    }
+    function onpointerup(e) {
+        opts.onpointerup.current?.(e);
+        handleOnPointerUp(e);
+    }
+    function onpointerout(e) {
+        opts.onpointerout.current?.(e);
+        handleOnPointerUp(lastKnownPointerEvent);
+    }
+    function oncontextmenu(e) {
+        opts.oncontextmenu.current?.(e);
+        handleOnPointerUp(lastKnownPointerEvent);
+    }
+    const props = $derived({
+        id: opts.id.current,
+        'data-vaul-drawer-direction': ctx.direction.current,
+        'data-vaul-drawer': '',
+        'data-vaul-delayed-snap-points': delayedSnapPoints ? 'true' : 'false',
+        'data-vaul-snap-points': ctx.open.current && hasSnapPoints ? 'true' : 'false',
+        'data-vaul-custom-container': ctx.container.current ? 'true' : 'false',
+        'data-vaul-animate': ctx.shouldAnimate ? 'true' : 'false',
+        onpointerdown,
+        onOpenAutoFocus,
+        onInteractOutside,
+        onFocusOutside,
+        onpointerup,
+        onpointermove,
+        onpointerout,
+        oncontextmenu,
+        preventScroll: ctx.modal.current,
+        ...attachment,
+    });
+    return {
+        get props() {
+            return props;
+        },
+        ctx,
+    };
+}

package/dist/internal/vaul/use-drawer-root.svelte.d.ts

@@ -0,0 +1,87 @@
+import type { ReadableBoxedValues, WritableBoxedValues } from '../tools/index.js';
+import type { DrawerDirection } from './types.js';
+export type DrawerContext = ReturnType<typeof useDrawerRoot>;
+declare const getDrawer: () => {
+    open: import("../tools/box.svelte.js").WritableBox<boolean>;
+    snapPoints: import("../tools/box.svelte.js").ReadableBox<(string | number)[] | undefined>;
+    modal: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    direction: import("../tools/box.svelte.js").ReadableBox<DrawerDirection>;
+    shouldScaleBackground: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    setBackgroundColorOnScale: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    noBodyStyles: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    handleOnly: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    container: import("../tools/box.svelte.js").ReadableBox<HTMLElement | null>;
+    autoFocus: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    keyboardIsOpen: boolean;
+    setDrawerNode: (node: HTMLElement | null) => void;
+    setOverlayNode: (node: HTMLElement | null) => void;
+    onPress: (event: PointerEvent) => void;
+    onDrag: (event: PointerEvent) => void;
+    onRelease: (event: PointerEvent | null) => void;
+    onNestedDrag: (_event: PointerEvent, percentageDragged: number) => void;
+    onNestedOpenChange: (o: boolean) => void;
+    onNestedRelease: (_event: PointerEvent, o: boolean) => void;
+    onDialogOpenChange: (o: boolean) => void;
+    handleOpenChangeComplete: (o: boolean) => void;
+    readonly shouldAnimate: boolean;
+    readonly shouldFade: boolean;
+    readonly snapPointsOffset: number[];
+    readonly activeSnapPointIndex: number | undefined;
+};
+export { getDrawer };
+type UseDrawerRootProps = ReadableBoxedValues<{
+    closeThreshold: number;
+    shouldScaleBackground: boolean;
+    scrollLockTimeout: number;
+    snapPoints: (string | number)[] | undefined;
+    fadeFromIndex: number | undefined;
+    fixed: boolean;
+    dismissible: boolean;
+    direction: DrawerDirection;
+    onDrag: (event: PointerEvent, percentageDragged: number) => void;
+    onRelease: (event: PointerEvent, open: boolean) => void;
+    nested: boolean;
+    onClose: () => void;
+    modal: boolean;
+    handleOnly: boolean;
+    noBodyStyles: boolean;
+    preventScrollRestoration: boolean;
+    setBackgroundColorOnScale: boolean;
+    container: HTMLElement | null;
+    snapToSequentialPoint: boolean;
+    repositionInputs: boolean;
+    autoFocus: boolean;
+    disablePreventScroll: boolean;
+    onOpenChange: (o: boolean) => void;
+    onAnimationEnd: (open: boolean) => void;
+}> & WritableBoxedValues<{
+    open: boolean;
+    activeSnapPoint: number | string | null;
+}>;
+export declare function useDrawerRoot(opts: UseDrawerRootProps): {
+    open: import("../tools/box.svelte.js").WritableBox<boolean>;
+    snapPoints: import("../tools/box.svelte.js").ReadableBox<(string | number)[] | undefined>;
+    modal: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    direction: import("../tools/box.svelte.js").ReadableBox<DrawerDirection>;
+    shouldScaleBackground: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    setBackgroundColorOnScale: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    noBodyStyles: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    handleOnly: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    container: import("../tools/box.svelte.js").ReadableBox<HTMLElement | null>;
+    autoFocus: import("../tools/box.svelte.js").ReadableBox<boolean>;
+    keyboardIsOpen: boolean;
+    setDrawerNode: (node: HTMLElement | null) => void;
+    setOverlayNode: (node: HTMLElement | null) => void;
+    onPress: (event: PointerEvent) => void;
+    onDrag: (event: PointerEvent) => void;
+    onRelease: (event: PointerEvent | null) => void;
+    onNestedDrag: (_event: PointerEvent, percentageDragged: number) => void;
+    onNestedOpenChange: (o: boolean) => void;
+    onNestedRelease: (_event: PointerEvent, o: boolean) => void;
+    onDialogOpenChange: (o: boolean) => void;
+    handleOpenChangeComplete: (o: boolean) => void;
+    readonly shouldAnimate: boolean;
+    readonly shouldFade: boolean;
+    readonly snapPointsOffset: number[];
+    readonly activeSnapPointIndex: number | undefined;
+};