@reach/portal - npm Package Compare versions

Comparing version 0.13.2 to 0.18.0

dist/reach-portal.cjs.dev.js

@@ -1,63 +0,128 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var utils = require('@reach/utils');
-var reactDom = require('react-dom');
-
+"use strict";
 /**
- * Welcome to @reach/portal!
- *
- * Creates and appends a DOM node to the end of `document.body` and renders a
- * React tree into it. Useful for rendering a natural React element hierarchy
- * with a different DOM hierarchy to prevent parent styles from clipping or
- * hiding content (for popovers, dropdowns, and modals).
- *
- * @see Docs   https://reach.tech/portal
- * @see Source https://github.com/reach/reach-ui/tree/main/packages/portal
- * @see React  https://reactjs.org/docs/portals.html
- */
-/**
- * Portal
- *
- * @see Docs https://reach.tech/portal#portal
- */
+  * @reach/portal v0.18.0
+  *
+  * Copyright (c) 2018-2022, React Training LLC
+  *
+  * This source code is licensed under the MIT license found in the
+  * LICENSE.md file in the root directory of this source tree.
+  *
+  * @license MIT
+  */
 
-var Portal = function Portal(_ref) {
-  var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "reach-portal" : _ref$type;
-  var mountNode = React.useRef(null);
-  var portalNode = React.useRef(null);
-  var forceUpdate = utils.useForceUpdate();
-  utils.useIsomorphicLayoutEffect(function () {
-    // This ref may be null when a hot-loader replaces components on the page
-    if (!mountNode.current) return; // It's possible that the content of the portal has, itself, been portaled.
-    // In that case, it's important to append to the correct document element.
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+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 });
+};
+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;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-    var ownerDocument = mountNode.current.ownerDocument;
+// src/reach-portal.tsx
+var reach_portal_exports = {};
+__export(reach_portal_exports, {
+  Portal: () => Portal
+});
+module.exports = __toCommonJS(reach_portal_exports);
+var React = __toESM(require("react"));
+var import_utils = require("@reach/utils");
+var import_react_dom = require("react-dom");
+var PortalImpl = ({
+  children,
+  type = "reach-portal",
+  containerRef
+}) => {
+  let mountNode = React.useRef(null);
+  let portalNode = React.useRef(null);
+  let forceUpdate = (0, import_utils.useForceUpdate)();
+  if (true) {
+    React.useEffect(() => {
+      if (containerRef != null) {
+        if (typeof containerRef !== "object" || !("current" in containerRef)) {
+          console.warn("@reach/portal: Invalid value passed to the `containerRef` of a `Portal`. The portal will be appended to the document body, but if you want to attach it to another DOM node you must pass a valid React ref object to `containerRef`.");
+        } else if (containerRef.current == null) {
+          console.warn("@reach/portal: A ref was passed to the `containerRef` prop of a `Portal`, but no DOM node was attached to it. Be sure to pass the ref to a DOM component.\n\nIf you are forwarding the ref from another component, be sure to use the React.forwardRef API. See https://reactjs.org/docs/forwarding-refs.html.");
+        }
+      }
+    }, [containerRef]);
+  }
+  (0, import_utils.useIsomorphicLayoutEffect)(() => {
+    if (!mountNode.current)
+      return;
+    let ownerDocument = mountNode.current.ownerDocument;
+    let body = (containerRef == null ? void 0 : containerRef.current) || ownerDocument.body;
     portalNode.current = ownerDocument == null ? void 0 : ownerDocument.createElement(type);
-    ownerDocument.body.appendChild(portalNode.current);
+    body.appendChild(portalNode.current);
     forceUpdate();
-    return function () {
-      if (portalNode.current && portalNode.current.ownerDocument) {
-        portalNode.current.ownerDocument.body.removeChild(portalNode.current);
+    return () => {
+      if (portalNode.current && body) {
+        body.removeChild(portalNode.current);
       }
     };
-  }, [type, forceUpdate]);
-  return portalNode.current ? /*#__PURE__*/reactDom.createPortal(children, portalNode.current) : /*#__PURE__*/React.createElement("span", {
+  }, [type, forceUpdate, containerRef]);
+  return portalNode.current ? (0, import_react_dom.createPortal)(children, portalNode.current) : /* @__PURE__ */ React.createElement("span", {
     ref: mountNode
   });
 };
-/**
- * @see Docs https://reach.tech/portal#portal-props
- */
-
-
-if (process.env.NODE_ENV !== "production") {
-  Portal.displayName = "Portal";
-} ////////////////////////////////////////////////////////////////////////////////
-
-exports.Portal = Portal;
-exports.default = Portal;
+var Portal = (_a) => {
+  var _b = _a, {
+    unstable_skipInitialRender
+  } = _b, props = __objRest(_b, [
+    "unstable_skipInitialRender"
+  ]);
+  let [hydrated, setHydrated] = React.useState(false);
+  React.useEffect(() => {
+    if (unstable_skipInitialRender) {
+      setHydrated(true);
+    }
+  }, [unstable_skipInitialRender]);
+  if (unstable_skipInitialRender && !hydrated) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(PortalImpl, __spreadValues({}, props));
+};
+Portal.displayName = "Portal";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Portal
+});
+//# sourceMappingURL=reach-portal.cjs.dev.js.map

