@leafygreen-ui/portal - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

CHANGELOG.md

 # @leafygreen-ui/portal
 
+## 2.1.1
+
+### Patch Changes
+
+- 01e6777: Fix extra DOM elements being created in development mode
+
 ## 2.1.0
@@ -4,0 +10,0 @@

dist/index.node.js

@@ -1,2 +0,2 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom"],t);else{var r="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom")):t(e.react,e["prop-types"],e["react-dom"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(global,(function(e,t,r){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";var n;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=((n=r(1))&&n.__esModule?n:{default:n}).default;t.default=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,o=r(2),a=(n=r(3))&&n.__esModule?n:{default:n},u=r(4);function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var u,i=e[Symbol.iterator]();!(n=(u=i.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==i.return||i.return()}finally{if(o)throw a}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function l(e){var t,r,n,a=i((0,o.useState)(null!==(t=e.container)&&void 0!==t?t:(r=e.className,n=document.createElement("div"),r&&(n.className=r),document.body.appendChild(n),n)),1)[0],c=(0,o.useRef)(e);return(0,o.useEffect)((function(){var t,r=c.current;(c.current=e,r.container===e.container)?r.className!==e.className&&(a.className=null!==(t=e.className)&&void 0!==t?t:""):console.error("Changing the Portal container is not supported behavior and may cause unintended side effects. Instead, create a new Portal instance.")})),(0,o.useEffect)((function(){return function(){e.container||a.remove()}}),[]),(0,u.createPortal)(e.children,a)}l.displayName="Portal",l.propTypes={children:a.default.node,className:a.default.string,container:a.default.oneOfType([a.default.node,a.default.object])};var f=l;t.default=f},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r}])}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom"],t);else{var r="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom")):t(e.react,e["prop-types"],e["react-dom"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(global,(function(e,t,r){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";var n;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=((n=r(1))&&n.__esModule?n:{default:n}).default;t.default=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,o=r(2),a=(n=r(3))&&n.__esModule?n:{default:n},u=r(4);function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var u,i=e[Symbol.iterator]();!(n=(u=i.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==i.return||i.return()}finally{if(o)throw a}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function f(e){var t=i((0,o.useState)(e.container),2),r=t[0],n=t[1];(0,o.useEffect)((function(){var t,o;r||n((t=e.className,o=document.createElement("div"),t&&(o.className=t),document.body.appendChild(o),o))}),[]),(0,o.useEffect)((function(){return function(){!e.container&&r&&r.remove()}}),[r]);var a=(0,o.useRef)(e);return(0,o.useEffect)((function(){var t,n=a.current;(a.current=e,n.container===e.container)?n.className!==e.className&&r&&(r.className=null!==(t=e.className)&&void 0!==t?t:""):console.error("Changing the Portal container is not supported behavior and may cause unintended side effects. Instead, create a new Portal instance.")})),r?(0,u.createPortal)(e.children,r):null}f.displayName="Portal",f.propTypes={children:a.default.node,className:a.default.string,container:a.default.oneOfType([a.default.node,a.default.object])};var l=f;t.default=l},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r}])}));
 //# sourceMappingURL=index.node.js.map

dist/index.web.js

