forstok-ui-lib 5.0.0 → 5.0.1

package/dist/index.d.ts

@@ -225,6 +225,13 @@ declare function ReactPortalComponent({ children, wrapperId }: {
     wrapperId?: string;
 }): react_jsx_runtime.JSX.Element;
 
+declare const FormContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<styled_components.FastOmit<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>>, never>, {
+    name?: string;
+}>> & string;
+declare const SingleFormContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, {
+    $width?: string | number;
+}>> & string;
+
 declare const clearList: styled_components.RuleSet<object>;
 declare const responseWidth: styled_components.RuleSet<object>;
 declare const elipsis: styled_components.RuleSet<object>;
@@ -283,4 +290,4 @@ type THierarchy = {
     evCreateMessageQuestion?: TMessageQuestionFunction;
 };
 
-export { ButtonComponent, CheckboxComponent, DropDownComponent as DropdownComponent, FoContainer, HeaderContainer, IconComponent, InfoGroup, InputComponent, type KeysToSnakeCase, LabelComponent, LinkComponent, ListContainer, LoadingComponent, MessageComponent, MessageQuestionComponent, PanelContainer, PanelWrapper, type PartialBy, PopupComponent, ReactPortalComponent, type TChangeEvent, type TCloseDropdownFunction, type TDragEvent, type TDropdown, type TEnterEvent, type TFile, type TFileImage, type THierarchy, type TIdNum, type TIdStr, type TKeyboadEvent, type TMessage, type TMessageFunction, type TMessageQuestion, type TMessageQuestionFunction, type TMouseEvent, type TObject, type TPage, type TPopup, type TPopupContainer, type TPopupFunction, type TPopupFunctionGroup, type TPopupFunctionParam, type TPopupOpenFunction, type TState, type TUser, TabsContainer, TabsContent, TextComponent, Title, type WithRequired, boxBase, clearList, dropBase, elipsis, formLabel, headTable, multiElipsis, responseWidth, thirdElipsis };
+export { ButtonComponent, CheckboxComponent, DropDownComponent as DropdownComponent, FoContainer, FormContainer, HeaderContainer, IconComponent, InfoGroup, InputComponent, type KeysToSnakeCase, LabelComponent, LinkComponent, ListContainer, LoadingComponent, MessageComponent, MessageQuestionComponent, PanelContainer, PanelWrapper, type PartialBy, PopupComponent, ReactPortalComponent, SingleFormContainer, type TChangeEvent, type TCloseDropdownFunction, type TDragEvent, type TDropdown, type TEnterEvent, type TFile, type TFileImage, type THierarchy, type TIdNum, type TIdStr, type TKeyboadEvent, type TMessage, type TMessageFunction, type TMessageQuestion, type TMessageQuestionFunction, type TMouseEvent, type TObject, type TPage, type TPopup, type TPopupContainer, type TPopupFunction, type TPopupFunctionGroup, type TPopupFunctionParam, type TPopupOpenFunction, type TState, type TUser, TabsContainer, TabsContent, TextComponent, Title, type WithRequired, boxBase, clearList, dropBase, elipsis, formLabel, headTable, multiElipsis, responseWidth, thirdElipsis };

package/dist/index.js

@@ -632,7 +632,32 @@
   ${({$width:e})=>{if(e)return t.css` 
         max-width: ${e};
       `}}  
-`;let Pi;const ji=s.default.section`
+`;let Pi;const ji=t.css`
+  display: grid;
+  grid-row-gap: 12px;
+  grid-column-gap: 16px;
+  width: 100%;
+  margin-bottom: 12px;
+  align-items: start;
+`,Mi=s.default.form.attrs((e=>({name:e.name||"form",autoComplete:e.autoComplete||"off"})))`
+  display: inline-grid;
+  grid-auto-flow: row;
+  grid-gap: 25px;
+  width: 100%;
+  height: 100%;
+  [class*='singleValue'] {
+    width: 100%;
+    color: var(--inp-clr);
+    ._refLabel {
+      top: 5.5px;
+      right: 0;
+    }
+  }
+  ${({name:e})=>{let t="";return"invoiceForm"===e&&(t+="\n      grid-gap: 15px;\n    "),t}}
+`,zi=s.default.section`
+  ${ji}
+  ${({$width:e})=>{let t="";return e&&(t+=` \n      @media (min-width: 768px) {\n        width: ${e}; \n      }\n    `),t}}
+`,Xi=s.default.section`
   position: relative;
   height: 100%;
   padding-top: 20px;
@@ -647,12 +672,12 @@
     padding: 20px 2em 0;
     height: 100%;
   }
-`,Mi=s.default.section`
+`,Yi=s.default.section`
   position: relative;
   &:first-child {
     margin-top: -4px;
   }
-`,zi=s.default.section` 
+`,Wi=s.default.section` 
   ${b}
   position: relative;
   min-height: 1px;
