@rmwc/base - npm Package Compare versions

Comparing version 8.0.7 to 8.0.8

dist/index.d.ts

@@ -9,2 +9,3 @@ import { WithThemeProps as _WithThemeProps } from './with-theme';
 export * from './portal';
+export * from './PortalContext';
 export declare type WithThemeProps = _WithThemeProps;

dist/index.js

@@ -13,1 +13,2 @@ "use strict";
 tslib_1.__exportStar(require("./portal"), exports);
+tslib_1.__exportStar(require("./PortalContext"), exports);

dist/portal.d.ts

@@ -1,8 +0,11 @@
-import React from 'react';
+import React, { MutableRefObject } from 'react';
+import * as RMWC from '@rmwc/types';
 export declare type PortalPropT = Element | string | boolean | undefined | null;
-export declare function Portal(): JSX.Element;
+export interface PortalProps extends Omit<RMWC.HTMLProps<HTMLDivElement>, 'id' | 'ref'> {
+}
+export declare const Portal: (props: PortalProps) => JSX.Element;
 export declare function PortalChild({ children, renderTo, menuSurfaceDomPositionRef }: {
     children: React.ReactNode;
     renderTo?: PortalPropT;
-    menuSurfaceDomPositionRef?: React.MutableRefObject<HTMLDivElement | null>;
+    menuSurfaceDomPositionRef?: MutableRefObject<HTMLDivElement | null>;
 }): JSX.Element | null;

dist/portal.js

@@ -6,8 +6,15 @@ "use strict";
 var react_1 = tslib_1.__importStar(require("react"));
-var react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+var react_dom_1 = require("react-dom");
+var PortalContext_1 = require("./PortalContext");
 var PORTAL_ID = 'rmwcPortal';
-function Portal() {
-    var el = react_1.useRef(null);
-    return react_1.default.createElement("div", { ref: el, id: PORTAL_ID });
-}
+var Portal = function (props) {
+    var portalContext = react_1.useContext(PortalContext_1.PortalContext);
+    var setPortalElement = portalContext === null || portalContext === void 0 ? void 0 : portalContext.setPortalElement;
+    var portalRef = react_1.useCallback(function (node) {
+        if (node !== null && setPortalElement) {
+            setPortalElement(node);
+        }
+    }, [setPortalElement]);
+    return react_1.default.createElement("div", tslib_1.__assign({ ref: portalRef, id: PORTAL_ID }, props));
+};
 exports.Portal = Portal;
