@seed-design/react-dismissible-layer 0.0.0-alpha-20260414104312

package/lib/use-pointer-down-outside-12s-BLctGw0m.js

@@ -0,0 +1,202 @@
+'use client';
+import { useRef, useEffect } from 'react';
+import { i as isTopMost, c as isBelowPointerBlockingLayer, a as isInBranch, b as isInNestedLayer } from './layer-stack-12s-DjRVp1_u.js';
+
+/**
+ * Detects pointer-down events outside a React subtree.
+ * Uses `onPointerDownCapture` on the element to distinguish React-tree-inside
+ * from DOM-tree-inside (Portal support).
+ *
+ * Ported from Radix's usePointerDownOutside with layer stack integration.
+ */ function usePointerDownOutside(node, ctx, options) {
+    const callbackRef = useRef(options.onPressOutside);
+    callbackRef.current = options.onPressOutside;
+    const excludeRef = useRef(options.exclude);
+    excludeRef.current = options.exclude;
+    const pressBehaviorRef = useRef(options.pressBehavior);
+    pressBehaviorRef.current = options.pressBehavior;
+    const isPointerInsideReactTreeRef = useRef(false);
+    const handleClickRef = useRef(()=>{});
+    // Touch drag state (only used in "drag" mode)
+    const touchStateRef = useRef(null);
+    const suppressPointerRef = useRef(false);
+    const suppressTimerRef = useRef();
+    useEffect(()=>{
+        if (!node || !options.enabled) return;
+        const ownerDocument = node.ownerDocument ?? document;
+        function isOutsideLayer(target) {
+            if (!isTopMost(ctx, node)) return false;
+            if (isBelowPointerBlockingLayer(ctx, node)) return false;
+            if (isInBranch(ctx, target)) return false;
+            if (isInNestedLayer(ctx, node, target)) return false;
+            return true;
+        }
+        function isOutsideTarget(target) {
+            if (!isOutsideLayer(target)) return false;
+            if (excludeRef.current?.(target)) return false;
+            return true;
+        }
+        function deferToClick(handleAndDispatch) {
+            ownerDocument.removeEventListener("click", handleClickRef.current);
+            handleClickRef.current = handleAndDispatch;
+            ownerDocument.addEventListener("click", handleClickRef.current, {
+                once: true
+            });
+        }
+        const handlePointerDown = (event)=>{
+            const target = event.target;
+            if (target && !isPointerInsideReactTreeRef.current) {
+                if (!isOutsideTarget(target)) {
+                    isPointerInsideReactTreeRef.current = false;
+                    return;
+                }
+                // In drag mode, suppress synthetic pointerdown that follows a touch dismiss.
+                if (pressBehaviorRef.current === "drag" && suppressPointerRef.current) {
+                    isPointerInsideReactTreeRef.current = false;
+                    return;
+                }
+                function handleAndDispatch() {
+                    callbackRef.current(event);
+                }
+                const behavior = pressBehaviorRef.current ?? "confirm";
+                if (behavior === "confirm") {
+                    // Both mouse and touch defer to click
+                    deferToClick(handleAndDispatch);
+                } else if (behavior === "drag") {
+                    // Touch is handled by touchstart/move/end listeners.
+                    // Only process non-touch pointerdown (mouse, pen).
+                    if (event.pointerType === "touch") {
+                        isPointerInsideReactTreeRef.current = false;
+                        return;
+                    }
+                    handleAndDispatch();
+                } else {
+                    // "eager" (default): mouse immediate, touch defers to click
+                    if (event.pointerType === "touch") {
+                        deferToClick(handleAndDispatch);
+                    } else {
+                        handleAndDispatch();
+                    }
+                }
+            } else {
+                ownerDocument.removeEventListener("click", handleClickRef.current);
+            }
+            isPointerInsideReactTreeRef.current = false;
+        };
+        // -- Touch drag handlers (only active in "drag" mode) --
+        const isTouchInsideReactTreeRef = {
+            current: false
+        };
+        const handleTouchStartCapture = ()=>{
+            isTouchInsideReactTreeRef.current = true;
+        };
+        const handleTouchStart = (event)=>{
+            if (pressBehaviorRef.current !== "drag") return;
+            if (isTouchInsideReactTreeRef.current) {
+                isTouchInsideReactTreeRef.current = false;
+                return;
+            }
+            const target = event.target;
+            if (!target || !isOutsideLayer(target)) return;
+            const touch = event.touches[0];
+            if (!touch) return;
+            const startedOnExcluded = !!excludeRef.current?.(target);
+            touchStateRef.current = {
+                startX: touch.clientX,
+                startY: touch.clientY,
+                dismissOnTouchEnd: false,
+                startedOnExcluded
+            };
+            // Activate click-through guard
+            suppressPointerRef.current = true;
+            clearTimeout(suppressTimerRef.current);
+            suppressTimerRef.current = setTimeout(()=>{
+                suppressPointerRef.current = false;
+                if (touchStateRef.current) {
+                    touchStateRef.current.dismissOnTouchEnd = false;
+                }
+            }, 1000);
+        };
+        const handleTouchMove = (event)=>{
+            if (pressBehaviorRef.current !== "drag" || !touchStateRef.current) return;
+            const target = event.target;
+            if (target && node.contains(target)) return;
+            const touch = event.touches[0];
+            if (!touch) return;
+            const deltaX = Math.abs(touch.clientX - touchStateRef.current.startX);
+            const deltaY = Math.abs(touch.clientY - touchStateRef.current.startY);
+            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            if (distance > 5) {
+                touchStateRef.current.dismissOnTouchEnd = true;
+            }
+            if (distance > 10) {
+                callbackRef.current(event);
+                clearTimeout(suppressTimerRef.current);
+                suppressTimerRef.current = setTimeout(()=>{
+                    suppressPointerRef.current = false;
+                }, 1000);
+                touchStateRef.current = null;
+            }
+        };
+        const handleTouchEnd = ()=>{
+            if (pressBehaviorRef.current !== "drag" || !touchStateRef.current) return;
+            if (touchStateRef.current.dismissOnTouchEnd) {
+                // Drag detected (>5px): dismiss immediately
+                callbackRef.current(new PointerEvent("pointerdown"));
+                clearTimeout(suppressTimerRef.current);
+                suppressTimerRef.current = setTimeout(()=>{
+                    suppressPointerRef.current = false;
+                }, 1000);
+            } else if (!touchStateRef.current.startedOnExcluded) {
+                // Tap (no significant movement): defer to click, like "confirm" mode.
+                // Skip if tap started on an excluded target (e.g., trigger) — toggle handles it.
+                suppressPointerRef.current = false;
+                clearTimeout(suppressTimerRef.current);
+                deferToClick(()=>callbackRef.current(new PointerEvent("pointerdown")));
+            } else {
+                // Tap on excluded target — clean up guard without dismissing
+                suppressPointerRef.current = false;
+                clearTimeout(suppressTimerRef.current);
+            }
+            touchStateRef.current = null;
+        };
+        // Delay registration to prevent the mount-triggering pointerdown from
+        // being detected as "outside". This is a DOM behavior, not React-specific.
+        const timerId = window.setTimeout(()=>{
+            ownerDocument.addEventListener("pointerdown", handlePointerDown);
+            if (pressBehaviorRef.current === "drag") {
+                ownerDocument.addEventListener("touchstart", handleTouchStart);
+                ownerDocument.addEventListener("touchmove", handleTouchMove);
+                ownerDocument.addEventListener("touchend", handleTouchEnd);
+            }
+        }, 0);
+        // Register capture handler on node for React tree detection
+        if (pressBehaviorRef.current === "drag") {
+            node.addEventListener("touchstart", handleTouchStartCapture, true);
+        }
+        return ()=>{
+            window.clearTimeout(timerId);
+            clearTimeout(suppressTimerRef.current);
+            ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+            ownerDocument.removeEventListener("click", handleClickRef.current);
+            ownerDocument.removeEventListener("touchstart", handleTouchStart);
+            ownerDocument.removeEventListener("touchmove", handleTouchMove);
+            ownerDocument.removeEventListener("touchend", handleTouchEnd);
+            node?.removeEventListener("touchstart", handleTouchStartCapture, true);
+            touchStateRef.current = null;
+            suppressPointerRef.current = false;
+        };
+    }, [
+        node,
+        ctx,
+        options.enabled
+    ]);
+    return {
+        // React synthetic event — fires for React-tree descendants (including Portals).
+        onPointerDownCapture: ()=>{
+            isPointerInsideReactTreeRef.current = true;
+        }
+    };
+}
+
+export { usePointerDownOutside as u };

