@tamagui/portal 1.0.1-beta.103 → 1.0.1-beta.104

package/dist/cjs/Portal.js

@@ -18,6 +18,18 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -43,23 +55,26 @@ 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 = (props) => {
+const Portal = (_a) => {
+  var _b = _a, { visible } = _b, props = __objRest(_b, ["visible"]);
   const contents = /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadValues({
-    pointerEvents: "none",
+    pointerEvents: "box-none",
     fullscreen: true,
     position: import_core.isWeb ? "fixed" : "absolute"
   }, props));
   if (!import_core.isWeb) {
     return /* @__PURE__ */ React.createElement(import_react_native.Modal, {
-      visible: true,
+      presentationStyle: "overFullScreen",
+      hardwareAccelerated: true,
+      visible,
       transparent: true,
-      pointerEvents: "none"
+      pointerEvents: "box-none"
     }, contents);
   }
   const [hostElement, setHostElement] = React.useState(null);
   (0, import_core.useIsomorphicLayoutEffect)(() => {
-    var _a;
-    setHostElement((_a = globalThis.document) == null ? void 0 : _a.body);
+    var _a2;
+    setHostElement((_a2 = globalThis.document) == null ? void 0 : _a2.body);
   }, []);
   if (hostElement) {
     return (0, import_react_dom.createPortal)(contents, hostElement);

package/dist/cjs/Portal.js.map

@@ -1,7 +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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;",
+  "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  visible?: boolean\n}\n\nexport const Portal = ({ visible, ...props }: PortalProps) => {\n  const contents = (\n    <YStack\n      pointerEvents=\"box-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\n        presentationStyle=\"overFullScreen\"\n        hardwareAccelerated\n        visible={visible}\n        transparent\n        pointerEvents=\"box-none\"\n      >\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;AAMf,MAAM,SAAS,CAAC,OAAuC;AAAvC,eAAE,cAAF,IAAc,kBAAd,IAAc,CAAZ;AACvB,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,MACC,mBAAkB;AAAA,MAClB,qBAAmB;AAAA,MACnB;AAAA,MACA,aAAW;AAAA,MACX,eAAc;AAAA,OAEb,QACH;AAAA,EAEJ;AAEA,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAc,IAAI;AAE9D,6CAA0B,MAAM;AAzClC;AA0CI,mBAAe,kBAAW,aAAX,oBAAqB,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

@@ -14,29 +14,44 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 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 = (props) => {
+const Portal = (_a) => {
+  var _b = _a, { visible } = _b, props = __objRest(_b, ["visible"]);
   const contents = /* @__PURE__ */ React.createElement(YStack, __spreadValues({
-    pointerEvents: "none",
+    pointerEvents: "box-none",
     fullscreen: true,
     position: isWeb ? "fixed" : "absolute"
   }, props));
   if (!isWeb) {
     return /* @__PURE__ */ React.createElement(Modal, {
-      visible: true,
+      presentationStyle: "overFullScreen",
+      hardwareAccelerated: true,
+      visible,
       transparent: true,
-      pointerEvents: "none"
+      pointerEvents: "box-none"
     }, contents);
   }
   const [hostElement, setHostElement] = React.useState(null);
   useIsomorphicLayoutEffect(() => {
-    var _a;
-    setHostElement((_a = globalThis.document) == null ? void 0 : _a.body);
+    var _a2;
+    setHostElement((_a2 = globalThis.document) == null ? void 0 : _a2.body);
   }, []);
   if (hostElement) {
     return createPortal(contents, hostElement);

package/dist/esm/Portal.js.map

@@ -1,7 +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,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;",
+  "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  visible?: boolean\n}\n\nexport const Portal = ({ visible, ...props }: PortalProps) => {\n  const contents = (\n    <YStack\n      pointerEvents=\"box-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\n        presentationStyle=\"overFullScreen\"\n        hardwareAccelerated\n        visible={visible}\n        transparent\n        pointerEvents=\"box-none\"\n      >\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;AAMO,MAAM,SAAS,CAAC,OAAuC;AAAvC,eAAE,cAAF,IAAc,kBAAd,IAAc,CAAZ;AACvB,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,MACC,mBAAkB;AAAA,MAClB,qBAAmB;AAAA,MACnB;AAAA,MACA,aAAW;AAAA,MACX,eAAc;AAAA,OAEb,QACH;AAAA,EAEJ;AAEA,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAc,IAAI;AAE9D,4BAA0B,MAAM;AAzClC;AA0CI,mBAAe,kBAAW,aAAX,oBAAqB,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

@@ -4,10 +4,10 @@ import { YStack } from "@tamagui/stacks";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Modal } from "react-native";
-const Portal = (props) => {
-  const contents = <YStack pointerEvents="none" fullscreen position={isWeb ? "fixed" : "absolute"} {...props} />;
+const Portal = ({ visible, ...props }) => {
+  const contents = <YStack pointerEvents="box-none" fullscreen position={isWeb ? "fixed" : "absolute"} {...props} />;
   if (!isWeb) {
-    return <Modal visible transparent pointerEvents="none">{contents}</Modal>;
+    return <Modal presentationStyle="overFullScreen" hardwareAccelerated visible={visible} transparent pointerEvents="box-none">{contents}</Modal>;
   }
   const [hostElement, setHostElement] = React.useState(null);
   useIsomorphicLayoutEffect(() => {

package/dist/jsx/Portal.js.map

@@ -1,7 +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;",
+  "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  visible?: boolean\n}\n\nexport const Portal = ({ visible, ...props }: PortalProps) => {\n  const contents = (\n    <YStack\n      pointerEvents=\"box-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\n        presentationStyle=\"overFullScreen\"\n        hardwareAccelerated\n        visible={visible}\n        transparent\n        pointerEvents=\"box-none\"\n      >\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;AAMO,MAAM,SAAS,CAAC,EAAE,YAAY,YAAyB;AAC5D,QAAM,WACJ,CAAC,OACC,cAAc,WACd,WAEA,UAAU,QAAQ,UAAU,gBACxB,OACN;AAGF,MAAI,CAAC,OAAO;AAEV,WACE,CAAC,MACC,kBAAkB,iBAClB,oBACA,SAAS,SACT,YACA,cAAc,YAEb,SACH,EARC;AAAA,EAUL;AAEA,QAAM,CAAC,aAAa,kBAAkB,MAAM,SAAc,IAAI;AAE9D,4BAA0B,MAAM;AAzClC;AA0CI,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/portal",
-  "version": "1.0.1-beta.103",
+  "version": "1.0.1-beta.104",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -18,8 +18,8 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.103",
-    "@tamagui/stacks": "^1.0.1-beta.103"
+    "@tamagui/core": "^1.0.1-beta.104",
+    "@tamagui/stacks": "^1.0.1-beta.104"
   },
   "peerDependencies": {
     "react": "*",
@@ -27,7 +27,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.103",
+    "@tamagui/build": "^1.0.1-beta.104",
     "@types/react-native": "^0.69.2",
     "react": "*",
     "react-dom": "*",

package/src/Portal.tsx

@@ -7,12 +7,14 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { Modal } from 'react-native'
 
-export type PortalProps = YStackProps
+export type PortalProps = YStackProps & {
+  visible?: boolean
+}
 
-export const Portal = (props: PortalProps) => {
+export const Portal = ({ visible, ...props }: PortalProps) => {
   const contents = (
     <YStack
-      pointerEvents="none"
+      pointerEvents="box-none"
       fullscreen
       // @ts-expect-error ok on web
       position={isWeb ? 'fixed' : 'absolute'}
@@ -23,7 +25,13 @@ export const Portal = (props: PortalProps) => {
   if (!isWeb) {
     // check if theme stays in context here
     return (
-      <Modal visible transparent pointerEvents="none">
+      <Modal
+        presentationStyle="overFullScreen"
+        hardwareAccelerated
+        visible={visible}
+        transparent
+        pointerEvents="box-none"
+      >
         {contents}
       </Modal>
     )

package/types/Portal.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import '@tamagui/polyfill-dev';
 import { YStackProps } from '@tamagui/stacks';
-export declare type PortalProps = YStackProps;
-export declare const Portal: (props: PortalProps) => JSX.Element | null;
+export declare type PortalProps = YStackProps & {
+    visible?: boolean;
+};
+export declare const Portal: ({ visible, ...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":";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"}
+{"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,GAAG;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,MAAM,0BAA2B,WAAW,uBAsCxD,CAAA"}