@tamagui/portal 1.0.0-beta.8 → 1.0.1-beta.101

package/dist/cjs/Portal.js

@@ -18,7 +18,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -44,14 +43,17 @@ var import_stacks = require("@tamagui/stacks");
 var React = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_react_native = require("react-native");
-const Portal = /* @__PURE__ */ __name((props) => {
+const Portal = (props) => {
   const contents = /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadValues({
     pointerEvents: "none",
-    fullscreen: true
+    fullscreen: true,
+    position: import_core.isWeb ? "fixed" : "absolute"
   }, props));
   if (!import_core.isWeb) {
     return /* @__PURE__ */ React.createElement(import_react_native.Modal, {
-      visible: true
+      visible: true,
+      transparent: true,
+      pointerEvents: "none"
     }, contents);
   }
   const [hostElement, setHostElement] = React.useState(null);
@@ -63,7 +65,7 @@ const Portal = /* @__PURE__ */ __name((props) => {
     return (0, import_react_dom.createPortal)(contents, hostElement);
   }
   return null;
-}, "Portal");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Portal

package/dist/cjs/Portal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Portal.tsx"],
-  "sourcesContent": ["import '@tamagui/polyfill-dev'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { Modal } from 'react-native'\n\n// todo extract to package\nexport const Portal = (props: YStackProps) => {\n  const contents = <YStack pointerEvents=\"none\" fullscreen {...props} />\n  if (!isWeb) {\n    return <Modal visible>{contents}</Modal>\n  }\n  const [hostElement, setHostElement] = React.useState<any>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    setHostElement(globalThis.document?.body)\n  }, [])\n\n  if (hostElement) {\n    return createPortal(contents, hostElement)\n  }\n  // ssr return null\n  return null\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAO;AAEP,kBAAiD;AACjD,oBAAoC;AACpC,YAAuB;AACvB,uBAA6B;AAC7B,0BAAsB;AAGf,MAAM,SAAS,wBAAC,UAAuB;AAC5C,QAAM,WAAW,oCAAC;AAAA,IAAO,eAAc;AAAA,IAAO,YAAU;AAAA,KAAK,MAAO;AACpE,MAAI,CAAC,mBAAO;AACV,WAAO,oCAAC;AAAA,MAAM,SAAO;AAAA,OAAE,QAAS;AAAA,EAClC;AACA,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAc,IAAI;AAE9D,6CAA0B,MAAM;AAhBlC;AAiBI,mBAAe,iBAAW,aAAX,mBAAqB,IAAI;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa;AACf,WAAO,mCAAa,UAAU,WAAW;AAAA,EAC3C;AAEA,SAAO;AACT,GAhBsB;",
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport '@tamagui/polyfill-dev'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { Modal } from 'react-native'\n\nexport type PortalProps = YStackProps\n\nexport const Portal = (props: PortalProps) => {\n  const contents = (\n    <YStack\n      pointerEvents=\"none\"\n      fullscreen\n      // @ts-expect-error ok on web\n      position={isWeb ? 'fixed' : 'absolute'}\n      {...props}\n    />\n  )\n\n  if (!isWeb) {\n    // check if theme stays in context here\n    return (\n      <Modal visible transparent pointerEvents=\"none\">\n        {contents}\n      </Modal>\n    )\n  }\n\n  const [hostElement, setHostElement] = React.useState<any>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    setHostElement(globalThis.document?.body)\n  }, [])\n\n  if (hostElement) {\n    return createPortal(contents, hostElement)\n  }\n\n  // ssr return null\n  return null\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAAO;AAEP,kBAAiD;AACjD,oBAAoC;AACpC,YAAuB;AACvB,uBAA6B;AAC7B,0BAAsB;AAIf,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM,WACJ,oCAAC;AAAA,IACC,eAAc;AAAA,IACd,YAAU;AAAA,IAEV,UAAU,oBAAQ,UAAU;AAAA,KACxB,MACN;AAGF,MAAI,CAAC,mBAAO;AAEV,WACE,oCAAC;AAAA,MAAM,SAAO;AAAA,MAAC,aAAW;AAAA,MAAC,eAAc;AAAA,OACtC,QACH;AAAA,EAEJ;AAEA,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAc,IAAI;AAE9D,6CAA0B,MAAM;AAjClC;AAkCI,mBAAe,iBAAW,aAAX,mBAAqB,IAAI;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa;AACf,WAAO,mCAAa,UAAU,WAAW;AAAA,EAC3C;AAGA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/Portal.js

@@ -1,20 +1,36 @@
 var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import "@tamagui/polyfill-dev";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/core";
 import { YStack } from "@tamagui/stacks";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Modal } from "react-native";
-const Portal = /* @__PURE__ */ __name((props) => {
-  const contents = /* @__PURE__ */ React.createElement(YStack, {
+const Portal = (props) => {
+  const contents = /* @__PURE__ */ React.createElement(YStack, __spreadValues({
     pointerEvents: "none",
     fullscreen: true,
-    ...props
-  });
+    position: isWeb ? "fixed" : "absolute"
+  }, props));
   if (!isWeb) {
     return /* @__PURE__ */ React.createElement(Modal, {
-      visible: true
+      visible: true,
+      transparent: true,
+      pointerEvents: "none"
     }, contents);
   }
   const [hostElement, setHostElement] = React.useState(null);
@@ -26,7 +42,7 @@ const Portal = /* @__PURE__ */ __name((props) => {
     return createPortal(contents, hostElement);
   }
   return null;
-}, "Portal");
+};
 export {
   Portal
 };

package/dist/esm/Portal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Portal.tsx"],
-  "sourcesContent": ["import '@tamagui/polyfill-dev'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { Modal } from 'react-native'\n\n// todo extract to package\nexport const Portal = (props: YStackProps) => {\n  const contents = <YStack pointerEvents=\"none\" fullscreen {...props} />\n  if (!isWeb) {\n    return <Modal visible>{contents}</Modal>\n  }\n  const [hostElement, setHostElement] = React.useState<any>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    setHostElement(globalThis.document?.body)\n  }, [])\n\n  if (hostElement) {\n    return createPortal(contents, hostElement)\n  }\n  // ssr return null\n  return null\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AACA;AACA;AAGO,MAAM,SAAS,wBAAC,UAAuB;AAC5C,QAAM,WAAW,oCAAC;AAAA,IAAO,eAAc;AAAA,IAAO,YAAU;AAAA,OAAK;AAAA,GAAO;AACpE,MAAI,CAAC,OAAO;AACV,WAAO,oCAAC;AAAA,MAAM,SAAO;AAAA,OAAE,QAAS;AAAA,EAClC;AACA,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAc,IAAI;AAE9D,4BAA0B,MAAM;AAhBlC;AAiBI,mBAAe,iBAAW,aAAX,mBAAqB,IAAI;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa;AACf,WAAO,aAAa,UAAU,WAAW;AAAA,EAC3C;AAEA,SAAO;AACT,GAhBsB;",
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport '@tamagui/polyfill-dev'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { Modal } from 'react-native'\n\nexport type PortalProps = YStackProps\n\nexport const Portal = (props: PortalProps) => {\n  const contents = (\n    <YStack\n      pointerEvents=\"none\"\n      fullscreen\n      // @ts-expect-error ok on web\n      position={isWeb ? 'fixed' : 'absolute'}\n      {...props}\n    />\n  )\n\n  if (!isWeb) {\n    // check if theme stays in context here\n    return (\n      <Modal visible transparent pointerEvents=\"none\">\n        {contents}\n      </Modal>\n    )\n  }\n\n  const [hostElement, setHostElement] = React.useState<any>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    setHostElement(globalThis.document?.body)\n  }, [])\n\n  if (hostElement) {\n    return createPortal(contents, hostElement)\n  }\n\n  // ssr return null\n  return null\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AACA;AAEA;AACA;AACA;AACA;AACA;AAIO,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM,WACJ,oCAAC;AAAA,IACC,eAAc;AAAA,IACd,YAAU;AAAA,IAEV,UAAU,QAAQ,UAAU;AAAA,KACxB,MACN;AAGF,MAAI,CAAC,OAAO;AAEV,WACE,oCAAC;AAAA,MAAM,SAAO;AAAA,MAAC,aAAW;AAAA,MAAC,eAAc;AAAA,OACtC,QACH;AAAA,EAEJ;AAEA,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAc,IAAI;AAE9D,4BAA0B,MAAM;AAjClC;AAkCI,mBAAe,iBAAW,aAAX,mBAAqB,IAAI;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa;AACf,WAAO,aAAa,UAAU,WAAW;AAAA,EAC3C;AAGA,SAAO;AACT;",
   "names": []
 }

package/dist/jsx/Portal.js

@@ -1,15 +1,13 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import "@tamagui/polyfill-dev";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/core";
 import { YStack } from "@tamagui/stacks";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Modal } from "react-native";
-const Portal = /* @__PURE__ */ __name((props) => {
-  const contents = <YStack pointerEvents="none" fullscreen {...props} />;
+const Portal = (props) => {
+  const contents = <YStack pointerEvents="none" fullscreen position={isWeb ? "fixed" : "absolute"} {...props} />;
   if (!isWeb) {
-    return <Modal visible>{contents}</Modal>;
+    return <Modal visible transparent pointerEvents="none">{contents}</Modal>;
   }
   const [hostElement, setHostElement] = React.useState(null);
   useIsomorphicLayoutEffect(() => {
@@ -20,7 +18,8 @@ const Portal = /* @__PURE__ */ __name((props) => {
     return createPortal(contents, hostElement);
   }
   return null;
-}, "Portal");
+};
 export {
   Portal
 };
+//# sourceMappingURL=Portal.js.map

package/dist/jsx/Portal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Portal.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport '@tamagui/polyfill-dev'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { Modal } from 'react-native'\n\nexport type PortalProps = YStackProps\n\nexport const Portal = (props: PortalProps) => {\n  const contents = (\n    <YStack\n      pointerEvents=\"none\"\n      fullscreen\n      // @ts-expect-error ok on web\n      position={isWeb ? 'fixed' : 'absolute'}\n      {...props}\n    />\n  )\n\n  if (!isWeb) {\n    // check if theme stays in context here\n    return (\n      <Modal visible transparent pointerEvents=\"none\">\n        {contents}\n      </Modal>\n    )\n  }\n\n  const [hostElement, setHostElement] = React.useState<any>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    setHostElement(globalThis.document?.body)\n  }, [])\n\n  if (hostElement) {\n    return createPortal(contents, hostElement)\n  }\n\n  // ssr return null\n  return null\n}\n"],
+  "mappings": "AACA;AAEA;AACA;AACA;AACA;AACA;AAIO,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM,WACJ,CAAC,OACC,cAAc,OACd,WAEA,UAAU,QAAQ,UAAU,gBACxB,OACN;AAGF,MAAI,CAAC,OAAO;AAEV,WACE,CAAC,MAAM,QAAQ,YAAY,cAAc,QACtC,SACH,EAFC;AAAA,EAIL;AAEA,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAc,IAAI;AAE9D,4BAA0B,MAAM;AAjClC;AAkCI,mBAAe,iBAAW,aAAX,mBAAqB,IAAI;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa;AACf,WAAO,aAAa,UAAU,WAAW;AAAA,EAC3C;AAGA,SAAO;AACT;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -1 +1,2 @@
 export * from "./Portal";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export * from './Portal'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tamagui/portal",
-  "version": "1.0.0-beta.8",
-  "sideEffects": true,
+  "version": "1.0.1-beta.101",
   "source": "src/index.ts",
-  "typings": "types",
+  "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -18,7 +18,7 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/stacks": "^1.0.0-beta.8"
+    "@tamagui/stacks": "^1.0.1-beta.101"
   },
   "peerDependencies": {
     "react": "*",
@@ -26,8 +26,8 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-beta.8",
-    "@types/react-native": "^0.67.3",
+    "@tamagui/build": "^1.0.1-beta.101",
+    "@types/react-native": "^0.69.2",
     "react": "*",
     "react-dom": "*",
     "react-native": "*"

package/src/Portal.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import '@tamagui/polyfill-dev'
+
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'
+import { YStack, YStackProps } from '@tamagui/stacks'
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { Modal } from 'react-native'
+
+export type PortalProps = YStackProps
+
+export const Portal = (props: PortalProps) => {
+  const contents = (
+    <YStack
+      pointerEvents="none"
+      fullscreen
+      // @ts-expect-error ok on web
+      position={isWeb ? 'fixed' : 'absolute'}
+      {...props}
+    />
+  )
+
+  if (!isWeb) {
+    // check if theme stays in context here
+    return (
+      <Modal visible transparent pointerEvents="none">
+        {contents}
+      </Modal>
+    )
+  }
+
+  const [hostElement, setHostElement] = React.useState<any>(null)
+
+  useIsomorphicLayoutEffect(() => {
+    setHostElement(globalThis.document?.body)
+  }, [])
+
+  if (hostElement) {
+    return createPortal(contents, hostElement)
+  }
+
+  // ssr return null
+  return null
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './Portal'

package/types/Portal.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import '@tamagui/polyfill-dev';
 import { YStackProps } from '@tamagui/stacks';
-export declare const Portal: (props: YStackProps) => JSX.Element | null;
+export declare type PortalProps = YStackProps;
+export declare const Portal: (props: PortalProps) => JSX.Element | null;
 //# sourceMappingURL=Portal.d.ts.map

package/types/Portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAA;AAG9B,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAMrD,eAAO,MAAM,MAAM,UAAW,WAAW,uBAgBxC,CAAA"}
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAA;AAG9B,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAKrD,oBAAY,WAAW,GAAG,WAAW,CAAA;AAErC,eAAO,MAAM,MAAM,UAAW,WAAW,uBAgCxC,CAAA"}