@itcase/ui 1.8.75 → 1.8.76

package/dist/cjs/components/Drawer.js

@@ -4,39 +4,45 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var ReactDrawer = require('react-modern-drawer');
+var Divider = require('../../Divider_cjs_rxMMBfLC.js');
 var Icon = require('../../Icon_cjs_BdX_3y6P.js');
 var Text = require('../../Text_cjs_B8nNXWBA.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var _default = require('@itcase/icons/default');
-require('react-inlinesvg');
-require('../hoc/urlWithAssetPrefix.js');
-require('@itcase/common');
-require('../context/UrlAssetPrefix.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/styleAttributes.js');
+require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_BqT6eVl6.js');
 require('lodash/castArray');
 
+var drawerAppearanceSize = {
+    sizeH3: {
+        titleTextSize: 'h3',
+        descTextSize: 's',
+        iconSize: 24,
+    },
+};
+
 var drawerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h3',
         descTextColor: 'surfaceTextPrimary',
-        descTextSize: 's',
-        iconSize: 24,
         closeIcon: _default.icons24.Action.Close,
         closeIconFillIcon: 'surfaceItemPrimary',
     },
@@ -59,7 +65,7 @@ var drawerAppearanceSurface = {
     },
 };
 
-var drawerAppearance = tslib_es6.__assign({}, drawerAppearanceSurface);
+var drawerAppearance = tslib_es6.__assign(tslib_es6.__assign({}, drawerAppearanceSize), drawerAppearanceSurface);
 
 var drawerConfig = {
     appearance: drawerAppearance,
@@ -81,7 +87,7 @@ function Drawer(props) {
     }, [isOpenModal, onClose]);
     return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsxRuntime.jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 exports.Drawer = Drawer;

package/dist/components/Drawer.js

@@ -2,39 +2,45 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
+import { D as Divider } from '../Divider_es_CiRU0sTz.js';
 import { I as Icon, b as Title } from '../Icon_es_Xh3eVHNS.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons24 } from '@itcase/icons/default';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '@itcase/common';
-import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_BnUIX0QT.js';
 import 'lodash/castArray';
 
+var drawerAppearanceSize = {
+    sizeH3: {
+        titleTextSize: 'h3',
+        descTextSize: 's',
+        iconSize: 24,
+    },
+};
+
 var drawerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h3',
         descTextColor: 'surfaceTextPrimary',
-        descTextSize: 's',
-        iconSize: 24,
         closeIcon: icons24.Action.Close,
         closeIconFillIcon: 'surfaceItemPrimary',
     },
@@ -57,7 +63,7 @@ var drawerAppearanceSurface = {
     },
 };
 
-var drawerAppearance = __assign({}, drawerAppearanceSurface);
+var drawerAppearance = __assign(__assign({}, drawerAppearanceSize), drawerAppearanceSurface);
 
 var drawerConfig = {
     appearance: drawerAppearance,
@@ -79,7 +85,7 @@ function Drawer(props) {
     }, [isOpenModal, onClose]);
     return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, 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 }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, 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, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/css/components/Drawer/Drawer.css

@@ -46,7 +46,9 @@
   }
   &__wrapper {
     padding: 3m;
+    display: flex;
     flex: 1;
+    flex-direction: column;
   }
   &__after {
     z-index: 10;

package/dist/types/components/Drawer/appearance/drawerSize.d.ts

@@ -0,0 +1,8 @@
+declare const drawerAppearanceSize: {
+    sizeH3: {
+        titleTextSize: string;
+        descTextSize: string;
+        iconSize: number;
+    };
+};
+export { drawerAppearanceSize };

package/dist/types/components/Drawer/appearance/drawerSurface.d.ts

@@ -3,10 +3,7 @@ declare const drawerAppearanceSurface: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
-        iconSize: number;
         closeIcon: string;
         closeIconFillIcon: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.75",
+  "version": "1.8.76",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",