ag-common 0.0.682 → 0.0.683

package/dist/ui/components/Modal/Dialog.d.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
 export declare const ModalDialog: (content: JSX.Element, opt?: {
     style?: CSSProperties;
+    portalId?: string;
 }) => Promise<string | undefined>;

package/dist/ui/components/Modal/Modal.d.ts

@@ -4,4 +4,4 @@ export declare const ModalItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Modal: ({ open, setOpen, children, position, topPosition, showCloseButton, closeOnMoveMouseOutside, className, closeOnClickOutside, portalId, style, }: IModal) => React.JSX.Element | null;
+export declare const Modal: ({ open, setOpen, children, position, topPosition, showCloseButton, closeOnMoveMouseOutside, className, closeOnClickOutside, portalId: pidraw, style, }: IModal) => React.JSX.Element | null;

package/dist/ui/components/Modal/Modal.js

@@ -34,6 +34,7 @@ const react_dom_1 = require("react-dom");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const styles_1 = require("../../styles");
 const Close_1 = require("../Close");
+const globalId = 'ag-modal-portal';
 const FixedBackground = styled_1.default.div `
   position: fixed;
   top: 0;
@@ -84,8 +85,33 @@ exports.ModalItem = styled_1.default.div `
 const CloseStyled = (0, styled_1.default)(Close_1.Close) `
   z-index: 1;
 `;
-const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'top', showCloseButton = true, closeOnMoveMouseOutside = false, className, closeOnClickOutside = true, portalId, style, }) => {
+const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'top', showCloseButton = true, closeOnMoveMouseOutside = false, className, closeOnClickOutside = true, portalId: pidraw, style, }) => {
+    let portalId = pidraw;
+    if (portalId === undefined) {
+        portalId = globalId;
+    }
     const [elem, setElem] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (portalId === null ||
+            document.querySelectorAll(`#${portalId}`).length > 0) {
+            return;
+        }
+        const d = document.createElement('div');
+        d.id = portalId;
+        d.style.position = 'fixed';
+        d.style.zIndex = '10';
+        document.body.appendChild(d);
+        return () => {
+            var _a;
+            try {
+                (_a = document.querySelector(`#${portalId}`)) === null || _a === void 0 ? void 0 : _a.remove();
+            }
+            catch (e) {
+                //
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     (0, react_1.useEffect)(() => {
         const originalStyle = window.getComputedStyle(document.body).overflow || '';
         if (open) {

package/dist/ui/components/Modal/types.d.ts

@@ -9,8 +9,8 @@ export interface IModal {
     closeOnMoveMouseOutside?: boolean;
     className?: string;
     closeOnClickOutside?: boolean;
-    /** if provided, will create inside this #id */
-    portalId?: string;
+    /** if provided, will create inside this #id. default "ag-modal-portal". if null, wont use global id */
+    portalId?: string | null;
     /**applied to modal inside fixed */
     style?: CSSProperties;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.682",
+  "version": "0.0.683",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",