@tamagui/dismissable 2.7.7 → 3.0.0-beta.637.1

package/dist/esm/Dismissable.mjs

@@ -1,340 +1,300 @@
 import { useComposedRefs } from "@tamagui/compose-refs";
-import { Slot, View, composeEventHandlers } from "@tamagui/core";
+import { Slot, View, composeEventHandlers, createChangeEventDetails, createRefComponent } from "@tamagui/core";
 import { useEscapeKeydown } from "@tamagui/use-escape-keydown";
 import { useEvent } from "@tamagui/use-event";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { jsx } from "react/jsx-runtime";
+
 function dispatchDiscreteCustomEvent(target, event) {
-  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
+	if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 const DISMISSABLE_LAYER_NAME = "Dismissable";
 const CONTEXT_UPDATE = "dismissable.update";
-const POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside";
-const FOCUS_OUTSIDE = "dismissable.focusOutside";
 let originalBodyPointerEvents;
-const globalLayers = /* @__PURE__ */new Set();
-const layerChangeListeners = /* @__PURE__ */new Set();
+const globalLayers = /* @__PURE__ */ new Set();
+const layerChangeListeners = /* @__PURE__ */ new Set();
 let layersWithPointerEventsDisabledCount = 0;
 function notifyLayerChange() {
-  for (const listener of layerChangeListeners) {
-    listener();
-  }
+	for (const listener of layerChangeListeners) {
+		listener();
+	}
 }
 function getDismissableLayerCount() {
-  return globalLayers.size;
+	return globalLayers.size;
 }
 function debugDismissableLayers() {
-  const layers = Array.from(globalLayers);
-  console.log("[Dismissable] Active layers:", layers.length, layers);
-  return layers;
+	const layers = Array.from(globalLayers);
+	console.log("[Dismissable] Active layers:", layers.length, layers);
+	return layers;
 }
 function useHasDismissableLayers() {
-  const [count, setCount] = React.useState(() => globalLayers.size);
-  React.useEffect(() => {
-    setCount(globalLayers.size);
-    const update = () => setCount(globalLayers.size);
-    layerChangeListeners.add(update);
-    return () => {
-      layerChangeListeners.delete(update);
-    };
-  }, []);
-  return count > 0;
+	const [count, setCount] = React.useState(() => globalLayers.size);
+	React.useEffect(() => {
+		setCount(globalLayers.size);
+		const update = () => setCount(globalLayers.size);
+		layerChangeListeners.add(update);
+		return () => {
+			layerChangeListeners.delete(update);
+		};
+	}, []);
+	return count > 0;
 }
 const DismissableContext = React.createContext({
-  layers: /* @__PURE__ */new Set(),
-  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */new Set(),
-  branches: /* @__PURE__ */new Set()
+	layers: /* @__PURE__ */ new Set(),
+	layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+	branches: /* @__PURE__ */ new Set()
 });
 function useIsInsideDismissable(ref) {
-  const context = React.useContext(DismissableContext);
-  const [isInside, setIsInside] = React.useState(false);
-  React.useEffect(() => {
-    const check = () => {
-      const el = ref.current;
-      if (!el) {
-        setIsInside(false);
-        return;
-      }
-      for (const layer of context.layers) {
-        if (layer.contains(el)) {
-          setIsInside(true);
-          return;
-        }
-      }
-      setIsInside(false);
-    };
-    check();
-    document.addEventListener(CONTEXT_UPDATE, check);
-    return () => document.removeEventListener(CONTEXT_UPDATE, check);
-  }, [context.layers, ref]);
-  return isInside;
+	const context = React.useContext(DismissableContext);
+	const [isInside, setIsInside] = React.useState(false);
+	React.useEffect(() => {
+		const check = () => {
+			const el = ref.current;
+			if (!el) {
+				setIsInside(false);
+				return;
+			}
+			for (const layer of context.layers) {
+				if (layer.contains(el)) {
+					setIsInside(true);
+					return;
+				}
+			}
+			setIsInside(false);
+		};
+		check();
+		document.addEventListener(CONTEXT_UPDATE, check);
+		return () => document.removeEventListener(CONTEXT_UPDATE, check);
+	}, [context.layers, ref]);
+	return isInside;
 }
 function useDismissableLayersAbove(ref) {
-  const context = React.useContext(DismissableContext);
-  const [count, setCount] = React.useState(0);
-  React.useEffect(() => {
-    const check = () => {
-      const el = ref.current;
-      if (!el) {
-        setCount(0);
-        return;
-      }
-      let above = 0;
-      for (const layer of context.layers) {
-        if (layer.contains(el)) {
-          above++;
-        }
-      }
-      setCount(above);
-    };
-    check();
-    document.addEventListener(CONTEXT_UPDATE, check);
-    return () => document.removeEventListener(CONTEXT_UPDATE, check);
-  }, [context.layers, ref]);
-  return count;
+	const context = React.useContext(DismissableContext);
+	const [count, setCount] = React.useState(0);
+	React.useEffect(() => {
+		const check = () => {
+			const el = ref.current;
+			if (!el) {
+				setCount(0);
+				return;
+			}
+			let above = 0;
+			for (const layer of context.layers) {
+				if (layer.contains(el)) {
+					above++;
+				}
+			}
+			setCount(above);
+		};
+		check();
+		document.addEventListener(CONTEXT_UPDATE, check);
+		return () => document.removeEventListener(CONTEXT_UPDATE, check);
+	}, [context.layers, ref]);
+	return count;
 }
-const Dismissable = React.forwardRef((props, forwardedRef) => {
-  const {
-    disableOutsidePointerEvents = false,
-    forceUnmount,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    onDismiss,
-    asChild,
-    children,
-    branches: branchesProp,
-    ...layerProps
-  } = props;
-  const Comp = asChild ? Slot : View;
-  const context = React.useContext(DismissableContext);
-  const [node, setNode] = React.useState(null);
-  const [, force] = React.useState({});
-  const composedRefs = useComposedRefs(forwardedRef, node2 => setNode(node2));
-  const layers = Array.from(context.layers);
-  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
-  const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
-  const index = node ? layers.indexOf(node) : -1;
-  const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
-  const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
-  const pointerDownOutside = usePointerDownOutside(event => {
-    const target = event.target;
-    const branches = branchesProp || context.branches;
-    const isPointerDownOnBranch = [...branches].some(branch => branch.contains(target));
-    if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
-    onPointerDownOutside?.(event);
-    onInteractOutside?.(event);
-    if (!event.defaultPrevented) onDismiss?.();
-  });
-  const focusOutside = useFocusOutside(event => {
-    const target = event.target;
-    const branches = branchesProp || context.branches;
-    const isFocusInBranch = [...branches].some(branch => branch.contains(target));
-    if (isFocusInBranch) return;
-    onFocusOutside?.(event);
-    onInteractOutside?.(event);
-    if (!event.defaultPrevented) onDismiss?.();
-  });
-  const forceUnmountRef = React.useRef(forceUnmount);
-  React.useEffect(() => {
-    forceUnmountRef.current = forceUnmount;
-  }, [forceUnmount]);
-  useEscapeKeydown(event => {
-    if (forceUnmountRef.current) return;
-    const currentLayers = Array.from(context.layers);
-    const currentIndex = node ? currentLayers.indexOf(node) : -1;
-    const isHighestLayer = currentIndex === currentLayers.length - 1;
-    if (!isHighestLayer) return;
-    onEscapeKeyDown?.(event);
-    if (!event.defaultPrevented && onDismiss) {
-      event.preventDefault();
-      onDismiss();
-    }
-  });
-  React.useEffect(() => {
-    if (!node) return;
-    if (forceUnmount) return;
-    if (disableOutsidePointerEvents) {
-      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-        originalBodyPointerEvents = document.body.style.pointerEvents;
-        document.body.style.pointerEvents = "none";
-      }
-      context.layersWithOutsidePointerEventsDisabled.add(node);
-      layersWithPointerEventsDisabledCount++;
-    }
-    context.layers.add(node);
-    globalLayers.add(node);
-    if (disableOutsidePointerEvents || layersWithPointerEventsDisabledCount > 0) {
-      dispatchUpdate();
-    }
-    notifyLayerChange();
-    return () => {
-      if (disableOutsidePointerEvents) {
-        if (context.layersWithOutsidePointerEventsDisabled.size === 1) {
-          document.body.style.pointerEvents = originalBodyPointerEvents;
-        }
-      }
-    };
-  }, [node, disableOutsidePointerEvents, forceUnmount, context]);
-  React.useEffect(() => {
-    if (forceUnmount) return;
-    return () => {
-      if (!node) return;
-      const hadPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.has(node);
-      context.layers.delete(node);
-      context.layersWithOutsidePointerEventsDisabled.delete(node);
-      globalLayers.delete(node);
-      if (layersWithPointerEventsDisabledCount > 0) {
-        dispatchUpdate();
-      }
-      notifyLayerChange();
-      if (hadPointerEventsDisabled) {
-        layersWithPointerEventsDisabledCount--;
-      }
-    };
-  }, [node, context, forceUnmount]);
-  React.useEffect(() => {
-    const handleUpdate = () => {
-      if (layersWithPointerEventsDisabledCount > 0) {
-        force({});
-      }
-    };
-    document.addEventListener(CONTEXT_UPDATE, handleUpdate);
-    return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
-  }, []);
-  return /* @__PURE__ */jsx(Comp, {
-    ...layerProps,
-    ref: composedRefs,
-    ...(!asChild && {
-      display: "contents"
-    }),
-    pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
-    onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
-    onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
-    onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture),
-    children
-  });
+const Dismissable = createRefComponent((props, forwardedRef) => {
+	const { disableOutsidePointerEvents = false, forceUnmount, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss, asChild, children, branches: branchesProp, ...layerProps } = props;
+	const Comp = asChild ? Slot : View;
+	const context = React.useContext(DismissableContext);
+	const [node, setNode] = React.useState(null);
+	const [, force] = React.useState({});
+	const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
+	const layers = Array.from(context.layers);
+	const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+	const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+	const index = node ? layers.indexOf(node) : -1;
+	const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+	const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+	const pointerDownOutside = usePointerDownOutside((event) => {
+		const target = event.target;
+		const branches = branchesProp || context.branches;
+		const isPointerDownOnBranch = [...branches].some((branch) => branch.contains(target));
+		if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+		const details = createChangeEventDetails("outside-press", event, event.target, { interaction: "pointer" });
+		onPointerDownOutside?.(details);
+		onInteractOutside?.(details);
+		if (!details.isCanceled) onDismiss?.(details);
+	});
+	const focusOutside = useFocusOutside((event) => {
+		const target = event.target;
+		const branches = branchesProp || context.branches;
+		const isFocusInBranch = [...branches].some((branch) => branch.contains(target));
+		if (isFocusInBranch) return;
+		if (node && target.contains(node)) return;
+		const details = createChangeEventDetails("focus-out", event, event.target, { interaction: "focus" });
+		onFocusOutside?.(details);
+		onInteractOutside?.(details);
+		if (!details.isCanceled) onDismiss?.(details);
+	});
+	const forceUnmountRef = React.useRef(forceUnmount);
+	React.useEffect(() => {
+		forceUnmountRef.current = forceUnmount;
+	}, [forceUnmount]);
+	useEscapeKeydown((event) => {
+		if (event.defaultPrevented) return;
+		if (forceUnmountRef.current) return;
+		const currentLayers = Array.from(context.layers);
+		const currentIndex = node ? currentLayers.indexOf(node) : -1;
+		const isHighestLayer = currentIndex === currentLayers.length - 1;
+		if (!isHighestLayer) return;
+		const details = createChangeEventDetails("escape-key", event, event.target);
+		onEscapeKeyDown?.(details);
+		if (!details.isCanceled && onDismiss) {
+			event.preventDefault();
+			onDismiss(details);
+		}
+	});
+	React.useEffect(() => {
+		if (!node) return;
+		if (forceUnmount) return;
+		context.layers.add(node);
+		globalLayers.add(node);
+		dispatchUpdate();
+		notifyLayerChange();
+		return () => {
+			context.layers.delete(node);
+			globalLayers.delete(node);
+			dispatchUpdate();
+			notifyLayerChange();
+		};
+	}, [
+		node,
+		forceUnmount,
+		context
+	]);
+	React.useEffect(() => {
+		if (!node) return;
+		if (forceUnmount) return;
+		if (!disableOutsidePointerEvents) return;
+		if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+			originalBodyPointerEvents = document.body.style.pointerEvents;
+			document.body.style.pointerEvents = "none";
+		}
+		context.layersWithOutsidePointerEventsDisabled.add(node);
+		layersWithPointerEventsDisabledCount++;
+		dispatchUpdate();
+		notifyLayerChange();
+		return () => {
+			context.layersWithOutsidePointerEventsDisabled.delete(node);
+			if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+				document.body.style.pointerEvents = originalBodyPointerEvents;
+			}
+			dispatchUpdate();
+			notifyLayerChange();
+			layersWithPointerEventsDisabledCount--;
+		};
+	}, [
+		node,
+		disableOutsidePointerEvents,
+		forceUnmount,
+		context
+	]);
+	React.useEffect(() => {
+		const handleUpdate = () => {
+			if (layersWithPointerEventsDisabledCount > 0) {
+				force({});
+			}
+		};
+		document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+		return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+	}, []);
+	return /* @__PURE__ */ jsx(Comp, {
+		...layerProps,
+		ref: composedRefs,
+		...!asChild && { display: "contents" },
+		pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+		onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
+		onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
+		onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture),
+		children
+	});
 });
 Dismissable.displayName = DISMISSABLE_LAYER_NAME;
 const BRANCH_NAME = "DismissableBranch";
