@itcase/ui-web 1.9.89 → 1.9.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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_ATnAJofs.js"),t=require("../../default_cjs_lUT82fjL.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:v,close:h,isOpen:w=!1,isOpenModal:N,onClickClose:z,onClose:j,children:C}=t,E=r.useRef(w),O=r.useRef(!0),g=a.useAppearanceConfig(o,n),y=a.useDevicePropsGenerator(t,g),{direction:F,size:q,titleTextColor:D,titleTextSize:k,titleTextWeight:H,descTextColor:A,descTextSize:M,divider:P,dividerSize:b,zeroPadding:B,closeIcon:R,closeIconFill:X,closeIconFillIcon:$,closeIconFillSize:L,closeIconShape:U,closeIconSize:W,closeIconSrc:G}=y,[V,J]=r.useState(w?l.ENTER_FINISH:l.EXIT_FINISH);return r.useEffect(()=>{if("development"===process.env.NODE_ENV&&void 0!==N)throw new Error('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');if(O.current)return void(O.current=!1);const e=!0===Boolean(E.current),r=!1===Boolean(w);e&&r&&j&&j(),E.current=w,J(l.DEFAULT);const i=setTimeout(()=>{J(w?l.ENTER_FINISH:l.EXIT_FINISH)},w?16:300);return()=>{clearTimeout(i)}},[w]),V.isInDOM?e.jsxs(s,{className:i("drawer",I&&`drawer_type_${I}`,d,p&&`dataTour-${p}`,f&&"drawer_sticky-button",B&&"drawer_reset-padding"),direction:F||"right",size:q||600,customIdSuffix:u?`_${u}`:void 0,"data-testid":u,"data-tour":p,duration:300,enableOverlay:T,lockBackgroundScroll:m,overlayClassName:"drawer__overlay",open:V.isOpen,onClose:z,children:[S&&e.jsx("div",{className:"drawer__before",children:S}),!h&&(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:k,textColor:D,textWeight:H,children:_}),e.jsx(c.Text,{className:"drawer__header-desc",size:M,textColor:A,children:x})]}),P&&e.jsx(c.Divider,{width:"fill",size:b,fill:"surfaceTertiary"}),C&&e.jsx("div",{className:"drawer__wrapper",children:C}),v&&e.jsx("div",{className:"drawer__after",children:v})]}):null},exports.drawerAppearance=o,exports.drawerConfig=n;
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_ATnAJofs.js"),t=require("../../default_cjs_lUT82fjL.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;
@@ -1 +1 @@
1
- import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as i,useState as o,useEffect as a}from"react";import t from"clsx";import s from"react-modern-drawer";import{useAppearanceConfig as c,useDevicePropsGenerator as l}from"@itcase/ui-core/hooks";import{I as n,T as d,a as m,D as p}from"../primitives_es_BRduTiVl.js";import{i as u}from"../default_es_l85QutMi.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const I={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:u.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},_={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},f={appearance:I,setAppearance:e=>{f.appearance=e}};function T(u){const{appearance:I,className:T,dataTestId:S,dataTour:h,type:N,title:v,desc:w,enableOverlay:x,lockBackgroundScroll:z=!0,stickyButton:O,before:y,after:E,close:C,isOpen:F=!1,isOpenModal:g,onClickClose:k,onClose:D,children:H}=u,M=i(F),b=i(!0),B=c(I,f),P=l(u,B),{direction:A,size:j,titleTextColor:R,titleTextSize:X,titleTextWeight:$,descTextColor:L,descTextSize:U,divider:W,dividerSize:V,zeroPadding:q,closeIcon:G,closeIconFill:J,closeIconFillIcon:K,closeIconFillSize:Q,closeIconShape:Y,closeIconSize:Z,closeIconSrc:ee}=P,[re,ie]=o(F?_.ENTER_FINISH:_.EXIT_FINISH);return a(()=>{if("development"===process.env.NODE_ENV&&void 0!==g)throw new Error('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');if(b.current)return void(b.current=!1);const e=!0===Boolean(M.current),r=!1===Boolean(F);e&&r&&D&&D(),M.current=F,ie(_.DEFAULT);const i=setTimeout(()=>{ie(F?_.ENTER_FINISH:_.EXIT_FINISH)},F?16:300);return()=>{clearTimeout(i)}},[F]),re.isInDOM?e(s,{className:t("drawer",N&&`drawer_type_${N}`,T,h&&`dataTour-${h}`,O&&"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:x,lockBackgroundScroll:z,overlayClassName:"drawer__overlay",open:re.isOpen,onClose:k,children:[y&&r("div",{className:"drawer__before",children:y}),!C&&(G||ee)&&r("div",{className:"drawer__close",children:r(n,{className:"cursor_type_pointer",fill:J,fillSize:Q,iconFill:K,iconSize:Z,imageSrc:ee,shape:Y,SvgImage:G,onClick:k})}),(v||w)&&e("div",{className:"drawer__header",children:[r(d,{className:"drawer__header-title",size:X,textColor:R,textWeight:$,children:v}),r(m,{className:"drawer__header-desc",size:U,textColor:L,children:w})]}),W&&r(p,{width:"fill",size:V,fill:"surfaceTertiary"}),H&&r("div",{className:"drawer__wrapper",children:H}),E&&r("div",{className:"drawer__after",children:E})]}):null}export{T as Drawer,I as drawerAppearance,f as drawerConfig};
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_BRduTiVl.js";import{i as I}from"../default_es_l85QutMi.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};
@@ -16,7 +16,7 @@ const drawerConfig = {
16
16
  },
