@itcase/ui-web 1.9.99 → 1.9.100

package/dist/cjs/components/Drawer.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),s=require("react-modern-drawer"),a=require("@itcase/ui-core/hooks"),c=require("../../primitives_cjs_Cn5nSqZM.js"),t=require("../../default_cjs_BMbs2it-.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const o={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:t.icons24.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},l={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},n={appearance:o,setAppearance:e=>{n.appearance=e}};exports.Drawer=function(t){const{appearance:o,className:d,dataTestId:u,dataTour:I,type:p,title:_,desc:x,enableOverlay:T,lockBackgroundScroll:m=!0,stickyButton:f,before:S,after:h,close:v,isOpen:N=!1,onClickClose:w,onClose:z,children:j}=t,C=r.useRef(N),y=r.useRef(!0),g=a.useAppearanceConfig(o,n),F=a.useDevicePropsGenerator(t,g),{direction:E,size:q,titleTextColor:O,titleTextSize:k,titleTextWeight:D,descTextColor:H,descTextSize:A,divider:P,dividerSize:b,zeroPadding:B,closeIcon:R,closeIconFill:M,closeIconFillIcon:X,closeIconFillSize:$,closeIconShape:L,closeIconSize:U,closeIconSrc:W}=F,[G,J]=r.useState(N?l.ENTER_FINISH:l.EXIT_FINISH);return r.useEffect(()=>{if(y.current)return void(y.current=!1);const e=!0===Boolean(C.current),r=!1===Boolean(N);C.current=N,J(l.DEFAULT);const i=setTimeout(()=>{J(N?l.ENTER_FINISH:l.EXIT_FINISH),e&&r&&z&&z()},N?16:300);return()=>{clearTimeout(i)}},[N]),G.isInDOM?e.jsxs(s,{className:i("drawer",p&&`drawer_type_${p}`,d,I&&`dataTour-${I}`,f&&"drawer_sticky-button",B&&"drawer_reset-padding"),direction:E||"right",size:q||600,customIdSuffix:u?`_${u}`:void 0,"data-testid":u,"data-tour":I,duration:300,enableOverlay:T,lockBackgroundScroll:m,overlayClassName:"drawer__overlay",open:G.isOpen,onClose:w,children:[S&&e.jsx("div",{className:"drawer__before",children:S}),!v&&(R||W)&&e.jsx("div",{className:"drawer__close",children:e.jsx(c.Icon,{className:"cursor_type_pointer",fill:M,fillSize:$,iconFill:X,iconSize:U,imageSrc:W,shape:L,SvgImage:R,onClick:w})}),(_||x)&&e.jsxs("div",{className:"drawer__header",children:[e.jsx(c.Title,{className:"drawer__header-title",size:k,textColor:O,textWeight:D,children:_}),e.jsx(c.Text,{className:"drawer__header-desc",size:A,textColor:H,children:x})]}),P&&e.jsx(c.Divider,{width:"fill",size:b,fill:"surfaceTertiary"}),j&&e.jsx("div",{className:"drawer__wrapper",children:j}),h&&e.jsx("div",{className:"drawer__after",children:h})]}):null},exports.drawerAppearance=o,exports.drawerConfig=n;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),s=require("react-modern-drawer"),a=require("@itcase/ui-core/hooks"),c=require("../../primitives_cjs_Cn5nSqZM.js"),t=require("../../default_cjs_BMbs2it-.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const o={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:t.icons24.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},l={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},n={appearance:o,setAppearance:e=>{n.appearance=e}};exports.Drawer=function(t){const{appearance:o,className:d,dataTestId:u,dataTour:p,type:I,title:_,desc:x,enableOverlay:T,lockBackgroundScroll:m=!0,stickyButton:f,before:S,after:h,close:v,isKeepMounted:N=!1,isOpen:w=!1,onClickClose:z,onClose:j,children:C}=t,y=r.useRef(w),g=r.useRef(!0),F=a.useAppearanceConfig(o,n),E=a.useDevicePropsGenerator(t,F),{direction:q,size:O,titleTextColor:k,titleTextSize:D,titleTextWeight:H,descTextColor:A,descTextSize:P,divider:b,dividerSize:B,zeroPadding:M,closeIcon:R,closeIconFill:X,closeIconFillIcon:$,closeIconFillSize:L,closeIconShape:U,closeIconSize:W,closeIconSrc:G}=E,[K,J]=r.useState(w?l.ENTER_FINISH:l.EXIT_FINISH);return r.useEffect(()=>{if(g.current)return void(g.current=!1);const e=!0===Boolean(y.current),r=!1===Boolean(w);y.current=w,J(l.DEFAULT);const i=setTimeout(()=>{J(w?l.ENTER_FINISH:l.EXIT_FINISH),e&&r&&j&&j()},w?16:300);return()=>{clearTimeout(i)}},[w]),N||K.isInDOM?e.jsxs(s,{className:i("drawer",I&&`drawer_type_${I}`,d,p&&`dataTour-${p}`,f&&"drawer_sticky-button",M&&"drawer_reset-padding"),direction:q||"right",size:O||600,customIdSuffix:u?`_${u}`:void 0,"data-testid":u,"data-tour":p,duration:300,enableOverlay:T,lockBackgroundScroll:m,overlayClassName:"drawer__overlay",open:K.isOpen,onClose:z,children:[S&&e.jsx("div",{className:"drawer__before",children:S}),!v&&(R||G)&&e.jsx("div",{className:"drawer__close",children:e.jsx(c.Icon,{className:"cursor_type_pointer",fill:X,fillSize:L,iconFill:$,iconSize:W,imageSrc:G,shape:U,SvgImage:R,onClick:z})}),(_||x)&&e.jsxs("div",{className:"drawer__header",children:[e.jsx(c.Title,{className:"drawer__header-title",size:D,textColor:k,textWeight:H,children:_}),e.jsx(c.Text,{className:"drawer__header-desc",size:P,textColor:A,children:x})]}),b&&e.jsx(c.Divider,{width:"fill",size:B,fill:"surfaceTertiary"}),C&&e.jsx("div",{className:"drawer__wrapper",children:C}),h&&e.jsx("div",{className:"drawer__after",children:h})]}):null},exports.drawerAppearance=o,exports.drawerConfig=n;

package/dist/components/Drawer.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as i,useState as o,useEffect as t}from"react";import a from"clsx";import c from"react-modern-drawer";import{useAppearanceConfig as s,useDevicePropsGenerator as l}from"@itcase/ui-core/hooks";import{I as n,T as d,a as m,D as p}from"../primitives_es_CkHPBwNl.js";import{a as I}from"../default_es_C4dY1Dqw.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const u={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:I.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},_={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},T={appearance:u,setAppearance:e=>{T.appearance=e}};function f(I){const{appearance:u,className:f,dataTestId:S,dataTour:h,type:N,title:x,desc:v,enableOverlay:z,lockBackgroundScroll:w=!0,stickyButton:y,before:C,after:F,close:g,isOpen:E=!1,onClickClose:O,onClose:k,children:D}=I,H=i(E),b=i(!0),B=s(u,T),P=l(I,B),{direction:A,size:M,titleTextColor:j,titleTextSize:R,titleTextWeight:X,descTextColor:$,descTextSize:L,divider:U,dividerSize:W,zeroPadding:q,closeIcon:G,closeIconFill:J,closeIconFillIcon:K,closeIconFillSize:Q,closeIconShape:V,closeIconSize:Y,closeIconSrc:Z}=P,[ee,re]=o(E?_.ENTER_FINISH:_.EXIT_FINISH);return t(()=>{if(b.current)return void(b.current=!1);const e=!0===Boolean(H.current),r=!1===Boolean(E);H.current=E,re(_.DEFAULT);const i=setTimeout(()=>{re(E?_.ENTER_FINISH:_.EXIT_FINISH),e&&r&&k&&k()},E?16:300);return()=>{clearTimeout(i)}},[E]),ee.isInDOM?e(c,{className:a("drawer",N&&`drawer_type_${N}`,f,h&&`dataTour-${h}`,y&&"drawer_sticky-button",q&&"drawer_reset-padding"),direction:A||"right",size:M||600,customIdSuffix:S?`_${S}`:void 0,"data-testid":S,"data-tour":h,duration:300,enableOverlay:z,lockBackgroundScroll:w,overlayClassName:"drawer__overlay",open:ee.isOpen,onClose:O,children:[C&&r("div",{className:"drawer__before",children:C}),!g&&(G||Z)&&r("div",{className:"drawer__close",children:r(n,{className:"cursor_type_pointer",fill:J,fillSize:Q,iconFill:K,iconSize:Y,imageSrc:Z,shape:V,SvgImage:G,onClick:O})}),(x||v)&&e("div",{className:"drawer__header",children:[r(d,{className:"drawer__header-title",size:R,textColor:j,textWeight:X,children:x}),r(m,{className:"drawer__header-desc",size:L,textColor:$,children:v})]}),U&&r(p,{width:"fill",size:W,fill:"surfaceTertiary"}),D&&r("div",{className:"drawer__wrapper",children:D}),F&&r("div",{className:"drawer__after",children:F})]}):null}export{f as Drawer,u as drawerAppearance,T as drawerConfig};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as i,useState as o,useEffect as t}from"react";import a from"clsx";import c from"react-modern-drawer";import{useAppearanceConfig as s,useDevicePropsGenerator as l}from"@itcase/ui-core/hooks";import{I as n,T as d,a as m,D as p}from"../primitives_es_CkHPBwNl.js";import{a as I}from"../default_es_C4dY1Dqw.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const u={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:I.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},_={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},T={appearance:u,setAppearance:e=>{T.appearance=e}};function f(I){const{appearance:u,className:f,dataTestId:S,dataTour:h,type:N,title:x,desc:v,enableOverlay:z,lockBackgroundScroll:w=!0,stickyButton:y,before:C,after:F,close:g,isKeepMounted:E=!1,isOpen:O=!1,onClickClose:k,onClose:D,children:H}=I,b=i(O),B=i(!0),M=s(u,T),P=l(I,M),{direction:A,size:j,titleTextColor:R,titleTextSize:X,titleTextWeight:$,descTextColor:L,descTextSize:U,divider:W,dividerSize:K,zeroPadding:q,closeIcon:G,closeIconFill:J,closeIconFillIcon:Q,closeIconFillSize:V,closeIconShape:Y,closeIconSize:Z,closeIconSrc:ee}=P,[re,ie]=o(O?_.ENTER_FINISH:_.EXIT_FINISH);return t(()=>{if(B.current)return void(B.current=!1);const e=!0===Boolean(b.current),r=!1===Boolean(O);b.current=O,ie(_.DEFAULT);const i=setTimeout(()=>{ie(O?_.ENTER_FINISH:_.EXIT_FINISH),e&&r&&D&&D()},O?16:300);return()=>{clearTimeout(i)}},[O]),E||re.isInDOM?e(c,{className:a("drawer",N&&`drawer_type_${N}`,f,h&&`dataTour-${h}`,y&&"drawer_sticky-button",q&&"drawer_reset-padding"),direction:A||"right",size:j||600,customIdSuffix:S?`_${S}`:void 0,"data-testid":S,"data-tour":h,duration:300,enableOverlay:z,lockBackgroundScroll:w,overlayClassName:"drawer__overlay",open:re.isOpen,onClose:k,children:[C&&r("div",{className:"drawer__before",children:C}),!g&&(G||ee)&&r("div",{className:"drawer__close",children:r(n,{className:"cursor_type_pointer",fill:J,fillSize:V,iconFill:Q,iconSize:Z,imageSrc:ee,shape:Y,SvgImage:G,onClick:k})}),(x||v)&&e("div",{className:"drawer__header",children:[r(d,{className:"drawer__header-title",size:X,textColor:R,textWeight:$,children:x}),r(m,{className:"drawer__header-desc",size:U,textColor:L,children:v})]}),W&&r(p,{width:"fill",size:K,fill:"surfaceTertiary"}),H&&r("div",{className:"drawer__wrapper",children:H}),F&&r("div",{className:"drawer__after",children:F})]}):null}export{f as Drawer,u as drawerAppearance,T as drawerConfig};

