@leafygreen-ui/portal - npm Package Compare versions

Comparing version 5.0.3 to 5.1.0

CHANGELOG.md

 # @leafygreen-ui/portal
 
+## 5.1.0
+
+### Minor Changes
+
+- 8ad4fdbc: Manually forward `portalRef` to `Portal` component and expose `portalRef` in `Popover` component
+  [LG-3988](https://jira.mongodb.org/browse/LG-3988)
+
+### Patch Changes
+
+- Updated dependencies [e487fb24]
+  - @leafygreen-ui/hooks@8.1.2
+
 ## 5.0.3
@@ -4,0 +16,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import r from"react";import{createPortal as t}from"react-dom";import e from"prop-types";import{useIsomorphicLayoutEffect as n}from"@leafygreen-ui/hooks";function o(r,t){return function(r){if(Array.isArray(r))return r}(r)||function(r,t){var e=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=e){var n,o,a,i,l=[],u=!0,c=!1;try{if(a=(e=e.call(r)).next,0===t){if(Object(e)!==e)return;u=!1}else for(;!(u=(n=a.call(e)).done)&&(l.push(n.value),l.length!==t);u=!0);}catch(r){c=!0,o=r}finally{try{if(!u&&null!=e.return&&(i=e.return(),Object(i)!==i))return}finally{if(c)throw o}}return l}}(r,t)||function(r,t){if(!r)return;if("string"==typeof r)return a(r,t);var e=Object.prototype.toString.call(r).slice(8,-1);"Object"===e&&r.constructor&&(e=r.constructor.name);if("Map"===e||"Set"===e)return Array.from(r);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return a(r,t)}(r,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 a(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=new Array(t);e<t;e++)n[e]=r[e];return n}function i(t){var e=o(r.useState(),2),a=e[0],i=e[1];return n((function(){if(!t){var r=document.createElement("div");return document.body.appendChild(r),i(r),function(){r.remove()}}i(t)}),[t]),a}function l(r){var e,o=i(null!==(e=r.container)&&void 0!==e?e:void 0);return n((function(){var t;o&&!r.container&&(o.className=null!==(t=r.className)&&void 0!==t?t:"")}),[o,r.container,r.className]),o?t(r.children,o):null}l.displayName="Portal",l.propTypes={children:e.node,className:e.string,container:e.oneOfType([e.node,e.object])};export{l as default,i as usePortalContainer};
+import r from"react";import{createPortal as t}from"react-dom";import e from"prop-types";import{useIsomorphicLayoutEffect as n}from"@leafygreen-ui/hooks";function o(r,t){return function(r){if(Array.isArray(r))return r}(r)||function(r,t){var e=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=e){var n,o,a,i,l=[],u=!0,c=!1;try{if(a=(e=e.call(r)).next,0===t){if(Object(e)!==e)return;u=!1}else for(;!(u=(n=a.call(e)).done)&&(l.push(n.value),l.length!==t);u=!0);}catch(r){c=!0,o=r}finally{try{if(!u&&null!=e.return&&(i=e.return(),Object(i)!==i))return}finally{if(c)throw o}}return l}}(r,t)||function(r,t){if(!r)return;if("string"==typeof r)return a(r,t);var e=Object.prototype.toString.call(r).slice(8,-1);"Object"===e&&r.constructor&&(e=r.constructor.name);if("Map"===e||"Set"===e)return Array.from(r);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return a(r,t)}(r,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 a(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=new Array(t);e<t;e++)n[e]=r[e];return n}function i(t,e){var a=o(r.useState(),2),i=a[0],l=a[1];return n((function(){if(t)return e&&(e.current=t),void l(t);var r=document.createElement("div");return document.body.appendChild(r),e&&(e.current=r),l(r),function(){r.remove()}}),[t,e]),i}function l(r){var e=r.children,o=r.className,a=r.container,l=r.portalRef,u=i(null!=a?a:void 0,l);return n((function(){u&&!a&&(u.className=null!=o?o:"")}),[a,u,o]),u?t(e,u):null}l.displayName="Portal",l.propTypes={children:e.node,className:e.string,container:e.oneOfType([e.node,e.object])};export{l as default,i as usePortalContainer};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom"),require("prop-types"),require("@leafygreen-ui/hooks")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@leafygreen-ui/hooks"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/portal"]={},e.React,e["react-dom"],e.PropTypes,e["@leafygreen-ui/hooks"])}(this,(function(e,t,r,n,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(t),i=a(n);function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,u,i=[],l=!0,f=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);l=!0);}catch(e){f=!0,o=e}finally{try{if(!l&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(f)throw o}}return i}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(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(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return f(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 f(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 c(e){var t=l(u.default.useState(),2),r=t[0],n=t[1];return o.useIsomorphicLayoutEffect((function(){if(!e){var t=document.createElement("div");return document.body.appendChild(t),n(t),function(){t.remove()}}n(e)}),[e]),r}function s(e){var t,n=c(null!==(t=e.container)&&void 0!==t?t:void 0);return o.useIsomorphicLayoutEffect((function(){var t;n&&!e.container&&(n.className=null!==(t=e.className)&&void 0!==t?t:"")}),[n,e.container,e.className]),n?r.createPortal(e.children,n):null}s.displayName="Portal",s.propTypes={children:i.default.node,className:i.default.string,container:i.default.oneOfType([i.default.node,i.default.object])},e.default=s,e.usePortalContainer=c,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom"),require("prop-types"),require("@leafygreen-ui/hooks")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@leafygreen-ui/hooks"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/portal"]={},e.React,e["react-dom"],e.PropTypes,e["@leafygreen-ui/hooks"])}(this,(function(e,t,r,n,o){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=u(t),i=u(n);function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,u,a,i=[],l=!0,f=!1;try{if(u=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=u.call(r)).done)&&(i.push(n.value),i.length!==t);l=!0);}catch(e){f=!0,o=e}finally{try{if(!l&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(f)throw o}}return i}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(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(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return f(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 f(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 c(e,t){var r=l(a.default.useState(),2),n=r[0],u=r[1];return o.useIsomorphicLayoutEffect((function(){if(e)return t&&(t.current=e),void u(e);var r=document.createElement("div");return document.body.appendChild(r),t&&(t.current=r),u(r),function(){r.remove()}}),[e,t]),n}function d(e){var t=e.children,n=e.className,u=e.container,a=e.portalRef,i=c(null!=u?u:void 0,a);return o.useIsomorphicLayoutEffect((function(){i&&!u&&(i.className=null!=n?n:"")}),[u,i,n]),i?r.createPortal(t,i):null}d.displayName="Portal",d.propTypes={children:i.default.node,className:i.default.string,container:i.default.oneOfType([i.default.node,i.default.object])},e.default=d,e.usePortalContainer=c,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

dist/Portal/Portal.d.ts

@@ -1,9 +0,9 @@
-import React from 'react';
+import React, { MutableRefObject } from 'react';
 import PropTypes from 'prop-types';
 import { PortalProps } from './Portal.types';
-export declare function usePortalContainer(customContainer?: HTMLElement): HTMLElement | undefined;
+export declare function usePortalContainer(customContainer?: HTMLElement, portalRef?: MutableRefObject<HTMLElement | null>): HTMLElement | undefined;
 /**
  * Portals transport their children to a div that is appended to the end of `document.body` to or a node that can be specified with a container prop.
  */
-declare function Portal(props: PortalProps): React.ReactPortal | null;
+declare function Portal({ children, className, container, portalRef, }: PortalProps): React.ReactPortal | null;
 declare namespace Portal {
@@ -10,0 +10,0 @@ var displayName: string;

dist/Portal/Portal.types.d.ts

@@ -5,4 +5,9 @@ import React from 'react';
     children?: React.ReactNode;
+    portalRef?: React.MutableRefObject<HTMLElement | null>;
 } & OneOf<{
     /**
+     * `className` prop passed to the container element.
+     */
+    className?: never;
+    /**
      * A custom container element. By default, the container will be a `div` appended to the document body.
@@ -12,6 +17,2 @@ * @required
     container: HTMLElement;
-    /**
-     * `className` prop passed to the container element.
-     */
-    className?: never;
 }, {
@@ -18,0 +19,0 @@ /**

package.json

 {
   "name": "@leafygreen-ui/portal",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "description": "LeafyGreen UI Kit Portal",
@@ -28,3 +28,3 @@ "main": "./dist/index.js",
   "dependencies": {
-    "@leafygreen-ui/hooks": "^8.0.0",
+    "@leafygreen-ui/hooks": "^8.1.2",
     "@leafygreen-ui/lib": "^13.0.0"
@@ -31,0 +31,0 @@ },

src/Portal/Portal.types.ts

@@ -7,5 +7,10 @@ import React from 'react';
   children?: React.ReactNode;
+  portalRef?: React.MutableRefObject<HTMLElement | null>;
 } & OneOf<
   {
     /**
+     * `className` prop passed to the container element.
+     */
+    className?: never;
+    /**
      * A custom container element. By default, the container will be a `div` appended to the document body.
@@ -15,6 +20,2 @@ * @required
     container: HTMLElement;
-    /**
-     * `className` prop passed to the container element.
-     */
-    className?: never;
   },
@@ -21,0 +22,0 @@ {

stories.js

@@ -1,1 +0,1 @@
-import e from"react";import{css as t}from"@leafygreen-ui/emotion";import{storybookExcludedControlParams as r}from"@leafygreen-ui/lib";import{createPortal as n}from"react-dom";import o from"prop-types";import{useIsomorphicLayoutEffect as a}from"@leafygreen-ui/hooks";function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,i,l=[],c=!0,u=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=a.call(r)).done)&&(l.push(n.value),l.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(u)throw o}}return l}}(e,t)||l(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 l(e,t){if(e){if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,t):void 0}}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 u(t){var r,o=function(t){var r=i(e.useState(),2),n=r[0],o=r[1];return a((function(){if(!t){var e=document.createElement("div");return document.body.appendChild(e),o(e),function(){e.remove()}}o(t)}),[t]),n}(null!==(r=t.container)&&void 0!==r?r:void 0);return a((function(){var e;o&&!t.container&&(o.className=null!==(e=t.className)&&void 0!==e?e:"")}),[o,t.container,t.className]),o?n(t.children,o):null}var m;u.displayName="Portal",u.propTypes={children:o.node,className:o.string,container:o.oneOfType([o.node,o.object])};var d,f,s=t(m||(d=["\n  text-align: center;\n"],f||(f=d.slice(0)),m=Object.freeze(Object.defineProperties(d,{raw:{value:Object.freeze(f)}}))));var p,y={title:"Components/Portal",component:u,args:{container:function(){var e=document.getElementById("root")||document.getElementById("storybook-root")||document.getElementById("story-container");if(null==e)throw new Error("Could not find root element");return e}(),children:e.createElement("div",{className:s},"Portals transport their children to a ",e.createElement("code",null,"div")," that is appended to the end of the ",e.createElement("code",null,"document.body")," to or a ",e.createElement("code",null,"node")," ","that can be specified with a ",e.createElement("code",null,"container")," prop.")},argTypes:{className:{type:"string"}},parameters:{default:"Basic",controls:{exclude:[].concat((p=r,function(e){if(Array.isArray(e))return c(e)}(p)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(p)||l(p)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),["children","container"])},chromatic:{disableSnapshot:!0}}},b=function(t){return e.createElement(u,t)};export{b as Basic,y as default};
+import e from"react";import{css as t}from"@leafygreen-ui/emotion";import{storybookExcludedControlParams as r}from"@leafygreen-ui/lib";import{createPortal as n}from"react-dom";import o from"prop-types";import{useIsomorphicLayoutEffect as a}from"@leafygreen-ui/hooks";function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,l,i=[],c=!0,u=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(u)throw o}}return i}}(e,t)||i(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 i(e,t){if(e){if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,t):void 0}}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 u(t){var r=t.children,o=t.className,i=t.container,c=t.portalRef,u=function(t,r){var n=l(e.useState(),2),o=n[0],i=n[1];return a((function(){if(t)return r&&(r.current=t),void i(t);var e=document.createElement("div");return document.body.appendChild(e),r&&(r.current=e),i(e),function(){e.remove()}}),[t,r]),o}(null!=i?i:void 0,c);return a((function(){u&&!i&&(u.className=null!=o?o:"")}),[i,u,o]),u?n(r,u):null}var m;u.displayName="Portal",u.propTypes={children:o.node,className:o.string,container:o.oneOfType([o.node,o.object])};var d,f,s=t(m||(d=["\n  text-align: center;\n"],f||(f=d.slice(0)),m=Object.freeze(Object.defineProperties(d,{raw:{value:Object.freeze(f)}}))));var p,y={title:"Components/Portal",component:u,args:{container:function(){var e=document.getElementById("root")||document.getElementById("storybook-root")||document.getElementById("story-container");if(null==e)throw new Error("Could not find root element");return e}(),children:e.createElement("div",{className:s},"Portals transport their children to a ",e.createElement("code",null,"div")," that is appended to the end of the ",e.createElement("code",null,"document.body")," to or a ",e.createElement("code",null,"node")," ","that can be specified with a ",e.createElement("code",null,"container")," prop.")},argTypes:{className:{type:"string"}},parameters:{default:"Basic",controls:{exclude:[].concat((p=r,function(e){if(Array.isArray(e))return c(e)}(p)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(p)||i(p)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),["children","container"])},chromatic:{disableSnapshot:!0}}},b=function(t){return e.createElement(u,t)};export{b as Basic,y as default};

tsconfig.json

@@ -16,3 +16,3 @@ {
   ],
-  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "exclude": ["**/*.spec.*", "**/*.stories.*"],
   "references": [
@@ -19,0 +19,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Worsened metrics

Total package byte prevSize

41264

decreased by-68.62%

Lines of code

505

decreased by-85.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@leafygreen-ui/hooks@^8.1.2