dist/reach-portal.cjs.js

@@ -1,7 +0,7 @@
-'use strict';
+"use strict";
 
 if (process.env.NODE_ENV === "production") {
-  module.exports = require("./reach-portal.cjs.prod.js");
+	module.exports = require("./reach-portal.cjs.prod.js");
 } else {
-  module.exports = require("./reach-portal.cjs.dev.js");
+	module.exports = require("./reach-portal.cjs.dev.js");
 }

dist/reach-portal.cjs.prod.js

@@ -1,55 +0,1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var utils = require('@reach/utils');
-var reactDom = require('react-dom');
-
-/**
- * Welcome to @reach/portal!
- *
- * Creates and appends a DOM node to the end of `document.body` and renders a
- * React tree into it. Useful for rendering a natural React element hierarchy
- * with a different DOM hierarchy to prevent parent styles from clipping or
- * hiding content (for popovers, dropdowns, and modals).
- *
- * @see Docs   https://reach.tech/portal
- * @see Source https://github.com/reach/reach-ui/tree/main/packages/portal
- * @see React  https://reactjs.org/docs/portals.html
- */
-/**
- * Portal
- *
- * @see Docs https://reach.tech/portal#portal
- */
-
-var Portal = function Portal(_ref) {
-  var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "reach-portal" : _ref$type;
-  var mountNode = React.useRef(null);
-  var portalNode = React.useRef(null);
-  var forceUpdate = utils.useForceUpdate();
-  utils.useIsomorphicLayoutEffect(function () {
-    // This ref may be null when a hot-loader replaces components on the page
-    if (!mountNode.current) return; // It's possible that the content of the portal has, itself, been portaled.
-    // In that case, it's important to append to the correct document element.
-
-    var ownerDocument = mountNode.current.ownerDocument;
-    portalNode.current = ownerDocument == null ? void 0 : ownerDocument.createElement(type);
-    ownerDocument.body.appendChild(portalNode.current);
-    forceUpdate();
-    return function () {
-      if (portalNode.current && portalNode.current.ownerDocument) {
-        portalNode.current.ownerDocument.body.removeChild(portalNode.current);
-      }
-    };
-  }, [type, forceUpdate]);
-  return portalNode.current ? /*#__PURE__*/reactDom.createPortal(children, portalNode.current) : /*#__PURE__*/React.createElement("span", {
-    ref: mountNode
-  });
-};
-
-exports.Portal = Portal;
-exports.default = Portal;
+"use strict";var w=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames,f=Object.getOwnPropertySymbols,D=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var i=(e,t,r)=>t in e?c(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,m=(e,t)=>{for(var r in t||(t={}))d.call(t,r)&&i(e,r,t[r]);if(f)for(var r of f(t))h.call(t,r)&&i(e,r,t[r]);return e};var R=(e,t)=>{var r={};for(var o in e)d.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&f)for(var o of f(e))t.indexOf(o)<0&&h.call(e,o)&&(r[o]=e[o]);return r};var v=(e,t)=>{for(var r in t)c(e,r,{get:t[r],enumerable:!0})},P=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of _(t))!d.call(e,a)&&a!==r&&c(e,a,{get:()=>t[a],enumerable:!(o=E(t,a))||o.enumerable});return e};var M=(e,t,r)=>(r=e!=null?w(D(e)):{},P(t||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),N=e=>P(c({},"__esModule",{value:!0}),e);var j={};v(j,{Portal:()=>b});module.exports=N(j);var n=M(require("react")),s=require("@reach/utils"),y=require("react-dom"),g=({children:e,type:t="reach-portal",containerRef:r})=>{let o=n.useRef(null),a=n.useRef(null),l=(0,s.useForceUpdate)();return(0,s.useIsomorphicLayoutEffect)(()=>{if(!o.current)return;let u=o.current.ownerDocument,p=(r==null?void 0:r.current)||u.body;return a.current=u==null?void 0:u.createElement(t),p.appendChild(a.current),l(),()=>{a.current&&p&&p.removeChild(a.current)}},[t,l,r]),a.current?(0,y.createPortal)(e,a.current):n.createElement("span",{ref:o})},b=r=>{var o=r,{unstable_skipInitialRender:e}=o,t=R(o,["unstable_skipInitialRender"]);let[a,l]=n.useState(!1);return n.useEffect(()=>{e&&l(!0)},[e]),e&&!a?null:n.createElement(g,m({},t))};b.displayName="Portal";0&&(module.exports={Portal});

package.json

 {
   "name": "@reach/portal",
-  "version": "0.13.2",
+  "version": "0.18.0",
   "description": "Declarative portals for React",
   "author": "React Training <[e-mail]>",
   "license": "MIT",
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
@@ -13,8 +16,11 @@ "type": "git",
   "dependencies": {
-    "@reach/utils": "0.13.2",
-    "tslib": "^2.1.0"
+    "@reach/utils": "0.18.0"
   },
   "devDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "@reach-internal/dev": "0.0.0",
+    "@reach-internal/test": "0.0.0",
+    "@reach-internal/tsconfig": "0.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "tsup": "^6.1.3"
   },
@@ -25,14 +31,18 @@ "peerDependencies": {
   },
-  "main": "dist/reach-portal.cjs.js",
-  "module": "dist/reach-portal.esm.js",
-  "types": "dist/reach-portal.cjs.d.ts",
+  "main": "./dist/reach-portal.cjs.js",
+  "types": "./dist/reach-portal.d.ts",
   "files": [
+    "CHANGELOG.md",
+    "LICENSE",
     "README.md",
-    "dist"
+    "dist",
+    "styles.css"
   ],
-  "eslintIgnore": [
-    "node_modules",
-    "dist"
-  ],
-  "gitHead": "9e2a19717eb581722e9af99b0f8f3d976de9a55f"
-}
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "./dist/reach-portal.mjs",
+  "scripts": {
+    "build": "tsup"
+  }
+}

README.md

@@ -10,11 +10,11 @@ # @reach/portal
 ```jsx
-import Portal from "@reach/portal";
+import { Portal } from "@reach/portal";
 
 function Example() {
-  return (
-    <Portal>
-      <div>Stuff goes here</div>
-    </Portal>
-  );
+	return (
+		<Portal>
+			<div>Stuff goes here</div>
+		</Portal>
+	);
 }
 ```

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20665

increased by97.47%

Dependency count

3

decreased by-25%

Number of package files

10

increased by11.11%

Lines of code

267

increased by30.88%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Dev dependency count

6

increased by200%

Number of low quality alerts

3

increased by50%

Dependency changes

• + Added@reach/utils@0.18.0(transitive)

• - Removedtslib@^2.1.0

• - Removed@reach/utils@0.13.2(transitive)

• - Removed@types/warning@3.0.3(transitive)

• - Removedtslib@2.8.1(transitive)

• - Removedwarning@4.0.3(transitive)

• Updated@reach/utils@0.18.0