package/dist/types/components/Drawer/Drawer.interface.d.ts

@@ -36,6 +36,7 @@ type DrawerProps = DrawerAppearanceProps & StyleAttributes & {
     dataTour?: string;
     desc?: string;
     enableOverlay?: boolean;
+    isKeepMounted?: boolean;
     isOpen?: boolean;
     isOpenModal?: () => void;
     lockBackgroundScroll?: boolean;

package/dist/types/components/Drawer/Drawer.js

@@ -16,7 +16,7 @@ const drawerConfig = {
     },
 };
 function Drawer(props) {
-    const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen = false, onClickClose, onClose, children, } = props;
+    const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isKeepMounted = false, isOpen = false, onClickClose, onClose, children, } = props;
     const isOpenPrevRef = useRef(isOpen);
     const isFirstRenderRef = useRef(true);
     const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
@@ -50,7 +50,7 @@ function Drawer(props) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
-    if (!animationState.isInDOM) {
+    if (!isKeepMounted && !animationState.isInDOM) {
         return null;
     }
     return (_jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, "data-testid": dataTestId, "data-tour": dataTour, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose: onClickClose, children: [before && _jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (_jsx("div", { className: "drawer__close", children: _jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (_jsxs("div", { className: "drawer__header", children: [_jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), _jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (_jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && _jsx("div", { className: "drawer__wrapper", children: children }), after && _jsx("div", { className: "drawer__after", children: after })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.9.99",
+  "version": "1.9.100",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -114,5 +114,5 @@
     "storybook": "^10.3.6",
     "typescript": "^6.0.3"
   },
-  "gitHead": "19f689e166992577024c601b926431e3d0f76a71"
+  "gitHead": "6a815c080134f82f5e150afd57a3c807d2cae9f6"
 }