import $kqwpH$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends"; import {createContext as $kqwpH$createContext, forwardRef as $kqwpH$forwardRef, useContext as $kqwpH$useContext, useState as $kqwpH$useState, useEffect as $kqwpH$useEffect, createElement as $kqwpH$createElement, useRef as $kqwpH$useRef} from "react"; import {composeEventHandlers as $kqwpH$composeEventHandlers} from "@radix-ui/primitive"; import {Primitive as $kqwpH$Primitive, dispatchDiscreteCustomEvent as $kqwpH$dispatchDiscreteCustomEvent} from "@radix-ui/react-primitive"; import {useComposedRefs as $kqwpH$useComposedRefs} from "@radix-ui/react-compose-refs"; import {useCallbackRef as $kqwpH$useCallbackRef} from "@radix-ui/react-use-callback-ref"; import {useEscapeKeydown as $kqwpH$useEscapeKeydown} from "@radix-ui/react-use-escape-keydown"; /* ------------------------------------------------------------------------------------------------- * DismissableLayer * -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME = 'DismissableLayer'; const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update'; const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'; const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'; let $5cb92bef7577960e$var$originalBodyPointerEvents; const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ $kqwpH$createContext({ layers: new Set(), layersWithOutsidePointerEventsDisabled: new Set(), branches: new Set() }); const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ $kqwpH$forwardRef((props, forwardedRef)=>{ var _node$ownerDocument; const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props; const context = $kqwpH$useContext($5cb92bef7577960e$var$DismissableLayerContext); const [node1, setNode] = $kqwpH$useState(null); const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document; const [, force] = $kqwpH$useState({}); const composedRefs = $kqwpH$useComposedRefs(forwardedRef, (node)=>setNode(node) ); const layers = Array.from(context.layers); const [highestLayerWithOutsidePointerEventsDisabled] = [ ...context.layersWithOutsidePointerEventsDisabled ].slice(-1); // prettier-ignore const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore const index = node1 ? layers.indexOf(node1) : -1; const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0; const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex; const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{ const target = event.target; const isPointerDownOnBranch = [ ...context.branches ].some((branch)=>branch.contains(target) ); if (!isPointerEventsEnabled || isPointerDownOnBranch) return; onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event); onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event); if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss(); }, ownerDocument); const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{ const target = event.target; const isFocusInBranch = [ ...context.branches ].some((branch)=>branch.contains(target) ); if (isFocusInBranch) return; onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event); onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event); if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss(); }, ownerDocument); $kqwpH$useEscapeKeydown((event)=>{ const isHighestLayer = index === context.layers.size - 1; if (!isHighestLayer) return; onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event); if (!event.defaultPrevented && onDismiss) { event.preventDefault(); onDismiss(); } }, ownerDocument); $kqwpH$useEffect(()=>{ if (!node1) return; if (disableOutsidePointerEvents) { if (context.layersWithOutsidePointerEventsDisabled.size === 0) { $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents; ownerDocument.body.style.pointerEvents = 'none'; } context.layersWithOutsidePointerEventsDisabled.add(node1); } context.layers.add(node1); $5cb92bef7577960e$var$dispatchUpdate(); return ()=>{ if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents; }; }, [ node1, ownerDocument, disableOutsidePointerEvents, context ]); /** * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect * because a change to `disableOutsidePointerEvents` would remove this layer from the stack * and add it to the end again so the layering order wouldn't be _creation order_. * We only want them to be removed from context stacks when unmounted. */ $kqwpH$useEffect(()=>{ return ()=>{ if (!node1) return; context.layers.delete(node1); context.layersWithOutsidePointerEventsDisabled.delete(node1); $5cb92bef7577960e$var$dispatchUpdate(); }; }, [ node1, context ]); $kqwpH$useEffect(()=>{ const handleUpdate = ()=>force({}) ; document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate); return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate) ; }, []); return /*#__PURE__*/ $kqwpH$createElement($kqwpH$Primitive.div, $kqwpH$babelruntimehelpersesmextends({}, layerProps, { ref: composedRefs, style: { pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined, ...props.style }, onFocusCapture: $kqwpH$composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture), onBlurCapture: $kqwpH$composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture), onPointerDownCapture: $kqwpH$composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture) })); }); /*#__PURE__*/ Object.assign($5cb92bef7577960e$export$177fb62ff3ec1f22, { displayName: $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME }); /* ------------------------------------------------------------------------------------------------- * DismissableLayerBranch * -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$BRANCH_NAME = 'DismissableLayerBranch'; const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ $kqwpH$forwardRef((props, forwardedRef)=>{ const context = $kqwpH$useContext($5cb92bef7577960e$var$DismissableLayerContext); const ref = $kqwpH$useRef(null); const composedRefs = $kqwpH$useComposedRefs(forwardedRef, ref); $kqwpH$useEffect(()=>{ const node = ref.current; if (node) { context.branches.add(node); return ()=>{ context.branches.delete(node); }; } }, [ context.branches ]); return /*#__PURE__*/ $kqwpH$createElement($kqwpH$Primitive.div, $kqwpH$babelruntimehelpersesmextends({}, props, { ref: composedRefs })); }); /*#__PURE__*/ Object.assign($5cb92bef7577960e$export$4d5eb2109db14228, { displayName: $5cb92bef7577960e$var$BRANCH_NAME }); /* -----------------------------------------------------------------------------------------------*/ /** * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup` * to mimic layer dismissing behaviour present in OS. * Returns props to pass to the node we want to check for outside events. */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) { const handlePointerDownOutside = $kqwpH$useCallbackRef(onPointerDownOutside); const isPointerInsideReactTreeRef = $kqwpH$useRef(false); const handleClickRef = $kqwpH$useRef(()=>{}); $kqwpH$useEffect(()=>{ const handlePointerDown = (event)=>{ if (event.target && !isPointerInsideReactTreeRef.current) { const eventDetail = { originalEvent: event }; function handleAndDispatchPointerDownOutsideEvent() { $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, { discrete: true }); } /** * On touch devices, we need to wait for a click event because browsers implement * a ~350ms delay between the time the user stops touching the display and when the * browser executres events. We need to ensure we don't reactivate pointer-events within * this timeframe otherwise the browser may execute events that should have been prevented. * * Additionally, this also lets us deal automatically with cancellations when a click event * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc. * * This is why we also continuously remove the previous listener, because we cannot be * certain that it was raised, and therefore cleaned-up. */ if (event.pointerType === 'touch') { ownerDocument.removeEventListener('click', handleClickRef.current); handleClickRef.current = handleAndDispatchPointerDownOutsideEvent; ownerDocument.addEventListener('click', handleClickRef.current, { once: true }); } else handleAndDispatchPointerDownOutsideEvent(); } else // We need to remove the event listener in case the outside click has been canceled. // See: https://github.com/radix-ui/primitives/issues/2171 ownerDocument.removeEventListener('click', handleClickRef.current); isPointerInsideReactTreeRef.current = false; }; /** * if this hook executes in a component that mounts via a `pointerdown` event, the event * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid * this by delaying the event listener registration on the document. * This is not React specific, but rather how the DOM works, ie: * ``` * button.addEventListener('pointerdown', () => { * console.log('I will log'); * document.addEventListener('pointerdown', () => { * console.log('I will also log'); * }) * }); */ const timerId = window.setTimeout(()=>{ ownerDocument.addEventListener('pointerdown', handlePointerDown); }, 0); return ()=>{ window.clearTimeout(timerId); ownerDocument.removeEventListener('pointerdown', handlePointerDown); ownerDocument.removeEventListener('click', handleClickRef.current); }; }, [ ownerDocument, handlePointerDownOutside ]); return { // ensures we check React component tree (not just DOM tree) onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true }; } /** * Listens for when focus happens outside a react subtree. * Returns props to pass to the root (node) of the subtree we want to check. */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) { const handleFocusOutside = $kqwpH$useCallbackRef(onFocusOutside); const isFocusInsideReactTreeRef = $kqwpH$useRef(false); $kqwpH$useEffect(()=>{ const handleFocus = (event)=>{ if (event.target && !isFocusInsideReactTreeRef.current) { const eventDetail = { originalEvent: event }; $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, { discrete: false }); } }; ownerDocument.addEventListener('focusin', handleFocus); return ()=>ownerDocument.removeEventListener('focusin', handleFocus) ; }, [ ownerDocument, handleFocusOutside ]); return { onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true , onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false }; } function $5cb92bef7577960e$var$dispatchUpdate() { const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE); document.dispatchEvent(event); } function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) { const target = detail.originalEvent.target; const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail: detail }); if (handler) target.addEventListener(name, handler, { once: true }); if (discrete) $kqwpH$dispatchDiscreteCustomEvent(target, event); else target.dispatchEvent(event); } const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22; const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228; export {$5cb92bef7577960e$export$177fb62ff3ec1f22 as DismissableLayer, $5cb92bef7577960e$export$4d5eb2109db14228 as DismissableLayerBranch, $5cb92bef7577960e$export$be92b6f5f03c0fe9 as Root, $5cb92bef7577960e$export$aecb2ddcb55c95be as Branch}; //# sourceMappingURL=index.mjs.map