@inntechcorp/it-design 2.2.32 → 2.2.34

package/dist/index.d.ts

@@ -1224,6 +1224,18 @@ type ModalProps = {
      * @returns
      */
     onCancel?: (() => boolean | null) | null;
+    /**
+     * Called when the modal is shown. If this
+     * function is defined, a ModalEvent is triggered.
+     * @returns
+     */
+    onShow?: (() => void) | null;
+    /**
+     * Called when the modal is closed. If this
+     * function is defined, a ModalEvent is triggered.
+     * @returns
+     */
+    onExit?: (() => void) | null;
     /**
      * ModalManager can find its own ref, but some libraries
      * (@loadable, React.lazy, etc.) may have their own ref values,
@@ -1491,7 +1503,7 @@ type StatusProps = {
     children?: ChildrenProps;
     className?: string;
 };
-type StatusVariant = "gray-1" | "gray-2" | "gray-3" | "green" | "yellow" | "red" | "brown" | "lavender" | "pink" | "violet" | "blue" | "filled-red" | "filled-yellow" | "filled-pink" | "filled-blue" | "filled-green" | "filled-purple" | "filled-black";
+type StatusVariant = "gray-1" | "gray-2" | "gray-3" | "green" | "yellow" | "red" | "brown" | "lavender" | "pink" | "violet" | "blue" | "black" | "purple" | "orange" | "teal" | "indigo" | "lime" | "filled-brown" | "filled-violet" | "filled-red" | "filled-yellow" | "filled-pink" | "filled-blue" | "filled-green" | "filled-purple" | "filled-black" | "filled-lavender" | "filled-gray-1" | "filled-gray-2" | "filled-gray-3" | "filled-orange" | "filled-teal" | "filled-indigo" | "filled-lime";
 
 type FlexProps = {
     gap?: FlexGapProps;

package/dist/index.esm.js

@@ -1242,7 +1242,7 @@ import M from"i18next";import{useTranslation as b,initReactI18next as z}from"rea
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
   }
-`;const Mb=M=>{const b=A(null),z=A(null),o=A(null),[c,e]=t(!0),[a,i]=t(!1),[r,q]=t(!1),[s,l]=t(!1),[W,u]=t(!1);n((()=>(M.onModalEvent(D.BEGIN,M.id?M.id:""),()=>{M.onModalEvent(D.REMOVED,M.id?M.id:"")})),[]),n((()=>{i(c),c||M.onHideModal&&M.onHideModal(String(M.id))}),[c]),tM(z,(()=>{!M.closeOnClickOutside||r||W||M.isActive&&(M.onModalEvent(D.OUTSIDE_CLICK,M.id?M.id:""),w(),i(!1))})),nM((()=>{M.preventESC||r||W||M.isActive&&(M.onModalEvent(D.ESC_CLICK,M.id?M.id:""),w(),i(!1))}));const f=()=>{M.isActive&&i(!1)},h=()=>{M.onRemoveModal&&M.onRemoveModal(String(M.id))},R=b=>{M.isActive&&(M.removeOthers,M.onShowModal(b))},L=M=>{l(!M)},m=M=>{q(M)},g=M=>{u(M)},N=()=>{M.onModalEvent(D.CLOSE_CLICK,M.id?M.id:""),w(),M.hideModalFromProvider(M.id?M.id:""),i(!1)},X=()=>{M.isActive&&(M.onModalEvent(D.OK_CLICK,M.id?M.id:""),x()&&(M.hideModalFromProvider(M.id?M.id:""),i(!1)))},y=()=>{M.isActive&&(M.onModalEvent(D.CANCEL_CLICK,M.id?M.id:""),w()&&(M.hideModalFromProvider(M.id?M.id:""),i(!1)))},x=()=>{if(!b.current)return!M.onOk||M.onOk();b.current.onClickOK&&b.current.onClickOK()},w=()=>{if(!b.current)return!M.onCancel||M.onCancel();b.current.onClickCancel&&b.current.onClickCancel()},T=()=>{M.onModalEvent(D.ENTERING,M.id?M.id:"")},_=()=>{M.onModalEvent(D.ENTERED,M.id?M.id:"")},k=()=>{M.onModalEvent(D.EXITING,M.id?M.id:"")},S=()=>{M.onModalEvent(D.EXITED,M.id?M.id:""),e(!1)},E=M=>{if(M.content&&Object(M.content).props&&Object.keys(Object(M.content).props).length>0)return{};let z={hideCurrentModal:f,removeCurrentModal:h,showAnotherModal:R,changeButtonsState:L,changeLoadingState:m,changeInnerLoadingState:g,modalProps:{...M.customProps},context:{...M.context}};return M.checkAutoRef&&M.content.type.hasOwnProperty("$$typeof")&&(console.log("(props.content as React.ReactElement).type['$$typeof']",M.content.type.$$typeof),"Symbol(react.forward_ref)"===M.content.type.$$typeof.toString()&&(z.ref=b)),M.useRef&&(z.ref=b),z},C=()=>{if(M.content)return p("div",{className:"itd-modal-middle-content-body",children:d(M.content,E(M))})},P=()=>{if(M.addContentBefore)return p(YM,{className:"itd-modal-middle-content-before",$padding:M.beforeContentPadding,children:M.addContentBefore})},F=()=>{if(M.addContentAfter)return p(GM,{className:"itd-modal-middle-content-after",$padding:M.afterContentPadding,children:M.addContentAfter})},I=()=>{let b=M.width;return"number"==typeof b&&(b=M.width+"px"),b};return n((()=>{if(a){const M=window.innerWidth-document.documentElement.clientWidth;document.body.style.overflow="hidden",document.body.style.paddingRight=`${M}px`}else document.body.style.overflow="",document.body.style.paddingRight="";return()=>{document.body.style.overflow="",document.body.style.paddingRight=""}}),[a]),n((()=>{M.modalEvent.event===D.EXITING&&M.modalEvent.id===M.id&&i(!1)}),[M.modalEvent,M.id]),n((()=>{!M.isVisible&&a&&i(!1)}),[M.isVisible,a,M.id]),c?p("div",{className:"itd-modal-container".concat(" "+M.className),children:p(B,{in:a,timeout:600,classNames:"modal",nodeRef:o,onEntering:T,onEntered:_,onExiting:k,onExited:S,unmountOnExit:!0,children:p(HM,{className:"itd-modal-content-wrapper",ref:o,children:p(UM,{className:"itd-modal-inner-wrapper",$padding:M.outerPadding,children:p(jM,{className:"itd-modal-body",$width:I(),children:p(VM,{className:"itd-modal-content",ref:z,children:O(mM,{updating:W,children:[!1!==M.showCloseButton&&p(ZM,{className:"itd-modal-close-button",children:p($M,{size:"x-small",variant:"ghost",onClick:N,icon:p(v,{src:"data:image/svg+xml,%3csvg width = '10px' height = '10px' viewBox = '0 0 329.26933 329' xmlns = 'http://www.w3.org/2000/svg'%3e %3cpath d='m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0'%3e%3c/path%3e%3c/svg%3e"}),disabled:r||W||!M.isActive})}),M.title?p(JM,{className:"itd-modal-header",children:"string"==typeof M.title?p(ec,{children:M.title}):M.title}):null,P(),p(KM,{className:"itd-modal-middle-content",$padding:M.contentPadding,children:C()}),F(),M.showOkButton||M.showCancelButton?O(QM,{className:"itd-modal-footer",children:[M.showCancelButton&&p($M,{variant:"solid",size:"small",type:"button",onClick:y,disabled:r||W||!M.isActive||s,...M.cancelButtonProps,children:M.cancelButtonText}),M.showOkButton&&p($M,{variant:"default",size:"small",type:"button",onClick:X,loading:r,disabled:W||!M.isActive||s,...M.okButtonProps,children:M.okButtonText})]}):null]})})})})})})}):null},bb=k.div`
+`;const Mb=M=>{const b=A(null),z=A(null),o=A(null),[c,e]=t(!0),[a,i]=t(!1),[r,q]=t(!1),[s,l]=t(!1),[W,u]=t(!1);n((()=>(M.onModalEvent(D.BEGIN,M.id?M.id:""),()=>{M.onModalEvent(D.REMOVED,M.id?M.id:"")})),[]),n((()=>{i(c),c||M.onHideModal&&M.onHideModal(String(M.id))}),[c]),tM(z,(()=>{!M.closeOnClickOutside||r||W||M.isActive&&(M.onModalEvent(D.OUTSIDE_CLICK,M.id?M.id:""),w(),i(!1))})),nM((()=>{M.preventESC||r||W||M.isActive&&(M.onModalEvent(D.ESC_CLICK,M.id?M.id:""),w(),i(!1))}));const f=()=>{M.isActive&&i(!1)},h=()=>{M.onRemoveModal&&M.onRemoveModal(String(M.id))},R=b=>{M.isActive&&(M.removeOthers,M.onShowModal(b))},L=M=>{l(!M)},m=M=>{q(M)},g=M=>{u(M)},N=()=>{M.onModalEvent(D.CLOSE_CLICK,M.id?M.id:""),w(),M.hideModalFromProvider(M.id?M.id:""),i(!1)},X=()=>{M.isActive&&(M.onModalEvent(D.OK_CLICK,M.id?M.id:""),x()&&(M.hideModalFromProvider(M.id?M.id:""),i(!1)))},y=()=>{M.isActive&&(M.onModalEvent(D.CANCEL_CLICK,M.id?M.id:""),w()&&(M.hideModalFromProvider(M.id?M.id:""),i(!1)))},x=()=>{if(!b.current)return!M.onOk||M.onOk();b.current.onClickOK&&b.current.onClickOK()},w=()=>{if(!b.current)return!M.onCancel||M.onCancel();b.current.onClickCancel&&b.current.onClickCancel()},T=()=>{M.onModalEvent(D.ENTERING,M.id?M.id:"")},_=()=>{M.onModalEvent(D.ENTERED,M.id?M.id:""),M.onShow&&M.onShow()},k=()=>{M.onModalEvent(D.EXITING,M.id?M.id:"")},S=()=>{M.onModalEvent(D.EXITED,M.id?M.id:""),M.onExit&&M.onExit(),e(!1)},E=M=>{if(M.content&&Object(M.content).props&&Object.keys(Object(M.content).props).length>0)return{};let z={hideCurrentModal:f,removeCurrentModal:h,showAnotherModal:R,changeButtonsState:L,changeLoadingState:m,changeInnerLoadingState:g,modalProps:{...M.customProps},context:{...M.context}};return M.checkAutoRef&&M.content.type.hasOwnProperty("$$typeof")&&(console.log("(props.content as React.ReactElement).type['$$typeof']",M.content.type.$$typeof),"Symbol(react.forward_ref)"===M.content.type.$$typeof.toString()&&(z.ref=b)),M.useRef&&(z.ref=b),z},C=()=>{if(M.content)return p("div",{className:"itd-modal-middle-content-body",children:d(M.content,E(M))})},P=()=>{if(M.addContentBefore)return p(YM,{className:"itd-modal-middle-content-before",$padding:M.beforeContentPadding,children:M.addContentBefore})},F=()=>{if(M.addContentAfter)return p(GM,{className:"itd-modal-middle-content-after",$padding:M.afterContentPadding,children:M.addContentAfter})},I=()=>{let b=M.width;return"number"==typeof b&&(b=M.width+"px"),b};return n((()=>{if(a){const M=window.innerWidth-document.documentElement.clientWidth;document.body.style.overflow="hidden",document.body.style.paddingRight=`${M}px`}else document.body.style.overflow="",document.body.style.paddingRight="";return()=>{document.body.style.overflow="",document.body.style.paddingRight=""}}),[a]),n((()=>{M.modalEvent.event===D.EXITING&&M.modalEvent.id===M.id&&i(!1)}),[M.modalEvent,M.id]),n((()=>{!M.isVisible&&a&&i(!1)}),[M.isVisible,a,M.id]),c?p("div",{className:"itd-modal-container".concat(" "+M.className),children:p(B,{in:a,timeout:600,classNames:"modal",nodeRef:o,onEntering:T,onEntered:_,onExiting:k,onExited:S,unmountOnExit:!0,children:p(HM,{className:"itd-modal-content-wrapper",ref:o,children:p(UM,{className:"itd-modal-inner-wrapper",$padding:M.outerPadding,children:p(jM,{className:"itd-modal-body",$width:I(),children:p(VM,{className:"itd-modal-content",ref:z,children:O(mM,{updating:W,children:[!1!==M.showCloseButton&&p(ZM,{className:"itd-modal-close-button",children:p($M,{size:"x-small",variant:"ghost",onClick:N,icon:p(v,{src:"data:image/svg+xml,%3csvg width = '10px' height = '10px' viewBox = '0 0 329.26933 329' xmlns = 'http://www.w3.org/2000/svg'%3e %3cpath d='m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0'%3e%3c/path%3e%3c/svg%3e"}),disabled:r||W||!M.isActive})}),M.title?p(JM,{className:"itd-modal-header",children:"string"==typeof M.title?p(ec,{children:M.title}):M.title}):null,P(),p(KM,{className:"itd-modal-middle-content",$padding:M.contentPadding,children:C()}),F(),M.showOkButton||M.showCancelButton?O(QM,{className:"itd-modal-footer",children:[M.showCancelButton&&p($M,{variant:"solid",size:"small",type:"button",onClick:y,disabled:r||W||!M.isActive||s,...M.cancelButtonProps,children:M.cancelButtonText}),M.showOkButton&&p($M,{variant:"default",size:"small",type:"button",onClick:X,loading:r,disabled:W||!M.isActive||s,...M.okButtonProps,children:M.okButtonText})]}):null]})})})})})})}):null},bb=k.div`
   
   width: 100vw;
   height: 100vh;
@@ -4552,7 +4552,7 @@ function(b,z){M.exports?M.exports=z(SO()):z(b.moment)}(FO,(function(M){void 0===
   50% { transform: scale(1.1) }
   75% { transform: scale(0.9) }
   100% { transform: scale(1) }
-`;function Ld(M){const{children:b=null}=M,[z,o]=t(!1);n((()=>(document.addEventListener("scroll",O),()=>{document.removeEventListener("scroll",O)})),[]);const O=()=>{o(document.body.scrollTop>window.innerHeight)};return p(fd,{className:"itd-back-to-top",children:p(hd,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},$show:z,children:b||p(ac,{width:30,height:30})})})}const md={"gray-1":{background:"#F9F9F9",text:"#0714374D"},"gray-2":{background:"#F9F9F9",text:"#585455"},"gray-3":{background:"#F5F5F5",text:"#071437"},green:{background:"#DFFFEA",text:"#17C653"},yellow:{background:"#FFF8DD",text:"#F6C000"},red:{background:"#FFEEF3",text:"#F8285A"},brown:{background:"#FFF3F1",text:"#CB6F5B"},lavender:{background:"#FCF3FF",text:"#AB60C0"},blue:{background:"#F1F4FF",text:"#3256D9"},pink:{background:"#FFEEF6",text:"#E25698"},violet:{background:"#F5F1FF",text:"#7239EA"},"filled-red":{background:"#F8285A",text:"#F7EFF1"},"filled-yellow":{background:"#F6C000",text:"#FBFAF4"},"filled-pink":{background:"#CC79E3",text:"#F7F3F9"},"filled-blue":{background:"#1B84FF",text:"#EDF0F4"},"filled-green":{background:"#17C653",text:"#F5FAF6"},"filled-purple":{background:"#C417C6",text:"#F6F0F6"},"filled-black":{background:"#071437",text:"#F1F3F7"}},gd=k.div`
+`;function Ld(M){const{children:b=null}=M,[z,o]=t(!1);n((()=>(document.addEventListener("scroll",O),()=>{document.removeEventListener("scroll",O)})),[]);const O=()=>{o(document.body.scrollTop>window.innerHeight)};return p(fd,{className:"itd-back-to-top",children:p(hd,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},$show:z,children:b||p(ac,{width:30,height:30})})})}const md={"gray-1":{background:"#F9F9F9",text:"#0714374D"},"gray-2":{background:"#F9F9F9",text:"#585455"},"gray-3":{background:"#F5F5F5",text:"#071437"},black:{background:"#071437",text:"#FFFFFF"},green:{background:"#DFFFEA",text:"#17C653"},purple:{background:"#F5F1FF",text:"#7239EA"},yellow:{background:"#FFF8DD",text:"#F6C000"},red:{background:"#FFEEF3",text:"#F8285A"},brown:{background:"#FFF3F1",text:"#CB6F5B"},lavender:{background:"#FCF3FF",text:"#AB60C0"},blue:{background:"#F1F4FF",text:"#3256D9"},pink:{background:"#FFEEF6",text:"#E25698"},violet:{background:"#F5F1FF",text:"#7239EA"},"filled-brown":{background:"#F5651A",text:"#FFF9F6"},"filled-violet":{background:"#7239EA",text:"#F5F1FF"},"filled-red":{background:"#F8285A",text:"#F7EFF1"},"filled-yellow":{background:"#F6C000",text:"#FBFAF4"},"filled-pink":{background:"#CC79E3",text:"#F7F3F9"},"filled-blue":{background:"#1B84FF",text:"#EDF0F4"},"filled-green":{background:"#17C653",text:"#F5FAF6"},"filled-purple":{background:"#C417C6",text:"#F6F0F6"},"filled-black":{background:"#071437",text:"#F1F3F7"},"filled-lavender":{background:"#AB60C0",text:"#FCF3FF"},"filled-gray-1":{background:"#585455",text:"#F9F9F9"},"filled-gray-2":{background:"#585455",text:"#F9F9F9"},"filled-gray-3":{background:"#071437",text:"#F5F5F5"},orange:{background:"#FFF4E6",text:"#FF8C00"},"filled-orange":{background:"#FF8C00",text:"#FFF4E6"},teal:{background:"#E6FFFA",text:"#2DD4BF"},"filled-teal":{background:"#2DD4BF",text:"#E6FFFA"},indigo:{background:"#EEF2FF",text:"#6366F1"},"filled-indigo":{background:"#6366F1",text:"#EEF2FF"},lime:{background:"#F7FEE7",text:"#65A30D"},"filled-lime":{background:"#65A30D",text:"#F7FEE7"}},gd=k.div`
 
   display: flex;
   align-items: center;

package/dist/stories/Status.stories.d.ts

@@ -24,6 +24,14 @@ export declare const Lavender: Story;
 export declare const Pink: Story;
 export declare const Violet: Story;
 export declare const Blue: Story;
+export declare const Black: Story;
+export declare const Purple: Story;
+export declare const Orange: Story;
+export declare const Teal: Story;
+export declare const Indigo: Story;
+export declare const Lime: Story;
+export declare const FilledBrown: Story;
+export declare const FilledViolet: Story;
 export declare const FilledRed: Story;
 export declare const FilledYellow: Story;
 export declare const FilledPink: Story;
@@ -31,3 +39,11 @@ export declare const FilledBlue: Story;
 export declare const FilledGreen: Story;
 export declare const FilledPurple: Story;
 export declare const FilledBlack: Story;
+export declare const FilledLavender: Story;
+export declare const FilledGray1: Story;
+export declare const FilledGray2: Story;
+export declare const FilledGray3: Story;
+export declare const FilledOrange: Story;
+export declare const FilledTeal: Story;
+export declare const FilledIndigo: Story;
+export declare const FilledLime: Story;

package/dist/types/ModalProps.d.ts

@@ -85,6 +85,18 @@ export type ModalProps = {
      * @returns
      */
     onCancel?: (() => boolean | null) | null;
+    /**
+     * Called when the modal is shown. If this
+     * function is defined, a ModalEvent is triggered.
+     * @returns
+     */
+    onShow?: (() => void) | null;
+    /**
+     * Called when the modal is closed. If this
+     * function is defined, a ModalEvent is triggered.
+     * @returns
+     */
+    onExit?: (() => void) | null;
     /**
      * ModalManager can find its own ref, but some libraries
      * (@loadable, React.lazy, etc.) may have their own ref values,

package/dist/types/StatusProps.d.ts

@@ -8,4 +8,4 @@ export type StatusProps = {
     children?: ChildrenProps;
     className?: string;
 };
-export type StatusVariant = "gray-1" | "gray-2" | "gray-3" | "green" | "yellow" | "red" | "brown" | "lavender" | "pink" | "violet" | "blue" | "filled-red" | "filled-yellow" | "filled-pink" | "filled-blue" | "filled-green" | "filled-purple" | "filled-black";
+export type StatusVariant = "gray-1" | "gray-2" | "gray-3" | "green" | "yellow" | "red" | "brown" | "lavender" | "pink" | "violet" | "blue" | "black" | "purple" | "orange" | "teal" | "indigo" | "lime" | "filled-brown" | "filled-violet" | "filled-red" | "filled-yellow" | "filled-pink" | "filled-blue" | "filled-green" | "filled-purple" | "filled-black" | "filled-lavender" | "filled-gray-1" | "filled-gray-2" | "filled-gray-3" | "filled-orange" | "filled-teal" | "filled-indigo" | "filled-lime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inntechcorp/it-design",
-  "version": "2.2.32",
+  "version": "2.2.34",
   "description": "All in one Design library for web applications.",
   "author": "Inn.Tech",
   "license": "ISC",