@@ -665,7 +690,7 @@
   ${({$mode:e})=>{if("full"===e)return t.css` 
         width: 100%; 
       `}}
-`,Xi=s.default.h1`
+`,Qi=s.default.h1`
   font-family: PT Sans;
   font-size: 22px;
   color: var(--ter-clr);
@@ -682,7 +707,7 @@
       display: inline !important;
     }
   }
-`,Yi=s.default.aside` 
+`,Ui=s.default.aside` 
   display: grid;
   grid-auto-flow: column;
   grid-gap: 8px;
@@ -699,7 +724,7 @@
   @media only screen and (min-width: 1366px) {
     right: 20px;
   }
-`,Wi=s.default.section`
+`,Hi=s.default.section`
   width: 100%;
   ${({$mode:e})=>"master-listing"===e?t.css` 
         padding: 0 16px;
@@ -711,7 +736,7 @@
           padding-top: 12px; 
         }
       `:void 0}
-`,Qi=s.default.div`
+`,Gi=s.default.div`
   padding-top: 16px;
   &._refNoTab {
     padding-top: 9px;
@@ -723,7 +748,7 @@
     padding-top: 24px;
   }
   ${({$mode:e})=>{let t="";return"list"===e?t+=" \n      min-height: 750px;\n      @media only screen and (min-width: 1280px) {\n        min-height: 600px;\n      }\n    ":"clear"===e&&(t+="\n      padding-top: 9px;\n      @media only screen and (min-width: 768px) {\n        padding-top: 11px;\n      }\n    "),t}}
-`,Ui=s.default.section`
+`,Vi=s.default.section`
   position: relative;
   > section, 
   > article {
@@ -737,7 +762,7 @@
   > article {
     height: calc(100vh - 50px);
   }
-`,Hi=s.default.div`
+`,Ri=s.default.div`
   display: inline-grid;
   grid-auto-flow: column;
   grid-template-columns: minmax(140px, 150px) minmax(140px, 1fr);
@@ -757,5 +782,5 @@
     overflow-wrap: break-word;
     word-break: break-word;
   }
