aio-popup 4.5.1 → 5.0.0

package/index.d.ts

@@ -1,153 +1,146 @@
-import React, { FC, ReactNode } from 'react';
-import './index.css';
-export type AP_props = {
-    rtl?: boolean;
-    id?: string;
-};
-export type AP_position = 'fullscreen' | 'center' | 'popover' | 'left' | 'right' | 'top' | 'bottom';
-export type AP_attrsKey = 'backdrop' | 'modal' | 'header' | 'body' | 'footer';
-export type AP_header = ((p: {
-    close: () => void;
-    state: any;
-    setState: any;
-}) => ReactNode) | {
-    title?: string;
-    subtitle?: string;
-    before?: ReactNode;
-    after?: ReactNode;
-    onClose?: boolean | ((p: {
-        state: any;
-        setState: (state: any) => void;
-    }) => void);
-    attrs?: any;
-};
-export type AP_body = (p: {
-    close: () => void;
-    state?: any;
-    setState?: (state: any) => void;
-}) => ReactNode;
-export type AP_footer = (p: {
-    state: any;
-    setState: (v: any) => void;
-    close: () => void;
-}) => ReactNode;
-type AP_setAttrs = (mode: AP_attrsKey) => any;
-export type AP_modal = {
-    getTarget?: () => any;
-    pageSelector?: string;
-    limitTo?: string;
-    maxHeight?: number | 'string';
-    fixStyle?: (o: any, p: {
-        targetLimit: any;
-        pageLimit: any;
-    }) => any;
-    rtl?: boolean;
-    id?: string;
-    onClose?: boolean | (() => void);
-    position?: AP_position;
-    header?: AP_header;
-    state?: any;
-    footer?: AP_footer;
-    body?: AP_body;
-    animate?: boolean;
-    fitHorizontal?: boolean;
-    setAttrs?: AP_setAttrs;
-};
-export type AP_alert = {
-    icon?: false | ReactNode;
-    position?: AP_position;
-    type: 'success' | 'error' | 'warning' | 'info';
-    text?: ReactNode;
-    subtext?: string;
-    time?: number;
-    className?: string;
-    closeText?: string;
-    animate?: boolean;
-    onClose?: boolean | (() => void);
-};
-export type AP_snackebar = {
-    id?: string;
-    text: string;
-    subtext?: string;
-    icon?: ReactNode;
-    time?: number;
-    action?: {
-        text: string;
-        onClick: () => void;
-    };
-    type: 'success' | 'error' | 'warning' | 'info';
-    verticalAlign?: 'start' | 'end';
-    horizontalAlign?: 'start' | 'center' | 'end';
-    onClose?: boolean | (() => void);
-    attrs?: any;
-};
-export type AP_highlight = {
-    dom: any;
-    html: ReactNode;
-    onClick?: () => void;
-    mouseAccess?: boolean;
-    attrs?: any;
-    padding?: number;
-    easing?: number | AP_easing;
-    duration?: number;
-};
-export type AP_confirm = {
-    title?: string;
-    subtitle?: string;
-    text?: ReactNode;
-    submitText?: string;
-    canselText?: string;
-    onSubmit?: () => Promise<boolean>;
-    onCansel?: () => void;
-    setAttrs?: AP_setAttrs;
-};
-export type AP_prompt = {
-    title?: string;
-    subtitle?: string;
-    text?: string;
-    submitText?: string;
-    canselText?: string;
-    onSubmit?: (text: string) => Promise<boolean>;
-    onCansel?: () => void;
-    setAttrs?: AP_setAttrs;
-};
-export type AP_Snackebar = {
-    getActions: (p: {
-        add: (item: AP_snackebar) => void;
-    }) => void;
-    rtl: boolean;
-};
-export type AP_SnackebarItem = {
-    item: AP_snackebar;
-    onRemove: (id: string) => void;
-    index: number;
-    rtl: boolean;
-};
-export default class AIOPopup {
-    rtl?: boolean;
-    render: () => ReactNode;
-    addModal: (p: AP_modal) => void;
-    addHighlight: (p: AP_highlight) => void;
-    removeHighlight: () => void;
-    addAlert: (p: AP_alert) => void;
-    removeModal: (arg?: string) => void;
-    addSnackebar: (p: AP_snackebar) => void;
-    getModals: () => AP_modal[];
-    addConfirm: (p: AP_confirm) => void;
-    addPrompt: (p: AP_prompt) => void;
-    popupId?: string;
-    popupsRef: React.RefObject<typeof Popups>;
-    highlightRef: React.RefObject<typeof Highlight>;
-    constructor(obj?: AP_props);
-}
-type AP_Popups = {
-    ref: any;
-    rtl: boolean;
-};
-declare const Popups: FC<AP_Popups>;
-type AP_easing = 'linear' | 'easeInQuad' | 'easeInCubic' | 'easeInQuart' | 'easeInQuint' | 'easeInSine' | 'easeInExpo' | 'easeInCirc' | 'easeInBack' | 'easeOutQuad' | 'easeOutCubic' | 'easeOutQuart' | 'easeOutQuint' | 'easeOutSine' | 'easeOutExpo' | 'easeOutCirc' | 'easeOutBack' | 'easeInBounce' | 'easeInOutQuad' | 'easeInOutCubic' | 'easeInOutQuart' | 'easeInOutQuint' | 'easeInOutSine' | 'easeInOutExpo' | 'easeInOutCirc' | 'easeInOutBack' | 'easeInOutBounce' | 'easeOutBounce' | 'easeOutInQuad' | 'easeOutInCubic' | 'easeOutInQuart' | 'easeOutInQuint' | 'easeOutInSine' | 'easeOutInExpo' | 'easeOutInCirc' | 'easeOutInBack' | 'easeOutInBounce';
-type AP_Highlight = {
-    ref: any;
-};
-declare const Highlight: FC<AP_Highlight>;
-export {};
+import { ReactNode } from 'react';
+import './index.css';
+export type AP_position = 'fullscreen' | 'center' | 'popover' | 'left' | 'right' | 'top' | 'bottom';
+export type AP_attrsKey = 'backdrop' | 'modal' | 'header' | 'body' | 'footer';
+export type AP_header = ((p: {
+    removeModal: () => void;
+    state: any;
+    setState: any;
+}) => ReactNode) | {
+    title?: string;
+    subtitle?: string;
+    before?: ReactNode;
+    after?: ReactNode;
+    onClose?: boolean | ((p: {
+        state: any;
+        setState: (state: any) => void;
+    }) => void);
+};
+export type AP_body = (p: {
+    removeModal: () => void;
+    state: any;
+    setState: (state: any) => void;
+}) => ReactNode;
+export type AP_footer = (p: {
+    state: any;
+    setState: (v: any) => void;
+    removeModal: () => void;
+}) => ReactNode;
+type AP_setAttrs = (mode: AP_attrsKey) => any;
+export type AP_modal = {
+    getTarget?: () => any;
+    limitTo?: string;
+    rtl?: boolean;
+    id?: string;
+    onClose?: boolean | (() => void);
+    position?: AP_position;
+    header?: AP_header;
+    state?: any;
+    footer?: AP_footer;
+    body?: AP_body;
+    animate?: boolean;
+    fitHorizontal?: boolean;
+    setAttrs?: AP_setAttrs;
+};
+export type AP_alert = {
+    icon?: false | ReactNode;
+    type: 'success' | 'error' | 'warning' | 'info';
+    text?: ReactNode;
+    subtext?: string;
+    time?: number;
+    className?: string;
+    closeText?: string;
+    animate?: boolean;
+    onClose?: boolean | (() => void);
+};
+export type AP_snackebar = {
+    id?: string;
+    text: string;
+    subtext?: string;
+    icon?: ReactNode;
+    time?: number;
+    action?: {
+        text: string;
+        onClick: () => void;
+    };
+    type: 'success' | 'error' | 'warning' | 'info';
+    align?: ['left' | 'center' | 'right', 'top' | 'bottom'];
+    onClose?: boolean | (() => void);
+    attrs?: any;
+};
+export type AP_highlight = {
+    dom: any;
+    html: ReactNode;
+    onClick?: () => void;
+    mouseAccess?: boolean;
+    attrs?: any;
+    padding?: number;
+    easing?: number | AP_easing;
+    duration?: number;
+};
+export type AP_confirm = {
+    title?: string;
+    subtitle?: string;
+    text?: ReactNode;
+    submitText?: string;
+    canselText?: string;
+    onSubmit?: () => Promise<boolean>;
+    onCansel?: () => void;
+    setAttrs?: AP_setAttrs;
+};
+export type AP_prompt = {
+    title?: string;
+    subtitle?: string;
+    text?: string;
+    submitText?: string;
+    canselText?: string;
+    onSubmit?: (text: string) => Promise<boolean>;
+    onCansel?: () => void;
+    setAttrs?: AP_setAttrs;
+};
+type AP_removeModal = (arg?: string) => void;
+type AP_addAlert = (p: AP_alert) => void;
+type AP_addSnackebar = (item: AP_snackebar) => void;
+type AP_addModal = (o: AP_modal) => void;
+type AP_addHighlight = (highlight: AP_highlight) => void;
+type AP_removeHighlight = () => void;
+type AP_getModals = () => AP_modal[];
+type AP_addConfirm = (item: AP_confirm) => void;
+type AP_addPrompt = (item: AP_prompt) => void;
+type AP_render = () => ReactNode;
+export type AP_usePopup = {
+    addAlert: AP_addAlert;
+    addSnackebar: AP_addSnackebar;
+    removeModal: AP_removeModal;
+    addModal: AP_addModal;
+    getModals: AP_getModals;
+    addHighlight: AP_addHighlight;
+    removeHighlight: AP_removeHighlight;
+    render: AP_render;
+    addConfirm: AP_addConfirm;
+    addPrompt: AP_addPrompt;
+};
+export type I_usePopup = {
+    addAlert: AP_addAlert;
+    addSnackebar: AP_addSnackebar;
+    removeModal: AP_removeModal;
+    addModal: AP_addModal;
+    getModals: AP_getModals;
+    addHighlight: AP_addHighlight;
+    removeHighlight: AP_removeHighlight;
+    render: AP_render;
+    addConfirm: AP_addConfirm;
+    addPrompt: AP_addPrompt;
+    portal: () => void;
+};
+declare const usePopup: (props?: {
+    rtl?: boolean;
+    id?: string;
+}) => I_usePopup;
+export default usePopup;
+export type AP_SnackebarItem = {
+    item: AP_snackebar;
+    index: number;
+};
+export declare function Alert(props: AP_alert): void;
+type AP_easing = 'linear' | 'easeInQuad' | 'easeInCubic' | 'easeInQuart' | 'easeInQuint' | 'easeInSine' | 'easeInExpo' | 'easeInCirc' | 'easeInBack' | 'easeOutQuad' | 'easeOutCubic' | 'easeOutQuart' | 'easeOutQuint' | 'easeOutSine' | 'easeOutExpo' | 'easeOutCirc' | 'easeOutBack' | 'easeInBounce' | 'easeInOutQuad' | 'easeInOutCubic' | 'easeInOutQuart' | 'easeInOutQuint' | 'easeInOutSine' | 'easeInOutExpo' | 'easeInOutCirc' | 'easeInOutBack' | 'easeInOutBounce' | 'easeOutBounce' | 'easeOutInQuad' | 'easeOutInCubic' | 'easeOutInQuart' | 'easeOutInQuint' | 'easeOutInSine' | 'easeOutInExpo' | 'easeOutInCirc' | 'easeOutInBack' | 'easeOutInBounce';