@@ -1,2 +0,2 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom"],t);else{var r="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom")):t(e.react,e["prop-types"],e["react-dom"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(window,(function(e,t,r){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";var n;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=((n=r(1))&&n.__esModule?n:{default:n}).default;t.default=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,o=r(2),u=(n=r(3))&&n.__esModule?n:{default:n},a=r(4);function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,u=void 0;try{for(var a,i=e[Symbol.iterator]();!(n=(a=i.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,u=e}finally{try{n||null==i.return||i.return()}finally{if(o)throw u}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function f(e){var t,r,n,u=i((0,o.useState)(null!==(t=e.container)&&void 0!==t?t:(r=e.className,n=document.createElement("div"),r&&(n.className=r),document.body.appendChild(n),n)),1)[0],c=(0,o.useRef)(e);return(0,o.useEffect)((function(){var t,r=c.current;(c.current=e,r.container===e.container)?r.className!==e.className&&(u.className=null!==(t=e.className)&&void 0!==t?t:""):console.error("Changing the Portal container is not supported behavior and may cause unintended side effects. Instead, create a new Portal instance.")})),(0,o.useEffect)((function(){return function(){e.container||u.remove()}}),[]),(0,a.createPortal)(e.children,u)}f.displayName="Portal",f.propTypes={children:u.default.node,className:u.default.string,container:u.default.oneOfType([u.default.node,u.default.object])};var l=f;t.default=l},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r}])}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom"],t);else{var r="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom")):t(e.react,e["prop-types"],e["react-dom"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(window,(function(e,t,r){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";var n;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=((n=r(1))&&n.__esModule?n:{default:n}).default;t.default=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,o=r(2),u=(n=r(3))&&n.__esModule?n:{default:n},a=r(4);function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,u=void 0;try{for(var a,i=e[Symbol.iterator]();!(n=(a=i.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,u=e}finally{try{n||null==i.return||i.return()}finally{if(o)throw u}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function f(e){var t=i((0,o.useState)(e.container),2),r=t[0],n=t[1];(0,o.useEffect)((function(){var t,o;r||n((t=e.className,o=document.createElement("div"),t&&(o.className=t),document.body.appendChild(o),o))}),[]),(0,o.useEffect)((function(){return function(){!e.container&&r&&r.remove()}}),[r]);var u=(0,o.useRef)(e);return(0,o.useEffect)((function(){var t,n=u.current;(u.current=e,n.container===e.container)?n.className!==e.className&&r&&(r.className=null!==(t=e.className)&&void 0!==t?t:""):console.error("Changing the Portal container is not supported behavior and may cause unintended side effects. Instead, create a new Portal instance.")})),r?(0,a.createPortal)(e.children,r):null}f.displayName="Portal",f.propTypes={children:u.default.node,className:u.default.string,container:u.default.oneOfType([u.default.node,u.default.object])};var l=f;t.default=l},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r}])}));
 //# sourceMappingURL=index.web.js.map

dist/Portal.d.ts

@@ -1,3 +0,3 @@
-/// <reference types="react" />
 import type { OneOf } from '@leafygreen-ui/lib';
+import React from 'react';
 import PropTypes from 'prop-types';
@@ -11,3 +11,3 @@ declare type PortalProps = {
 }>;
-declare function Portal(props: PortalProps): import("react").ReactPortal;
+declare function Portal(props: PortalProps): React.ReactPortal | null;
 declare namespace Portal {
@@ -14,0 +14,0 @@ var displayName: string;

dist/Portal.js

@@ -13,4 +13,19 @@ import { useEffect, useRef, useState } from 'react';
 function Portal(props) {
-    var _a;
-    var container = useState((_a = props.container) !== null && _a !== void 0 ? _a : createPortalContainer(props.className))[0];
+    var _a = useState(props.container), container = _a[0], setContainer = _a[1];
+    useEffect(function () {
+        if (!container) {
+            setContainer(
+            // Render needs to be idempotent, meaning it can't have side-effects.
+            // In stict mode, React will call render more than once to exercise,
+            // this which will result in multiple DOM elements being created if
+            // the container element is created directly in render.
+            // https://github.com/facebook/react/issues/15074#issuecomment-471197572
+            createPortalContainer(props.className));
+        }
+    }, []);
+    useEffect(function () { return function () {
+        if (!props.container && container) {
+            container.remove();
+        }
+    }; }, [container]);
     // TODO(PD-702): Investigate using `usePrevious` hook from mongo-nav
@@ -28,11 +43,9 @@ var prevPropsRef = useRef(props);
         }
-        if (prevProps.className !== props.className) {
+        if (prevProps.className !== props.className && container) {
             container.className = (_a = props.className) !== null && _a !== void 0 ? _a : '';
         }
     });
-    useEffect(function () { return function () {
-        if (!props.container) {
-            container.remove();
-        }
-    }; }, []);
+    if (!container) {
+        return null;
+    }
     return createPortal(props.children, container);
@@ -39,0 +52,0 @@ }

package.json

 {
   "name": "@leafygreen-ui/portal",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "LeafyGreen UI Kit Portal",
@@ -5,0 +5,0 @@ "browser": "./dist/index.web.js",

README.md

@@ -5,2 +5,4 @@ # Portal
 
+#### [View on Storybook](https://mongodb.github.io/leafygreen-ui/?path=/story/portal--default)
+
 ## Installation
@@ -7,0 +9,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

331749

increased by1.11%

Lines of code

381

increased by12.06%

Number of lines in readme file

50

increased by4.17%

No dependency changes