@alfalab/core-components-portal - npm Package Compare versions

Comparing version 1.3.3 to 1.4.0

dist/Component.d.ts

 /// <reference types="react" />
-import React from 'react';
+import { ReactNode } from 'react';
 type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
     /**
@@ -9,3 +11,3 @@ * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
 };
-declare const Portal: React.FC<PortalProps>;
+declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<Element>>;
 export { PortalProps, Portal };

dist/Component.js

@@ -7,13 +7,22 @@ 'use strict';
 var reactDom = require('react-dom');
-var portalContainer = require('./portalContainer.js');
+var utils = require('./utils.js');
 
-var Portal = function (_a) {
-    var children = _a.children, _b = _a.getPortalContainer, getPortalContainer = _b === void 0 ? portalContainer.getDefaultPortalContainer : _b;
-    var _c = react.useState(false), isMount = _c[0], setIsMount = _c[1];
+var Portal = react.forwardRef(function (_a, ref) {
+    var _b = _a.getPortalContainer, getPortalContainer = _b === void 0 ? utils.getDefaultPortalContainer : _b, children = _a.children;
+    var _c = react.useState(null), mountNode = _c[0], setMountNode = _c[1];
     react.useEffect(function () {
-        setIsMount(true);
-    }, []);
-    return isMount ? reactDom.createPortal(children, getPortalContainer()) : null;
-};
+        setMountNode(getPortalContainer());
+    }, [getPortalContainer]);
+    react.useEffect(function () {
+        if (mountNode) {
+            utils.setRef(ref, mountNode);
+            return function () {
+                utils.setRef(ref, null);
+            };
+        }
+        return function () { return null; };
+    }, [ref, mountNode]);
+    return mountNode ? reactDom.createPortal(children, mountNode) : mountNode;
+});
 
 exports.Portal = Portal;

dist/cssm/Component.d.ts

 /// <reference types="react" />
-import React from 'react';
+import { ReactNode } from 'react';
 type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
     /**
@@ -9,3 +11,3 @@ * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
 };
-declare const Portal: React.FC<PortalProps>;
+declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<Element>>;
 export { PortalProps, Portal };

dist/cssm/Component.js

@@ -7,13 +7,22 @@ 'use strict';
 var reactDom = require('react-dom');
-var portalContainer = require('./portalContainer.js');
+var utils = require('./utils.js');
 
-var Portal = function (_a) {
-    var children = _a.children, _b = _a.getPortalContainer, getPortalContainer = _b === void 0 ? portalContainer.getDefaultPortalContainer : _b;
-    var _c = react.useState(false), isMount = _c[0], setIsMount = _c[1];
+var Portal = react.forwardRef(function (_a, ref) {
+    var _b = _a.getPortalContainer, getPortalContainer = _b === void 0 ? utils.getDefaultPortalContainer : _b, children = _a.children;
+    var _c = react.useState(null), mountNode = _c[0], setMountNode = _c[1];
     react.useEffect(function () {
-        setIsMount(true);
-    }, []);
-    return isMount ? reactDom.createPortal(children, getPortalContainer()) : null;
-};
+        setMountNode(getPortalContainer());
+    }, [getPortalContainer]);
+    react.useEffect(function () {
+        if (mountNode) {
+            utils.setRef(ref, mountNode);
+            return function () {
+                utils.setRef(ref, null);
+            };
+        }
+        return function () { return null; };
+    }, [ref, mountNode]);
+    return mountNode ? reactDom.createPortal(children, mountNode) : mountNode;
+});
 
 exports.Portal = Portal;

dist/cssm/index.js

@@ -7,3 +7,3 @@ 'use strict';
 require('react-dom');
-require('./portalContainer.js');
+require('./utils.js');
 var Component = require('./Component.js');
@@ -10,0 +10,0 @@

dist/esm/Component.d.ts

 /// <reference types="react" />
-import React from 'react';
+import { ReactNode } from 'react';
 type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
     /**
@@ -9,3 +11,3 @@ * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
 };
-declare const Portal: React.FC<PortalProps>;
+declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<Element>>;
 export { PortalProps, Portal };

dist/esm/Component.js

@@ -1,14 +0,23 @@
-import { useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { getDefaultPortalContainer } from './portalContainer.js';
+import { setRef, getDefaultPortalContainer } from './utils.js';
 
-var Portal = function (_a) {
-    var children = _a.children, _b = _a.getPortalContainer, getPortalContainer = _b === void 0 ? getDefaultPortalContainer : _b;
-    var _c = useState(false), isMount = _c[0], setIsMount = _c[1];
+var Portal = forwardRef(function (_a, ref) {
+    var _b = _a.getPortalContainer, getPortalContainer = _b === void 0 ? getDefaultPortalContainer : _b, children = _a.children;
+    var _c = useState(null), mountNode = _c[0], setMountNode = _c[1];
     useEffect(function () {
-        setIsMount(true);
-    }, []);
-    return isMount ? createPortal(children, getPortalContainer()) : null;
-};
+        setMountNode(getPortalContainer());
+    }, [getPortalContainer]);
+    useEffect(function () {
+        if (mountNode) {
+            setRef(ref, mountNode);
+            return function () {
+                setRef(ref, null);
+            };
+        }
+        return function () { return null; };
+    }, [ref, mountNode]);
+    return mountNode ? createPortal(children, mountNode) : mountNode;
+});
 
 export { Portal };

dist/esm/index.js

 import 'react';
 import 'react-dom';
-import './portalContainer.js';
+import './utils.js';
 export { Portal } from './Component.js';

dist/index.js

@@ -7,3 +7,3 @@ 'use strict';
 require('react-dom');
-require('./portalContainer.js');
+require('./utils.js');
 var Component = require('./Component.js');
@@ -10,0 +10,0 @@

dist/modern/Component.d.ts

 /// <reference types="react" />
-import React from 'react';
+import { ReactNode } from 'react';
 type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
     /**
@@ -9,3 +11,3 @@ * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
 };
-declare const Portal: React.FC<PortalProps>;
+declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<Element>>;
 export { PortalProps, Portal };

dist/modern/Component.js

@@ -1,13 +0,22 @@
-import { useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { getDefaultPortalContainer } from './portalContainer.js';
+import { getDefaultPortalContainer, setRef } from './utils.js';
 
-const Portal = ({ children, getPortalContainer = getDefaultPortalContainer, }) => {
-    const [isMount, setIsMount] = useState(false);
+const Portal = forwardRef(({ getPortalContainer = getDefaultPortalContainer, children }, ref) => {
+    const [mountNode, setMountNode] = useState(null);
     useEffect(() => {
-        setIsMount(true);
-    }, []);
-    return isMount ? createPortal(children, getPortalContainer()) : null;
-};
+        setMountNode(getPortalContainer());
+    }, [getPortalContainer]);
+    useEffect(() => {
+        if (mountNode) {
+            setRef(ref, mountNode);
+            return () => {
+                setRef(ref, null);
+            };
+        }
+        return () => null;
+    }, [ref, mountNode]);
+    return mountNode ? createPortal(children, mountNode) : mountNode;
+});
 
 export { Portal };

dist/modern/index.js

 import 'react';
 import 'react-dom';
-import './portalContainer.js';
+import './utils.js';
 export { Portal } from './Component.js';

package.json

 {
     "name": "@alfalab/core-components-portal",
-    "version": "1.3.3",
+    "version": "1.4.0",
     "description": "Portal component",
@@ -19,3 +19,3 @@ "keywords": [],
     },
-    "gitHead": "b8e497302de3841540914c3918284a73df9f84bd"
+    "gitHead": "6b303f53b28575eff35ef92e9438826324cde107"
 }

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

Improved metrics

Total package byte prevSize

11302

increased by40.1%

Lines of code

267

increased by50.85%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes