aio-popup 8.1.0 → 8.2.0

package/index.css

@@ -191,6 +191,7 @@
   width: 100%;
   overflow-y: auto;
   box-sizing: border-box;
+  background:#fff;
 }
 
 .aio-popup-body * {

package/index.d.ts

@@ -138,23 +138,23 @@ export type AP_usePopup = {
     addConfirm: AP_addConfirm;
     addPrompt: AP_addPrompt;
 };
-export type I_usePopup = {
+export type I_usePopup = ReturnType<typeof usePopup>;
+declare const usePopup: (props?: {
+    rtl?: boolean;
+    id?: string;
+}) => {
     addAlert: AP_addAlert;
     addSnackebar: AP_addSnackebar;
     removeModal: AP_removeModal;
     addModal: AP_addModal;
-    getModals: AP_getModals;
+    getModals: () => AP_modal[];
     addHighlight: AP_addHighlight;
     removeHighlight: AP_removeHighlight;
     render: AP_render;
     addConfirm: AP_addConfirm;
     addPrompt: AP_addPrompt;
-    portal: () => void;
+    portal: () => any;
 };
-declare const usePopup: (props?: {
-    rtl?: boolean;
-    id?: string;
-}) => I_usePopup;
 export default usePopup;
 export type AP_SnackebarItem = {
     item: AP_snackebar;

package/index.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createRef, useEffect, useState, createContext, useContext, useRef } from 'react';
+import { createRef, useEffect, useState, createContext, useContext, useRef, useMemo } from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import ReactDOM from 'react-dom';
 import { $, anime } from 'aio-deps';
@@ -235,19 +235,15 @@ const usePopup = (props) => {
         };
         addModal(config);
     };
-    const getContext = () => {
-        return {
-            rtl: !!props && !!props.rtl,
-            snackebarItems: snackebarItemsRef.current,
-            removeSnackebar, removeModal
-        };
-    };
+    const ctx = useMemo(() => ({ rtl: !!(props === null || props === void 0 ? void 0 : props.rtl), snackebarItems, removeSnackebar, removeModal }), [props === null || props === void 0 ? void 0 : props.rtl, snackebarItems]);
     const render = (caller) => {
-        return (_jsxs(CTX.Provider, { value: getContext(), children: [modalsRef.current.map((modal, i) => {
+        return (_jsxs(CTX.Provider, { value: ctx, children: [modalsRef.current.map((modal, i) => {
                     return (_jsx(Popup, { modal: modal, isLast: i === modalsRef.current.length - 1, renderCaller: caller }, modal.id));
                 }), snackebarItems.map((item, i) => _jsx(SnackebarItem, { item: item, index: i }, item.id)), !!highlight && _jsx(Highlight, { highlight: highlight })] }));
     };
-    const portal = () => ReactDOM.createPortal(render(), document.body);
+    const portal = useMemo(() => {
+        return () => ReactDOM.createPortal(render(), document.body);
+    }, [modals, snackebarItems, highlight]);
     return { addAlert, addSnackebar, removeModal, addModal, getModals, addHighlight, removeHighlight, render, addConfirm, addPrompt, portal };
 };
 export default usePopup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aio-popup",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "handle all types of popup and modals in react",
   "main": "index.js",
   "scripts": {