package/index.js

@@ -1,17 +1,15 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),ReactDOMServer=_interopRequireWildcard(require("react-dom/server")),_jquery=_interopRequireDefault(require("jquery"));require("./index.css");var _animeEs=_interopRequireDefault(require("animejs/lib/anime.es.js")),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,i=new WeakMap;return(_getRequireWildcardCache=function(e){return e?i:t})(e)}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var i=_getRequireWildcardCache(t);if(i&&i.has(e))return i.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var n in e)if("default"!==n&&({}).hasOwnProperty.call(e,n)){var a=o?Object.getOwnPropertyDescriptor(e,n):null;a&&(a.get||a.set)?Object.defineProperty(r,n,a):r[n]=e[n]}return r.default=e,i&&i.set(e,r),r}function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){var t=_toPrimitive(e,"string");return"symbol"==typeof t?t:t+""}function _toPrimitive(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,t||"default");if("object"!=typeof r)return r;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}class AIOPopup{constructor(e){_defineProperty(this,"rtl",void 0),_defineProperty(this,"render",void 0),_defineProperty(this,"addModal",void 0),_defineProperty(this,"addHighlight",void 0),_defineProperty(this,"removeHighlight",void 0),_defineProperty(this,"addAlert",void 0),_defineProperty(this,"removeModal",void 0),_defineProperty(this,"addSnackebar",void 0),_defineProperty(this,"getModals",void 0),_defineProperty(this,"addConfirm",void 0),_defineProperty(this,"addPrompt",void 0),_defineProperty(this,"popupId",void 0),_defineProperty(this,"popupsRef",void 0),_defineProperty(this,"highlightRef",void 0);let{rtl:t=!1}=e||{};this.rtl=t,this.addSnackebar=()=>{},this.popupsRef=(0,_react.createRef)(),this.highlightRef=(0,_react.createRef)(),this.getModals=()=>{let e=this.popupsRef.current;return null===e?[]:e.getModals()||[]},this.addModal=e=>{let t=this.popupsRef.current;null!==t&&t.addModal(e)},this.addHighlight=e=>{let t=this.highlightRef.current;null!==t&&t.addHighlight(e)},this.removeModal=e=>{let t=this.popupsRef.current;null!==t&&t.removeModal(e)},this.removeHighlight=()=>{let e=this.highlightRef.current;null!==e&&e.removeHighlight()},this.render=()=>{let e={rtl:t,getActions:({add:e})=>this.addSnackebar=e};return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(Popups,{rtl:t,ref:this.popupsRef}),(0,_jsxRuntime.jsx)(Snackebar,{...e}),(0,_jsxRuntime.jsx)(Highlight,{ref:this.highlightRef})]})},this.addAlert=e=>Alert(e),this.addConfirm=e=>{let{title:t,subtitle:i,text:r,submitText:o="Yes",canselText:n="No",onSubmit:a,onCansel:s=()=>{},setAttrs:l=()=>({})}=e,u={position:"center",setAttrs(e){let t=l(e);return"modal"===e?AddToAttrs(t,{className:"aio-popup-confirm"}):t},header:{title:t,subtitle:i},body:()=>r,footer:()=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("button",{type:"button",onClick:()=>{s(),this.removeModal()},children:n}),(0,_jsxRuntime.jsx)("button",{type:"button",className:"active",onClick:async()=>{if(a)!1!==await a()&&this.removeModal()},children:o})]})};this.addModal(u)},this.addPrompt=e=>{let{title:t,subtitle:i,text:r,submitText:o="Submit",canselText:n="close",onSubmit:a,onCansel:s=()=>{},setAttrs:l=()=>({})}=e,u={position:"center",setAttrs(e){let t=l(e);return"modal"===e?AddToAttrs(t,{className:"aio-popup-prompt"}):t},state:{temp:""},header:{title:t,subtitle:i},body:({state:e,setState:t})=>(0,_jsxRuntime.jsx)("textarea",{placeholder:r,value:e.temp,onChange(e){t&&t({temp:e.target.value})}}),footer:({state:e,setState:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("button",{type:"button",onClick:()=>{s(),this.removeModal()},children:n}),(0,_jsxRuntime.jsx)("button",{type:"button",className:"active",onClick:async()=>{if(a)!1!==await a(e.temp)?this.removeModal():t({temp:""})},disabled:!e.temp,children:o})]})};this.addModal(u)}}}exports.default=AIOPopup;const Popups=(0,_react.forwardRef)((e,t)=>{let[i,r]=(0,_react.useState)([]),o=(0,_react.useRef)(i);o.current=i;let{rtl:n}=e;function a(e){void 0===e.id&&(e.id="popup"+Math.round(1e6*Math.random()));let t=e;r(i=>[...i.filter(({id:t})=>t!==e.id),t])}async function s(e="last"){if("all"===e){r([]);return}if(!o.current.length)return;"last"===e&&(e=o.current[o.current.length-1].id);let t=o.current.find(t=>t.id===e);t&&((0,_jquery.default)(`[data-id=${e}]`).addClass("not-mounted"),setTimeout(()=>{t&&"function"==typeof t.onClose&&t.onClose(),r(t=>t.filter(t=>t.id!==e))},300))}function l(){return o.current.map((e,t)=>(0,_jsxRuntime.jsx)(Popup,{modal:e,rtl:n,isLast:t===o.current.length-1,onClose:()=>s(e.id)},e.id))}(0,_react.useImperativeHandle)(t,()=>({addModal:a,removeModal:s,getModals:()=>o.current}));let u=l();return u.length?(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:u}):null}),CTX=(0,_react.createContext)({});function Popup(e){let{modal:t,rtl:i,onClose:r,isLast:o}=e,{setAttrs:n=()=>({}),id:a,position:s="fullscreen",getTarget:l,maxHeight:u,fixStyle:d=e=>e}=t,[c]=(0,_react.useState)({dom:(0,_react.createRef)(),backdropDom:(0,_react.createRef)(),dui:void 0,isDown:!1}),[p,$]=(0,_react.useState)({}),[h,m]=(0,_react.useState)(t.state),_=n("modal")||{},f=n("backdrop")||{},g=(0,_react.useRef)(!1);async function x(){r()}function j(e){if(!c.dui)return;let t=(0,_jquery.default)(e.target);"popover"===s&&t.attr("data-id")!==c.dui&&!t.parents(`[data-id=${c.dui}]`).length&&x()}(0,_react.useEffect)(()=>()=>{(0,_jquery.default)(window).unbind("click",j)}),(0,_react.useEffect)(()=>{let e="popover"===s?function e(){if(!l)return{};let r=l();if(!r||!r.length)return{};let o={dom:(0,_jquery.default)(c.dom.current),target:r,fitHorizontal:t.fitHorizontal,fixStyle:d,pageSelector:t.pageSelector,limitTo:t.limitTo,attrs:_,rtl:i},n={...Align(o),position:"absolute"};return u&&(n.maxHeight=u),n}():{};if(console.log("updatedStyle.top",e.top),$(e),l){c.dui="a"+Math.round(1e7*Math.random());l().attr("data-id",c.dui)}setTimeout(()=>{let e=(0,_jquery.default)(c.dom.current);e.removeClass("not-mounted"),(0,_jquery.default)(c.backdropDom.current).removeClass("not-mounted"),e.focus()},0),(0,_jquery.default)(window).unbind("click",j),(0,_jquery.default)(window).bind("click",j)},[]);function v(e){if(o)27===e.keyCode&&r()}function y(){setTimeout(()=>c.isDown=!1,0)}let R,b,C,L;return(0,_jsxRuntime.jsx)(CTX.Provider,{value:{close:x,state:h,setState:m},children:(0,_jsxRuntime.jsx)("div",{...(R="aio-popup-backdrop",R+=` aio-popup-position-${s}`,R+=i?" rtl":" ltr",g&&(R+=" not-mounted"),AddToAttrs(f,{className:R,attrs:{ref:c.backdropDom,onKeyDown:v,tabIndex:0,"data-id":a,onClick:f.onClick?f.onClick:function e(t){if(!c.isDown){t.stopPropagation();(0,_jquery.default)(t.target).hasClass("aio-popup-backdrop")&&x()}}}})),children:(0,_jsxRuntime.jsxs)("div",{...(b={...p,..._.style},C="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown",{..._,ref:c.dom,"data-id":t.id,tabIndex:0,onKeyDown:v,[C]:function e(t){(0,_jquery.default)(window).unbind("mouseup",y),(0,_jquery.default)(window).bind("mouseup",y),c.isDown=!0},className:(L="aio-popup",L+=i?" rtl":" ltr",g&&(L+=" not-mounted"),_.className&&(L+=" "+_.className),L),style:{...b}}),children:[!!t.header&&(0,_jsxRuntime.jsx)(ModalHeader,{modal:t}),(0,_jsxRuntime.jsx)(ModalBody,{modal:t}),!!t.footer&&(0,_jsxRuntime.jsx)("div",{...AddToAttrs(n("footer"),{className:"aio-popup-footer"}),children:t.footer({state:h,setState:m,close:x})})]})})})}const ModalHeader=e=>{let t=(0,_react.useContext)(CTX),{modal:i}=e,{state:r,setState:o}=t,{setAttrs:n=()=>({})}=i,a=n("header")||{};if("function"==typeof i.header)return i.header({close:t.close,state:r,setState:o});if("object"!=typeof i.header)return null;let s="aio-popup-header",{title:l,subtitle:u,onClose:d,before:c,after:p}=i.header;function $(e){e.stopPropagation(),e.preventDefault(),"function"==typeof d?d({state:r,setState:o}):t.close()}function h(){return u?(0,_jsxRuntime.jsxs)("div",{className:`${s}-text`,children:[(0,_jsxRuntime.jsx)("div",{className:`${s}-title`,children:l}),(0,_jsxRuntime.jsx)("div",{className:`${s}-subtitle`,children:u})]}):(0,_jsxRuntime.jsx)("div",{className:`${s}-title`,style:{display:"flex",alignItems:"center",flex:1},children:l})}return(0,_jsxRuntime.jsxs)("div",{...AddToAttrs(a,{className:s}),children:[void 0!==c&&(0,_jsxRuntime.jsx)("div",{className:`${s}-before`,onClick:e=>$(e),children:c}),!!l&&h(),void 0!==p&&(0,_jsxRuntime.jsx)("div",{className:`${s}-after`,onClick:e=>$(e),children:p}),!1!==d&&(0,_jsxRuntime.jsx)("div",{className:`${s}-close-button`,onClick:e=>$(e),children:(0,_jsxRuntime.jsx)(CloseIcon,{})})]})},ModalBody=e=>{let{state:t,setState:i,close:r}=(0,_react.useContext)(CTX),{modal:o}=e,{body:n=()=>null,setAttrs:a=()=>({})}=o,s=a("body")||{},l={close:r,state:t,setState:i},u=n(l);return u&&null!==u?(0,_jsxRuntime.jsx)("div",{...AddToAttrs(s,{className:"aio-popup-body aio-popup-scroll"}),children:u}):null};function Alert(e){let{icon:t,type:i="",text:r="",subtext:o="",time:n=10,className:a,closeText:s="بستن",position:l="center",onClose:u}=e,d={id:"",time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${d.time}%;"></div>`,updateBarRender(){(0,_jquery.default)(`.aio-popup-alert-container.${d.id} .aio-popup-time`).html(d.getBarRender())},getRender:()=>`
-      <div class='aio-popup-alert-container not-mounted ${d.id} aio-popup-alert-container-${l}${a?` ${a}`:""}'>
-        <div class='aio-popup-alert aio-popup-alert-${i}'>
-          <div class='aio-popup-alert-header'>${d.getIcon()}</div>
+import{createRef as t,useEffect as e,useState as o,createContext as i,useContext as r,useRef as a}from"react";import*as n from"react-dom/server";import l from"react-dom";import d from"animejs/lib/anime.es.js";import s from"jquery";import"./index.css";import{jsx as p}from"react/jsx-runtime";import{Fragment as c}from"react/jsx-runtime";import{jsxs as u}from"react/jsx-runtime";let CTX=i({});function Align(t){let{modal:e,target:o,fitHorizontal:i,rtl:r,limitTo:a}=t,n=window.innerWidth,l=window.innerHeight,d={left:0,top:0,bottom:l,right:n,width:n,height:l},s=getBound(o[0]),p=getBound(e[0]);s={...s};let c;if((p={...p}).top=s.bottom,p.bottom=p.top+p.height,i)p.width=s.width,p.left=s.left,p.right=s.left+s.width;else{if(a){let u=e.parents(a);u.length&&(d=getBound(u[0]))}r?(p.right=s.right,p.left=p.right-p.width,p.left<d.left&&(p.left=d.left)):(p.left=s.left,p.right=p.left+p.width,p.right>d.right&&(p.left=d.right-p.width))}return p.bottom>d.bottom?p.height>s.top-d.top?p.top=d.bottom-p.height:p.top=s.top-p.height:p.top=s.bottom,p.height>d.height&&(p.top=d.top,p.height=d.height,c="auto"),{left:p.left,top:p.top,width:p.width,overflowY:c,maxWidth:d.width}}let CloseIcon=()=>p("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:p("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:o}=e,i,r=[...(t=t||{}).className?t.className.split(" "):[],...(e.className?Array.isArray(e.className)?e.className:e.className.split(" "):[]).filter(t=>!!t)],a=r.length?r.join(" "):void 0,n={...t.style,...o};return{...t,className:a,style:n,...e.attrs}}let usePopup=t=>{let[e,i]=o([]),r=a(e);r.current=e;let[n,d]=o([]),_=a(n);_.current=n;let[h,$]=o(),m=t=>{void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random()));let e=t;i(o=>[...o.filter(({id:e})=>e!==t.id),e])},g=async t=>{if("string"!=typeof t&&(t="last"),"all"===t){i([]);return}if(!r.current.length)return;"last"===t&&(t=r.current[r.current.length-1].id);let e=r.current.find(e=>e.id===t);e&&(s(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{e&&"function"==typeof e.onClose&&e.onClose(),i(e=>e.filter(e=>e.id!==t))},300))},f=t=>{d([..._.current,{...t,id:"a"+Math.round(1e9*Math.random())}])},v=t=>{let e=_.current,o=e.find(e=>e.id===t);if(o&&!1!==o.onClose)d(e.filter((e,o)=>e.id!==t)),"function"==typeof o.onClose&&o.onClose()},b=t=>Alert(t),C=t=>$(t),k=()=>$(void 0),y=t=>{let{title:e,subtitle:o,text:i,submitText:r="Yes",canselText:a="No",onSubmit:n,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-confirm"}):e},header:{title:e,subtitle:o},body:()=>i,footer:()=>u(c,{children:[p("button",{type:"button",onClick(){l(),g()},children:a}),p("button",{type:"button",className:"active",async onClick(){if(n)!1!==await n()&&g()},children:r})]})};m(s)},L=t=>{let{title:e,subtitle:o,text:i,submitText:r="Submit",canselText:a="close",onSubmit:n,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?AddToAttrs(e,{className:"aio-popup-prompt"}):e},state:{temp:""},header:{title:e,subtitle:o},body:({state:t,setState:e})=>p("textarea",{placeholder:i,value:t.temp,onChange(t){e&&e({temp:t.target.value})}}),footer:({state:t,setState:e})=>u(c,{children:[p("button",{type:"button",onClick(){l(),g()},children:a}),p("button",{type:"button",className:"active",async onClick(){if(n)!1!==await n(t.temp)?g():e({temp:""})},disabled:!t.temp,children:r})]})};m(s)},M=()=>({rtl:!!t&&!!t.rtl,snackebarItems:_.current,removeSnackebar:v,removeModal:g}),S=()=>u(CTX.Provider,{value:M(),children:[r.current.map((t,e)=>p(Popup,{modal:t,isLast:e===r.current.length-1},t.id)),n.map((t,e)=>p(SnackebarItem,{item:t,index:e},t.id)),!!h&&p(Highlight,{highlight:h})]}),w=()=>l.createPortal(S(),document.body);return{addAlert:b,addSnackebar:f,removeModal:g,addModal:m,getModals:()=>r.current,addHighlight:C,removeHighlight:k,render:S,addConfirm:y,addPrompt:L,portal:w}};export default usePopup;let POPUPCTX=i({}),Popup=({modal:i,isLast:n})=>{let l=r(CTX),{setAttrs:d=()=>({}),id:c,position:_="fullscreen",getTarget:h}=i,[$]=o({dom:t(),backdropDom:t(),dui:void 0}),[m,g]=o({}),[f,v]=o(i.state),b=d("modal")||{},C=a(!1);function k(t){if(!$.dui)return;let e=s(t.target);"popover"===_&&e.attr("data-id")!==$.dui&&!e.parents(`[data-id=${$.dui}]`).length&&l.removeModal()}function y(){let t={...m,...b.style},e="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown";return{...b,ref:$.dom,"data-id":i.id,tabIndex:0,onKeyDown:M,[e]:w,className:T(),style:{...t}}}function L(){if(!h)return{};let t=h();if(!t||!t.length)return{};let e={modal:s($.dom.current),target:t,fitHorizontal:i.fitHorizontal,limitTo:i.limitTo,attrs:b,rtl:l.rtl};return{...Align(e),position:"absolute"}}function M(t){if(n)27===t.keyCode&&l.removeModal()}function S(){}function w(t){s(window).unbind("mouseup",S),s(window).bind("mouseup",S)}function T(){let t="aio-popup";return t+=l.rtl?" rtl":" ltr",C&&(t+=" not-mounted"),b.className&&(t+=" "+b.className),t}e(()=>()=>{s(window).unbind("click",k)}),e(()=>{let t="popover"===_?L():{};if(console.log("updatedStyle.top",t.top),g(t),h){$.dui="a"+Math.round(1e7*Math.random());h().attr("data-id",$.dui)}setTimeout(()=>{let t=s($.dom.current);t.removeClass("not-mounted"),s($.backdropDom.current).removeClass("not-mounted"),t.focus()},0),s(window).unbind("click",k),s(window).bind("click",k)},[]);let x=()=>({mainContext:l,modal:i,isLast:n,state:f,setState:v,onKeyDown:M});return p(POPUPCTX.Provider,{value:x(),children:p(ModalBackdrop,{content:u("div",{...y(),children:[p(ModalHeader,{}),p(ModalBody,{}),p(ModalFooter,{})]}),firstMount:!!C,ref:$.backdropDom})})},ModalBackdrop=({content:t,firstMount:e,ref:i})=>{let{mainContext:a,modal:n,onKeyDown:l}=r(POPUPCTX),{setAttrs:d=()=>({}),id:c,position:u="fullscreen"}=n,[_]=o(d("backdrop")||{});function h(t){if(t.target===t.currentTarget){t.stopPropagation();s(t.target).hasClass("aio-popup-backdrop")&&a.removeModal()}}function $(){let t="aio-popup-backdrop";return t+=` aio-popup-position-${u}`,t+=a.rtl?" rtl":" ltr",e&&(t+=" not-mounted"),AddToAttrs(_,{className:t,attrs:{ref:i,onKeyDown:l,tabIndex:0,"data-id":c,onClick:_.onClick?_.onClick:h}})}return p("div",{...$(),children:t})},ModalHeader=()=>{let{mainContext:t,modal:e,state:o,setState:i}=r(POPUPCTX);if(!e.header)return null;let{setAttrs:a=()=>({})}=e,n=a("header")||{};return"function"==typeof e.header?e.header({removeModal:t.removeModal,state:o,setState:i}):"object"!=typeof e.header?null:u("div",{...AddToAttrs(n,{className:"aio-popup-header"}),children:[p(ModalHeaderElement,{type:"before"},"before"),p(ModalHeaderElement,{type:"title"},"title"),p(ModalHeaderElement,{type:"after"},"after"),p(ModalClose,{})]})},ModalHeaderElement=({type:t})=>{let{modal:e}=r(POPUPCTX),{header:o}=e;return"function"!=typeof o&&o&&o[t]?p("div",{className:`aio-popup-header-${t}`,"data-subtitle":"title"===t?o.subtitle:void 0,children:o[t]}):null},ModalClose=()=>{let{modal:t,state:e,setState:o,mainContext:i}=r(POPUPCTX),{header:a}=t;return"function"!=typeof a&&a&&!1!==a.onClose?p("div",{className:"aio-popup-header-close",onClick(r){r.stopPropagation(),r.preventDefault(),"function"==typeof a.onClose?a.onClose({state:e,setState:o}):i.removeModal(t.id)},children:p(CloseIcon,{})}):null},ModalBody=()=>{let{mainContext:t,state:e,setState:o,modal:i}=r(POPUPCTX),{body:a=()=>null,setAttrs:n=()=>({})}=i,l=n("body")||{},d={removeModal:t.removeModal,state:e,setState:o},s=a(d);return s&&null!==s?p("div",{...AddToAttrs(l,{className:"aio-popup-body aio-popup-scroll"}),children:s}):null},ModalFooter=()=>{let{mainContext:t,modal:e,state:o,setState:i}=r(POPUPCTX),{setAttrs:a=()=>({}),footer:n}=e;if(!n)return null;let l=a("footer")||{},d=AddToAttrs(l,{className:"aio-popup-footer"});return p("div",{...d,children:n({state:o,setState:i,removeModal:t.removeModal})})},SBCTX=i({}),SnackebarItem=t=>{let i=r(CTX),{item:a}=t,{time:n=8,id:l,align:d=["right","top"]}=a;"top"!==d[1]&&"bottom"!==d[1]&&(d[1]="top"),"left"!==d[0]&&"right"!==d[0]&&"center"!==d[0]&&(d[0]="right");let[s,c]=o(!1);function u(){c(!1),setTimeout(()=>i.removeSnackebar(l),200)}e(()=>{setTimeout(()=>c(!0),0),setTimeout(()=>u(),1e3*n)},[]);let _=t=>"error"===t||"warning"===t||"info"===t?p(InfoSvg,{}):p(SuccessSvg,{}),h=()=>({mainContext:i,remove:u,item:{...t.item,time:n,align:d},index:t.index,mounted:s,getSvg:_});return p(SBCTX.Provider,{value:h(),children:p(SnackebarContainer,{})})},SnackebarContainer=()=>{let{mainContext:t,mounted:e,index:o,item:i,remove:a}=r(SBCTX),{rtl:n}=t,{onClose:l,align:d=["right","top"]}=i;function c(t){let e=s(".aio-popup-snackebar-item-container"),o={top:12,bottom:12};for(let i=0;i<t;i++){let r=e.eq(i),a=r.height()+6,n=r.attr("data-vertical-align");o[n]+=a}return{["top"===d[1]?"top":"bottom"]:o[d[1]]}}let u="aio-popup-snackebar-item-container";u+=` aio-popup-snackebar-item-container-horizontal-align-${d[0]}`,e&&(u+=" mounted"),n&&(u+=" rtl");let _=c(o),h={"data-vertical-align":d[1],className:u,style:_,onClick:!1===l?void 0:()=>a()};return p("div",{...h,children:p(SnackebarCard,{})})},SnackebarCard=()=>{let{item:t}=r(SBCTX),{type:e,attrs:o={}}=t,i="aio-popup-snackebar-item";return i+=` aio-popup-snackebar-item-${e}`,o.className&&(i+=` ${o.className}`),u("div",{...{...o,className:i,style:o.style},children:[p(SnackebarIcon,{}),p(SnackebarText,{}),p(SnackebarAction,{}),p(SnackebarBar,{})]})},SnackebarIcon=()=>{let{getSvg:t,item:e}=r(SBCTX);return p("div",{className:"aio-popup-snackebar-item-icon",children:e.icon?e.icon:t(e.type)})},SnackebarText=()=>{let{item:t}=r(SBCTX);return u("div",{className:"aio-popup-snackebar-item-text",children:[p("div",{className:"aio-popup-snackebar-item-uptext",children:t.text}),!!t.subtext&&p("div",{className:"aio-popup-snackebar-item-subtext",children:t.subtext})]})},SnackebarAction=()=>{let{item:t,remove:e}=r(SBCTX),{action:o}=t;return o&&o.text?p("button",{className:"aio-popup-snackebar-item-action",onClick(t){t.stopPropagation(),o&&o.onClick(),e()},children:o.text}):null},SnackebarBar=()=>{let{item:t}=r(SBCTX);return p("div",{className:"aio-popup-snackebar-bar",style:{transition:`${t.time||8}s linear`}})};export function Alert(t){let{icon:e,type:o="",text:i="",subtext:r="",time:a=10,className:l,closeText:d="Close",onClose:p}=t,c={id:"",time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${c.time}%;"></div>`,updateBarRender(){s(`.aio-popup-alert-container.${c.id} .aio-popup-time`).html(c.getBarRender())},getRender:()=>`
+      <div class='aio-popup-alert-container not-mounted ${c.id} aio-popup-alert-container-center${l?` ${l}`:""}'>
+        <div class='aio-popup-alert aio-popup-alert-${o}'>
+          <div class='aio-popup-alert-header'>${c.getIcon()}</div>
           <div class='aio-popup-alert-body aio-popup-scroll'>
-            <div class='aio-popup-alert-text'>${ReactDOMServer.renderToStaticMarkup(r)}</div>
-            <div class='aio-popup-alert-subtext'>${o}</div>
+            <div class='aio-popup-alert-text'>${n.renderToStaticMarkup(i)}</div>
+            <div class='aio-popup-alert-subtext'>${r}</div>
           </div>
           <div class='aio-popup-alert-footer'>
-            <button class='aio-popup-alert-close ${d.id}'>${s}</button>
+            <button class='aio-popup-alert-close ${c.id}'>${d}</button>
           </div>
           <div class='aio-popup-time'></div>
         </div>
       </div>
-    `,close(){d.toggleClass(!1),setTimeout(()=>{"function"==typeof u&&u(),!1!==u&&(0,_jquery.default)("."+d.id).remove()},200)},getIcon:()=>!1===t?"":t||({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(d.time>=100){d.time=100,d.close();return}d.time+=2,d.updateBarRender(),d.startTimer()},n/50*1e3)},toggleClass(e){let t=(0,_jquery.default)(`.${d.id}`);e?setTimeout(()=>t.removeClass("not-mounted"),0):t.addClass("not-mounted")},render(){(0,_jquery.default)("body").append(d.getRender()),(0,_jquery.default)("button."+d.id).off("click",d.close),(0,_jquery.default)("button."+d.id).on("click",d.close),d.toggleClass(!0)}};d.id=d.getId(),d.render(),n&&d.startTimer()}class Snackebar extends _react.Component{constructor(e){super(e),this.state={items:[]},e.getActions({add:this.add.bind(this)})}add(e){let{items:t}=this.state,i=[...t,{...e,id:"a"+Math.round(1e9*Math.random())}];this.setState({items:i})}remove(e,t){if(!1===t)return;let{items:i}=this.state,r=i.filter((t,i)=>t.id!==e);this.setState({items:r}),"function"==typeof t&&t()}render(){let{items:e}=this.state,{rtl:t}=this.props;return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:e.map((e,i)=>(0,_react.createElement)(SnackebarItem,{rtl:t,item:e,index:i,onRemove:t=>this.remove(t,e.onClose),key:e.id}))})}}function SnackebarItem(e){var t;let{item:i,onRemove:r,index:o,rtl:n}=e,{time:a=8,id:s,text:l,type:u,subtext:d,action:c,onClose:p,verticalAlign:$="end",horizontalAlign:h="center",icon:m,attrs:_={}}=i;"start"!==$&&"end"!==$&&($="end",console.error('aio-popup error => snackebar item .verticalAlign should be "start" or "end"')),"start"!==h&&"end"!==h&&"center"!==h&&(h="center",console.error('aio-popup error => snackebar item .horizontalAlign should be "start" or "end" or "center"'));let[f,g]=(0,_react.useState)(!1);function x(){g(!1),setTimeout(()=>{r(s)},200)}(0,_react.useEffect)(()=>{setTimeout(()=>g(!0),0),setTimeout(()=>x(),1e3*a)},[]);let j,v,y,R,b;return j="aio-popup-snackebar-item-container",j+=` aio-popup-snackebar-item-container-horizontal-align-${h}`,f&&(j+=" mounted"),n&&(j+=" rtl"),v=function e(t){let i=(0,_jquery.default)(".aio-popup-snackebar-item-container"),r={start:12,end:12};for(let o=0;o<t;o++){let n=i.eq(o),a=n.height()+6,s=n.attr("data-vertical-align");r[s]+=a}return{["start"===$?"top":"bottom"]:r[$]}}(o),y={"data-vertical-align":$,className:j,style:v,onClick:!1===p?void 0:()=>x()},(0,_jsxRuntime.jsx)("div",{...y,children:(R="aio-popup-snackebar-item",R+=` aio-popup-snackebar-item-${u}`,_.className&&(R+=` ${_.className}`),b={..._,className:R,style:_.style},(0,_jsxRuntime.jsxs)("div",{...b,children:[(0,_jsxRuntime.jsx)("div",{className:"aio-popup-snackebar-item-icon",children:m||("error"===(t=u)||"warning"===t||"info"===t?(0,_jsxRuntime.jsx)("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:(0,_jsxRuntime.jsx)("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"}})}):(0,_jsxRuntime.jsx)("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:(0,_jsxRuntime.jsx)("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"}})}))})," ",(0,_jsxRuntime.jsxs)("div",{className:"aio-popup-snackebar-item-text",children:[(0,_jsxRuntime.jsx)("div",{className:"aio-popup-snackebar-item-uptext",children:l}),!!d&&(0,_jsxRuntime.jsx)("div",{className:"aio-popup-snackebar-item-subtext",children:d})]})," ",c&&c.text?(0,_jsxRuntime.jsx)("button",{className:"aio-popup-snackebar-item-action",onClick(e){e.stopPropagation(),c&&c.onClick(),x()},children:c.text}):null," ",(0,_jsxRuntime.jsx)("div",{className:"aio-popup-snackebar-bar",style:{transition:`${a}s linear`}}),"  "]}))})}function Align(e){let{dom:t,target:i,fitHorizontal:r,fixStyle:o=e=>e,attrs:n={},pageSelector:a,rtl:s,limitTo:l}=e,u={getDomLimit(e,t){let i=e.offset(),r=i.left-window.pageXOffset,o=i.top-window.pageYOffset;if(a&&"page"!==t){let n=(0,_jquery.default)(a);try{let{left:s,top:l}=n.offset()||{left:0,top:0};s-=window.scrollX,l-=window.scrollY,r-=s,o-=l}catch{}}let u=e.outerWidth(),d=e.outerHeight(),c=r+u,p=o+d;return{left:r,top:o,right:c,bottom:p,width:u,height:d}},getPageLimit(){let e=a?(0,_jquery.default)(a):void 0;e=Array.isArray(e)&&0===e.length?void 0:e;let t=window.innerWidth,i=window.innerHeight,r=e?u.getDomLimit(e,"page"):{left:0,top:0,right:t,bottom:i};return r.left<0&&(r.left=0),r.right>t&&(r.right=t),r.top<0&&(r.top=0),r.bottom>i&&(r.bottom=i),r},getRelatedToLmit(){if(!l)return;let e=t.parents(l);if(!e.length)return;let i=e.offset(),r=i.left-window.pageXOffset,o=i.top-window.pageYOffset,n=e.outerWidth(),a=e.outerHeight();return{left:r,top:o,right:r+n,bottom:o+a,width:n,height:a}},align(){let e=u.getPageLimit(),a=u.getDomLimit(i,"target"),l=u.getDomLimit(t,"popover"),d;if(l.top=a.bottom,l.bottom=l.top+l.height,r)l.width=a.width,l.left=a.left,l.right=a.left+a.width;else{let c=u.getRelatedToLmit()||e;s?(l.right=a.right,l.left=l.right-l.width,l.left<c.left&&(l.left=c.left)):(l.left=a.left,l.right=l.left+l.width,l.right>c.right&&(l.left=c.right-l.width))}return l.bottom>e.bottom?l.height>a.top-e.top?l.top=e.bottom-l.height:l.top=a.top-l.height:l.top=a.bottom,l.height>e.bottom-e.top&&(l.top=6,l.bottom=void 0,l.height=e.bottom-e.top-12,d="auto"),o({left:l.left,top:l.top,width:l.width,overflowY:d,...n.style},{targetLimit:a,pageLimit:e})}};return u.align()}const Highlight=(0,_react.forwardRef)((e,t)=>{let[i,r]=(0,_react.useState)(!1),[o,n]=(0,_react.useState)({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),a=(0,_react.useRef)(),s=a.current,l=(0,_react.useRef)(o);function u(e){let t=_("padding",6),i=e.offset(),r=i.left-window.pageXOffset,o=i.top-window.pageYOffset,n=window.innerHeight,a=e.outerWidth(),s=e.outerHeight();return{Left:r-1*t,Top:o-1*t,Width:a+2*t,Height:s+2*t,TopSpace:o,BottomSpace:n-(o+s)}}function d(){let e=_("easing",void 0);var t=["linear","easeInQuad","easeInSine","easeInCirc","easeInBack","easeOutQuad","easeOutSine","easeOutCirc","easeInOutQuad","easeInOutSine","easeInOutBack","easeOutBounce"];return"number"==typeof e?t[e]||t[0]:e}function c(){n({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),r(!1)}function p(e){let{dom:t}=e;a.current=e,r(!0),setTimeout(()=>{try{let e=_("duration",1200);t[0].scrollIntoView();let i=u(t),r=d(),o={...i,targets:[{...l.current}],duration:e,update(e){let{animatables:t}=e;n({...t[0].target})}};r&&(o.easing=r),(0,_animeEs.default)(o)}catch{alert(`
-          aio-highlighter error => connot find dom
-        `)}},0)}function $(e){return(0,_jsxRuntime.jsx)("svg",{version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 512 512",...e,children:(0,_jsxRuntime.jsxs)("g",{children:[(0,_jsxRuntime.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 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"}),(0,_jsxRuntime.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 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 h(e,t,i){let r={width:24,height:24,style:{position:"absolute",height:24,width:24,left:t+i/2-12},className:`aio-popup-highlight-arrow-${e}`};return(0,_jsxRuntime.jsx)("div",{className:"aio-popup-highlight-arrow",children:$(r)})}function m(e){if(!s||!s.html)return"";let t,i=s.html||"",r=(0,_jsxRuntime.jsx)("div",{className:"aio-popup-highlight-space"}),o=(0,_jsxRuntime.jsx)("div",{className:"aio-popup-highlight-html",children:i}),n=h(e,l.current.Left,l.current.Width);return t="top"===e?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[r,o,n]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[n,o,r]}),(0,_jsxRuntime.jsx)("div",{className:"aio-popup-highlight-html-container",children:t})}function _(e,t){if(!s||null===s)return t;let i=s[e];return void 0===i?t:i}function f(){!_("mouseAccess",!1)&&null!=s&&s.onClick&&s.onClick()}function g(e){let t="",i=0,r="aio-popup-highlight-mask",o=l.current;return"top"===e?(i=o.Top,o.TopSpace>o.BottomSpace&&(t=m("top"))):"bottom"===e?(r+=" aio-popup-highlight-mask-flex",o.TopSpace<=o.BottomSpace&&(t=m("bottom"))):"left"===e?i=o.Left:r+=" aio-popup-highlight-mask-flex",(0,_jsxRuntime.jsx)("div",{className:r,style:{["top"===e||"bottom"===e?"height":"width"]:i},onClick:()=>f(),children:t})}function x(){let e=_("mouseAccess",!1);return(0,_jsxRuntime.jsx)("div",{style:{width:o.Width},className:"aio-popup-highlight-focus-container",onClick:e?void 0:()=>f(),children:(0,_jsxRuntime.jsx)("div",{className:"aio-popup-highlight-focus"})})}function j(){return(0,_jsxRuntime.jsxs)("div",{className:"aio-popup-highlight-main",style:{height:o.Height},children:[g("left"),x(),g("right")]})}if(l.current=o,(0,_react.useImperativeHandle)(t,()=>({addHighlight:p,removeHighlight:c})),!i)return null;function v(){let e=_("mouseAccess",!1);return{pointerEvents:e?"none":"all"}}let y=AddToAttrs(_("attrs",{}),{className:"aio-popup-highlight",style:v()});return(0,_jsxRuntime.jsxs)("div",{...y,children:[g("top"),j(),g("bottom")]})}),CloseIcon=()=>(0,_jsxRuntime.jsx)("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:(0,_jsxRuntime.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(e,t){let{style:i}=t,r,o=[...(e=e||{}).className?e.className.split(" "):[],...(t.className?Array.isArray(t.className)?t.className:t.className.split(" "):[]).filter(e=>!!e)],n=o.length?o.join(" "):void 0,a={...e.style,...i};return{...e,className:n,style:a,...t.attrs}}
+    `,close(){c.toggleClass(!1),setTimeout(()=>{"function"==typeof p&&p(),!1!==p&&s("."+c.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>'})[o]||"",startTimer(){setTimeout(()=>{if(c.time>=100){c.time=100,c.close();return}c.time+=2,c.updateBarRender(),c.startTimer()},a/50*1e3)},toggleClass(t){let e=s(`.${c.id}`);t?setTimeout(()=>e.removeClass("not-mounted"),0):e.addClass("not-mounted")},render(){s("body").append(c.getRender()),s("button."+c.id).off("click",c.close),s("button."+c.id).on("click",c.close),c.toggleClass(!0)}};c.id=c.getId(),c.render(),a&&c.startTimer()}let Highlight=({highlight:t})=>{let[i,r]=o({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),n=a(i);function l(t){return p("svg",{version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 512 512",...t,children:u("g",{children:[p("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 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"}),p("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 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 s(t,e,o){return p("div",{className:"aio-popup-highlight-arrow",children:l({width:24,height:24,style:{position:"absolute",height:24,width:24,left:e+o/2-12},className:`aio-popup-highlight-arrow-${t}`})})}function _(e){if(!t.html)return"";let o,i=t.html||"",r=p("div",{className:"aio-popup-highlight-space"}),a=p("div",{className:"aio-popup-highlight-html",children:i}),l=s(e,n.current.Left,n.current.Width);return o="top"===e?u(c,{children:[r,a,l]}):u(c,{children:[l,a,r]}),p("div",{className:"aio-popup-highlight-html-container",children:o})}function h(){!t.mouseAccess&&t.onClick&&t.onClick()}function $(t){let e="",o=0,i="aio-popup-highlight-mask",r=n.current;return"top"===t?(o=r.Top,r.TopSpace>r.BottomSpace&&(e=_("top"))):"bottom"===t?(i+=" aio-popup-highlight-mask-flex",r.TopSpace<=r.BottomSpace&&(e=_("bottom"))):"left"===t?o=r.Left:i+=" aio-popup-highlight-mask-flex",p("div",{className:i,style:{["top"===t||"bottom"===t?"height":"width"]:o},onClick:()=>h(),children:e})}function m(){return p("div",{style:{width:i.Width},className:"aio-popup-highlight-focus-container",onClick:h,children:p("div",{className:"aio-popup-highlight-focus"})})}function g(){return u("div",{className:"aio-popup-highlight-main",style:{height:i.Height},children:[$("left"),m(),$("right")]})}function f(){return{pointerEvents:t.mouseAccess?"none":"all"}}n.current=i,e(()=>{setTimeout(()=>{try{let{dom:e,duration:o=1200}=t;e[0].scrollIntoView();let i=getHLLimit(t),a=getEasing(t),l={...i,targets:[{...n.current}],duration:o,update(t){let{animatables:e}=t;r({...e[0].target})}};a&&(l.easing=a),d(l)}catch{alert("aio-highlighter error => connot find dom")}},0)});let v=AddToAttrs(t.attrs,{className:"aio-popup-highlight",style:f()});return u("div",{...v,children:[$("top"),g(),$("bottom")]})};function getHLLimit(t){let{padding:e=6,dom:o}=t,i=o.offset(),r=i.left-window.pageXOffset,a=i.top-window.pageYOffset,n=window.innerHeight,l=o.outerWidth(),d=o.outerHeight();return{Left:r-1*e,Top:a-1*e,Width:l+2*e,Height:d+2*e,TopSpace:a,BottomSpace:n-(a+d)}}function getEasing(t){let{easing:e}=t;var o=["linear","easeInQuad","easeInSine","easeInCirc","easeInBack","easeOutQuad","easeOutSine","easeOutCirc","easeInOutQuad","easeInOutSine","easeInOutBack","easeOutBounce"];return"number"==typeof e?o[e]||o[0]:e}let InfoSvg=()=>p("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:p("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=()=>p("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:p("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{return{width:0,height:0,left:0,top:0,bottom:0,right:0}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aio-popup",
-  "version": "4.5.1",
+  "version": "5.0.0",
   "description": "handle all types of popup and modals in react",
   "main": "index.js",
   "scripts": {
@@ -12,8 +12,6 @@
     "url": "git+https://github.com/mohammadFeiz/aio-popup.git"
   },
   "dependencies": {
-    "@mdi/js": "^7.0.96",
-    "@mdi/react": "^1.6.1",
     "jquery": "^3.6.1",
     "animejs": "^3.2.1"
   },

package/theme2.css

@@ -0,0 +1,139 @@
+:root {
+  --aio-popup-theme2-color: #00b1f2;
+}
+
+.aio-popup-theme-container2 .aio-popup {
+  border-radius: 24px;
+  overflow: hidden;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-footer {
+  justify-content: center;
+  padding: 24px;
+  height: unset;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-footer button {
+  border-radius: 24px;
+  height: 36px;
+  width: 100%;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-text {
+  font-size: 20px;
+  padding: 12px;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-header {
+  display: none;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-error .aio-popup-alert-text {
+  color: #f14747;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-error .aio-popup-time-bar {
+  background: #f14747;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-error .aio-popup-alert-footer button {
+  background: #f14747;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-warning .aio-popup-alert-text {
+  color: #ff7800;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-warning .aio-popup-time-bar {
+  background: #ff7800;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-warning .aio-popup-alert-footer button {
+  background: #ff7800;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-success .aio-popup-alert-text {
+  color: #6EBC3D;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-success .aio-popup-time-bar {
+  background: #6EBC3D;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-success .aio-popup-alert-footer button {
+  background: #6EBC3D;
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-info .aio-popup-alert-text {
+  color: var(--aio-popup-theme2-color);
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-info .aio-popup-time-bar {
+  background: var(--aio-popup-theme2-color);
+}
+
+.aio-popup-theme-container2 .aio-popup-alert-info .aio-popup-alert-footer button {
+  background: var(--aio-popup-theme2-color);
+}
+
+.aio-popup-theme-container2 .aio-popup-confirm {
+  border-radius: 24px;
+}
+
+.aio-popup-theme-container2 .aio-popup-footer {
+  padding: 24px;
+  padding-top: 12px;
+  border-top: none;
+  gap: 6px;
+}
+
+.aio-popup-theme-container2 .aio-popup-footer button {
+  height: 36px;
+  border: none;
+  color: var(--aio-popup-theme2-color);
+  background: #f1ebed;
+  padding: 0 36px;
+  border-radius: 24px;
+}
+
+.aio-popup-theme-container2 .aio-popup-footer button.active {
+  height: 36px;
+  border: none;
+  color: #fff;
+  background: var(--aio-popup-theme2-color);
+  padding: 0 36px;
+  border-radius: 24px;
+}
+
+.aio-popup-theme-container2 .aio-popup-body {
+  justify-content: center;
+  display: flex;
+  color: #000;
+}
+
+.aio-popup-theme-container2 .aio-popup-header-close-button {
+  display: none;
+}
+
+.aio-popup-theme-container2 .aio-popup-header {
+  border-bottom: none;
+  color: var(--aio-popup-theme2-color);
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.aio-popup-theme-container2 .aio-popup-header-title {
+  justify-content: center;
+  padding: 8px;
+  padding-bottom: 0px;
+}
+
+.aio-popup-theme-container2 .aio-popup-prompt textarea {
+  border: 1px solid #ddd !important;
+}
+
+.aio-popup-theme-container2 .aio-popup-snackebar-item {
+  background: #fff;
+  border-radius: 24px;
+  color: #000;
+}