@tamagui/adapt 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/Adapt.cjs

@@ -2,33 +2,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Adapt_exports = {};
 __export(Adapt_exports, {
   Adapt: () => Adapt,
@@ -41,70 +43,96 @@ __export(Adapt_exports, {
   useAdaptIsActive: () => useAdaptIsActive
 });
 module.exports = __toCommonJS(Adapt_exports);
-var import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_helpers = require("@tamagui/helpers"),
-  import_portal = require("@tamagui/portal"),
-  import_z_index_stack = require("@tamagui/z-index-stack"),
-  import_react = __toESM(require("react"), 1),
-  import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_helpers = require("@tamagui/helpers");
+var import_native = require("@tamagui/native");
+var import_portal = require("@tamagui/portal");
+var import_z_index_stack = require("@tamagui/z-index-stack");
+var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime = require("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);
+    }
+  };
+}
+const AdaptChildrenStoreContext = (0, import_react.createContext)(null);
 const AdaptContext = (0, import_core.createStyledContext)({
-    Contents: null,
-    scopeName: "",
-    portalName: "",
-    platform: null,
-    setPlatform: x => {},
-    when: null,
-    setChildren: null,
-    setWhen: () => {}
-  }),
-  LastAdaptContextScope = (0, import_react.createContext)(""),
-  ProvideAdaptContext = ({
-    children,
-    ...context
-  }) => {
-    const scope = context.scopeName || "",
-      lastScope = (0, import_react.useContext)(LastAdaptContextScope);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(LastAdaptContextScope.Provider, {
-      value: lastScope || context.lastScope || "",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AdaptContext.Provider, {
-        scope,
-        lastScope: lastScope || context.lastScope,
-        ...context,
-        children
-      })
-    });
-  },
-  useAdaptContext = scope => {
-    const lastScope = (0, import_react.useContext)(LastAdaptContextScope),
-      adaptScope = scope ?? lastScope;
-    return AdaptContext.useStyledContext(adaptScope);
-  },
-  AdaptPortals = /* @__PURE__ */new Map(),
-  AdaptParent = ({
-    children,
-    Contents,
-    scope,
-    portal
-  }) => {
-    const id = (0, import_react.useId)(),
-      portalName = `AdaptPortal${scope}${id}`,
-      FinalContents = (0, import_react.useMemo)(() => {
-        if (Contents) return Contents;
-        if (AdaptPortals.has(portalName)) return AdaptPortals.get(portalName);
-        const element = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
-          name: portalName,
-          forwardProps: typeof portal == "boolean" ? void 0 : portal?.forwardProps
-        }, id);
-        return AdaptPortals.set(portalName, element), element;
-      }, [portalName, Contents]);
-    (0, import_constants.useIsomorphicLayoutEffect)(() => (AdaptPortals.set(portalName, FinalContents), () => {
+  Contents: null,
+  scopeName: "",
+  portalName: "",
+  platform: null,
+  setPlatform: x => {},
+  when: null,
+  setWhen: () => {}
+});
+const LastAdaptContextScope = (0, import_react.createContext)("");
+const ProvideAdaptContext = ({
+  children,
+  ...context
+}) => {
+  const scope = context.scopeName || "";
+  const lastScope = (0, import_react.useContext)(LastAdaptContextScope);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(LastAdaptContextScope.Provider, {
+    value: lastScope || context.lastScope || "",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AdaptContext.Provider, {
+      scope,
+      lastScope: lastScope || context.lastScope,
+      ...context,
+      children
+    })
+  });
+};
+const useAdaptContext = scope => {
+  const lastScope = (0, import_react.useContext)(LastAdaptContextScope);
+  const adaptScope = scope ?? lastScope;
+  return AdaptContext.useStyledContext(adaptScope);
+};
+const AdaptPortals = /* @__PURE__ */new Map();
+const AdaptParent = ({
+  children,
+  Contents,
+  scope,
+  portal
+}) => {
+  const id = (0, import_react.useId)();
+  const portalName = `AdaptPortal${scope}${id}`;
+  const childrenStoreRef = import_react.default.useRef(null);
+  if (!childrenStoreRef.current) childrenStoreRef.current = createAdaptChildrenStore();
+  const isTeleport = false;
+  const FinalContents = (0, import_react.useMemo)(() => {
+    if (Contents) return Contents;
+    if (AdaptPortals.has(portalName)) return AdaptPortals.get(portalName);
+    const element = () => {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
+        name: portalName,
+        forwardProps: typeof portal === "boolean" ? void 0 : portal?.forwardProps
+      }, id);
+    };
+    AdaptPortals.set(portalName, element);
+    return element;
+  }, [portalName, Contents, isTeleport]);
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    AdaptPortals.set(portalName, FinalContents);
+    return () => {
       AdaptPortals.delete(portalName);
-    }), [portalName]);
-    const [when, setWhen] = import_react.default.useState(null),
-      [platform, setPlatform] = import_react.default.useState(null),
-      [children2, setChildren] = import_react.default.useState(null);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(LastAdaptContextScope.Provider, {
+    };
+  }, [portalName, isTeleport]);
+  const [when, setWhen] = import_react.default.useState(null);
+  const [platform, setPlatform] = import_react.default.useState(null);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AdaptChildrenStoreContext.Provider, {
+    value: childrenStoreRef.current,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(LastAdaptContextScope.Provider, {
       value: scope,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProvideAdaptContext, {
         Contents: FinalContents,
@@ -112,74 +140,99 @@ const AdaptContext = (0, import_core.createStyledContext)({
         platform,
         setPlatform,
         setWhen,
-        setChildren,
         portalName,
         scopeName: scope,
         children
       })
-    });
-  },
-  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 import_react.default.createElement(context.Contents, {
-      ...rest,
-      key: "stable"
-    });
-  };
-AdaptContents.shouldForwardSpace = !0;
-const Adapt = (0, import_helpers.withStaticProperties)(function (props) {
-    const {
-        platform,
-        when,
-        children,
-        scope
-      } = props,
-      context = useAdaptContext(scope),
-      enabled = useAdaptIsActiveGiven(props);
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      context?.setWhen?.(when || enabled), context?.setPlatform?.(platform || null);
-    }, [when, platform, enabled, context.setWhen, context.setPlatform]), (0, import_constants.useIsomorphicLayoutEffect)(() => () => {
-      context?.setWhen?.(null), context?.setPlatform?.(null);
-    }, []);
-    let output;
-    if (typeof children == "function") {
-      const Component = context?.Contents;
-      output = children(Component ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}) : null);
-    } else output = children;
-    return (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      typeof children == "function" && output !== void 0 && context?.setChildren(output);
-    }, [output]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_z_index_stack.StackZIndexContext, {
-      children: enabled ? output : null
-    });
-  }, {
-    Contents: AdaptContents
-  }),
-  AdaptPortalContents = props => {
-    const isActive = useAdaptIsActive(props.scope),
-      {
-        portalName
-      } = useAdaptContext(props.scope);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
-      passThrough: !isActive,
-      hostName: portalName,
-      children: props.children
-    });
-  },
-  useAdaptIsActiveGiven = ({
+    })
+  });
+};
+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 import_react.default.createElement(context.Contents, {
+    ...rest,
+    key: `stable`
+  });
+};
+AdaptContents.shouldForwardSpace = true;
+const Adapt = (0, import_helpers.withStaticProperties)(function Adapt2(props) {
+  const {
+    platform,
     when,
-    platform
-  }) => {
-    const media = (0, import_core.useMedia)();
-    if (when == null && platform == null) return !1;
-    if (when === !0) return !0;
-    let enabled = !1;
-    return platform === "touch" ? enabled = import_constants.isTouchable : platform === "native" ? enabled = !import_constants.isWeb : platform === "web" ? enabled = import_constants.isWeb : platform === "ios" ? enabled = import_constants.isIos : platform === "android" && (enabled = import_constants.isAndroid), platform && enabled == !1 ? !1 : (when && typeof when == "string" && (enabled = media[when]), enabled);
-  },
-  useAdaptIsActive = scope => {
-    const props = useAdaptContext(scope);
-    return useAdaptIsActiveGiven(props);
-  };
+    children,
+    scope
+  } = props;
+  const context = useAdaptContext(scope);
+  const enabled = useAdaptIsActiveGiven(props);
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    context?.setWhen?.(when || enabled);
+    context?.setPlatform?.(platform || null);
+  }, [when, platform, enabled, context.setWhen, context.setPlatform]);
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    return () => {
+      context?.setWhen?.(null);
+      context?.setPlatform?.(null);
+    };
+  }, []);
+  let output;
+  if (typeof children === "function") {
+    const Component = context?.Contents;
+    output = children(Component ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {}) : null);
+  } else output = children;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_z_index_stack.StackZIndexContext, {
+    children: !enabled ? null : output
+  });
+}, {
+  Contents: AdaptContents
+});
+const AdaptPortalContents = props => {
+  const isActive = useAdaptIsActive(props.scope);
+  const {
+    portalName
+  } = useAdaptContext(props.scope);
+  const childrenStore = (0, import_react.useContext)(AdaptChildrenStoreContext);
+  if (!import_constants.isWeb && (0, import_native.getPortal)().state.type === "teleport" && childrenStore) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AdaptPortalTeleport, {
+    isActive,
+    store: childrenStore,
+    children: props.children
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
+    passThrough: !isActive,
+    hostName: portalName,
+    children: props.children
+  });
+};
+function AdaptPortalTeleport({
+  isActive,
+  store,
+  children
+}) {
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (!isActive) return;
+    store.set(children);
+    return () => store.set(null);
+  });
+  return isActive ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children
+  });
+}
+const useAdaptIsActiveGiven = ({
+  when,
+  platform
+}) => {
+  const media = (0, import_core.useMedia)();
+  if (when == null && platform == null) return false;
+  if (when === true) return true;
+  let enabled = false;
+  if (platform === "touch") enabled = import_constants.isTouchable;else if (platform === "native") enabled = !import_constants.isWeb;else if (platform === "web") enabled = import_constants.isWeb;else if (platform === "ios") enabled = import_constants.isIos;else if (platform === "android") enabled = import_constants.isAndroid;
+  if (platform && enabled == false) return false;
+  if (when && typeof when === "string") enabled = media[when];
+  return enabled;
+};
+const useAdaptIsActive = scope => {
+  return useAdaptIsActiveGiven(useAdaptContext(scope));
+};