@tamagui/adapt 2.7.7 → 3.0.0-beta.1093.1

package/dist/esm/Adapt.mjs

@@ -1,196 +1,456 @@
 import { isAndroid, isIos, isTouchable, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { createStyledContext, useMedia } from "@tamagui/core";
 import { withStaticProperties } from "@tamagui/helpers";
-import { getPortal } from "@tamagui/native";
-import { PortalHost, PortalItem } from "@tamagui/portal";
 import { StackZIndexContext } from "@tamagui/z-index-stack";
-import React, { createContext, useContext, useId, useMemo } from "react";
+import React, { createContext, useContext, useId } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
-function createAdaptChildrenStore() {
-  let children = null;
-  const listeners = /* @__PURE__ */new Set();
-  return {
-    set(c) {
-      children = c;
-      for (const l of listeners) l();
-    },
-    get: () => children,
-    subscribe(callback) {
-      listeners.add(callback);
-      return () => listeners.delete(callback);
-    }
-  };
+
+function createAdaptSlotStore() {
+	const listeners = /* @__PURE__ */ new Set();
+	const store = {
+		element: null,
+		version: 0,
+		publish(element) {
+			store.element = element;
+		},
+		clear() {
+			store.element = null;
+		},
+		notify() {
+			store.version += 1;
+			for (const listener of listeners) {
+				listener();
+			}
+		},
+		getSnapshot() {
+			return store.version;
+		},
+		subscribe(callback) {
+			listeners.add(callback);
+			return () => {
+				listeners.delete(callback);
+			};
+		}
+	};
+	return store;
 }
-const AdaptChildrenStoreContext = createContext(null);
+const adaptContextKeys = [
+	"Contents",
+	"scopeName",
+	"portalName",
+	"active",
+	"setAdaptConfig",
+	"slot",
+	"handoff",
+	"targetFullyHidden",
+	"registerTarget",
+	"unregisterTarget",
+	"registerContents",
+	"unregisterContents",
+	"registerRenderCallback",
+	"unregisterRenderCallback"
+];
 const AdaptContext = createStyledContext({
-  Contents: null,
-  scopeName: "",
-  portalName: "",
-  platform: null,
-  setPlatform: x => {},
-  when: null,
-  setWhen: () => {}
-});
+	Contents: null,
+	scopeName: "",
+	portalName: "",
+	active: false,
+	setAdaptConfig: () => {},
+	slot: null,
+	handoff: {
+		hidden: true,
+		onTransition: () => {}
+	},
+	targetFullyHidden: true,
+	registerTarget: () => {},
+	unregisterTarget: () => {},
+	registerContents: () => {},
+	unregisterContents: () => {},
+	registerRenderCallback: () => {},
+	unregisterRenderCallback: () => {}
+}, { keys: adaptContextKeys });
+const AdaptCapabilitiesContext = createContext({});
 const LastAdaptContextScope = createContext("");
