@rmwc/base - npm Package Compare versions

Comparing version 8.0.4 to 8.0.5

dist/portal.d.ts

 import React from 'react';
 export declare type PortalPropT = Element | string | boolean | undefined | null;
 export declare function Portal(): JSX.Element;
-export declare function PortalChild({ children, renderTo }: {
+export declare function PortalChild({ children, renderTo, menuSurfaceDomPositionRef }: {
     children: React.ReactNode;
     renderTo?: PortalPropT;
-}): JSX.Element;
+    menuSurfaceDomPositionRef?: React.MutableRefObject<HTMLDivElement | null>;
+}): JSX.Element | null;

dist/portal.js

@@ -14,10 +14,9 @@ "use strict";
 function PortalChild(_a) {
-    var children = _a.children, renderTo = _a.renderTo;
-    var portalEl = react_1.useMemo(function () {
-        if (typeof document === 'undefined') {
-            return undefined;
-        }
+    var children = _a.children, renderTo = _a.renderTo, menuSurfaceDomPositionRef = _a.menuSurfaceDomPositionRef;
+    var _b = tslib_1.__read(react_1.useState(), 2), portalEl = _b[0], setPortalEl = _b[1];
+    react_1.useEffect(function () {
+        var _a, _b;
         var element = undefined;
         if (renderTo === true) {
-            element = document.getElementById(PORTAL_ID) || undefined;
+            element = (_a = document === null || document === void 0 ? void 0 : document.getElementById(PORTAL_ID)) !== null && _a !== void 0 ? _a : undefined;
             !element &&
@@ -27,3 +26,3 @@ console.warn('No default Portal found. Did you forget to include it in the root of your app? `import { Portal } from "@rmwc/base";`');
         else if (typeof renderTo === 'string') {
-            element = document.querySelector(renderTo) || undefined;
+            element = (_b = document === null || document === void 0 ? void 0 : document.querySelector(renderTo)) !== null && _b !== void 0 ? _b : undefined;
             !element &&
@@ -35,9 +34,20 @@ console.warn("The selector you provided for renderToPortal \"" + renderTo + "\" didn't find any elements.");
         }
-        return element;
-    }, [renderTo]);
-    if (portalEl) {
-        return react_dom_1.default.createPortal(children, portalEl);
+        if (element !== portalEl) {
+            setPortalEl(element);
+        }
+    }, [renderTo, portalEl]);
+    // if renderTo defined, render children if we have the portalEl, else don't render anything.
+    // menuSurfaceDomPositionRef is used to position the menu at the correct location on the menuSurfaceAnchor
+    // when children is rendered in the portal
+    if (renderTo) {
+        if (portalEl) {
+            return (react_1.default.createElement("div", { ref: menuSurfaceDomPositionRef }, react_dom_1.default.createPortal(children, portalEl)));
+        }
+        else {
+            return null;
+        }
     }
+    // if renderTo is not defined render the children directly.
     return react_1.default.createElement(react_1.default.Fragment, null, children);
 }
 exports.PortalChild = PortalChild;

next/portal.d.ts

 import React from 'react';
 export declare type PortalPropT = Element | string | boolean | undefined | null;
 export declare function Portal(): JSX.Element;
-export declare function PortalChild({ children, renderTo }: {
+export declare function PortalChild({ children, renderTo, menuSurfaceDomPositionRef }: {
     children: React.ReactNode;
     renderTo?: PortalPropT;
-}): JSX.Element;
+    menuSurfaceDomPositionRef?: React.MutableRefObject<HTMLDivElement | null>;
+}): JSX.Element | null;

next/portal.js

@@ -1,2 +0,3 @@
-import React, { useRef, useMemo } from 'react';
+import { __read } from "tslib";
+import React, { useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -9,10 +10,9 @@ var PORTAL_ID = 'rmwcPortal';
 export function PortalChild(_a) {
-    var children = _a.children, renderTo = _a.renderTo;
-    var portalEl = useMemo(function () {
-        if (typeof document === 'undefined') {
-            return undefined;
-        }
+    var children = _a.children, renderTo = _a.renderTo, menuSurfaceDomPositionRef = _a.menuSurfaceDomPositionRef;
+    var _b = __read(useState(), 2), portalEl = _b[0], setPortalEl = _b[1];
+    useEffect(function () {
+        var _a, _b;
         var element = undefined;
         if (renderTo === true) {
-            element = document.getElementById(PORTAL_ID) || undefined;
+            element = (_a = document === null || document === void 0 ? void 0 : document.getElementById(PORTAL_ID)) !== null && _a !== void 0 ? _a : undefined;
             !element &&
@@ -22,3 +22,3 @@ console.warn('No default Portal found. Did you forget to include it in the root of your app? `import { Portal } from "@rmwc/base";`');
         else if (typeof renderTo === 'string') {
-            element = document.querySelector(renderTo) || undefined;
+            element = (_b = document === null || document === void 0 ? void 0 : document.querySelector(renderTo)) !== null && _b !== void 0 ? _b : undefined;
             !element &&
@@ -30,8 +30,19 @@ console.warn("The selector you provided for renderToPortal \"" + renderTo + "\" didn't find any elements.");
         }
-        return element;
-    }, [renderTo]);
-    if (portalEl) {
-        return ReactDOM.createPortal(children, portalEl);
+        if (element !== portalEl) {
+            setPortalEl(element);
+        }
+    }, [renderTo, portalEl]);
+    // if renderTo defined, render children if we have the portalEl, else don't render anything.
+    // menuSurfaceDomPositionRef is used to position the menu at the correct location on the menuSurfaceAnchor
+    // when children is rendered in the portal
+    if (renderTo) {
+        if (portalEl) {
+            return (React.createElement("div", { ref: menuSurfaceDomPositionRef }, ReactDOM.createPortal(children, portalEl)));
+        }
+        else {
+            return null;
+        }
     }
+    // if renderTo is not defined render the children directly.
     return React.createElement(React.Fragment, null, children);
 }

package.json

 {
   "name": "@rmwc/base",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "description": "RMWC base module",
@@ -40,3 +40,3 @@ "main": "dist/index.js",
     "@material/dom": "^8.0.0",
-    "@rmwc/types": "^8.0.4",
+    "@rmwc/types": "^8.0.5",
     "@types/classnames": "^2.3.1",
@@ -43,0 +43,0 @@ "classnames": "^2.3.1",

No alert changes

Improved metrics

Total package byte prevSize

89615

increased by2.09%

Lines of code

2280

increased by1.02%

Dependency changes

• Updated@rmwc/types@^8.0.5