aio-popup 6.0.1 → 6.0.3

package/index.css

@@ -148,7 +148,7 @@
   background: #fff;
   color: #323130;
   padding: 6px 12px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
   min-height: 36px;
   gap: 12px;

package/index.d.ts

@@ -33,7 +33,7 @@ export type AP_modal = {
     setAttrs?: AP_setAttrs;
 };
 export type AP_alert = {
-    align?: 'left' | 'right' | 'center';
+    rtl?: boolean;
     icon?: false | ReactNode;
     type: 'success' | 'error' | 'warning' | 'info';
     title?: ReactNode;

package/index.js

@@ -1,21 +1,802 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,o){return new(i||(i=Promise))(function(r,n){function a(t){try{s(o.next(t))}catch(e){n(e)}}function l(t){try{s(o.throw(t))}catch(e){n(e)}}function s(t){var e;t.done?r(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(a,l)}s((o=o.apply(t,e||[])).next())})};import{jsx as t,Fragment as e,jsxs as i}from"react/jsx-runtime";import{createRef as o,useEffect as r,useState as n,createContext as a,useContext as l,useRef as s}from"react";import*as d from"react-dom/server";import c from"react-dom";import p from"animejs/lib/anime.es.js";import u from"jquery";import"./index.css";let CTX=a({});function Align(t){let{modal:e,target:i,fitHorizontal:o,rtl:r,limitTo:n}=t,a=window.innerWidth,l=window.innerHeight,s={left:0,top:0,bottom:l,right:a,width:a,height:l},d=getBound(i[0]),c=getBound(e[0]);d=Object.assign({},d);let p;if((c=Object.assign({},c)).top=d.bottom,c.bottom=c.top+c.height,o)c.width=d.width,c.left=d.left,c.right=d.left+d.width;else{if(n){let u=e.parents(n);u.length&&(s=getBound(u[0]))}r?(c.right=d.right,c.left=c.right-c.width,c.left<s.left&&(c.left=s.left)):(c.left=d.left,c.right=c.left+c.width,c.right>s.right&&(c.left=s.right-c.width))}return c.bottom>s.bottom?c.height>d.top-s.top?c.top=s.bottom-c.height:c.top=d.top-c.height:c.top=d.bottom,c.height>s.height&&(c.top=s.top,c.height=s.height,p="auto"),{left:c.left,top:c.top,width:c.width,overflowY:p,maxWidth:s.width}}let CloseIcon=()=>t("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:t("path",{d:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",style:{fill:"currentcolor"}})});function AddToAttrs(t,e){let{style:i}=e,o,r=[...(t=t||{}).className?t.className.split(" "):[],...(e.className?Array.isArray(e.className)?e.className:e.className.split(" "):[]).filter(t=>!!t)],n=r.length?r.join(" "):void 0,a=Object.assign(Object.assign({},t.style),i);return Object.assign(Object.assign(Object.assign({},t),{className:n,style:a}),e.attrs)}let usePopup=o=>{let[r,a]=n([]),l=s({}),d=s(r);d.current=r;let[p,_]=n([]),h=s(p);h.current=p;let[$,g]=n(),m=t=>{void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random()));let e=t;a(i=>[...i.filter(({id:e})=>e!==t.id),e])},f=t=>__awaiter(void 0,void 0,void 0,function*(){if("string"!=typeof t&&(t="last"),"all"===t){a([]);return}if(!d.current.length)return;"last"===t&&(t=d.current[d.current.length-1].id);let e=d.current.find(e=>e.id===t);e&&(u(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{e&&"function"==typeof e.onClose&&e.onClose(),a(e=>e.filter(e=>e.id!==t))},300))}),v=t=>{_([...h.current,Object.assign(Object.assign({},t),{id:"a"+Math.round(1e9*Math.random())})])},b=t=>{let e=h.current,i=e.find(e=>e.id===t);if(i&&!1!==i.onClose)_(e.filter((e,i)=>e.id!==t)),"function"==typeof i.onClose&&i.onClose()},C=t=>Alert(t),y=t=>g(t),k=()=>g(void 0),L=o=>{let{title:r,subtitle:n,submitText:a="Yes",canselText:l="No",onSubmit:s,onCansel:d=()=>{},setAttrs:c=()=>({})}=o,p={position:"center",setAttrs(t){let e=c(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-confirm"}):e},header:{title:r,subtitle:n},body:t(e,{children:"text"}),footer:i(e,{children:[t("button",{type:"button",onClick(){d(),f()},children:l}),t("button",{type:"button",className:"active",onClick:()=>__awaiter(void 0,void 0,void 0,function*(){if(s)!1!==(yield s())&&f()}),children:a})]})};m(p)},w=o=>{let r="a"+Math.round(1e5*Math.random()),{title:n,subtitle:a,submitText:s="Submit",canselText:d="close",onSubmit:c,onCansel:p=()=>{},setAttrs:u=()=>({})}=o,_={position:"center",setAttrs(t){let e=u(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-prompt"}):e},header:{title:n,subtitle:a},body:t(Prompt,{change:t=>l.current=Object.assign(Object.assign({},l.current),{[r]:t})}),footer:i(e,{children:[t("button",{type:"button",onClick(){p(),f()},children:d}),t("button",{type:"button",className:"active",onClick:()=>__awaiter(void 0,void 0,void 0,function*(){if(!c)return;let t=l.current[r];if(!1!==(yield c(t)))f();else{let e={};for(let i in l.current)i!==r&&(e[i]=l.current[i]);l.current=e}}),disabled:!l.current[r],children:s})]})};m(_)},S=()=>({rtl:!!o&&!!o.rtl,snackebarItems:h.current,removeSnackebar:b,removeModal:f}),T=e=>i(CTX.Provider,{value:S(),children:[d.current.map((i,o)=>t(Popup,{modal:i,isLast:o===d.current.length-1,renderCaller:e},i.id)),p.map((e,i)=>t(SnackebarItem,{item:e,index:i},e.id)),!!$&&t(Highlight,{highlight:$})]}),M=()=>c.createPortal(T(),document.body);return{addAlert:C,addSnackebar:v,removeModal:f,addModal:m,getModals:()=>d.current,addHighlight:y,removeHighlight:k,render:T,addConfirm:L,addPrompt:w,portal:M}};export default usePopup;let Prompt=({change:e})=>{let[i,o]=n("");return t("textarea",{placeholder:i,value:i,onChange(t){let i=t.target.value;o(i),e(i)}})},POPUPCTX=a({}),Popup=({modal:e,isLast:a,renderCaller:d})=>{let c=l(CTX),{setAttrs:p=()=>({}),id:_,position:h="fullscreen",getTarget:$}=e,[g]=n({dom:o(),backdropDom:o(),dui:void 0}),[m,f]=n({}),v=s(!1),[b,C]=n(e.state),y=p("modal")||{},k=s(!1);function L(t){if(!g.dui)return;let e=u(t.target);"popover"===h&&e.attr("data-id")!==g.dui&&!e.parents(`[data-id=${g.dui}]`).length&&c.removeModal()}function w(){let t=Object.assign(Object.assign({},m),y.style),i="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown";return Object.assign(Object.assign({},y),{ref:g.dom,"data-id":e.id,tabIndex:0,onKeyDown:T,[i]:x,className:B(),style:Object.assign({},t),onClick(t){t.stopPropagation()}})}function S(){if(!$)return{};let t=$();if(!t||!t.length)return{};let i={modal:u(g.dom.current),target:t,fitHorizontal:e.fitHorizontal,limitTo:e.limitTo,attrs:y,rtl:c.rtl};return Object.assign(Object.assign({},Align(i)),{position:"absolute"})}function T(t){if(a)27===t.keyCode&&c.removeModal()}function M(){setTimeout(()=>v.current=!1,0)}function x(t){v.current=!0,u(window).unbind("mouseup",M),u(window).bind("mouseup",M)}function B(){let t="aio-popup";return t+=c.rtl?" rtl":" ltr",k&&(t+=" not-mounted"),y.className&&(t+=" "+y.className),t}r(()=>()=>{u(window).unbind("click",L)}),r(()=>{if("popover"===h&&f(S()),$){g.dui="a"+Math.round(1e7*Math.random());$().attr("data-id",g.dui)}setTimeout(()=>{let t=u(g.dom.current);t.removeClass("not-mounted"),u(g.backdropDom.current).removeClass("not-mounted"),t.focus()},0),u(window).unbind("click",L),u(window).bind("click",L)},[]);let N=()=>({modal:e,isLast:a,state:b,setState:C,onKeyDown:T});return t(POPUPCTX.Provider,{value:N(),children:t(ModalBackdrop,{firstMount:!!k,backdropDom:g.backdropDom,isModalMouseDown:()=>v.current,children:i("div",Object.assign({},w(),{children:[t(ModalHeader,{}),t(ModalBody,{},e.id),t(ModalFooter,{})]}),e.id)},e.id)})},ModalBackdrop=({children:e,firstMount:i,backdropDom:o,isModalMouseDown:r})=>{let{removeModal:a,rtl:s}=l(CTX),{modal:d,onKeyDown:c}=l(POPUPCTX),{setAttrs:p=()=>({}),id:_,position:h="fullscreen"}=d,[$]=n(p("backdrop")||{});function g(t){if(!r()&&t.target===t.currentTarget)u(t.target).hasClass("aio-popup-backdrop")&&a()}function m(){let t="aio-popup-backdrop";return t+=` aio-popup-position-${h}`,t+=s?" rtl":" ltr",i&&(t+=" not-mounted"),AddToAttrs($,{className:t,attrs:{ref:o,onKeyDown:c,tabIndex:0,"data-id":_,onClick:$.onClick?$.onClick:g}})}return t("div",Object.assign({},m(),{children:e}))},ModalHeader=()=>{let{removeModal:e}=l(CTX),{modal:o,state:r,setState:n}=l(POPUPCTX);if(!o.header)return null;let{setAttrs:a=()=>({})}=o,s=a("header")||{};return"function"==typeof o.header?o.header({removeModal:e,state:r,setState:n}):"object"!=typeof o.header?null:i("div",Object.assign({},AddToAttrs(s,{className:"aio-popup-header"}),{children:[t(ModalHeaderElement,{type:"before"},"before"),t(ModalHeaderElement,{type:"title"},"title"),t(ModalHeaderElement,{type:"after"},"after"),t(ModalClose,{})]}))},ModalHeaderElement=({type:e})=>{let{modal:i}=l(POPUPCTX),{header:o}=i;return"function"!=typeof o&&o&&o[e]?t("div",{className:`aio-popup-header-${e}`,"data-subtitle":"title"===e?o.subtitle:void 0,children:o[e]}):null},ModalClose=()=>{let{removeModal:e}=l(CTX),{modal:i,state:o,setState:r}=l(POPUPCTX),{header:n}=i;return"function"!=typeof n&&n&&!1!==n.onClose?t("div",{className:"aio-popup-header-close",onClick(t){t.stopPropagation(),t.preventDefault(),"function"==typeof n.onClose?n.onClose({state:o,setState:r}):e(i.id)},children:t(CloseIcon,{})}):null},ModalBody=()=>{let{modal:e}=l(POPUPCTX),{body:i,setAttrs:o=()=>({})}=e,r=o("body")||{};return i&&null!==i?t("div",Object.assign({},AddToAttrs(r,{className:"aio-popup-body aio-popup-scroll"}),{children:i})):null},ModalFooter=()=>{let{modal:e}=l(POPUPCTX),{setAttrs:i=()=>({}),footer:o}=e;if(!o)return null;let r=i("footer")||{},n=AddToAttrs(r,{className:"aio-popup-footer"});return t("div",Object.assign({},n,{children:o}))},SBCTX=a({}),SnackebarItem=e=>{let i=l(CTX),{item:o}=e,{time:a=8,id:s,align:d=["right","top"]}=o;"top"!==d[1]&&"bottom"!==d[1]&&(d[1]="top"),"left"!==d[0]&&"right"!==d[0]&&"center"!==d[0]&&(d[0]="right");let[c,p]=n(!1);function u(){p(!1),setTimeout(()=>i.removeSnackebar(s),200)}r(()=>{setTimeout(()=>p(!0),0),setTimeout(()=>u(),1e3*a)},[]);let _=e=>"error"===e||"warning"===e||"info"===e?t(InfoSvg,{}):t(SuccessSvg,{}),h=()=>({mainContext:i,remove:u,item:Object.assign(Object.assign({},e.item),{time:a,align:d}),index:e.index,mounted:c,getSvg:_});return t(SBCTX.Provider,{value:h(),children:t(SnackebarContainer,{})})},SnackebarContainer=()=>{let{mainContext:e,mounted:i,index:o,item:r,remove:n}=l(SBCTX),{rtl:a}=e,{onClose:s,align:d=["right","top"]}=r;function c(t){let e=u(".aio-popup-snackebar-item-container"),i={top:12,bottom:12};for(let o=0;o<t;o++){let r=e.eq(o),n=r.height()+6,a=r.attr("data-vertical-align");i[a]+=n}return{["top"===d[1]?"top":"bottom"]:i[d[1]]}}let p="aio-popup-snackebar-item-container";p+=` aio-popup-snackebar-item-container-horizontal-align-${d[0]}`,i&&(p+=" mounted"),a&&(p+=" rtl");let _=c(o),h={"data-vertical-align":d[1],className:p,style:_,onClick:!1===s?void 0:()=>n()};return t("div",Object.assign({},h,{children:t(SnackebarCard,{})}))},SnackebarCard=()=>{let{item:e}=l(SBCTX),{type:o,attrs:r={}}=e,n="aio-popup-snackebar-item";return n+=` aio-popup-snackebar-item-${o}`,r.className&&(n+=` ${r.className}`),i("div",Object.assign({},Object.assign(Object.assign({},r),{className:n,style:r.style}),{children:[t(SnackebarIcon,{}),t(SnackebarText,{}),t(SnackebarAction,{}),t(SnackebarBar,{})]}))},SnackebarIcon=()=>{let{getSvg:e,item:i}=l(SBCTX);return t("div",{className:"aio-popup-snackebar-item-icon",children:i.icon?i.icon:e(i.type)})},SnackebarText=()=>{let{item:e}=l(SBCTX);return i("div",{className:"aio-popup-snackebar-item-text",children:[t("div",{className:"aio-popup-snackebar-item-uptext",children:e.text}),!!e.subtext&&t("div",{className:"aio-popup-snackebar-item-subtext",children:e.subtext})]})},SnackebarAction=()=>{let{item:e,remove:i}=l(SBCTX),{action:o}=e;return o&&o.text?t("button",Object.assign({},{className:"aio-popup-snackebar-item-action",onClick(t){t.stopPropagation(),o&&o.onClick(),i()}},{children:o.text})):null},SnackebarBar=()=>{let{item:e}=l(SBCTX);return t("div",{className:"aio-popup-snackebar-bar",style:{transition:`${e.time||8}s linear`}})};export function Alert(t){let{icon:e,type:i="",title:o="",text:r="",time:n=10,className:a,closeText:l="Close",onClose:s,align:c="left"}=t,p={id:"",time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${p.time}%;"></div>`,updateBarRender(){u(`.aio-popup-alert-container.${p.id} .aio-popup-time`).html(p.getBarRender())},getRender:()=>`
-      <div class='aio-popup-alert-container not-mounted ${p.id} aio-popup-alert-container-center${a?` ${a}`:""}'>
-        <div class='aio-popup-alert aio-popup-alert-${i}'>
-          <div class='aio-popup-alert-header'>${p.getIcon()}</div>
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, useEffect, useState, createContext, useContext, useRef } from 'react';
+import * as ReactDOMServer from 'react-dom/server';
+import ReactDOM from 'react-dom';
+import anime from "animejs/lib/anime.es.js";
+import $ from 'jquery';
+import './index.css';
+const CTX = createContext({});
+function Align(p) {
+    let { modal, target, fitHorizontal, rtl, limitTo } = p;
+    const bodyWidth = window.innerWidth, bodyHeight = window.innerHeight;
+    let pageLimit = { left: 0, top: 0, bottom: bodyHeight, right: bodyWidth, width: bodyWidth, height: bodyHeight };
+    let targetLimit = getBound(target[0]);
+    let domLimit = getBound(modal[0]);
+    targetLimit = Object.assign({}, targetLimit);
+    domLimit = Object.assign({}, domLimit);
+    let overflowY;
+    domLimit.top = targetLimit.bottom;
+    domLimit.bottom = domLimit.top + domLimit.height;
+    if (fitHorizontal) {
+        domLimit.width = targetLimit.width;
+        domLimit.left = targetLimit.left;
+        domLimit.right = targetLimit.left + targetLimit.width;
+    }
+    else {
+        if (limitTo) {
+            let elem = modal.parents(limitTo);
+            if (elem.length) {
+                pageLimit = getBound(elem[0]);
+            }
+        }
+        //اگر راست به چپ باید باشد
+        if (rtl) {
+            //راست المان را با راست هدف ست کن
+            domLimit.right = targetLimit.right;
+            //چپ المان را بروز رسانی کن
+            domLimit.left = domLimit.right - domLimit.width;
+            //اگر المان از سمت چپ از صفحه بیرون زد سمت چپ المان را با سمت چپ صفحه ست کن
+            if (domLimit.left < pageLimit.left) {
+                domLimit.left = pageLimit.left;
+            }
+        }
+        else {
+            //چپ المان را با چپ هدف ست کن
+            domLimit.left = targetLimit.left;
+            //راست المان را بروز رسانی کن
+            domLimit.right = domLimit.left + domLimit.width;
+            //اگر المان از سمت راست صفحه بیرون زد سمت چپ المان را با پهنای المان ست کن
+            if (domLimit.right > pageLimit.right) {
+                domLimit.left = pageLimit.right - domLimit.width;
+            }
+        }
+    }
+    //اگر المان از سمت پایین صفحه بیرون زد
+    if (domLimit.bottom > pageLimit.bottom) {
+        if (domLimit.height > targetLimit.top - pageLimit.top) {
+            domLimit.top = pageLimit.bottom - domLimit.height;
+        }
+        else {
+            domLimit.top = targetLimit.top - domLimit.height;
+        }
+    }
+    else {
+        domLimit.top = targetLimit.bottom;
+    }
+    if (domLimit.height > pageLimit.height) {
+        domLimit.top = pageLimit.top;
+        domLimit.height = pageLimit.height;
+        overflowY = 'auto';
+    }
+    return { left: domLimit.left, top: domLimit.top, width: domLimit.width, overflowY, maxWidth: pageLimit.width };
+}
+const CloseIcon = () => {
+    return (_jsx("svg", { viewBox: "0 0 24 24", role: "presentation", style: { width: '1.2rem', height: '1.2rem' }, children: _jsx("path", { d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z", style: { fill: 'currentcolor' } }) }));
+};
+function AddToAttrs(attrs, p) {
+    attrs = attrs || {};
+    let { style } = p;
+    let attrClassName = attrs.className ? attrs.className.split(' ') : [];
+    let className = p.className ? (Array.isArray(p.className) ? p.className : p.className.split(' ')) : [];
+    let classNames = [...attrClassName, ...className.filter((o) => !!o)];
+    let newClassName = classNames.length ? classNames.join(' ') : undefined;
+    let newStyle = Object.assign(Object.assign({}, attrs.style), style);
+    return Object.assign(Object.assign(Object.assign({}, attrs), { className: newClassName, style: newStyle }), p.attrs);
+}
+const usePopup = (props) => {
+    let [modals, setModals] = useState([]);
+    const promptTexts = useRef({});
+    let modalsRef = useRef(modals);
+    modalsRef.current = modals;
+    const getModals = () => modalsRef.current;
+    const [snackebarItems, setSnackebarItems] = useState([]);
+    const snackebarItemsRef = useRef(snackebarItems);
+    snackebarItemsRef.current = snackebarItems;
+    const [highlight, setHighlight] = useState();
+    const addModal = (o) => {
+        if (o.id === undefined) {
+            o.id = 'popup' + Math.round(Math.random() * 1000000);
+        }
+        let newModal = o;
+        setModals(prevModals => {
+            let newModals = prevModals.filter(({ id }) => id !== o.id);
+            return [...newModals, newModal];
+        });
+    };
+    const removeModal = (arg) => __awaiter(void 0, void 0, void 0, function* () {
+        if (typeof arg !== 'string') {
+            arg = 'last';
+        }
+        if (arg === 'all') {
+            setModals([]);
+            return;
+        }
+        if (!modalsRef.current.length) {
+            return;
+        }
+        if (arg === 'last') {
+            arg = modalsRef.current[modalsRef.current.length - 1].id;
+        }
+        let modal = modalsRef.current.find((o) => o.id === arg);
+        if (!modal) {
+            return;
+        }
+        $(`[data-id=${arg}]`).addClass('not-mounted');
+        setTimeout(() => {
+            if (modal && typeof modal.onClose === 'function') {
+                modal.onClose();
+            }
+            setModals(prevModals => prevModals.filter((o) => o.id !== arg));
+        }, 300);
+    });
+    const addSnackebar = (item) => {
+        let items = snackebarItemsRef.current;
+        let newItems = [...items, Object.assign(Object.assign({}, item), { id: 'a' + Math.round(Math.random() * 1000000000) })];
+        setSnackebarItems(newItems);
+    };
+    const removeSnackebar = (id) => {
+        const items = snackebarItemsRef.current;
+        const item = items.find((o) => o.id === id);
+        if (!item || item.onClose === false) {
+            return;
+        }
+        let newItems = items.filter((o, i) => o.id !== id);
+        setSnackebarItems(newItems);
+        if (typeof item.onClose === 'function') {
+            item.onClose();
+        }
+    };
+    const addAlert = (obj) => Alert(Object.assign({ rtl: props === null || props === void 0 ? void 0 : props.rtl }, obj));
+    const addHighlight = (highlight) => setHighlight(highlight);
+    const removeHighlight = () => setHighlight(undefined);
+    const addConfirm = (obj) => {
+        let { title, subtitle, submitText = 'Yes', canselText = 'No', onSubmit, onCansel = () => { }, setAttrs = () => { return {}; } } = obj;
+        let config = {
+            position: 'center',
+            setAttrs: (key) => {
+                let attrs = setAttrs(key);
+                if (key === 'modal') {
+                    return AddToAttrs(attrs, { className: 'aio-popup-confirm' });
+                }
+                return attrs;
+            },
+            header: { title, subtitle },
+            body: _jsx(_Fragment, { children: "text" }),
+            footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: 'button', onClick: () => { onCansel(); removeModal(); }, children: canselText }), _jsx("button", { type: 'button', className: 'active', onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                            if (!onSubmit) {
+                                return;
+                            }
+                            let res = yield onSubmit();
+                            if (res !== false) {
+                                removeModal();
+                            }
+                        }), children: submitText })] }))
+        };
+        addModal(config);
+    };
+    const addPrompt = (obj) => {
+        const id = 'a' + (Math.round(Math.random() * 100000));
+        let { title, subtitle, submitText = 'Submit', canselText = 'close', onSubmit, onCansel = () => { }, setAttrs = () => { return {}; } } = obj;
+        let config = {
+            position: 'center',
+            setAttrs: (key) => {
+                let attrs = setAttrs(key);
+                if (key === 'modal') {
+                    return AddToAttrs(attrs, { className: 'aio-popup-prompt' });
+                }
+                return attrs;
+            },
+            header: { title, subtitle },
+            body: _jsx(Prompt, { change: (value) => promptTexts.current = Object.assign(Object.assign({}, promptTexts.current), { [id]: value }) }),
+            footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: 'button', onClick: () => { onCansel(); removeModal(); }, children: canselText }), _jsx("button", { type: 'button', className: 'active', onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                            if (!onSubmit) {
+                                return;
+                            }
+                            const value = promptTexts.current[id];
+                            let res = yield onSubmit(value);
+                            if (res !== false) {
+                                removeModal();
+                            }
+                            else {
+                                const newPromptTexts = {};
+                                for (let prop in promptTexts.current) {
+                                    if (prop !== id) {
+                                        newPromptTexts[prop] = promptTexts.current[prop];
+                                    }
+                                }
+                                promptTexts.current = newPromptTexts;
+                            }
+                        }), children: submitText })] }))
+        };
+        addModal(config);
+    };
+    const getContext = () => {
+        return {
+            rtl: !!props && !!props.rtl,
+            snackebarItems: snackebarItemsRef.current,
+            removeSnackebar, removeModal
+        };
+    };
+    const render = (caller) => {
+        return (_jsxs(CTX.Provider, { value: getContext(), 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);
+    return { addAlert, addSnackebar, removeModal, addModal, getModals, addHighlight, removeHighlight, render, addConfirm, addPrompt, portal };
+};
+export default usePopup;
+const Prompt = ({ change }) => {
+    const [text, setText] = useState('');
+    return (_jsx("textarea", { placeholder: text, value: text, onChange: (e) => { const value = e.target.value; setText(value); change(value); } }));
+};
+const POPUPCTX = createContext({});
+const Popup = ({ modal, isLast, renderCaller }) => {
+    const mainContext = useContext(CTX);
+    let { setAttrs = () => { return {}; }, id, position = 'fullscreen', getTarget } = modal;
+    let [temp] = useState({ dom: createRef(), backdropDom: createRef(), dui: undefined });
+    let [popoverStyle, setPopoverStyle] = useState({});
+    let modalMouseDown = useRef(false);
+    //bar taraf kardane moshkele mozakhrafe click rooye backdrop ke az har ja mouse ro roosh vel mikoni modal baste mishe
+    const isModalMouseDown = () => modalMouseDown.current;
+    let [state, setState] = useState(modal.state);
+    let attrs = setAttrs('modal') || {};
+    const firstMount = useRef(false);
+    useEffect(() => () => { $(window).unbind('click', handleBackClick); });
+    useEffect(() => {
+        if (position === 'popover') {
+            setPopoverStyle(getPopoverStyle());
+        }
+        if (getTarget) {
+            temp.dui = 'a' + (Math.round(Math.random() * 10000000));
+            let target = getTarget();
+            target.attr('data-id', temp.dui);
+        }
+        setTimeout(() => {
+            let popup = $(temp.dom.current);
+            popup.removeClass('not-mounted');
+            $(temp.backdropDom.current).removeClass('not-mounted');
+            popup.focus();
+        }, 0);
+        $(window).unbind('click', handleBackClick);
+        $(window).bind('click', handleBackClick);
+    }, []);
+    function handleBackClick(e) {
+        //در مود پاپاور اگر هر جایی غیر از اینپوت و پاپاور کلیک شد پاپاپ رو ببند
+        if (!temp.dui) {
+            return;
+        }
+        let target = $(e.target);
+        if (position !== 'popover' || target.attr('data-id') === temp.dui || target.parents(`[data-id=${temp.dui}]`).length) {
+            return;
+        }
+        mainContext.removeModal();
+    }
+    function getModalProps() {
+        let style = Object.assign(Object.assign({}, popoverStyle), attrs.style);
+        let ev = "ontouchstart" in document.documentElement ? 'onTouchStart' : 'onMouseDown';
+        return Object.assign(Object.assign({}, attrs), { ref: temp.dom, "data-id": modal.id, tabIndex: 0, onKeyDown, [ev]: mouseDown, className: getClassName(), style: Object.assign({}, style), onClick: (e) => { e.stopPropagation(); } });
+    }
+    function getPopoverStyle() {
+        if (!getTarget) {
+            return {};
+        }
+        let target = getTarget();
+        if (!target || !target.length) {
+            return {};
+        }
+        let p = { modal: $(temp.dom.current), target, fitHorizontal: modal.fitHorizontal, limitTo: modal.limitTo, attrs, rtl: mainContext.rtl };
+        let style = Align(p);
+        let res = Object.assign(Object.assign({}, style), { position: 'absolute' });
+        return res;
+    }
+    function onKeyDown(e) {
+        if (!isLast) {
+            return;
+        }
+        let code = e.keyCode;
+        if (code === 27) {
+            mainContext.removeModal();
+        }
+    }
+    function mouseUp() {
+        setTimeout(() => modalMouseDown.current = false, 0);
+    }
+    function mouseDown(e) {
+        modalMouseDown.current = true;
+        $(window).unbind('mouseup', mouseUp);
+        $(window).bind('mouseup', mouseUp);
+    }
+    function getClassName() {
+        let className = 'aio-popup';
+        className += mainContext.rtl ? ' rtl' : ' ltr';
+        if (firstMount) {
+            className += ' not-mounted';
+        }
+        if (attrs.className) {
+            className += ' ' + attrs.className;
+        }
+        return className;
+    }
+    const getContext = () => ({ modal, isLast, state, setState, onKeyDown });
+    return (_jsx(POPUPCTX.Provider, { value: getContext(), children: _jsx(ModalBackdrop, { firstMount: !!firstMount, backdropDom: temp.backdropDom, isModalMouseDown: isModalMouseDown, children: _jsxs("div", Object.assign({}, getModalProps(), { children: [_jsx(ModalHeader, {}), _jsx(ModalBody, {}, modal.id), _jsx(ModalFooter, {})] }), modal.id) }, modal.id) }));
+};
+const ModalBackdrop = ({ children, firstMount, backdropDom, isModalMouseDown }) => {
+    const { removeModal, rtl } = useContext(CTX);
+    let { modal, onKeyDown } = useContext(POPUPCTX);
+    let { setAttrs = () => { return {}; }, id, position = 'fullscreen' } = modal;
+    const [attrs] = useState(setAttrs('backdrop') || {});
+    function backClick(e) {
+        if (isModalMouseDown()) {
+            return;
+        }
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+        let target = $(e.target);
+        if (!target.hasClass('aio-popup-backdrop')) {
+            return;
+        }
+        removeModal();
+    }
+    function getProps() {
+        let className = 'aio-popup-backdrop';
+        className += ` aio-popup-position-${position}`;
+        className += rtl ? ' rtl' : ' ltr';
+        if (firstMount) {
+            className += ' not-mounted';
+        }
+        return AddToAttrs(attrs, { className, attrs: { ref: backdropDom, onKeyDown, tabIndex: 0, ['data-id']: id, onClick: attrs.onClick ? attrs.onClick : backClick } });
+    }
+    return _jsx("div", Object.assign({}, getProps(), { children: children }));
+};
+const ModalHeader = () => {
+    const { removeModal } = useContext(CTX);
+    let { modal, state, setState } = useContext(POPUPCTX);
+    if (!modal.header) {
+        return null;
+    }
+    let { setAttrs = () => { return {}; } } = modal;
+    let attrs = setAttrs('header') || {};
+    if (typeof modal.header === 'function') {
+        return modal.header({ removeModal: removeModal, state, setState });
+    }
+    if (typeof modal.header !== 'object') {
+        return null;
+    }
+    return (_jsxs("div", Object.assign({}, AddToAttrs(attrs, { className: 'aio-popup-header' }), { children: [_jsx(ModalHeaderElement, { type: 'before' }, 'before'), _jsx(ModalHeaderElement, { type: 'title' }, 'title'), _jsx(ModalHeaderElement, { type: 'after' }, 'after'), _jsx(ModalClose, {})] })));
+};
+const ModalHeaderElement = ({ type }) => {
+    let { modal } = useContext(POPUPCTX), { header } = modal;
+    if (typeof header === 'function' || !header) {
+        return null;
+    }
+    if (!header[type]) {
+        return null;
+    }
+    return _jsx("div", { className: `aio-popup-header-${type}`, "data-subtitle": type === 'title' ? header.subtitle : undefined, children: header[type] });
+};
+const ModalClose = () => {
+    const { removeModal } = useContext(CTX);
+    let { modal, state, setState } = useContext(POPUPCTX), { header } = modal;
+    if (typeof header === 'function' || !header) {
+        return null;
+    }
+    if (header.onClose === false) {
+        return null;
+    }
+    return _jsx("div", { className: `aio-popup-header-close`, onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (typeof header.onClose === 'function') {
+                header.onClose({ state, setState });
+            }
+            else {
+                removeModal(modal.id);
+            }
+        }, children: _jsx(CloseIcon, {}) });
+};
+const ModalBody = () => {
+    const { modal } = useContext(POPUPCTX);
+    let { body, setAttrs = () => { return {}; } } = modal;
+    let attrs = setAttrs('body') || {};
+    if (!body || body === null) {
+        return null;
+    }
+    return (_jsx("div", Object.assign({}, AddToAttrs(attrs, { className: 'aio-popup-body aio-popup-scroll' }), { children: body })));
+};
+const ModalFooter = () => {
+    const { modal } = useContext(POPUPCTX);
+    let { setAttrs = () => { return {}; }, footer } = modal;
+    if (!footer) {
+        return null;
+    }
+    let Attrs = setAttrs('footer') || {};
+    const attrs = AddToAttrs(Attrs, { className: 'aio-popup-footer' });
+    return _jsx("div", Object.assign({}, attrs, { children: footer }));
+};
+const SBCTX = createContext({});
+const SnackebarItem = (props) => {
+    const mainContext = useContext(CTX);
+    let { item } = props;
+    let { time = 8, id, align = ['right', 'top'] } = item;
+    if (align[1] !== 'top' && align[1] !== 'bottom') {
+        align[1] = 'top';
+    }
+    if (align[0] !== 'left' && align[0] !== 'right' && align[0] !== 'center') {
+        align[0] = 'right';
+    }
+    let [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setTimeout(() => setMounted(true), 0);
+        setTimeout(() => remove(), time * 1000);
+    }, []);
+    function remove() {
+        setMounted(false);
+        setTimeout(() => mainContext.removeSnackebar(id), 200);
+    }
+    const getSvg = (type) => { return type === 'error' || type === 'warning' || type === 'info' ? _jsx(InfoSvg, {}) : _jsx(SuccessSvg, {}); };
+    const getContext = () => {
+        return { mainContext, remove, item: Object.assign(Object.assign({}, props.item), { time, align }), index: props.index, mounted, getSvg };
+    };
+    return (_jsx(SBCTX.Provider, { value: getContext(), children: _jsx(SnackebarContainer, {}) }));
+};
+const SnackebarContainer = () => {
+    const { mainContext, mounted, index, item, remove } = useContext(SBCTX);
+    const { rtl } = mainContext;
+    let { onClose, align = ['right', 'top'] } = item;
+    function getOffsetStyle(index) {
+        let els = $('.aio-popup-snackebar-item-container'), sum = { top: 12, bottom: 12 };
+        for (let i = 0; i < index; i++) {
+            let dom = els.eq(i);
+            let height = dom.height() + 6;
+            let va = dom.attr('data-vertical-align');
+            sum[va] += height;
+        }
+        return {
+            [align[1] === 'top' ? 'top' : 'bottom']: sum[align[1]]
+        };
+    }
+    let className = 'aio-popup-snackebar-item-container';
+    className += ` aio-popup-snackebar-item-container-horizontal-align-${align[0]}`;
+    if (mounted) {
+        className += ' mounted';
+    }
+    if (rtl) {
+        className += ' rtl';
+    }
+    let style = getOffsetStyle(index);
+    let p = { 'data-vertical-align': align[1], className, style, onClick: onClose === false ? undefined : () => remove() };
+    return _jsx("div", Object.assign({}, p, { children: _jsx(SnackebarCard, {}) }));
+};
+const SnackebarCard = () => {
+    const { item } = useContext(SBCTX);
+    let { type, attrs = {} } = item;
+    let className = 'aio-popup-snackebar-item';
+    className += ` aio-popup-snackebar-item-${type}`;
+    if (attrs.className) {
+        className += ` ${attrs.className}`;
+    }
+    let p = Object.assign(Object.assign({}, attrs), { className, style: attrs.style });
+    return (_jsxs("div", Object.assign({}, p, { children: [_jsx(SnackebarIcon, {}), _jsx(SnackebarText, {}), _jsx(SnackebarAction, {}), _jsx(SnackebarBar, {})] })));
+};
+const SnackebarIcon = () => {
+    const { getSvg, item } = useContext(SBCTX);
+    return _jsx("div", { className: `aio-popup-snackebar-item-icon`, children: !!item.icon ? item.icon : getSvg(item.type) });
+};
+const SnackebarText = () => {
+    const { item } = useContext(SBCTX);
+    return (_jsxs("div", { className: 'aio-popup-snackebar-item-text', children: [_jsx("div", { className: 'aio-popup-snackebar-item-uptext', children: item.text }), !!item.subtext && _jsx("div", { className: 'aio-popup-snackebar-item-subtext', children: item.subtext })] }));
+};
+const SnackebarAction = () => {
+    const { item, remove } = useContext(SBCTX);
+    const { action } = item;
+    if (!action || !action.text) {
+        return null;
+    }
+    let p = {
+        className: 'aio-popup-snackebar-item-action',
+        onClick: (e) => { e.stopPropagation(); if (action) {
+            action.onClick();
+        } remove(); }
+    };
+    return (_jsx("button", Object.assign({}, p, { children: action.text })));
+};
+const SnackebarBar = () => {
+    const { item } = useContext(SBCTX);
+    return _jsx("div", { className: 'aio-popup-snackebar-bar', style: { transition: `${item.time || 8}s linear` } });
+};
+export function Alert(props) {
+    let { icon, type = '', title = '', text = '', time = 10, className, closeText = 'Close', onClose, rtl } = props;
+    let $$ = {
+        id: '',
+        time: 0,
+        getId() {
+            return 'aa' + Math.round((Math.random() * 100000000));
+        },
+        getBarRender() {
+            return `<div class='aio-popup-time-bar' style="width:${$$.time}%;"></div>`;
+        },
+        updateBarRender() {
+            $(`.aio-popup-alert-container.${$$.id} .aio-popup-time`).html($$.getBarRender());
+        },
+        getRender() {
+            return (`
+      <div class='aio-popup-alert-container not-mounted ${$$.id} aio-popup-alert-container-center${!!className ? ` ${className}` : ''}'>
+        <div class='aio-popup-alert aio-popup-alert-${type}'>
+          <div class='aio-popup-alert-header'>${$$.getIcon()}</div>
           <div class='aio-popup-alert-body aio-popup-scroll'>
-            <div class='aio-popup-alert-title'>${d.renderToStaticMarkup(o)}</div>
-            <div class='aio-popup-alert-text' style="text-align:${c}">${r}</div>
+            <div class='aio-popup-alert-title'>${ReactDOMServer.renderToStaticMarkup(title)}</div>
+            <div class='aio-popup-alert-text' style="text-align:${rtl ? 'right' : 'left'}">${text}</div>
           </div>
           <div class='aio-popup-alert-footer'>
-            <button class='aio-popup-alert-close ${p.id}'>${l}</button>
+            <button class='aio-popup-alert-close ${$$.id}'>${closeText}</button>
           </div>
           <div class='aio-popup-time'></div>
         </div>
       </div>
-    `,close(){p.toggleClass(!1),setTimeout(()=>{"function"==typeof s&&s(),!1!==s&&u("."+p.id).remove()},200)},getIcon:()=>!1===e?"":e||({error:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>',warning:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></svg>',info:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>',success:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"></path></svg>'})[i]||"",startTimer(){setTimeout(()=>{if(p.time>=100){p.time=100,p.close();return}p.time+=2,p.updateBarRender(),p.startTimer()},n/50*1e3)},toggleClass(t){let e=u(`.${p.id}`);t?setTimeout(()=>e.removeClass("not-mounted"),0):e.addClass("not-mounted")},render(){u("body").append(p.getRender()),u("button."+p.id).off("click",p.close),u("button."+p.id).on("click",p.close),p.toggleClass(!0)}};p.id=p.getId(),p.render(),n&&p.startTimer()}let Highlight=({highlight:o})=>{let[a,l]=n({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),d=s(a);function c(e){return t("svg",Object.assign({version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 512 512"},e,{children:i("g",{children:[t("path",{d:"M242.1,45.2c7.7-7.7,20.2-7.7,27.8-0.1l0.1,0.1l236.3,236.3c7.7,7.7,7.7,20.2,0,27.9c-7.7,7.7-20.2,7.7-27.9,0\r\n            L256,86.9L33.7,309.3c-7.7,7.7-20.2,7.7-27.9,0c-7.7-7.7-7.7-20.2,0-27.9L242.1,45.2z"}),t("path",{d:"M242.1,202.7c7.7-7.7,20.2-7.7,27.8-0.1l0.1,0.1L506.2,439c7.7,7.7,7.7,20.2,0,27.9c-7.7,7.7-20.2,7.7-27.9,0\r\n            L256,244.5L33.7,466.9c-7.7,7.7-20.2,7.7-27.9,0c-7.7-7.7-7.7-20.2,0-27.9L242.1,202.7z"})]})}))}function u(e,i,o){return t("div",{className:"aio-popup-highlight-arrow",children:c({width:24,height:24,style:{position:"absolute",height:24,width:24,left:i+o/2-12},className:`aio-popup-highlight-arrow-${e}`})})}function _(r){if(!o.html)return"";let n,a=o.html||"",l=t("div",{className:"aio-popup-highlight-space"}),s=t("div",{className:"aio-popup-highlight-html",children:a}),c=u(r,d.current.Left,d.current.Width);return n="top"===r?i(e,{children:[l,s,c]}):i(e,{children:[c,s,l]}),t("div",{className:"aio-popup-highlight-html-container",children:n})}function h(){!o.mouseAccess&&o.onClick&&o.onClick()}function $(e){let i="",o=0,r="aio-popup-highlight-mask",n=d.current;return"top"===e?(o=n.Top,n.TopSpace>n.BottomSpace&&(i=_("top"))):"bottom"===e?(r+=" aio-popup-highlight-mask-flex",n.TopSpace<=n.BottomSpace&&(i=_("bottom"))):"left"===e?o=n.Left:r+=" aio-popup-highlight-mask-flex",t("div",{className:r,style:{["top"===e||"bottom"===e?"height":"width"]:o},onClick:()=>h(),children:i})}function g(){return t("div",{style:{width:a.Width},className:"aio-popup-highlight-focus-container",onClick:h,children:t("div",{className:"aio-popup-highlight-focus"})})}function m(){return i("div",{className:"aio-popup-highlight-main",style:{height:a.Height},children:[$("left"),g(),$("right")]})}function f(){return{pointerEvents:o.mouseAccess?"none":"all"}}d.current=a,r(()=>{setTimeout(()=>{try{let{dom:t,duration:e=1200}=o;t[0].scrollIntoView();let i=getHLLimit(o),r=getEasing(o),n=Object.assign(Object.assign({},i),{targets:[Object.assign({},d.current)],duration:e,update(t){let{animatables:e}=t;l(Object.assign({},e[0].target))}});r&&(n.easing=r),p(n)}catch(a){alert("aio-highlighter error => connot find dom")}},0)});let v=AddToAttrs(o.attrs,{className:"aio-popup-highlight",style:f()});return i("div",Object.assign({},v,{children:[$("top"),m(),$("bottom")]}))};function getHLLimit(t){let{padding:e=6,dom:i}=t,o=i.offset(),r=o.left-window.pageXOffset,n=o.top-window.pageYOffset,a=window.innerHeight,l=i.outerWidth(),s=i.outerHeight();return{Left:r-1*e,Top:n-1*e,Width:l+2*e,Height:s+2*e,TopSpace:n,BottomSpace:a-(n+s)}}function getEasing(t){let{easing:e}=t;var i=["linear","easeInQuad","easeInSine","easeInCirc","easeInBack","easeOutQuad","easeOutSine","easeOutCirc","easeInOutQuad","easeInOutSine","easeInOutBack","easeOutBounce"];return"number"==typeof e?i[e]||i[0]:e}let InfoSvg=()=>t("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:t("path",{d:"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z",style:{fill:"currentcolor"}})}),SuccessSvg=()=>t("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:t("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z",style:{fill:"currentcolor"}})});function getBound(t){try{let e=t.getBoundingClientRect();return{width:e.width,height:e.height,left:e.left,top:e.top,bottom:e.bottom,right:e.right}}catch(i){return{width:0,height:0,left:0,top:0,bottom:0,right:0}}}export class Loading{constructor(t){this.loader="0",this.getLoader_0=()=>`
+    `);
+        },
+        close() {
+            $$.toggleClass(false);
+            setTimeout(() => {
+                if (typeof onClose === 'function') {
+                    onClose();
+                }
+                if (onClose === false) {
+                    return;
+                }
+                $('.' + $$.id).remove();
+            }, 200);
+        },
+        getIcon() {
+            if (icon === false) {
+                return '';
+            }
+            return icon || {
+                error: (`<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>`),
+                warning: (`<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></svg>`),
+                info: (`<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>`),
+                success: (`<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"></path></svg>`)
+            }[type] || '';
+        },
+        startTimer() {
+            setTimeout(() => {
+                if ($$.time >= 100) {
+                    $$.time = 100;
+                    $$.close();
+                    return;
+                }
+                $$.time += 2;
+                $$.updateBarRender();
+                $$.startTimer();
+            }, time / 50 * 1000);
+        },
+        toggleClass(mount) {
+            let dom = $(`.${$$.id}`);
+            if (mount) {
+                setTimeout(() => dom.removeClass('not-mounted'), 0);
+            }
+            else {
+                dom.addClass('not-mounted');
+            }
+        },
+        render() {
+            $('body').append($$.getRender());
+            $('button.' + $$.id).off('click', $$.close);
+            $('button.' + $$.id).on('click', $$.close);
+            $$.toggleClass(true);
+        }
+    };
+    $$.id = $$.getId();
+    $$.render();
+    if (time) {
+        $$.startTimer();
+    }
+}
+const Highlight = ({ highlight }) => {
+    const [limit, setLimit] = useState({ Left: 0, Top: 0, Width: 0, Height: 0, TopSpace: 0, BottomSpace: 0 });
+    const limitRef = useRef(limit);
+    limitRef.current = limit;
+    useEffect(() => {
+        setTimeout(() => {
+            try {
+                const { dom, duration = 1200 } = highlight;
+                dom[0].scrollIntoView();
+                let newLimit = getHLLimit(highlight);
+                let easing = getEasing(highlight);
+                let obj = Object.assign(Object.assign({}, newLimit), { targets: [Object.assign({}, limitRef.current)], duration, update: (p) => {
+                        const { animatables } = p;
+                        setLimit(Object.assign({}, animatables[0].target));
+                    } });
+                if (easing) {
+                    obj.easing = easing;
+                }
+                anime(obj);
+            }
+            catch (_a) {
+                alert(`aio-highlighter error => connot find dom`);
+            }
+        }, 0);
+    });
+    function getArrowIcon(props) {
+        return (_jsx("svg", Object.assign({ version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" }, props, { children: _jsxs("g", { children: [_jsx("path", { d: "M242.1,45.2c7.7-7.7,20.2-7.7,27.8-0.1l0.1,0.1l236.3,236.3c7.7,7.7,7.7,20.2,0,27.9c-7.7,7.7-20.2,7.7-27.9,0\r\n            L256,86.9L33.7,309.3c-7.7,7.7-20.2,7.7-27.9,0c-7.7-7.7-7.7-20.2,0-27.9L242.1,45.2z" }), _jsx("path", { d: "M242.1,202.7c7.7-7.7,20.2-7.7,27.8-0.1l0.1,0.1L506.2,439c7.7,7.7,7.7,20.2,0,27.9c-7.7,7.7-20.2,7.7-27.9,0\r\n            L256,244.5L33.7,466.9c-7.7,7.7-20.2,7.7-27.9,0c-7.7-7.7-7.7-20.2,0-27.9L242.1,202.7z" })] }) })));
+    }
+    function getArrow(dir, left, width) {
+        let center = left + width / 2, Left = center - 12;
+        let style = { position: 'absolute', height: 24, width: 24, left: Left };
+        let props = { width: 24, height: 24, style, className: `aio-popup-highlight-arrow-${dir}` };
+        return (_jsx("div", { className: "aio-popup-highlight-arrow", children: getArrowIcon(props) }));
+    }
+    function getHtml(dir) {
+        if (!highlight.html) {
+            return '';
+        }
+        let column;
+        let html = highlight.html || '';
+        let space = _jsx("div", { className: "aio-popup-highlight-space" });
+        let content = _jsx("div", { className: "aio-popup-highlight-html", children: html });
+        let arrow = getArrow(dir, limitRef.current.Left, limitRef.current.Width);
+        if (dir === 'top') {
+            column = _jsxs(_Fragment, { children: [space, content, arrow] });
+        }
+        else {
+            column = _jsxs(_Fragment, { children: [arrow, content, space] });
+        }
+        return _jsx("div", { className: "aio-popup-highlight-html-container", children: column });
+    }
+    function click() {
+        if (highlight.mouseAccess) {
+            return;
+        }
+        if (highlight.onClick) {
+            highlight.onClick();
+        }
+    }
+    function vMask_node(type) {
+        let html = '', size = 0, className = 'aio-popup-highlight-mask';
+        let dir = type === 'top' || type === 'bottom' ? 'height' : 'width';
+        let limit = limitRef.current;
+        if (type === 'top') {
+            size = limit.Top;
+            if (limit.TopSpace > limit.BottomSpace) {
+                html = getHtml('top');
+            }
+        }
+        else if (type === 'bottom') {
+            className += ' aio-popup-highlight-mask-flex';
+            if (limit.TopSpace <= limit.BottomSpace) {
+                html = getHtml('bottom');
+            }
+        }
+        else if (type === 'left') {
+            size = limit.Left;
+        }
+        else {
+            className += ' aio-popup-highlight-mask-flex';
+        }
+        return (_jsx("div", { className: className, style: { [dir]: size }, onClick: () => click(), children: html }));
+    }
+    function focus_node() {
+        const cls1 = "aio-popup-highlight-focus-container", cls2 = 'aio-popup-highlight-focus';
+        return (_jsx("div", { style: { width: limit.Width }, className: cls1, onClick: click, children: _jsx("div", { className: cls2 }) }));
+    }
+    function main_node() {
+        return _jsxs("div", { className: "aio-popup-highlight-main", style: { height: limit.Height }, children: [vMask_node('left'), focus_node(), vMask_node('right')] });
+    }
+    function getStyle() { return { pointerEvents: highlight.mouseAccess ? 'none' : 'all' }; }
+    const attrs = AddToAttrs(highlight.attrs, { className: 'aio-popup-highlight', style: getStyle() });
+    return (_jsxs("div", Object.assign({}, attrs, { children: [vMask_node('top'), main_node(), vMask_node('bottom')] })));
+};
+function getHLLimit(highlight) {
+    const { padding = 6, dom } = highlight;
+    let offset = dom.offset();
+    let left = offset.left - window.pageXOffset;
+    let top = offset.top - window.pageYOffset;
+    let pageHeight = window.innerHeight;
+    let width = dom.outerWidth();
+    let height = dom.outerHeight();
+    let Top = top - 1 * padding;
+    let Left = left - 1 * padding;
+    let Width = width + 2 * padding;
+    let Height = height + 2 * padding;
+    let TopSpace = top;
+    let BottomSpace = pageHeight - (top + height);
+    let res = { Left, Top, Width, Height, TopSpace, BottomSpace };
+    return res;
+}
+function getEasing(highlight) {
+    const { easing } = highlight;
+    var easingNames = [
+        'linear',
+        'easeInQuad',
+        'easeInSine',
+        'easeInCirc',
+        'easeInBack',
+        'easeOutQuad',
+        'easeOutSine',
+        'easeOutCirc',
+        'easeInOutQuad',
+        'easeInOutSine',
+        'easeInOutBack',
+        'easeOutBounce', //27
+    ];
+    if (typeof easing === 'number') {
+        let res = easingNames[easing];
+        return res || easingNames[0];
+    }
+    return easing;
+}
+const InfoSvg = () => {
+    const d = "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z";
+    return (_jsx("svg", { viewBox: "0 0 24 24", role: "presentation", style: { width: '1.2rem', height: '1.2rem' }, children: _jsx("path", { d: d, style: { fill: 'currentcolor' } }) }));
+};
+const SuccessSvg = () => {
+    const d = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z";
+    return (_jsx("svg", { viewBox: "0 0 24 24", role: "presentation", style: { width: '1.2rem', height: '1.2rem' }, children: _jsx("path", { d: d, style: { fill: 'currentcolor' } }) }));
+};
+function getBound(dom) {
+    try {
+        const res = dom.getBoundingClientRect();
+        return { width: res.width, height: res.height, left: res.left, top: res.top, bottom: res.bottom, right: res.right };
+    }
+    catch (_a) {
+        return { width: 0, height: 0, left: 0, top: 0, bottom: 0, right: 0 };
+    }
+}
+export class Loading {
+    constructor(loader) {
+        this.loader = '0';
+        this.getLoader_0 = () => {
+            return (`
             <div class="aio-loading-container-0">
                 <div class="aio-loading-0">
-                    ${[,,,,,].fill(0).map((t,e)=>this.getLoaderItem_0(`0.${e}`)).join(" ")}
+                    ${new Array(5).fill(0).map((o, i) => this.getLoaderItem_0(`0.${i}`)).join(' ')}
                 </div>
             </div>
-        `,this.getLoaderItem_0=t=>`<div class="aio-loading-item-0" style="animation: 1s ease-in-out ${t}s infinite normal none running aioloading0;"></div>`,this.getLoader=t=>{let e="";return"0"===this.loader?e=this.getLoader_0():"string"==typeof this.loader&&(e=this.loader),`<div class="aio-loading" id="aio-loading-${t}">${e}</div>`},this.show=(t,e)=>{e=e||"body";let i=this.getLoader(t),o=document.querySelector(e);o&&o.insertAdjacentHTML("beforeend",i)},this.hide=t=>{let e=document.getElementById("aio-loading-"+t);e||(e=document.querySelector(".aio-loading")),e&&e.remove()},"string"==typeof t&&(this.loader=t)}}
+        `);
+        };
+        this.getLoaderItem_0 = (ease) => {
+            return `<div class="aio-loading-item-0" style="animation: 1s ease-in-out ${ease}s infinite normal none running aioloading0;"></div>`;
+        };
+        this.getLoader = (id) => {
+            let content = '';
+            if (this.loader === '0') {
+                content = this.getLoader_0();
+            }
+            else if (typeof this.loader === 'string') {
+                content = this.loader;
+            }
+            return (`<div class="aio-loading" id="aio-loading-${id}">${content}</div>`);
+        };
+        this.show = (id, parentSelector) => {
+            parentSelector = parentSelector || 'body';
+            let loadingStr = this.getLoader(id);
+            let parent = document.querySelector(parentSelector);
+            if (parent) {
+                parent.insertAdjacentHTML('beforeend', loadingStr);
+            }
+        };
+        this.hide = (id) => {
+            let loadingDom = document.getElementById('aio-loading-' + id);
+            if (!loadingDom) {
+                loadingDom = document.querySelector('.aio-loading');
+            }
+            if (loadingDom) {
+                loadingDom.remove();
+            }
+        };
+        if (typeof loader === 'string') {
+            this.loader = loader;
+        }
+    }
+}

package/package.json

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