-const ProvideAdaptContext = ({
-  children,
-  ...context
-}) => {
-  const scope = context.scopeName || "";
-  const lastScope = useContext(LastAdaptContextScope);
-  return /* @__PURE__ */jsx(LastAdaptContextScope.Provider, {
-    value: lastScope || context.lastScope || "",
-    children: /* @__PURE__ */jsx(AdaptContext.Provider, {
-      scope,
-      lastScope: lastScope || context.lastScope,
-      ...context,
-      children
-    })
-  });
+const ProvideAdaptContext = ({ children, ...context }) => {
+	const scope = context.scopeName || "";
+	const lastScope = useContext(LastAdaptContextScope);
+	return /* @__PURE__ */ jsx(LastAdaptContextScope.Provider, {
+		value: lastScope || context.lastScope || "",
+		children: /* @__PURE__ */ jsx(AdaptContext.Provider, {
+			scope,
+			lastScope: lastScope || context.lastScope,
+			...context,
+			children
+		})
+	});
 };
-const useAdaptContext = scope => {
-  const lastScope = useContext(LastAdaptContextScope);
-  const adaptScope = scope ?? lastScope;
-  return AdaptContext.useStyledContext(adaptScope);
+const useAdaptContext = (scope) => {
+	const lastScope = useContext(LastAdaptContextScope);
+	const adaptScope = scope ?? lastScope;
+	return AdaptContext.useStyledContext(adaptScope);
 };
-const AdaptPortals = /* @__PURE__ */new Map();
-const AdaptParent = ({
-  children,
-  Contents,
-  scope,
-  portal
-}) => {
-  const id = useId();
-  const portalName = `AdaptPortal${scope}${id}`;
-  const childrenStoreRef = React.useRef(null);
-  if (!childrenStoreRef.current) childrenStoreRef.current = createAdaptChildrenStore();
-  const isTeleport = false;
-  const FinalContents = useMemo(() => {
-    if (Contents) return Contents;
-    if (AdaptPortals.has(portalName)) return AdaptPortals.get(portalName);
-    const element = () => {
-      return /* @__PURE__ */jsx(PortalHost, {
-        name: portalName,
-        forwardProps: typeof portal === "boolean" ? void 0 : portal?.forwardProps
-      }, id);
-    };
-    AdaptPortals.set(portalName, element);
-    return element;
-  }, [portalName, Contents, isTeleport]);
-  useIsomorphicLayoutEffect(() => {
-    AdaptPortals.set(portalName, FinalContents);
-    return () => {
-      AdaptPortals.delete(portalName);
-    };
-  }, [portalName, isTeleport]);
-  const [when, setWhen] = React.useState(null);
-  const [platform, setPlatform] = React.useState(null);
-  return /* @__PURE__ */jsx(AdaptChildrenStoreContext.Provider, {
-    value: childrenStoreRef.current,
-    children: /* @__PURE__ */jsx(LastAdaptContextScope.Provider, {
-      value: scope,
-      children: /* @__PURE__ */jsx(ProvideAdaptContext, {
-        Contents: FinalContents,
-        when,
-        platform,
-        setPlatform,
-        setWhen,
-        portalName,
-        scopeName: scope,
-        children
-      })
-    })
-  });
+function findAdaptConfig(children, scope) {
+	for (const child of React.Children.toArray(children)) {
+		if (!React.isValidElement(child)) continue;
+		if (child.type === React.Fragment) {
+			const found = findAdaptConfig(child.props.children, scope);
+			if (found) return found;
+			continue;
+		}
+		if (child.type === Adapt) {
+			const childProps = child.props;
+			if (childProps.scope == null || childProps.scope === scope) {
+				return childProps;
+			}
+		}
+	}
+	return null;
+}
+const AdaptParent = ({ children, adaptChildren, Contents, scope, open, onOpenChange, state }) => {
+	const id = useId();
+	const portalName = `AdaptPortal${scope}${id}`;
+	const slotRef = React.useRef(null);
+	if (!slotRef.current) {
+		slotRef.current = createAdaptSlotStore();
+	}
+	const staticConfig = React.useMemo(() => findAdaptConfig(adaptChildren, scope) ?? findAdaptConfig(children, scope), [
+		adaptChildren,
+		children,
+		scope
+	]);
+	const [publishedConfig, setPublishedConfig] = React.useState(null);
+	const rawActive = useAdaptIsActiveGiven(staticConfig ?? publishedConfig);
+	const staticConfigRef = React.useRef(staticConfig);
+	staticConfigRef.current = staticConfig;
+	const setAdaptConfig = React.useCallback((config) => {
+		if (staticConfigRef.current) return;
+		setPublishedConfig(config);
+	}, []);
+	const [exiting, setExiting] = React.useState(false);
+	const [present, setPresent] = React.useState(false);
+	const [targetFullyHidden, setTargetFullyHidden] = React.useState(!open);
+	const targetCountRef = React.useRef(0);
+	const contentsCountRef = React.useRef(0);
+	const renderCallbackCountRef = React.useRef(0);
+	const rawActiveRef = React.useRef(false);
+	const openRef = React.useRef(open);
+	const wasTargetHiddenRef = React.useRef(!rawActive);
+	const hasHadActiveTargetRef = React.useRef(false);
+	const shouldStartExit = !rawActive && present && Boolean(open);
+	const active = rawActive || exiting || shouldStartExit;
+	const targetHidden = !rawActive;
+	const skipNextAnimation = Boolean(rawActive && wasTargetHiddenRef.current && hasHadActiveTargetRef.current && open);
+	const releasePresenceLatch = React.useCallback(() => {
+		setExiting(false);
+		if (!rawActiveRef.current) {
+			setPresent(false);
+		}
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		if (shouldStartExit) {
+			setExiting(true);
+		}
+	}, [shouldStartExit]);
+	useIsomorphicLayoutEffect(() => {
+		rawActiveRef.current = rawActive;
+		openRef.current = open;
+		if (rawActive) {
+			hasHadActiveTargetRef.current = true;
+		}
+		wasTargetHiddenRef.current = targetHidden;
+		if (open && rawActive) {
+			setTargetFullyHidden(false);
+			return;
+		}
+		if (!open && !active) {
+			setTargetFullyHidden(true);
+		}
+	}, [
+		active,
+		open,
+		rawActive,
+		targetHidden
+	]);
+	useIsomorphicLayoutEffect(() => {
+		if (rawActive) {
+			setPresent(true);
+		} else if (!active) {
+			setPresent(false);
+		}
+		if (rawActive && exiting) {
+			setExiting(false);
+		}
+	}, [
+		active,
+		exiting,
+		rawActive
+	]);
+	const handoff = React.useMemo(() => ({
+		hidden: targetHidden,
+		skipNextAnimation,
+		onTransition(e) {
+			if (e.phase !== "end" || e.finished === false) return;
+			if (e.cause !== "close") {
+				setTargetFullyHidden(false);
+				return;
+			}
+			if (openRef.current && rawActiveRef.current) {
+				setTargetFullyHidden(false);
+				return;
+			}
+			setTargetFullyHidden(true);
+			releasePresenceLatch();
+		}
+	}), [
+		releasePresenceLatch,
+		skipNextAnimation,
+		targetHidden
+	]);
+	const registerTarget = React.useCallback(() => {
+		targetCountRef.current += 1;
+		if (process.env.NODE_ENV === "development" && targetCountRef.current > 1) {
+			console.error(`Adapt expected exactly one target in scope "${scope}", but ${targetCountRef.current} targets registered.`);
+		}
+	}, [scope]);
+	const unregisterTarget = React.useCallback(() => {
+		targetCountRef.current = Math.max(0, targetCountRef.current - 1);
+	}, []);
+	const registerContents = React.useCallback(() => {
+		contentsCountRef.current += 1;
+	}, []);
+	const unregisterContents = React.useCallback(() => {
+		contentsCountRef.current = Math.max(0, contentsCountRef.current - 1);
+	}, []);
+	const registerRenderCallback = React.useCallback(() => {
+		renderCallbackCountRef.current += 1;
+	}, []);
+	const unregisterRenderCallback = React.useCallback(() => {
+		renderCallbackCountRef.current = Math.max(0, renderCallbackCountRef.current - 1);
+	}, []);
+	React.useEffect(() => {
+		if (process.env.NODE_ENV !== "development") return;
+		if (!active) return;
+		const timer = setTimeout(() => {
+			if (rawActiveRef.current && targetCountRef.current === 0 && contentsCountRef.current === 0 && renderCallbackCountRef.current === 0) {
+				console.error(`Adapt is active in scope "${scope}" but no target registered with useAdaptTarget(), Adapt.Contents marker, or render callback consumed it.`);
+			}
+		});
+		return () => clearTimeout(timer);
+	}, [active, scope]);
+	const FinalContents = Contents || AdaptSlotContents;
+	return /* @__PURE__ */ jsx(LastAdaptContextScope.Provider, {
+		value: scope,
+		children: /* @__PURE__ */ jsx(ProvideAdaptContext, {
+			Contents: FinalContents,
+			active,
+			setAdaptConfig,
+			portalName,
+			scopeName: scope,
+			slot: slotRef.current,
+			open,
+			onOpenChange,
+			state,
+			handoff,
+			targetFullyHidden,
+			registerTarget,
+			unregisterTarget,
+			registerContents,
+			unregisterContents,
+			registerRenderCallback,
+			unregisterRenderCallback,
+			children
+		})
+	});
 };
-const AdaptContents = ({
-  scope,
-  ...rest
-}) => {
-  const context = useAdaptContext(scope);
-  if (!context?.Contents) throw new Error(process.env.NODE_ENV === "production" ? `tamagui.dev/docs/intro/errors#warning-002` : `You're rendering a Tamagui <Adapt /> component without nesting it inside a parent that is able to adapt.`);
-  return React.createElement(context.Contents, {
-    ...rest,
-    key: `stable`
-  });
+const AdaptContents = ({ scope, ...rest }) => {
+	const context = useAdaptContext(scope);
+	if (!context?.Contents) {
+		throw new Error(process.env.NODE_ENV === "production" ? `tamagui.dev/docs/intro/errors#warning-002` : `You're rendering a Tamagui <Adapt /> component without nesting it inside a parent that is able to adapt.`);
+	}
+	useIsomorphicLayoutEffect(() => {
+		if (!context.active) return;
+		context.registerContents();
+		return () => {
+			context.unregisterContents();
+		};
+	}, [
+		context.active,
+		context.registerContents,
+		context.unregisterContents
+	]);
+	return React.createElement(context.Contents, {
+		...rest,
+		scope,
+		key: `stable`
+	});
 };
 AdaptContents.shouldForwardSpace = true;
 const Adapt = withStaticProperties(function Adapt2(props) {
-  const {
-    platform,
-    when,
-    children,
-    scope
-  } = props;
-  const context = useAdaptContext(scope);
-  const enabled = useAdaptIsActiveGiven(props);
-  useIsomorphicLayoutEffect(() => {
-    context?.setWhen?.(when || enabled);
-    context?.setPlatform?.(platform || null);
-  }, [when, platform, enabled, context.setWhen, context.setPlatform]);
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      context?.setWhen?.(null);
-      context?.setPlatform?.(null);
-    };
-  }, []);
-  let output;
-  if (typeof children === "function") {
-    const Component = context?.Contents;
-    output = children(Component ? /* @__PURE__ */jsx(Component, {}) : null);
-  } else output = children;
-  return /* @__PURE__ */jsx(StackZIndexContext, {
-    children: !enabled ? null : output
-  });
-}, {
-  Contents: AdaptContents
-});
-const AdaptPortalContents = props => {
-  const isActive = useAdaptIsActive(props.scope);
-  const {
-    portalName
-  } = useAdaptContext(props.scope);
-  const childrenStore = useContext(AdaptChildrenStoreContext);
-  if (!isWeb && getPortal().state.type === "teleport" && childrenStore) return /* @__PURE__ */jsx(AdaptPortalTeleport, {
-    isActive,
-    store: childrenStore,
-    children: props.children
-  });
-  return /* @__PURE__ */jsx(PortalItem, {
-    passThrough: !isActive,
-    hostName: portalName,
-    children: props.children
-  });
+	const { children, platform, scope, when } = props;
+	const context = useAdaptContext(scope);
+	const enabled = context.active;
+	const isRenderCallback = typeof children === "function";
+	useIsomorphicLayoutEffect(() => {
+		context.setAdaptConfig({
+			when,
+			platform
+		});
+		return () => {
+			context.setAdaptConfig(null);
+		};
+	}, [
+		when,
+		platform,
+		context.setAdaptConfig
+	]);
+	useIsomorphicLayoutEffect(() => {
+		if (!enabled || !isRenderCallback) return;
+		context.registerRenderCallback();
+		return () => {
+			context.unregisterRenderCallback();
+		};
+	}, [
+		enabled,
+		isRenderCallback,
+		context.registerRenderCallback,
+		context.unregisterRenderCallback
+	]);
+	let output;
+	if (isRenderCallback) {
+		const Component = context?.Contents;
+		output = children(Component ? /* @__PURE__ */ jsx(Component, {}) : null, getAdaptRenderState(context));
+	} else {
+		output = children;
+	}
+	return /* @__PURE__ */ jsx(StackZIndexContext, { children: !enabled ? null : output });
+}, { Contents: AdaptContents });
+const AdaptPortalContents = (props) => {
+	const isActive = useAdaptIsActive(props.scope);
+	const { slot } = useAdaptContext(props.scope);
+	return /* @__PURE__ */ jsx(AdaptSlotPublisher, {
+		isActive,
+		slot,
+		children: props.children
+	});
+};
+function AdaptSlotContents({ scope }) {
+	const { slot } = useAdaptContext(scope);
+	React.useSyncExternalStore(slot?.subscribe ?? emptySubscribe, slot?.getSnapshot ?? emptySnapshot, slot?.getSnapshot ?? emptySnapshot);
+	return /* @__PURE__ */ jsx(Fragment, { children: slot?.element ?? null });
+}
+function AdaptSlotPublisher({ isActive, slot, children }) {
+	const publishedRef = React.useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		if (!slot) return;
+		const published = publishedRef.current;
+		if (published && published.isActive === isActive && published.element === children) {
+			return;
+		}
+		publishedRef.current = {
+			isActive,
+			element: children
+		};
+		if (isActive) {
+			slot.publish(children);
+		} else {
+			slot.clear();
+		}
+		slot.notify();
+	});
+	useIsomorphicLayoutEffect(() => {
+		return () => {
+			if (publishedRef.current?.isActive) {
+				slot?.clear();
+				slot?.notify();
+			}
+			publishedRef.current = null;
+		};
+	}, [slot]);
+	return isActive ? null : /* @__PURE__ */ jsx(Fragment, { children });
+}
+const emptySubscribe = () => () => {};
+const emptySnapshot = () => 0;
+const useAdaptIsActiveGiven = (config) => {
+	const media = useMedia();
+	const when = config?.when;
+	const platform = config?.platform;
+	if (when == null && platform == null) {
+		return false;
+	}
+	if (when === true) {
+		return true;
+	}
+	let enabled = false;
+	if (platform === "touch") enabled = isTouchable;
+	else if (platform === "native") enabled = !isWeb;
+	else if (platform === "web") enabled = isWeb;
+	else if (platform === "ios") enabled = isIos;
+	else if (platform === "android") enabled = isAndroid;
+	if (platform && enabled == false) {
+		return false;
+	}
+	if (when && typeof when === "string") {
+		enabled = media[when];
+	}
+	return enabled;
+};
+const useAdaptIsActive = (scope) => {
+	return useAdaptContext(scope).active;
 };