17
17
  };
18
18
  function Drawer(props) {
19
- const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen = false, isOpenModal, onClickClose, onClose, children, } = props;
19
+ const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen = false, onClickClose, onClose, children, } = props;
20
20
  const isOpenPrevRef = useRef(isOpen);
21
21
  const isFirstRenderRef = useRef(true);
22
22
  const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
@@ -26,21 +26,12 @@ function Drawer(props) {
26
26
  ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
27
27
  : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
28
28
  useEffect(() => {
29
- /* TODO: Remove error after some time */
30
- const isNeedShowWarning = process.env.NODE_ENV === 'development' &&
31
- typeof isOpenModal !== 'undefined';
32
- if (isNeedShowWarning) {
33
- throw new Error('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
34
- }
35
29
  if (isFirstRenderRef.current) {
36
30
  isFirstRenderRef.current = false;
37
31
  return;
38
32
  }
39
33
  const isPrevStateOpen = Boolean(isOpenPrevRef.current) === true;
40
34
  const isNewStateClose = Boolean(isOpen) === false;
41
- if (isPrevStateOpen && isNewStateClose && onClose) {
42
- onClose();
43
- }
44
35
  isOpenPrevRef.current = isOpen;
45
36
  setAnimationState(ANIMATION_STATE_SNAPSHOTS.DEFAULT);
46
37
  const startTransitionDelay = 16;
@@ -50,6 +41,9 @@ function Drawer(props) {
50
41
  ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
51
42
  : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH;
52
43
  setAnimationState(newAnimationState);
44
+ if (isPrevStateOpen && isNewStateClose && onClose) {
45
+ onClose();
46
+ }
53
47
  }, timeoutDelay);
54
48
  return () => {
55
49
  clearTimeout(timeout);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui-web",
3
- "version": "1.9.89",
3
+ "version": "1.9.90",
4
4
  "description": "UI components",
5
5
  "keywords": "",
6
6
  "license": "MIT",
@@ -50,7 +50,7 @@
50
50
  "@itcase/tokens-am": "^1.1.51",
51
51
  "@itcase/tokens-baikal": "^1.1.41",
52
52
  "@itcase/tokens-palette": "^1.1.41",
53
- "@itcase/ui-core": "^1.9.89",
53
+ "@itcase/ui-core": "^1.9.90",
54
54
  "@rc-component/tooltip": "^1.4.0",
55
55
  "clsx": "^2.1.1",
56
56
  "date-fns": "^4.1.0",
@@ -111,5 +111,5 @@
111
111
  "storybook": "^10.3.0",
112
112
  "typescript": "^5.9.3"
113
113
  },
114
- "gitHead": "339712bb97d8f6589d2f42c5d128daec5c8d6f68"
114
+ "gitHead": "3313dd4c587e0281db38981055b988a54559b2d6"
115
115
  }