@itcase/ui 1.9.51 → 1.9.53

package/dist/components/Drawer.js

@@ -2,14 +2,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
-import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { D as Divider } from '../Divider_es_D2snK_vn.js';
-import { I as Icon, b as Title } from '../Icon_es_BYViOa6l.js';
+import { I as Icon, b as Title } from '../Icon_es_kewxGRUB.js';
 import { T as Text } from '../Text_es_DVNvU0m0.js';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { icons24 } from '@itcase/icons/default';
+import '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
-import 'lodash/castArray';
+import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
@@ -20,12 +21,12 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../hooks/useStyles/useStyles.js';
-import 'lodash/maxBy';
 import 'react-inlinesvg';
+import '../Link_es_BDAmhIzd.js';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BDAmhIzd.js';
+import '../utils/mergeAppearanceKeys.js';
+import 'lodash/castArray';
 
 const drawerAppearanceSize = {
     sizeH3: {
@@ -72,51 +73,50 @@ const drawerConfig = {
     },
 };
 function Drawer(props) {
-    const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
-    const _onClickClose = onClickClose ?? onClose;
-    const _isOpen = isOpen ?? isOpenModal;
-    const isOpenPrevRef = useRef(Boolean(_isOpen));
+    const { appearance, className, dataTestId, dataTour, type, title, desc, enableOverlay, lockBackgroundScroll = true, stickyButton, before, after, close, isOpen = false, isOpenModal, onClickClose, onClose, children, } = props;
+    const isOpenPrevRef = useRef(isOpen);
     const isFirstRenderRef = useRef(true);
     const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { direction, size, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
-    const [animationState, setAnimationState] = useState(_isOpen
+    const [animationState, setAnimationState] = useState(isOpen
         ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
         : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
     useEffect(() => {
-        const isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
-        if (isFromOpenToClose && onClose) {
-            onClose();
-        }
-        isOpenPrevRef.current = Boolean(_isOpen);
+        /* TODO: Remove error after some time */
         const isNeedShowWarning = process.env.NODE_ENV === 'development' &&
             typeof isOpenModal !== 'undefined';
         if (isNeedShowWarning) {
-            console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
+            throw new Error('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [_isOpen, onClose]);
-    useEffect(() => {
         if (isFirstRenderRef.current) {
             isFirstRenderRef.current = false;
             return;
         }
+        const isPrevStateOpen = Boolean(isOpenPrevRef.current) === true;
+        const isNewStateClose = Boolean(isOpen) === false;
+        if (isPrevStateOpen && isNewStateClose && onClose) {
+            onClose();
+        }
+        isOpenPrevRef.current = isOpen;
         setAnimationState(ANIMATION_STATE_SNAPSHOTS.DEFAULT);
         const startTransitionDelay = 16;
-        const timeoutDelay = _isOpen ? startTransitionDelay : ANIMATION_DURATION;
+        const timeoutDelay = isOpen ? startTransitionDelay : ANIMATION_DURATION;
         const timeout = setTimeout(() => {
-            setAnimationState(_isOpen
+            const newAnimationState = isOpen
                 ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
-                : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
+                : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH;
+            setAnimationState(newAnimationState);
         }, timeoutDelay);
         return () => {
             clearTimeout(timeout);
         };
-    }, [_isOpen]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
     if (!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 })] }));
+    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 })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_Xq7G5-UI.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_DjPgbwtU.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -18,10 +18,11 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Icon_es_BYViOa6l.js';
+import '../Icon_es_kewxGRUB.js';
 import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '../context/UrlAssetPrefix.js';
 import '../Link_es_BDAmhIzd.js';
 import '../Text_es_DVNvU0m0.js';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
+import '../utils/mergeAppearanceKeys.js';
 import '../Divider_es_D2snK_vn.js';