package/lib/use-pointer-down-outside-12s-nlxC-DrD.cjs

@@ -0,0 +1,202 @@
+'use client';
+var react = require('react');
+var layerStack12s = require('./layer-stack-12s-Ctg3ipjW.cjs');
+
+/**
+ * Detects pointer-down events outside a React subtree.
+ * Uses `onPointerDownCapture` on the element to distinguish React-tree-inside
+ * from DOM-tree-inside (Portal support).
+ *
+ * Ported from Radix's usePointerDownOutside with layer stack integration.
+ */ function usePointerDownOutside(node, ctx, options) {
+    const callbackRef = react.useRef(options.onPressOutside);
+    callbackRef.current = options.onPressOutside;
+    const excludeRef = react.useRef(options.exclude);
+    excludeRef.current = options.exclude;
+    const pressBehaviorRef = react.useRef(options.pressBehavior);
+    pressBehaviorRef.current = options.pressBehavior;
+    const isPointerInsideReactTreeRef = react.useRef(false);
+    const handleClickRef = react.useRef(()=>{});
+    // Touch drag state (only used in "drag" mode)
+    const touchStateRef = react.useRef(null);
+    const suppressPointerRef = react.useRef(false);
+    const suppressTimerRef = react.useRef();
+    react.useEffect(()=>{
+        if (!node || !options.enabled) return;
+        const ownerDocument = node.ownerDocument ?? document;
+        function isOutsideLayer(target) {
+            if (!layerStack12s.isTopMost(ctx, node)) return false;
+            if (layerStack12s.isBelowPointerBlockingLayer(ctx, node)) return false;
+            if (layerStack12s.isInBranch(ctx, target)) return false;
+            if (layerStack12s.isInNestedLayer(ctx, node, target)) return false;
+            return true;
+        }
+        function isOutsideTarget(target) {
+            if (!isOutsideLayer(target)) return false;
+            if (excludeRef.current?.(target)) return false;
+            return true;
+        }
+        function deferToClick(handleAndDispatch) {
+            ownerDocument.removeEventListener("click", handleClickRef.current);
+            handleClickRef.current = handleAndDispatch;
+            ownerDocument.addEventListener("click", handleClickRef.current, {
+                once: true
+            });
+        }
+        const handlePointerDown = (event)=>{
+            const target = event.target;
+            if (target && !isPointerInsideReactTreeRef.current) {
+                if (!isOutsideTarget(target)) {
+                    isPointerInsideReactTreeRef.current = false;
+                    return;
+                }
+                // In drag mode, suppress synthetic pointerdown that follows a touch dismiss.
+                if (pressBehaviorRef.current === "drag" && suppressPointerRef.current) {
+                    isPointerInsideReactTreeRef.current = false;
+                    return;
+                }
+                function handleAndDispatch() {
+                    callbackRef.current(event);
+                }
+                const behavior = pressBehaviorRef.current ?? "confirm";
+                if (behavior === "confirm") {
+                    // Both mouse and touch defer to click
+                    deferToClick(handleAndDispatch);
+                } else if (behavior === "drag") {
+                    // Touch is handled by touchstart/move/end listeners.
+                    // Only process non-touch pointerdown (mouse, pen).
+                    if (event.pointerType === "touch") {
+                        isPointerInsideReactTreeRef.current = false;
+                        return;
+                    }
+                    handleAndDispatch();
+                } else {
+                    // "eager" (default): mouse immediate, touch defers to click
+                    if (event.pointerType === "touch") {
+                        deferToClick(handleAndDispatch);
+                    } else {
+                        handleAndDispatch();
+                    }
+                }
+            } else {
+                ownerDocument.removeEventListener("click", handleClickRef.current);
+            }
+            isPointerInsideReactTreeRef.current = false;
+        };
+        // -- Touch drag handlers (only active in "drag" mode) --
+        const isTouchInsideReactTreeRef = {
+            current: false
+        };
+        const handleTouchStartCapture = ()=>{
+            isTouchInsideReactTreeRef.current = true;
+        };
+        const handleTouchStart = (event)=>{
+            if (pressBehaviorRef.current !== "drag") return;
+            if (isTouchInsideReactTreeRef.current) {
+                isTouchInsideReactTreeRef.current = false;
+                return;
+            }
+            const target = event.target;
+            if (!target || !isOutsideLayer(target)) return;
+            const touch = event.touches[0];
+            if (!touch) return;
+            const startedOnExcluded = !!excludeRef.current?.(target);
+            touchStateRef.current = {
+                startX: touch.clientX,
+                startY: touch.clientY,
+                dismissOnTouchEnd: false,
+                startedOnExcluded
+            };
+            // Activate click-through guard
+            suppressPointerRef.current = true;
+            clearTimeout(suppressTimerRef.current);
+            suppressTimerRef.current = setTimeout(()=>{
+                suppressPointerRef.current = false;
+                if (touchStateRef.current) {
+                    touchStateRef.current.dismissOnTouchEnd = false;
+                }
+            }, 1000);
+        };
+        const handleTouchMove = (event)=>{
+            if (pressBehaviorRef.current !== "drag" || !touchStateRef.current) return;
+            const target = event.target;
+            if (target && node.contains(target)) return;
+            const touch = event.touches[0];
+            if (!touch) return;
+            const deltaX = Math.abs(touch.clientX - touchStateRef.current.startX);
+            const deltaY = Math.abs(touch.clientY - touchStateRef.current.startY);
+            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            if (distance > 5) {
+                touchStateRef.current.dismissOnTouchEnd = true;
+            }
+            if (distance > 10) {
+                callbackRef.current(event);
+                clearTimeout(suppressTimerRef.current);
+                suppressTimerRef.current = setTimeout(()=>{
+                    suppressPointerRef.current = false;
+                }, 1000);
+                touchStateRef.current = null;
+            }
+        };
+        const handleTouchEnd = ()=>{
+            if (pressBehaviorRef.current !== "drag" || !touchStateRef.current) return;
+            if (touchStateRef.current.dismissOnTouchEnd) {
+                // Drag detected (>5px): dismiss immediately
+                callbackRef.current(new PointerEvent("pointerdown"));
+                clearTimeout(suppressTimerRef.current);
+                suppressTimerRef.current = setTimeout(()=>{
+                    suppressPointerRef.current = false;
+                }, 1000);
+            } else if (!touchStateRef.current.startedOnExcluded) {
+                // Tap (no significant movement): defer to click, like "confirm" mode.
+                // Skip if tap started on an excluded target (e.g., trigger) — toggle handles it.
+                suppressPointerRef.current = false;
+                clearTimeout(suppressTimerRef.current);
+                deferToClick(()=>callbackRef.current(new PointerEvent("pointerdown")));
+            } else {
+                // Tap on excluded target — clean up guard without dismissing
+                suppressPointerRef.current = false;
+                clearTimeout(suppressTimerRef.current);
+            }
+            touchStateRef.current = null;
+        };
+        // Delay registration to prevent the mount-triggering pointerdown from
+        // being detected as "outside". This is a DOM behavior, not React-specific.
+        const timerId = window.setTimeout(()=>{
+            ownerDocument.addEventListener("pointerdown", handlePointerDown);
+            if (pressBehaviorRef.current === "drag") {
+                ownerDocument.addEventListener("touchstart", handleTouchStart);
+                ownerDocument.addEventListener("touchmove", handleTouchMove);
+                ownerDocument.addEventListener("touchend", handleTouchEnd);
+            }
+        }, 0);
+        // Register capture handler on node for React tree detection
+        if (pressBehaviorRef.current === "drag") {
+            node.addEventListener("touchstart", handleTouchStartCapture, true);
+        }
+        return ()=>{
+            window.clearTimeout(timerId);
+            clearTimeout(suppressTimerRef.current);
+            ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+            ownerDocument.removeEventListener("click", handleClickRef.current);
+            ownerDocument.removeEventListener("touchstart", handleTouchStart);
+            ownerDocument.removeEventListener("touchmove", handleTouchMove);
+            ownerDocument.removeEventListener("touchend", handleTouchEnd);
+            node?.removeEventListener("touchstart", handleTouchStartCapture, true);
+            touchStateRef.current = null;
+            suppressPointerRef.current = false;
+        };
+    }, [
+        node,
+        ctx,
+        options.enabled
+    ]);
+    return {
+        // React synthetic event — fires for React-tree descendants (including Portals).
+        onPointerDownCapture: ()=>{
+            isPointerInsideReactTreeRef.current = true;
+        }
+    };
+}
+
+exports.usePointerDownOutside = usePointerDownOutside;