-function AdaptPortalTeleport({
-  isActive,
-  store,
-  children
-}) {
-  useIsomorphicLayoutEffect(() => {
-    if (isActive) store.set(children);else store.set(null);
-  });
-  useIsomorphicLayoutEffect(() => {
-    return () => store.set(null);
-  }, [store]);
-  return isActive ? null : /* @__PURE__ */jsx(Fragment, {
-    children
-  });
+function useAdaptTarget(scope) {
+	const context = useAdaptContext(scope);
+	useIsomorphicLayoutEffect(() => {
+		if (!context.active) return;
+		context.registerTarget();
+		return () => {
+			context.unregisterTarget();
+		};
+	}, [
+		context.active,
+		context.registerTarget,
+		context.unregisterTarget
+	]);
+	if (!context.active) {
+		return null;
+	}
+	return {
+		open: context.open,
+		onOpenChange: context.onOpenChange,
+		handoff: context.handoff,
+		state: context.state
+	};
 }
-const useAdaptIsActiveGiven = ({
-  when,
-  platform
-}) => {
-  const media = useMedia();
-  if (when == null && platform == null) return false;
-  if (when === true) return true;
-  let enabled = false;
-  if (platform === "touch") enabled = isTouchable;else if (platform === "native") enabled = !isWeb;else if (platform === "web") enabled = isWeb;else if (platform === "ios") enabled = isIos;else if (platform === "android") enabled = isAndroid;
-  if (platform && enabled == false) return false;
-  if (when && typeof when === "string") enabled = media[when];
-  return enabled;
+const AdaptCapabilities = ({ children, scroll, overlay, dismiss }) => {
+	const parent = useContext(AdaptCapabilitiesContext);
+	const value = React.useMemo(() => ({
+		scroll: scroll ?? parent.scroll,
+		overlay: overlay ?? parent.overlay,
+		dismiss: dismiss ?? parent.dismiss
+	}), [
+		dismiss,
+		overlay,
+		parent.dismiss,
+		parent.overlay,
+		parent.scroll,
+		scroll
+	]);
+	return /* @__PURE__ */ jsx(AdaptCapabilitiesContext.Provider, {
+		value,
+		children
+	});
 };
-const useAdaptIsActive = scope => {
-  return useAdaptIsActiveGiven(useAdaptContext(scope));
+const useAdaptedCapabilities = () => {
+	return useContext(AdaptCapabilitiesContext);
 };
-export { Adapt, AdaptContents, AdaptContext, AdaptParent, AdaptPortalContents, ProvideAdaptContext, useAdaptContext, useAdaptIsActive };
+function getAdaptRenderState(context) {
+	return {
+		active: context.active,
+		open: context.open,
+		onOpenChange: context.onOpenChange,
+		state: context.state,
+		handoff: context.handoff
+	};
+}
+
+export { Adapt, AdaptCapabilities, AdaptContents, AdaptContext, AdaptParent, AdaptPortalContents, ProvideAdaptContext, useAdaptContext, useAdaptIsActive, useAdaptTarget, useAdaptedCapabilities };
 //# sourceMappingURL=Adapt.mjs.map