@chakra-ui/portal - npm Package Compare versions

Comparing version 2.0.8 to 2.0.9

dist/index.cjs.js

@@ -36,5 +36,4 @@ "use strict";
 // src/portal-manager.tsx
-var import_utils = require("@chakra-ui/utils");
-var import_react_utils = require("@chakra-ui/react-utils");
-var [PortalManagerContextProvider, usePortalManager] = (0, import_react_utils.createContext)({
+var import_react_context = require("@chakra-ui/react-context");
+var [PortalManagerContextProvider, usePortalManager] = (0, import_react_context.createContext)({
   strict: false,
@@ -49,13 +48,10 @@ name: "PortalManagerContext"
 }
-if (import_utils.__DEV__) {
-  PortalManager.displayName = "PortalManager";
-}
+PortalManager.displayName = "PortalManager";
 
 // src/portal.tsx
-var import_hooks = require("@chakra-ui/hooks");
-var import_utils2 = require("@chakra-ui/utils");
-var import_react_utils2 = require("@chakra-ui/react-utils");
+var import_react_use_safe_layout_effect = require("@chakra-ui/react-use-safe-layout-effect");
+var import_react_context2 = require("@chakra-ui/react-context");
 var import_react_dom = require("react-dom");
 var import_react2 = require("react");
-var [PortalContextProvider, usePortalContext] = (0, import_react_utils2.createContext)({
+var [PortalContextProvider, usePortalContext] = (0, import_react_context2.createContext)({
   strict: false,
@@ -80,7 +76,7 @@ name: "PortalContext"
   const portal = (0, import_react2.useRef)(null);
-  const forceUpdate = (0, import_hooks.useForceUpdate)();
-  (0, import_react2.useEffect)(forceUpdate, []);
+  const [, forceUpdate] = (0, import_react2.useState)({});
+  (0, import_react2.useEffect)(() => forceUpdate({}), []);
   const parentPortal = usePortalContext();
   const manager = usePortalManager();
-  (0, import_hooks.useSafeLayoutEffect)(() => {
+  (0, import_react_use_safe_layout_effect.useSafeLayoutEffect)(() => {
     if (!tempNode)
@@ -95,3 +91,3 @@ return;
     host.appendChild(portal.current);
-    forceUpdate();
+    forceUpdate({});
     const portalNode = portal.current;
@@ -119,3 +115,3 @@ return () => {
   const containerEl = containerRef.current;
-  const host = containerEl ?? (import_utils2.isBrowser ? document.body : void 0);
+  const host = containerEl ?? (typeof window !== "undefined" ? document.body : void 0);
   const portal = (0, import_react2.useMemo)(() => {
@@ -127,7 +123,5 @@ const node = containerEl == null ? void 0 : containerEl.ownerDocument.createElement("div");
   }, [containerEl]);
-  const forceUpdate = (0, import_hooks.useForceUpdate)();
-  (0, import_hooks.useSafeLayoutEffect)(() => {
-    forceUpdate();
-  }, []);
-  (0, import_hooks.useSafeLayoutEffect)(() => {
+  const [, forceUpdate] = (0, import_react2.useState)({});
+  (0, import_react_use_safe_layout_effect.useSafeLayoutEffect)(() => forceUpdate({}), []);
+  (0, import_react_use_safe_layout_effect.useSafeLayoutEffect)(() => {
     if (!portal || !host)
@@ -161,5 +155,3 @@ return;
 Portal.selector = PORTAL_SELECTOR;
-if (import_utils2.__DEV__) {
-  Portal.displayName = "Portal";
-}
+Portal.displayName = "Portal";
 // Annotate the CommonJS export names for ESM import in node:
@@ -166,0 +158,0 @@ 0 && (module.exports = {

dist/index.esm.js

@@ -5,4 +5,3 @@ // ../../react-shim.js
 // src/portal-manager.tsx
-import { __DEV__ } from "@chakra-ui/utils";
-import { createContext } from "@chakra-ui/react-utils";
+import { createContext } from "@chakra-ui/react-context";
 var [PortalManagerContextProvider, usePortalManager] = createContext({
@@ -18,10 +17,7 @@ strict: false,
 }
-if (__DEV__) {
-  PortalManager.displayName = "PortalManager";
-}
+PortalManager.displayName = "PortalManager";
 
 // src/portal.tsx
-import { useForceUpdate, useSafeLayoutEffect } from "@chakra-ui/hooks";
-import { isBrowser, __DEV__ as __DEV__2 } from "@chakra-ui/utils";
-import { createContext as createContext2 } from "@chakra-ui/react-utils";
+import { useSafeLayoutEffect } from "@chakra-ui/react-use-safe-layout-effect";
+import { createContext as createContext2 } from "@chakra-ui/react-context";
 import { createPortal } from "react-dom";
@@ -49,4 +45,4 @@ import { useEffect, useMemo, useRef, useState } from "react";
   const portal = useRef(null);
-  const forceUpdate = useForceUpdate();
-  useEffect(forceUpdate, []);
+  const [, forceUpdate] = useState({});
+  useEffect(() => forceUpdate({}), []);
   const parentPortal = usePortalContext();
@@ -64,3 +60,3 @@ const manager = usePortalManager();
     host.appendChild(portal.current);
-    forceUpdate();
+    forceUpdate({});
     const portalNode = portal.current;
@@ -88,3 +84,3 @@ return () => {
   const containerEl = containerRef.current;
-  const host = containerEl ?? (isBrowser ? document.body : void 0);
+  const host = containerEl ?? (typeof window !== "undefined" ? document.body : void 0);
   const portal = useMemo(() => {
@@ -96,7 +92,5 @@ const node = containerEl == null ? void 0 : containerEl.ownerDocument.createElement("div");
   }, [containerEl]);
-  const forceUpdate = useForceUpdate();
+  const [, forceUpdate] = useState({});
+  useSafeLayoutEffect(() => forceUpdate({}), []);
   useSafeLayoutEffect(() => {
-    forceUpdate();
-  }, []);
-  useSafeLayoutEffect(() => {
     if (!portal || !host)
@@ -130,5 +124,3 @@ return;
 Portal.selector = PORTAL_SELECTOR;
-if (__DEV__2) {
-  Portal.displayName = "Portal";
-}
+Portal.displayName = "Portal";
 export {
@@ -135,0 +127,0 @@ Portal,

package.json

 {
   "name": "@chakra-ui/portal",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "React component used to render children outside the DOM hierarchy of the parent component",
@@ -35,5 +35,4 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "2.0.8",
-    "@chakra-ui/react-utils": "2.0.5",
-    "@chakra-ui/utils": "2.0.8"
+    "@chakra-ui/react-use-safe-layout-effect": "2.0.1",
+    "@chakra-ui/react-context": "2.0.3"
   },
@@ -45,3 +44,3 @@ "peerDependencies": {
   "devDependencies": {
-    "@chakra-ui/button": "2.0.8",
+    "@chakra-ui/button": "2.0.9",
     "@testing-library/react": "13.3.0",
@@ -59,4 +58,3 @@ "@types/react-frame-component": "^4.1.1",
     "build:fast": "JSX=1 tsup src/index.ts"
-  },
-  "readme": "# @chakra-ui/portal\n\nA wrapper for rendering components in React Portals, with support for nested\nportals and stacking.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/portal\n\n# or\n\nnpm i @chakra-ui/portal\n```\n\n## Import components\n\n```jsx\nimport { Portal, PortalManager } from \"@chakra-ui/portal\"\n```\n\nRender the `PortalManager` once at the root of your application\n\n```jsx\nfunction App() {\n  return (\n    <ThemeProvider>\n      <CSSReset />\n      <PortalManager>{/* Your app goes here  */}</PortalManager>\n    </ThemeProvider>\n  )\n}\n```\n\n### Basic usage\n\nPortals are render into the portal manager's node by default not\n`document.body`.\n\n```jsx\n<div>\n  <p>Welcome</p>\n  <Portal>This text has been portaled</Portal>\n</div>\n```\n\n### Nested portals\n\nNesting portal can be very useful to build complex widgets like nested menu,\npopovers, modal, etc.\n\n```jsx\n<Portal>\n  This is a portal.\n  <Portal>This is a nested portal</Portal>\n</Portal>\n```\n\n### Custom container\n\nYou can also portal elements into a custom containers. Simply pass a\n`containerRef` prop that points to the `node` of that element.\n\n```jsx\n<>\n  <div ref={ref} />\n  <Portal containerRef={ref}>\n    <h1>Hello world</h1>\n  </Portal>\n</>\n```\n"
+  }
 }

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

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

Improved metrics

Dependency count

4

decreased by-20%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

15151

decreased by-8.65%

Lines of code

327

decreased by-4.66%

Dependency changes

• + Added@chakra-ui/react-context@2.0.3

• + Added@chakra-ui/react-use-safe-layout-effect@2.0.1

• + Added@chakra-ui/react-context@2.0.3(transitive)

• + Added@chakra-ui/react-use-safe-layout-effect@2.0.1(transitive)

• - Removed@chakra-ui/hooks@2.0.8

• - Removed@chakra-ui/react-utils@2.0.5

• - Removed@chakra-ui/utils@2.0.8

• - Removed@chakra-ui/hooks@2.0.8(transitive)

• - Removed@chakra-ui/react-utils@2.0.5(transitive)

• - Removed@chakra-ui/utils@2.0.8(transitive)

• - Removed@types/lodash@4.17.9(transitive)

• - Removed@types/lodash.mergewith@4.6.6(transitive)

• - Removedcompute-scroll-into-view@1.0.14(transitive)

• - Removedcopy-to-clipboard@3.3.1(transitive)

• - Removedcss-box-model@1.2.1(transitive)

• - Removedframesync@5.3.0(transitive)

• - Removedlodash.mergewith@4.6.2(transitive)

• - Removedtiny-invariant@1.3.3(transitive)

• - Removedtoggle-selection@1.0.6(transitive)

• - Removedtslib@2.7.0(transitive)