-`;exports.ButtonComponent=U,exports.CheckboxComponent=t=>{var{id:n,name:r,children:i,$flow:s,extendKey:o,extendClass:l,reset:c,setReset:d,isForceUpdate:h,setForceUpdate:u,evChange:p,$isError:f,$iconRight:A}=t,g=a(t,["id","name","children","$flow","extendKey","extendClass","reset","setReset","isForceUpdate","setForceUpdate","evChange","$isError","$iconRight"]);const{disabled:B,defaultChecked:F}=g,[b,C]=e.useState(F||!1),x=e.useRef(null);e.useEffect((()=>{h&&(C(F||!1),u&&u(!1)),c&&(C(!1),d&&d(!1))}),[c,d,h,u,F]);return delete Object.assign({},g).defaultChecked,m.jsxs(X,{$flow:s,$iconRight:A,ref:x,htmlFor:n,disabled:B||!1,children:[i,m.jsx(P,Object.assign({id:n,type:"checkbox",checked:b,name:r,evChange:e=>{C(e.target.checked),p&&p(e)}},l&&{className:l},""!==o&&{"data-key":o},g)),m.jsx(z,Object.assign({$isError:f},g["data-qa-id"]&&{"data-qa-id":g["data-qa-id"]}))]})},exports.DropdownComponent=t=>{var{children:n,title:r,subTitle:i,$externalWidth:s,$externalMinWidth:o,$internalWidth:l,$area:c,$openPosition:d,$placement:h,$top:u,onClick:p,$alias:f,type:A,portalId:g,$bottom:B}=t,F=a(t,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom"]);const b=e.useRef(null),C=()=>{const e=document.getElementsByClassName("_refContainer is-shown")[0];if(e){const t=e.getBoundingClientRect(),n=document.querySelector(`#${g} ._refDropdownPortal`);if(n){const e=n.querySelector("._refDropdownWrapper");n.style.left=t.left+t.width-e.getBoundingClientRect().width+"px",n.style.top=t.top+parseInt(u||"0")-32+"px"}}},x=()=>{const e=document.getElementsByClassName("_refContainer is-shown");if(e.length)for(let t=0;t<e.length;t++)e[t].classList.remove("is-shown");document.querySelector("._refScrollContainer").removeEventListener("scroll",C,!0),setTimeout((()=>{if(g){const e=document.getElementsByClassName("_refDropdownPortal is-shown");if(e.length)for(let t=0;t<e.length;t++)e[t].style.left="0",e[t].style.top="0",e[t].classList.remove("is-shown")}}),10)},w=e=>{const t=b.current;if(t){const n=e.target.closest(`.${t.classList[0]}`);if(!n)return;const r=n.closest("._refContainer");if(r){const t=r.classList.contains("is-shown"),n=r.getBoundingClientRect();t?(r.classList.remove("is-shown"),setTimeout((()=>{if(g){const e=document.querySelector(`#${g} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer"),n=e.querySelector("._refDropdownWrapper");e&&(e.classList.remove("is-shown"),e.style.left="0px",e.style.top="0px",n&&t.removeEventListener("scroll",C,!0))}}),10)):(x(),r.classList.add("is-shown"),setTimeout((()=>{if(g){const e=document.querySelector(`#${g} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer"),r=e.querySelector("._refDropdownWrapper");e&&(n&&(r?setTimeout((()=>{r.style.right="auto",e.style.left=n.left+n.width-r.getBoundingClientRect().width+"px",e.style.top=n.top+parseInt(u||"0")-32+"px",e.style.zIndex="8",t.addEventListener("scroll",C,!0)}),10):(e.style.left=n.left+(parseInt(l||"0")+n.width)/2+"px",e.style.top=n.top+n.height+"px")),e.classList.add("is-shown"))}}),10),p&&p(e))}}};e.useEffect((()=>(setTimeout((()=>{const e=document.querySelectorAll("._refDropdownPortal._refHover");for(let t of e)t&&t.addEventListener("mouseenter",(e=>{const t=e.target;t.classList.add("is-shown"),t.classList.add("unhiddenable")})),t&&t.addEventListener("mouseleave",(e=>{const t=e.target;t.classList.remove("is-shown"),t.classList.remove("unhiddenable"),t.style.left="0",t.style.top="0"}))}),1),()=>{const e=document.querySelectorAll("._refDropdownPortal._refHover");for(let t of e)t&&t.removeEventListener("mouseenter",(e=>{const t=e.target;t.classList.add("is-shown"),t.classList.add("unhiddenable")}),!0),t&&t.removeEventListener("mouseleave",(e=>{const t=e.target;t.classList.remove("is-shown"),t.classList.remove("unhiddenable"),t.style.left="0",t.style.top="0"}),!0)})),[g]);const v=i?m.jsx(oe,{children:i}):null,y=r?m.jsxs(ae,{children:[r," ",v]}):null,k=n.filter((t=>e.isValidElement(t)?"control"===t.props["aria-label"]:null)),E=k&&e.isValidElement(k[0])?"hover"===A?m.jsxs(ie,{children:[m.jsx(re,Object.assign({className:"_refDropdownControl"},g&&{onMouseEnter:e=>{const t=b.current;if(t){const n=e.target.closest(`.${t.classList[0]}`);if(!n)return;const r=document.querySelectorAll("._refDropdownPortal");for(const e of r)e.classList.remove("is-shown"),e.style.left="0",e.style.top="0";const i=n.closest("._refContainer");if(i){const e=i.getBoundingClientRect(),t=document.querySelector(`#${g} ._refDropdownPortal`);if(t){if(e){t.style.left=e.left+(parseInt(l||"0")+e.width)/2+"px";let n=e.top+e.height;const r=t.querySelector("._refDropdownWrapper");r&&(r.style.display="block",n+r.clientHeight>=document.body.clientHeight&&(n=e.top-r.clientHeight-10)),t.style.top=n+"px"}t.classList.add("is-shown")}}}},onMouseLeave:e=>{const t=b.current;if(t){if(!e.target.closest(`.${t.classList[0]}`))return;setTimeout((()=>{const e=document.querySelector(`#${g} ._refDropdownPortal`);e&&!e.classList.contains("unhiddenable")&&(e.classList.remove("is-shown"),e.style.left="0",e.style.top="0")}),150)}}},{children:k[0].props.children})),m.jsx(re,{className:"_refDropdownControlMobile",ref:b,onClick:w,children:k[0].props.children})]}):m.jsx(re,{ref:b,onClick:w,children:k[0].props.children}):null,D=n.filter((t=>e.isValidElement(t)?"body"===t.props["aria-label"]:null)),I=D&&e.isValidElement(D[0])?m.jsx(le,{$area:c,children:D[0].props.children}):null,L=n.filter((t=>e.isValidElement(t)?"action"===t.props["aria-label"]:null)),S=L&&e.isValidElement(L[0])?m.jsx(ce,{$position:L[0].props["data-position"],className:L[0].props.className,children:L[0].props.children}):null,N=m.jsxs(te,Object.assign({className:"_refDropdownWrapper"},l&&{$internalWidth:l},u&&{$top:u},d&&{$openPosition:d},h&&{$placement:h},B&&{$bottom:B},{children:[y,I,S]}));return m.jsxs(se,Object.assign({className:"_refContainer "+(A?`_refContainer${A}`:"")},s&&{$externalWidth:s},o&&{$externalMinWidth:o},c&&{$area:c},u&&{$top:u},f&&{$alias:f},d&&{$openPosition:d},h&&{$placement:h},B&&{$bottom:B},F,{children:[E,m.jsx(ne,{className:"_refDropdownOverlay",onClick:()=>{x()}}),g?m.jsx(ee,{wrapperId:g,children:m.jsx(de,{className:"_refDropdownPortal "+("hover"===A?"_refHover":""),children:N})}):N]}))},exports.FoContainer=Ui,exports.HeaderContainer=Yi,exports.IconComponent=_,exports.InfoGroup=Hi,exports.InputComponent=P,exports.LabelComponent=e=>{var{children:t,$mode:n,$position:r}=e,i=a(e,["children","$mode","$position"]);return m.jsx(V,Object.assign({$mode:n,$position:r},i,{children:t}))},exports.LinkComponent=e=>{var{children:t,mode:n,$activated:r=!1,href:i,$elipsis:s=!1,$shadow:o=!1,disabled:l=!1}=e,c=a(e,["children","mode","$activated","href","$elipsis","$shadow","disabled"]);const{onClick:d}=c;return i?m.jsx(N,Object.assign({className:"_refLink",mode:n,$activated:r,$elipsis:s,$shadow:o,disabled:l,href:i},c,{children:t})):m.jsx(T,Object.assign({className:"_refLink",mode:n,$activated:r,$elipsis:s,$shadow:o,disabled:l,onClick:d},c,{children:t}))},exports.ListContainer=Mi,exports.LoadingComponent=K,exports.MessageComponent=({timer:t=500,$type:n,message:r,callback:i})=>{const[s,a]=pe.useStateWithCallbackLazy(!1),[o,l]=pe.useStateWithCallbackLazy(!1),[c,d]=pe.useStateWithCallbackLazy(!1),h=e.useCallback((()=>{d(!c,(()=>{document.getElementsByTagName("BODY")[0].classList.remove("is-immuned"),i&&i()}))}),[i,d,c]),u=e.useCallback((()=>{h()}),[h]);return e.useEffect((()=>{const e=t||2e3,n=document.querySelector("._refMessageOverlay");return s||c?s&&c&&(a&&a(!s,(()=>{})),l&&l(!o,(()=>{})),n&&n.removeEventListener("click",u)):a(!s,(()=>{n&&n.addEventListener("click",u),setTimeout((()=>{l(!o,(()=>{setTimeout((()=>!o&&h()),e)}))}),1)})),()=>{n&&n.removeEventListener("click",u)}}),[s,o,t,h,a,l,u,c]),m.jsxs(ge,{$isOpen:s,children:[m.jsx(Be,{className:"_refMessageOverlay"}),m.jsx(be,{children:m.jsx(Fe,{$isOpen:o,children:m.jsxs(Ce,{$type:n,children:[m.jsx("i",{}),r,m.jsx(U,{$mode:"small-white-round-close",onClick:h})]})})})]})},exports.MessageQuestionComponent=({$type:t,title:n,subtitle:r,callback:i,buttonSubmit:s,cancelCallback:a})=>{const[o,l]=pe.useStateWithCallbackLazy(!1),[c,d]=pe.useStateWithCallbackLazy(!1),[h,u]=pe.useStateWithCallbackLazy(!1),p=e.useCallback((()=>{u(!h,(()=>{a&&a();document.getElementsByTagName("BODY")[0].classList.remove("is-immuned")}))}),[a,h,u]),f=e.useCallback((()=>{p()}),[p]);return e.useEffect((()=>{const e=document.querySelector("._refQuestionMessageOverlay");o||h?o&&h&&(l(!o,(()=>{})),d(!c,(()=>{})),e&&e.removeEventListener("click",f)):l(!o,(()=>{setTimeout((()=>{d(!c,(()=>{})),e&&e.addEventListener("click",f)}),1)}))}),[o,c,l,d,f,h]),m.jsxs(ge,{$isOpen:o,children:[m.jsx(Be,{className:"_refQuestionMessageOverlay",$type:t}),m.jsx(be,{$type:t,children:m.jsx(Fe,{$isOpen:c,children:m.jsxs(Ce,{$type:t,children:[m.jsx("i",{}),m.jsxs("div",{children:[m.jsx(B,{$elipsis:!1,style:{fontWeight:600,fontSize:"15px"},children:n}),m.jsx(B,{$color:"grey",$elipsis:!1,children:yi(r)}),m.jsxs("aside",{children:[m.jsx(U,{$mode:"white",$size:"small",onClick:p,children:"Cancel"}),m.jsx(U,{$mode:"red",$size:"small",onClick:()=>{u(!h,(()=>{document.getElementsByTagName("BODY")[0].classList.remove("is-immuned"),i&&i()}))},children:s||"Confirm"})]})]})]})})})]})},exports.PanelContainer=ji,exports.PanelWrapper=zi,exports.PopupComponent=t=>{var{children:n,body:r,mode:i,height:s,width:o,isOpen:l,evTooglePopup:c}=t,d=a(t,["children","body","mode","height","width","isOpen","evTooglePopup"]);const[h,u]=pe.useStateWithCallbackLazy(!1),p=e.useRef(null),f=e.useCallback((e=>{Pi=setTimeout((()=>{u(e,(()=>{const e=p&&p.current?p.current:null;e&&(e.scrollTop=0)})),clearTimeout(Pi)}),1)}),[u]),A=e.useRef({init:()=>{f(l)}});e.useEffect((()=>{const{init:e}=A.current;return e(),()=>{clearTimeout(Pi)}}),[]),e.useEffect((()=>{f(l)}),[l,f]);let g=[...n];const B=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"head"===t.props["aria-label"])))||null,F=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"sub-head"===t.props["aria-label"])))||null,b=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"body"===t.props["aria-label"])))||null,C=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"foot"===t.props["aria-label"])))||null,x=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"left-foot"===t.props["aria-label"])))||null,w=F.length?m.jsx("aside",{children:F[0]&&e.isValidElement(F[0])?F[0].props.children:null}):null,v=B.length&&B[0]&&e.isValidElement(B[0])?B[0].props["data-qa-id"]:"";return m.jsxs(Ei,{$isOpen:l,children:[m.jsx(Di,{}),m.jsx(Ii,Object.assign({ref:p},d["data-qa-id"]&&{"data-qa-id":d["data-qa-id"]},{children:"question"===i?m.jsx(Li,{$isOpen:h,children:m.jsxs(qi,{$width:o,children:[m.jsx(_,{$name:"warning",$width:"30px"}),m.jsxs(Si,{$mode:i,children:[B.length?m.jsx(Ni,{children:B[0]&&e.isValidElement(B[0])?B[0].props.children:null}):null,w,C.length?m.jsx(Oi,{children:C[0]&&e.isValidElement(C[0])?m.jsx("aside",{"data-type":C[0].props.type||"",children:C[0].props.children}):null}):null]})]})}):m.jsxs(m.Fragment,{children:[m.jsx(Si,{$width:o,$isOpen:h,$mode:i,children:B.length?m.jsxs(m.Fragment,{children:[m.jsx(U,{$mode:"round-close",onClick:c}),m.jsx(Ni,{"data-qa-id":v,children:B[0]&&e.isValidElement(B[0])&&B[0].props.children})]}):null}),m.jsxs(Li,{$width:o,$isOpen:h,$withHeader:!!B.length,children:[w,b.length?m.jsx(Ti,{$mode:r,$width:o,$height:s,children:b[0]&&e.isValidElement(b[0])&&b[0].props.children}):null,C.length?m.jsxs(Oi,{$isLeft:!!x.length,children:[m.jsx("aside",{children:x&&x.length&&x[0]&&e.isValidElement(x[0])?x[0].props.children:null}),C[0]&&e.isValidElement(C[0])?m.jsxs("aside",{"data-type":C[0].props.type||"",children:[i&&"info"===i?m.jsx(U,{$mode:"white",$size:"small",onClick:c,children:"Close"}):m.jsx(U,{$mode:"white",$size:"small",onClick:c,"data-qa-id":"popup-button-cancel",children:"Cancel"}),C[0].props.children]}):null]}):null]})]})}))]})},exports.ReactPortalComponent=ee,exports.TabsContainer=Wi,exports.TabsContent=Qi,exports.TextComponent=B,exports.Title=Xi,exports.boxBase=v,exports.clearList=F,exports.dropBase=y,exports.elipsis=C,exports.formLabel=E,exports.headTable=k,exports.multiElipsis=x,exports.responseWidth=b,exports.thirdElipsis=w;
+`;exports.ButtonComponent=U,exports.CheckboxComponent=t=>{var{id:n,name:r,children:i,$flow:s,extendKey:o,extendClass:l,reset:c,setReset:d,isForceUpdate:h,setForceUpdate:u,evChange:p,$isError:f,$iconRight:A}=t,g=a(t,["id","name","children","$flow","extendKey","extendClass","reset","setReset","isForceUpdate","setForceUpdate","evChange","$isError","$iconRight"]);const{disabled:B,defaultChecked:F}=g,[b,C]=e.useState(F||!1),x=e.useRef(null);e.useEffect((()=>{h&&(C(F||!1),u&&u(!1)),c&&(C(!1),d&&d(!1))}),[c,d,h,u,F]);return delete Object.assign({},g).defaultChecked,m.jsxs(X,{$flow:s,$iconRight:A,ref:x,htmlFor:n,disabled:B||!1,children:[i,m.jsx(P,Object.assign({id:n,type:"checkbox",checked:b,name:r,evChange:e=>{C(e.target.checked),p&&p(e)}},l&&{className:l},""!==o&&{"data-key":o},g)),m.jsx(z,Object.assign({$isError:f},g["data-qa-id"]&&{"data-qa-id":g["data-qa-id"]}))]})},exports.DropdownComponent=t=>{var{children:n,title:r,subTitle:i,$externalWidth:s,$externalMinWidth:o,$internalWidth:l,$area:c,$openPosition:d,$placement:h,$top:u,onClick:p,$alias:f,type:A,portalId:g,$bottom:B}=t,F=a(t,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom"]);const b=e.useRef(null),C=()=>{const e=document.getElementsByClassName("_refContainer is-shown")[0];if(e){const t=e.getBoundingClientRect(),n=document.querySelector(`#${g} ._refDropdownPortal`);if(n){const e=n.querySelector("._refDropdownWrapper");n.style.left=t.left+t.width-e.getBoundingClientRect().width+"px",n.style.top=t.top+parseInt(u||"0")-32+"px"}}},x=()=>{const e=document.getElementsByClassName("_refContainer is-shown");if(e.length)for(let t=0;t<e.length;t++)e[t].classList.remove("is-shown");document.querySelector("._refScrollContainer").removeEventListener("scroll",C,!0),setTimeout((()=>{if(g){const e=document.getElementsByClassName("_refDropdownPortal is-shown");if(e.length)for(let t=0;t<e.length;t++)e[t].style.left="0",e[t].style.top="0",e[t].classList.remove("is-shown")}}),10)},w=e=>{const t=b.current;if(t){const n=e.target.closest(`.${t.classList[0]}`);if(!n)return;const r=n.closest("._refContainer");if(r){const t=r.classList.contains("is-shown"),n=r.getBoundingClientRect();t?(r.classList.remove("is-shown"),setTimeout((()=>{if(g){const e=document.querySelector(`#${g} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer"),n=e.querySelector("._refDropdownWrapper");e&&(e.classList.remove("is-shown"),e.style.left="0px",e.style.top="0px",n&&t.removeEventListener("scroll",C,!0))}}),10)):(x(),r.classList.add("is-shown"),setTimeout((()=>{if(g){const e=document.querySelector(`#${g} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer"),r=e.querySelector("._refDropdownWrapper");e&&(n&&(r?setTimeout((()=>{r.style.right="auto",e.style.left=n.left+n.width-r.getBoundingClientRect().width+"px",e.style.top=n.top+parseInt(u||"0")-32+"px",e.style.zIndex="8",t.addEventListener("scroll",C,!0)}),10):(e.style.left=n.left+(parseInt(l||"0")+n.width)/2+"px",e.style.top=n.top+n.height+"px")),e.classList.add("is-shown"))}}),10),p&&p(e))}}};e.useEffect((()=>(setTimeout((()=>{const e=document.querySelectorAll("._refDropdownPortal._refHover");for(let t of e)t&&t.addEventListener("mouseenter",(e=>{const t=e.target;t.classList.add("is-shown"),t.classList.add("unhiddenable")})),t&&t.addEventListener("mouseleave",(e=>{const t=e.target;t.classList.remove("is-shown"),t.classList.remove("unhiddenable"),t.style.left="0",t.style.top="0"}))}),1),()=>{const e=document.querySelectorAll("._refDropdownPortal._refHover");for(let t of e)t&&t.removeEventListener("mouseenter",(e=>{const t=e.target;t.classList.add("is-shown"),t.classList.add("unhiddenable")}),!0),t&&t.removeEventListener("mouseleave",(e=>{const t=e.target;t.classList.remove("is-shown"),t.classList.remove("unhiddenable"),t.style.left="0",t.style.top="0"}),!0)})),[g]);const v=i?m.jsx(oe,{children:i}):null,y=r?m.jsxs(ae,{children:[r," ",v]}):null,k=n.filter((t=>e.isValidElement(t)?"control"===t.props["aria-label"]:null)),E=k&&e.isValidElement(k[0])?"hover"===A?m.jsxs(ie,{children:[m.jsx(re,Object.assign({className:"_refDropdownControl"},g&&{onMouseEnter:e=>{const t=b.current;if(t){const n=e.target.closest(`.${t.classList[0]}`);if(!n)return;const r=document.querySelectorAll("._refDropdownPortal");for(const e of r)e.classList.remove("is-shown"),e.style.left="0",e.style.top="0";const i=n.closest("._refContainer");if(i){const e=i.getBoundingClientRect(),t=document.querySelector(`#${g} ._refDropdownPortal`);if(t){if(e){t.style.left=e.left+(parseInt(l||"0")+e.width)/2+"px";let n=e.top+e.height;const r=t.querySelector("._refDropdownWrapper");r&&(r.style.display="block",n+r.clientHeight>=document.body.clientHeight&&(n=e.top-r.clientHeight-10)),t.style.top=n+"px"}t.classList.add("is-shown")}}}},onMouseLeave:e=>{const t=b.current;if(t){if(!e.target.closest(`.${t.classList[0]}`))return;setTimeout((()=>{const e=document.querySelector(`#${g} ._refDropdownPortal`);e&&!e.classList.contains("unhiddenable")&&(e.classList.remove("is-shown"),e.style.left="0",e.style.top="0")}),150)}}},{children:k[0].props.children})),m.jsx(re,{className:"_refDropdownControlMobile",ref:b,onClick:w,children:k[0].props.children})]}):m.jsx(re,{ref:b,onClick:w,children:k[0].props.children}):null,D=n.filter((t=>e.isValidElement(t)?"body"===t.props["aria-label"]:null)),I=D&&e.isValidElement(D[0])?m.jsx(le,{$area:c,children:D[0].props.children}):null,L=n.filter((t=>e.isValidElement(t)?"action"===t.props["aria-label"]:null)),S=L&&e.isValidElement(L[0])?m.jsx(ce,{$position:L[0].props["data-position"],className:L[0].props.className,children:L[0].props.children}):null,N=m.jsxs(te,Object.assign({className:"_refDropdownWrapper"},l&&{$internalWidth:l},u&&{$top:u},d&&{$openPosition:d},h&&{$placement:h},B&&{$bottom:B},{children:[y,I,S]}));return m.jsxs(se,Object.assign({className:"_refContainer "+(A?`_refContainer${A}`:"")},s&&{$externalWidth:s},o&&{$externalMinWidth:o},c&&{$area:c},u&&{$top:u},f&&{$alias:f},d&&{$openPosition:d},h&&{$placement:h},B&&{$bottom:B},F,{children:[E,m.jsx(ne,{className:"_refDropdownOverlay",onClick:()=>{x()}}),g?m.jsx(ee,{wrapperId:g,children:m.jsx(de,{className:"_refDropdownPortal "+("hover"===A?"_refHover":""),children:N})}):N]}))},exports.FoContainer=Vi,exports.FormContainer=Mi,exports.HeaderContainer=Ui,exports.IconComponent=_,exports.InfoGroup=Ri,exports.InputComponent=P,exports.LabelComponent=e=>{var{children:t,$mode:n,$position:r}=e,i=a(e,["children","$mode","$position"]);return m.jsx(V,Object.assign({$mode:n,$position:r},i,{children:t}))},exports.LinkComponent=e=>{var{children:t,mode:n,$activated:r=!1,href:i,$elipsis:s=!1,$shadow:o=!1,disabled:l=!1}=e,c=a(e,["children","mode","$activated","href","$elipsis","$shadow","disabled"]);const{onClick:d}=c;return i?m.jsx(N,Object.assign({className:"_refLink",mode:n,$activated:r,$elipsis:s,$shadow:o,disabled:l,href:i},c,{children:t})):m.jsx(T,Object.assign({className:"_refLink",mode:n,$activated:r,$elipsis:s,$shadow:o,disabled:l,onClick:d},c,{children:t}))},exports.ListContainer=Yi,exports.LoadingComponent=K,exports.MessageComponent=({timer:t=500,$type:n,message:r,callback:i})=>{const[s,a]=pe.useStateWithCallbackLazy(!1),[o,l]=pe.useStateWithCallbackLazy(!1),[c,d]=pe.useStateWithCallbackLazy(!1),h=e.useCallback((()=>{d(!c,(()=>{document.getElementsByTagName("BODY")[0].classList.remove("is-immuned"),i&&i()}))}),[i,d,c]),u=e.useCallback((()=>{h()}),[h]);return e.useEffect((()=>{const e=t||2e3,n=document.querySelector("._refMessageOverlay");return s||c?s&&c&&(a&&a(!s,(()=>{})),l&&l(!o,(()=>{})),n&&n.removeEventListener("click",u)):a(!s,(()=>{n&&n.addEventListener("click",u),setTimeout((()=>{l(!o,(()=>{setTimeout((()=>!o&&h()),e)}))}),1)})),()=>{n&&n.removeEventListener("click",u)}}),[s,o,t,h,a,l,u,c]),m.jsxs(ge,{$isOpen:s,children:[m.jsx(Be,{className:"_refMessageOverlay"}),m.jsx(be,{children:m.jsx(Fe,{$isOpen:o,children:m.jsxs(Ce,{$type:n,children:[m.jsx("i",{}),r,m.jsx(U,{$mode:"small-white-round-close",onClick:h})]})})})]})},exports.MessageQuestionComponent=({$type:t,title:n,subtitle:r,callback:i,buttonSubmit:s,cancelCallback:a})=>{const[o,l]=pe.useStateWithCallbackLazy(!1),[c,d]=pe.useStateWithCallbackLazy(!1),[h,u]=pe.useStateWithCallbackLazy(!1),p=e.useCallback((()=>{u(!h,(()=>{a&&a();document.getElementsByTagName("BODY")[0].classList.remove("is-immuned")}))}),[a,h,u]),f=e.useCallback((()=>{p()}),[p]);return e.useEffect((()=>{const e=document.querySelector("._refQuestionMessageOverlay");o||h?o&&h&&(l(!o,(()=>{})),d(!c,(()=>{})),e&&e.removeEventListener("click",f)):l(!o,(()=>{setTimeout((()=>{d(!c,(()=>{})),e&&e.addEventListener("click",f)}),1)}))}),[o,c,l,d,f,h]),m.jsxs(ge,{$isOpen:o,children:[m.jsx(Be,{className:"_refQuestionMessageOverlay",$type:t}),m.jsx(be,{$type:t,children:m.jsx(Fe,{$isOpen:c,children:m.jsxs(Ce,{$type:t,children:[m.jsx("i",{}),m.jsxs("div",{children:[m.jsx(B,{$elipsis:!1,style:{fontWeight:600,fontSize:"15px"},children:n}),m.jsx(B,{$color:"grey",$elipsis:!1,children:yi(r)}),m.jsxs("aside",{children:[m.jsx(U,{$mode:"white",$size:"small",onClick:p,children:"Cancel"}),m.jsx(U,{$mode:"red",$size:"small",onClick:()=>{u(!h,(()=>{document.getElementsByTagName("BODY")[0].classList.remove("is-immuned"),i&&i()}))},children:s||"Confirm"})]})]})]})})})]})},exports.PanelContainer=Xi,exports.PanelWrapper=Wi,exports.PopupComponent=t=>{var{children:n,body:r,mode:i,height:s,width:o,isOpen:l,evTooglePopup:c}=t,d=a(t,["children","body","mode","height","width","isOpen","evTooglePopup"]);const[h,u]=pe.useStateWithCallbackLazy(!1),p=e.useRef(null),f=e.useCallback((e=>{Pi=setTimeout((()=>{u(e,(()=>{const e=p&&p.current?p.current:null;e&&(e.scrollTop=0)})),clearTimeout(Pi)}),1)}),[u]),A=e.useRef({init:()=>{f(l)}});e.useEffect((()=>{const{init:e}=A.current;return e(),()=>{clearTimeout(Pi)}}),[]),e.useEffect((()=>{f(l)}),[l,f]);let g=[...n];const B=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"head"===t.props["aria-label"])))||null,F=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"sub-head"===t.props["aria-label"])))||null,b=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"body"===t.props["aria-label"])))||null,C=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"foot"===t.props["aria-label"])))||null,x=(null==g?void 0:g.filter((t=>e.isValidElement(t)&&"left-foot"===t.props["aria-label"])))||null,w=F.length?m.jsx("aside",{children:F[0]&&e.isValidElement(F[0])?F[0].props.children:null}):null,v=B.length&&B[0]&&e.isValidElement(B[0])?B[0].props["data-qa-id"]:"";return m.jsxs(Ei,{$isOpen:l,children:[m.jsx(Di,{}),m.jsx(Ii,Object.assign({ref:p},d["data-qa-id"]&&{"data-qa-id":d["data-qa-id"]},{children:"question"===i?m.jsx(Li,{$isOpen:h,children:m.jsxs(qi,{$width:o,children:[m.jsx(_,{$name:"warning",$width:"30px"}),m.jsxs(Si,{$mode:i,children:[B.length?m.jsx(Ni,{children:B[0]&&e.isValidElement(B[0])?B[0].props.children:null}):null,w,C.length?m.jsx(Oi,{children:C[0]&&e.isValidElement(C[0])?m.jsx("aside",{"data-type":C[0].props.type||"",children:C[0].props.children}):null}):null]})]})}):m.jsxs(m.Fragment,{children:[m.jsx(Si,{$width:o,$isOpen:h,$mode:i,children:B.length?m.jsxs(m.Fragment,{children:[m.jsx(U,{$mode:"round-close",onClick:c}),m.jsx(Ni,{"data-qa-id":v,children:B[0]&&e.isValidElement(B[0])&&B[0].props.children})]}):null}),m.jsxs(Li,{$width:o,$isOpen:h,$withHeader:!!B.length,children:[w,b.length?m.jsx(Ti,{$mode:r,$width:o,$height:s,children:b[0]&&e.isValidElement(b[0])&&b[0].props.children}):null,C.length?m.jsxs(Oi,{$isLeft:!!x.length,children:[m.jsx("aside",{children:x&&x.length&&x[0]&&e.isValidElement(x[0])?x[0].props.children:null}),C[0]&&e.isValidElement(C[0])?m.jsxs("aside",{"data-type":C[0].props.type||"",children:[i&&"info"===i?m.jsx(U,{$mode:"white",$size:"small",onClick:c,children:"Close"}):m.jsx(U,{$mode:"white",$size:"small",onClick:c,"data-qa-id":"popup-button-cancel",children:"Cancel"}),C[0].props.children]}):null]}):null]})]})}))]})},exports.ReactPortalComponent=ee,exports.SingleFormContainer=zi,exports.TabsContainer=Hi,exports.TabsContent=Gi,exports.TextComponent=B,exports.Title=Qi,exports.boxBase=v,exports.clearList=F,exports.dropBase=y,exports.elipsis=C,exports.formLabel=E,exports.headTable=k,exports.multiElipsis=x,exports.responseWidth=b,exports.thirdElipsis=w;
 //# sourceMappingURL=index.js.map