-const DismissableBranch = React.forwardRef((props, forwardedRef) => {
-  const {
-    branches: branchesProp,
-    ...rest
-  } = props;
-  const context = React.useContext(DismissableContext);
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  React.useEffect(() => {
-    const node = ref.current;
-    if (!(node instanceof HTMLElement)) return;
-    const branches = branchesProp || context.branches;
-    if (node && branches) {
-      branches.add(node);
-      return () => {
-        branches.delete(node);
-      };
-    }
-  }, [branchesProp, context.branches]);
-  return /* @__PURE__ */jsx(View, {
-    asChild: "except-style",
-    ...rest,
-    ref: composedRefs
-  });
+const DismissableBranch = createRefComponent((props, forwardedRef) => {
+	const { branches: branchesProp, ...rest } = props;
+	const context = React.useContext(DismissableContext);
+	const ref = React.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	React.useEffect(() => {
+		const node = ref.current;
+		if (!(node instanceof HTMLElement)) return;
+		const branches = branchesProp || context.branches;
+		if (node && branches) {
+			branches.add(node);
+			return () => {
+				branches.delete(node);
+			};
+		}
+	}, [branchesProp, context.branches]);
+	return /* @__PURE__ */ jsx(View, {
+		asChild: "except-style",
+		...rest,
+		ref: composedRefs
+	});
 });
 DismissableBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside) {
-  const handlePointerDownOutside = useEvent(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React.useRef(false);
-  const handleClickRef = React.useRef(() => {});
-  React.useEffect(() => {
-    const handlePointerDown = event => {
-      if (event.target && !isPointerInsideReactTreeRef.current) {
-        let handleAndDispatchPointerDownOutsideEvent = function () {
-          handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
-            discrete: true
-          });
-        };
-        const eventDetail = {
-          originalEvent: event
-        };
-        if (event.pointerType === "touch") {
-          document.removeEventListener("click", handleClickRef.current);
-          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
-          document.addEventListener("click", handleClickRef.current, {
-            once: true
-          });
-        } else {
-          handleAndDispatchPointerDownOutsideEvent();
-        }
-      }
-      isPointerInsideReactTreeRef.current = false;
-    };
-    const timerId = setTimeout(() => {
-      document.addEventListener("pointerdown", handlePointerDown);
-    }, 0);
-    return () => {
-      window.clearTimeout(timerId);
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("click", handleClickRef.current);
-    };
-  }, [handlePointerDownOutside]);
-  return {
-    // ensures we check React component tree (not just DOM tree)
-    onPointerDownCapture: () => {
-      isPointerInsideReactTreeRef.current = true;
-    }
-  };
+	const handlePointerDownOutside = useEvent(onPointerDownOutside);
+	const isPointerInsideReactTreeRef = React.useRef(false);
+	const handleClickRef = React.useRef(() => {});
+	React.useEffect(() => {
+		const handlePointerDown = (event) => {
+			if (event.target && !isPointerInsideReactTreeRef.current) {
+				let handlePointerDownOutsideEvent = function() {
+					if (handlePointerDownOutside) {
+						ReactDOM.flushSync(() => handlePointerDownOutside(event));
+					}
+				};
+				if (event.pointerType === "touch") {
+					document.removeEventListener("click", handleClickRef.current);
+					handleClickRef.current = handlePointerDownOutsideEvent;
+					document.addEventListener("click", handleClickRef.current, { once: true });
+				} else {
+					handlePointerDownOutsideEvent();
+				}
+			}
+			isPointerInsideReactTreeRef.current = false;
+		};
+		const timerId = setTimeout(() => {
+			document.addEventListener("pointerdown", handlePointerDown);
+		}, 0);
+		return () => {
+			window.clearTimeout(timerId);
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("click", handleClickRef.current);
+		};
+	}, [handlePointerDownOutside]);
+	return { onPointerDownCapture: () => {
+		isPointerInsideReactTreeRef.current = true;
+	} };
 }
 function useFocusOutside(onFocusOutside) {
-  const handleFocusOutside = useEvent(onFocusOutside);
-  const isFocusInsideReactTreeRef = React.useRef(false);
-  React.useEffect(() => {
-    const handleFocus = event => {
-      if (event.target && !isFocusInsideReactTreeRef.current) {
-        const eventDetail = {
-          originalEvent: event
-        };
-        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
-          discrete: false
-        });
-      }
-    };
-    document.addEventListener("focusin", handleFocus);
-    return () => document.removeEventListener("focusin", handleFocus);
-  }, [handleFocusOutside]);
-  return {
-    onFocusCapture: () => {
-      isFocusInsideReactTreeRef.current = true;
-    },
-    onBlurCapture: () => {
-      isFocusInsideReactTreeRef.current = false;
-    }
-  };
+	const handleFocusOutside = useEvent(onFocusOutside);
+	const isFocusInsideReactTreeRef = React.useRef(false);
+	React.useEffect(() => {
+		const handleFocus = (event) => {
+			if (event.target && !isFocusInsideReactTreeRef.current) {
+				handleFocusOutside?.(event);
+			}
+		};
+		document.addEventListener("focusin", handleFocus);
+		return () => document.removeEventListener("focusin", handleFocus);
+	}, [handleFocusOutside]);
+	return {
+		onFocusCapture: () => {
+			isFocusInsideReactTreeRef.current = true;
+		},
+		onBlurCapture: () => {
+			isFocusInsideReactTreeRef.current = false;
+		}
+	};
 }
 function dispatchUpdate() {
-  const event = new CustomEvent(CONTEXT_UPDATE);
-  document.dispatchEvent(event);
-}
-function handleAndDispatchCustomEvent(name, handler, detail, {
-  discrete
-}) {
-  const target = detail.originalEvent.target;
-  const event = new CustomEvent(name, {
-    bubbles: false,
-    cancelable: true,
-    detail
-  });
-  if (handler) target.addEventListener(name, handler, {
-    once: true
-  });
-  if (discrete) {
-    dispatchDiscreteCustomEvent(target, event);
-  } else {
-    target.dispatchEvent(event);
-  }
+	const event = new CustomEvent(CONTEXT_UPDATE);
+	document.dispatchEvent(event);
 }
+
 export { Dismissable, DismissableBranch, debugDismissableLayers, dispatchDiscreteCustomEvent, getDismissableLayerCount, useDismissableLayersAbove, useHasDismissableLayers, useIsInsideDismissable };
 //# sourceMappingURL=Dismissable.mjs.map