123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283 |
- 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
|