aio-popup 4.2.3 → 4.3.0

package/index.css

@@ -346,11 +346,12 @@
   text-align:right;
 }
 .aio-popup-snackebar-item {
-  background: rgb(24 28 41 / 95%);
+  background: rgba(24, 28, 41, 0.945);
   padding: 12px;
   right: 100%;
   position: relative;
-  width: 100%;
+  width: fit-content;
+  max-width:100%;
   height: fit-content;
   box-sizing: border-box;
   display: flex;
@@ -358,6 +359,7 @@
   transition: 0.2s;
   overflow: hidden;
   box-shadow:1px 1px 10px 0 rgba(0,0,0,0.2);
+  backdrop-filter:blur(4px);
 }
 
 .aio-popup-snackebar-item-container.mounted .aio-popup-snackebar-item {
@@ -393,6 +395,10 @@
   border-radius: 100%;
   padding: 3px;
 }
+.aio-popup-snackebar-item-icon svg{
+  width:48px !important;
+  height:48px !important;
+}
 
 .aio-popup-snackebar-item-success .aio-popup-snackebar-item-icon {
   color: #5ba427;
@@ -451,7 +457,9 @@
   border: none;
   background: none;
 }
-
+.aio-popup-confirm{
+  overflow:hidden;
+}
 .aio-popup-confirm .aio-popup-body{
   padding:12px;
 }
@@ -652,4 +660,22 @@
       transform: translateY(12px) rotate(180deg);
       opacity: 0;
   }
-}
+}
+
+/* .aio-popup-snackebar-item{
+  background:linear-gradient(180deg, #ffffff, #d1d1d1);
+  color:#222;
+  font-weight:bold;
+  border-radius:6px;
+  border:2px solid #eee;
+  box-shadow:inset 2px 1px 4px 0px rgb(0 0 0 / 19%);
+}
+
+ */
+/* .aio-popup-snackebar-item{
+  background:#fff;
+  color:#222;
+  font-weight:bold;
+  border-radius:6px;
+  border:1px solid #eee;
+} */

package/index.js

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

package/package.json

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