package/lib/useDismissibleLayer-12s-C34wvjXv.js

@@ -0,0 +1,146 @@
+'use client';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { u as useLayerStackContext, d as useDismissibleParentNode, e as addLayer, r as removeLayer, L as LAYER_UPDATE_EVENT, g as getPointerEventsEnabled, i as isTopMost } from './layer-stack-12s-DjRVp1_u.js';
+import { u as useEscapeKeydown } from './use-escape-keydown-12s-Bl_her-_.js';
+import { u as usePointerDownOutside } from './use-pointer-down-outside-12s-BLctGw0m.js';
+import { u as useFocusOutside } from './use-focus-outside-12s-LpFt7UjO.js';
+
+const NOOP = ()=>{};
+// Module-level storage for the original body pointer-events value.
+// Follows Radix's pattern: save once when the first blocking layer mounts,
+// restore when the last blocking layer unmounts. This decouples save/restore
+// from React's bottom-up cleanup order.
+let originalBodyPointerEvents;
+function useDismissibleLayer(options) {
+    const { enabled, blockPointerEvents = false, onEscapeKeyDown, onPressOutside, onFocusOutside, onCascadeDismiss, exclude, pressBehavior } = options;
+    const ctx = useLayerStackContext();
+    const parentNode = useDismissibleParentNode();
+    const [node, setNode] = useState(null);
+    const [, forceRender] = useState({});
+    // Callback ref — fires when element mounts/unmounts.
+    // Drives `node` state which triggers registration and event listener setup.
+    const dismissibleRef = useCallback((el)=>{
+        setNode(el);
+    }, []);
+    // Stable callback refs
+    const onCascadeDismissRef = useRef(onCascadeDismiss);
+    onCascadeDismissRef.current = onCascadeDismiss;
+    const onEscapeKeyDownRef = useRef(onEscapeKeyDown);
+    onEscapeKeyDownRef.current = onEscapeKeyDown;
+    // -- Layer registration --
+    useEffect(()=>{
+        if (!node || !enabled) return;
+        const layer = {
+            node,
+            dismiss: (detail)=>onCascadeDismissRef.current?.(detail),
+            blockPointerEvents,
+            parentNode
+        };
+        addLayer(ctx, layer);
+        return ()=>{
+            removeLayer(ctx, node);
+        };
+    }, [
+        node,
+        enabled,
+        blockPointerEvents,
+        ctx,
+        parentNode
+    ]);
+    // -- Pointer event blocking --
+    // Follows Radix's pattern: save original value once when the first blocking
+    // layer mounts, restore when the last unmounts. The module-level variable
+    // decouples save/restore from React's bottom-up cleanup order.
+    useEffect(()=>{
+        if (!node || !enabled || !blockPointerEvents) return;
+        const ownerDocument = node.ownerDocument ?? document;
+        const blockingLayers = ctx.layers.filter((l)=>l.blockPointerEvents);
+        if (blockingLayers.length === 1) {
+            // First blocking layer — save the original value and block
+            originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+            ownerDocument.body.style.pointerEvents = "none";
+        }
+        return ()=>{
+            // Check count BEFORE this layer is removed from ctx.layers.
+            // At cleanup time, this layer is still in the array.
+            const remainingBlocking = ctx.layers.filter((l)=>l.blockPointerEvents && l.node !== node);
+            if (remainingBlocking.length === 0) {
+                ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+            }
+        };
+    }, [
+        node,
+        enabled,
+        blockPointerEvents,
+        ctx
+    ]);
+    // -- Subscribe to layer changes for style updates --
+    useEffect(()=>{
+        if (!enabled) return;
+        const handler = ()=>forceRender({});
+        document.addEventListener(LAYER_UPDATE_EVENT, handler);
+        return ()=>document.removeEventListener(LAYER_UPDATE_EVENT, handler);
+    }, [
+        enabled
+    ]);
+    // -- Escape keydown --
+    const handleEscapeKeyDown = useCallback((event)=>{
+        onEscapeKeyDownRef.current?.(event);
+    }, []);
+    useEscapeKeydown(enabled ? node : null, ctx, handleEscapeKeyDown);
+    // -- Press outside --
+    const handlePressOutside = useCallback((event)=>{
+        onPressOutside(event);
+    }, [
+        onPressOutside
+    ]);
+    const pressOutsideProps = usePointerDownOutside(enabled ? node : null, ctx, {
+        enabled,
+        exclude,
+        onPressOutside: handlePressOutside,
+        pressBehavior
+    });
+    // -- Focus outside --
+    const handleFocusOutside = useCallback((event)=>{
+        onFocusOutside(event);
+    }, [
+        onFocusOutside
+    ]);
+    const focusOutsideProps = useFocusOutside(enabled ? node : null, ctx, {
+        enabled,
+        exclude,
+        onFocusOutside: handleFocusOutside
+    });
+    // -- Compute pointer-events style --
+    const hasBlocking = ctx.layers.some((l)=>l.blockPointerEvents);
+    const pointerEventsEnabled = node ? getPointerEventsEnabled(ctx, node) : true;
+    const style = hasBlocking ? {
+        pointerEvents: pointerEventsEnabled ? "auto" : "none"
+    } : {};
+    const topLayer = node ? isTopMost(ctx, node) : true;
+    if (!enabled) {
+        return {
+            dismissibleRef,
+            dismissibleProps: {
+                onPointerDownCapture: NOOP,
+                onFocusCapture: NOOP,
+                onBlurCapture: NOOP
+            },
+            isTopLayer: true,
+            /** The current layer node, for providing DismissibleParentContext to children. */ layerNode: node
+        };
+    }
+    return {
+        dismissibleRef,
+        dismissibleProps: {
+            onPointerDownCapture: pressOutsideProps.onPointerDownCapture,
+            onFocusCapture: focusOutsideProps.onFocusCapture,
+            onBlurCapture: focusOutsideProps.onBlurCapture,
+            style
+        },
+        isTopLayer: topLayer,
+        /** The current layer node, for providing DismissibleParentContext to children. */ layerNode: node
+    };
+}
+
+export { useDismissibleLayer as u };