@@ -17,14 +24,20 @@ function PortalChild(_a) {
     var _b = tslib_1.__read(react_1.useState(), 2), portalEl = _b[0], setPortalEl = _b[1];
+    var portalElementFromContext = react_1.useContext(PortalContext_1.PortalContext).portalElement;
     react_1.useEffect(function () {
         var _a, _b;
         var element = undefined;
-        if (renderTo === true) {
+        if (renderTo === true && portalElementFromContext) {
+            element = portalElementFromContext;
+        }
+        else if (renderTo === true) {
             element = (_a = document === null || document === void 0 ? void 0 : document.getElementById(PORTAL_ID)) !== null && _a !== void 0 ? _a : undefined;
-            !element &&
+            if (!element) {
                 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 = (_b = document === null || document === void 0 ? void 0 : document.querySelector(renderTo)) !== null && _b !== void 0 ? _b : undefined;
-            !element &&
+            if (!element) {
                 console.warn("The selector you provided for renderToPortal \"" + renderTo + "\" didn't find any elements.");
+            }
         }
@@ -37,3 +50,3 @@ else if (renderTo instanceof Element) {
         }
-    }, [renderTo, portalEl]);
+    }, [renderTo, portalEl, portalElementFromContext]);
     // if renderTo defined, render children if we have the portalEl, else don't render anything.
@@ -44,3 +57,3 @@ // menuSurfaceDomPositionRef is used to position the menu at the correct location on the menuSurfaceAnchor
         if (portalEl) {
-            return (react_1.default.createElement("div", { ref: menuSurfaceDomPositionRef }, react_dom_1.default.createPortal(children, portalEl)));
+            return (react_1.default.createElement("div", { ref: menuSurfaceDomPositionRef }, react_dom_1.createPortal(children, portalEl)));
         }
@@ -47,0 +60,0 @@ else {

next/index.d.ts

@@ -9,2 +9,3 @@ import { WithThemeProps as _WithThemeProps } from './with-theme';
 export * from './portal';
+export * from './PortalContext';
 export declare type WithThemeProps = _WithThemeProps;

next/index.js

@@ -8,1 +8,2 @@ export var RMWC_VERSION = process.env.RMWC_VERSION || 'rmwc_version';
 export * from './portal';
+export * from './PortalContext';

next/portal.d.ts

@@ -1,8 +0,11 @@
-import React from 'react';
+import React, { MutableRefObject } from 'react';
+import * as RMWC from '@rmwc/types';
 export declare type PortalPropT = Element | string | boolean | undefined | null;
-export declare function Portal(): JSX.Element;
+export interface PortalProps extends Omit<RMWC.HTMLProps<HTMLDivElement>, 'id' | 'ref'> {
+}
+export declare const Portal: (props: PortalProps) => JSX.Element;
 export declare function PortalChild({ children, renderTo, menuSurfaceDomPositionRef }: {
     children: React.ReactNode;
     renderTo?: PortalPropT;
-    menuSurfaceDomPositionRef?: React.MutableRefObject<HTMLDivElement | null>;
+    menuSurfaceDomPositionRef?: MutableRefObject<HTMLDivElement | null>;
 }): JSX.Element | null;

next/portal.js

@@ -1,24 +0,37 @@
-import { __read } from "tslib";
-import React, { useRef, useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { __assign, __read } from "tslib";
+import React, { useEffect, useState, useContext, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { PortalContext } from './PortalContext';
 var PORTAL_ID = 'rmwcPortal';
-export function Portal() {
-    var el = useRef(null);
-    return React.createElement("div", { ref: el, id: PORTAL_ID });
-}
+export var Portal = function (props) {
+    var portalContext = useContext(PortalContext);
+    var setPortalElement = portalContext === null || portalContext === void 0 ? void 0 : portalContext.setPortalElement;
+    var portalRef = useCallback(function (node) {
+        if (node !== null && setPortalElement) {
+            setPortalElement(node);
+        }
+    }, [setPortalElement]);
+    return React.createElement("div", __assign({ ref: portalRef, id: PORTAL_ID }, props));
+};
 export function PortalChild(_a) {
     var children = _a.children, renderTo = _a.renderTo, menuSurfaceDomPositionRef = _a.menuSurfaceDomPositionRef;
     var _b = __read(useState(), 2), portalEl = _b[0], setPortalEl = _b[1];
+    var portalElementFromContext = useContext(PortalContext).portalElement;
     useEffect(function () {
         var _a, _b;
         var element = undefined;
-        if (renderTo === true) {
+        if (renderTo === true && portalElementFromContext) {
+            element = portalElementFromContext;
+        }
+        else if (renderTo === true) {
             element = (_a = document === null || document === void 0 ? void 0 : document.getElementById(PORTAL_ID)) !== null && _a !== void 0 ? _a : undefined;
-            !element &&
+            if (!element) {
                 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 = (_b = document === null || document === void 0 ? void 0 : document.querySelector(renderTo)) !== null && _b !== void 0 ? _b : undefined;
-            !element &&
+            if (!element) {
                 console.warn("The selector you provided for renderToPortal \"" + renderTo + "\" didn't find any elements.");
+            }
         }
@@ -31,3 +44,3 @@ else if (renderTo instanceof Element) {
         }
-    }, [renderTo, portalEl]);
+    }, [renderTo, portalEl, portalElementFromContext]);
     // if renderTo defined, render children if we have the portalEl, else don't render anything.
@@ -38,3 +51,3 @@ // menuSurfaceDomPositionRef is used to position the menu at the correct location on the menuSurfaceAnchor
         if (portalEl) {
-            return (React.createElement("div", { ref: menuSurfaceDomPositionRef }, ReactDOM.createPortal(children, portalEl)));
+            return (React.createElement("div", { ref: menuSurfaceDomPositionRef }, createPortal(children, portalEl)));
         }
@@ -41,0 +54,0 @@ else {

package.json

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

README.md

@@ -1,3 +0,44 @@
-# RMWC Base module
+# Portal
 
-This module contains core functionality shared between all RMWC components.
+The Portal component will let you render components to a portal.
+
+- Module **@rmwc/base**
+
+
+## Portal
+
+```jsx
+<Portal />
+```
+
+## PortalProvider (optional)
+
+The PortalProvider component is an optional component that provides a global context for the Portal element in the RMWC library. This context is used by the Portal component to retrieve the Portal element without relying on document.getElementById, which doesn't work inside a Shadow DOM.
+
+The PortalProvider component is used by importing it into your project and wrapping it around your application or component tree similar to TypographyProvider.
+
+```jsx
+function App() {
+  return (
+    <PortalProvider>
+      <div>
+        {/* Other components here */}
+        <Portal />
+      </div>
+    </PortalProvider>
+  );
+}
+```
+
+In this example, the PortalProvider component is used to wrap the Portal component. Elements rendered to the portal will now render directly to the portalElement stored in the portal context instead of retrieving the Portal element using `document.getElementById()`.
+
+The PortalProvider component is optional for most users. If you are using the RMWC library in a Shadow DOM and the Portal component is not rendering inside the correct Portal element, then you can use the PortalProvider component to ensure that the Portal element is retrieved using the PortalContext.
+
+## Notes
+
+The PortalProvider component does not accept any props.
+
+The Portal component only needs to be a descendent of PortalProvider for it to be functional.
+
+Unlike ThemeProvider or TypographyProvider, the PortalProvider component should only be used once in your application or component tree. (If you include multiple instances of PortalProvider, the context will only grab the context values from the first PortalProvider parent and the solution will break.)
+

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

104638

increased by16.76%

Number of package files

107

increased by9.18%

Lines of code

2511

increased by10.13%

Number of lines in readme file

45

increased by1025%

Dependency changes

• Updated@rmwc/types@^8.0.8