@itcase/ui 1.9.57 → 1.9.59

package/dist/utils.js

@@ -1,2 +1,12 @@
-export { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
-export { setViewportProperty } from './utils/setViewportProperty.js';
+export { m as mergeAppearanceKeys, s as setViewportProperty } from './primitives_es_BNlMaZfZ.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'react-inlinesvg';

package/package.json

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

package/dist/Divider_cjs_C5Ou2Kqa.js

@@ -1,104 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-
-const dividerAppearanceAccent = {
-    accentPrimary: {
-        fill: 'accentPrimary',
-    },
-};
-
-const dividerAppearanceError = {
-    errorPrimary: {
-        fill: 'errorPrimary',
-    },
-};
-
-const dividerAppearanceExtra = {
-    extraPrimary: {
-        fill: 'extraPrimary',
-    },
-};
-
-const dividerAppearanceSize = {
-    sizeL: {
-        size: 'l',
-    },
-    sizeM: {
-        size: 'm',
-    },
-    sizeS: {
-        size: 's',
-    },
-};
-
-const dividerAppearanceSpecial = {
-    specialPrimary: {
-        fill: 'specialPrimary',
-    },
-};
-
-const dividerAppearanceSuccess = {
-    successPrimary: {
-        fill: 'successPrimary',
-    },
-};
-
-const dividerAppearanceSurface = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-    },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-    },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-    },
-};
-
-const dividerAppearanceWarning = {
-    warningPrimary: {
-        fill: 'warningPrimary',
-    },
-};
-
-const dividerAppearance = {
-    ...dividerAppearanceSize,
-    ...dividerAppearanceAccent,
-    ...dividerAppearanceError,
-    ...dividerAppearanceSpecial,
-    ...dividerAppearanceExtra,
-    ...dividerAppearanceSuccess,
-    ...dividerAppearanceSurface,
-    ...dividerAppearanceWarning,
-};
-
-const dividerConfig = {
-    appearance: dividerAppearance,
-    setAppearance: (appearanceConfig) => {
-        dividerConfig.appearance = appearanceConfig;
-    },
-};
-function Divider(props) {
-    const { appearance, className, dataTestId, dataTour, print, isActive, isDisabled, isSkeleton, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, dividerConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    const { styles: hrStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("hr", { className: clsx(className, 'divider', widthClass && `width_${widthClass}`, directionClass && `divider_direction_${directionClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `divider_size_${sizeClass}`, !isActive
-            ? fillClass && `fill_${fillClass}`
-            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
-            ? fillHoverClass && `fill_hover_${fillHoverClass}`
-            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, isDisabled && fillDisabledClass && `fill_disabled_${fillDisabledClass}`, isSkeleton && `divider_skeleton`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: hrStyles }));
-}
-
-exports.Divider = Divider;
-exports.dividerAppearance = dividerAppearance;
-exports.dividerConfig = dividerConfig;

package/dist/Divider_es_D2snK_vn.js

@@ -1,100 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-
-const dividerAppearanceAccent = {
-    accentPrimary: {
-        fill: 'accentPrimary',
-    },
-};
-
-const dividerAppearanceError = {
-    errorPrimary: {
-        fill: 'errorPrimary',
-    },
-};
-
-const dividerAppearanceExtra = {
-    extraPrimary: {
-        fill: 'extraPrimary',
-    },
-};
-
-const dividerAppearanceSize = {
-    sizeL: {
-        size: 'l',
-    },
-    sizeM: {
-        size: 'm',
-    },
-    sizeS: {
-        size: 's',
-    },
-};
-
-const dividerAppearanceSpecial = {
-    specialPrimary: {
-        fill: 'specialPrimary',
-    },
-};
-
-const dividerAppearanceSuccess = {
-    successPrimary: {
-        fill: 'successPrimary',
-    },
-};
-
-const dividerAppearanceSurface = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-    },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-    },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-    },
-};
-
-const dividerAppearanceWarning = {
-    warningPrimary: {
-        fill: 'warningPrimary',
-    },
-};
-
-const dividerAppearance = {
-    ...dividerAppearanceSize,
-    ...dividerAppearanceAccent,
-    ...dividerAppearanceError,
-    ...dividerAppearanceSpecial,
-    ...dividerAppearanceExtra,
-    ...dividerAppearanceSuccess,
-    ...dividerAppearanceSurface,
-    ...dividerAppearanceWarning,
-};
-
-const dividerConfig = {
-    appearance: dividerAppearance,
-    setAppearance: (appearanceConfig) => {
-        dividerConfig.appearance = appearanceConfig;
-    },
-};
-function Divider(props) {
-    const { appearance, className, dataTestId, dataTour, print, isActive, isDisabled, isSkeleton, } = props;
-    const appearanceConfig = useAppearanceConfig(appearance, dividerConfig);
-    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    const { styles: hrStyles } = useStyles(props);
-    return (jsx("hr", { className: clsx(className, 'divider', widthClass && `width_${widthClass}`, directionClass && `divider_direction_${directionClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `divider_size_${sizeClass}`, !isActive
-            ? fillClass && `fill_${fillClass}`
-            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
-            ? fillHoverClass && `fill_hover_${fillHoverClass}`
-            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, isDisabled && fillDisabledClass && `fill_disabled_${fillDisabledClass}`, isSkeleton && `divider_skeleton`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: hrStyles }));
-}
-
-export { Divider as D, dividerConfig as a, dividerAppearance as d };

package/dist/DropdownItem_cjs_k28TIoDU.js

@@ -1,230 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_DTvdhr8B.js');
-var Divider = require('./Divider_cjs_C5Ou2Kqa.js');
-var Text = require('./Text_cjs_erTy2pUN.js');
-
-const dropdownAppearanceAccent = {
-    accentPrimary: {
-        fill: 'accentPrimary',
-        fillActive: 'accentActivePrimary',
-        fillActiveHover: 'accentActiveHoverPrimary',
-        fillHover: 'accentHoverPrimary',
-        labelTextColor: 'accentTextPrimary',
-        labelTextColorActive: 'accentTextPrimary',
-        labelTextColorActiveHover: 'accentTextPrimary',
-        labelTextColorHover: 'accentTextPrimary',
-        badgeAppearance: 'surfacePrimary',
-        dividerFill: 'surfaceTertiary',
-        emptyMessageTextColor: 'accentTextPrimary',
-        iconAfterFillIcon: 'accentItemPrimary',
-        iconBeforeFillIcon: 'accentItemPrimary',
-    },
-    accentSecondary: {
-        fill: 'accentPrimary',
-        fillHover: 'accentHoverPrimary',
-        labelTextColor: 'accentTextSecondary',
-        labelTextColorHover: 'accentTextSecondary',
-    },
-};
-
-const dropdownAppearanceShape = {
-    circular: {
-        shape: 'circular',
-    },
-    rounded: {
-        shape: 'rounded',
-    },
-    roundedXL: {
-        shape: 'rounded',
-        shapeStrength: '2m',
-    },
-    roundedL: {
-        shape: 'rounded',
-        shapeStrength: '1_5m',
-    },
-    roundedM: {
-        shape: 'rounded',
-        shapeStrength: '1m',
-    },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-};
-
-const dropdownAppearanceSize = {
-    sizeL: {
-        size: 'l',
-        labelTextSize: 'm',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
-        dividerSize: 's',
-        emptyMessageTextSize: 'm',
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
-    },
-    sizeS: {
-        size: 's',
-        labelTextSize: 's',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
-        dividerSize: 's',
-        emptyMessageTextSize: 'm',
-        iconAfterFillSize: '16',
-        iconAfterSize: '16',
-        iconBeforeFillSize: '16',
-        iconBeforeSize: '16',
-    },
-    sizeXS: {
-        size: 'xs',
-        labelTextSize: 'xs',
-        badgeSize: 'xs',
-        badgeTextSize: 'xs',
-        dividerSize: 's',
-        emptyMessageTextSize: 'xs',
-        iconAfterFillSize: '12',
-        iconAfterSize: '12',
-        iconBeforeFillSize: '12',
-        iconBeforeSize: '12',
-    },
-};
-
-const dropdownAppearanceStyle = {
-    solid: {
-        borderColor: 'none',
-    },
-    outlined: {
-        fill: 'none',
-    },
-    full: {},
-    ghost: {
-        fill: 'none',
-        borderColor: 'none',
-    },
-};
-
-const dropdownAppearanceSurface = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        fillActive: 'surfaceActivePrimary',
-        fillHover: 'surfaceHoverPrimary',
-        labelTextColor: 'surfaceTextPrimary',
-        labelTextColorActive: 'surfaceTextPrimary',
-        labelTextColorActiveHover: 'surfaceTextPrimary',
-        labelTextColorHover: 'surfaceTextPrimary',
-        badgeAppearance: 'accentPrimary',
-        dividerFill: 'surfaceTertiary',
-        emptyMessageTextColor: 'surfaceTextPrimary',
-        iconAfterFillIcon: 'surfaceItemPrimary',
-        iconBeforeFillIcon: 'surfaceItemPrimary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceHoverQuaternary',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceHoverSecondary',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceHoverTertiary',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-};
-
-const dropdownAppearance = {
-    ...dropdownAppearanceSurface,
-    ...dropdownAppearanceStyle,
-    ...dropdownAppearanceShape,
-    ...dropdownAppearanceAccent,
-    ...dropdownAppearanceSize,
-};
-
-const dropdownConfig = {
-    appearance: dropdownAppearance};
-function Dropdown(props) {
-    const { appearance, className, dataTestId, dataTour, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, showDivider, before, after, isSkeleton, isOpen, setIsOpen, onClickItem, children, } = props;
-    const dropdownRef = React.useRef(null);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, dropdownConfig);
-    const [animationState, setAnimationState] = React.useState({
-        className: '',
-    });
-    const onAnimationEnd = React.useCallback(() => {
-        setAnimationState((prevState) => ({
-            className: isOpen ? prevState.className : '',
-        }));
-    }, [isOpen]);
-    React.useEffect(() => {
-        if (animationOpen && animationClose) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setAnimationState(() => ({
-                className: isOpen ? animationOpen : animationClose,
-            }));
-        }
-    }, [isOpen, animationOpen, animationClose]);
-    React.useEffect(() => {
-        function onClickWindow(event) {
-            const dropdownElement = dropdownRef.current;
-            if (dropdownElement && animationOpen) {
-                const isContainsTarget = dropdownElement.contains(event.target);
-                const hasOpenClass = dropdownElement.classList.contains(animationOpen);
-                if (!isContainsTarget && hasOpenClass) {
-                    setIsOpen(false);
-                }
-            }
-        }
-        window.addEventListener('click', onClickWindow);
-        return () => {
-            window.removeEventListener('click', onClickWindow);
-        };
-    }, [animationOpen, setIsOpen]);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { alignmentClass, fillClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
-    const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: [before, (children || dropdownList) && (jsxRuntime.jsxs("div", { className: clsx('dropdown__wrapper'), onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (jsxRuntime.jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, showDivider: showDivider, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
-}
-
-const dropdownItemAppearance = {
-    ...dropdownAppearanceSurface,
-    ...dropdownAppearanceStyle,
-    ...dropdownAppearanceShape,
-    ...dropdownAppearanceAccent,
-    ...dropdownAppearanceSize,
-};
-
-const dropdownItemConfig = {
-    appearance: dropdownItemAppearance,
-    setAppearance: (appearanceConfig) => {
-        dropdownItemConfig.appearance = appearanceConfig;
-    },
-};
-function DropdownItem(props) {
-    const { appearance, className, dataTestId, dataTour, label, desc, badgeValue, emptyMessage, showDivider, before, after, isActive, isDisabled, isSkeleton, isHover, onClick, onMouseEnter, children, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, dropdownItemConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { directionClass, justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, descTextColor, descTextColorHover, descTextGradient, descTextSize, descTextStyle, descTextWeight, descTextWrap, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerDirection, dividerFill, dividerSize, emptyMessageTextColor, emptyMessageTextColorHover, emptyMessageTextSize, emptyMessageTextStyle, emptyMessageTextWeight, emptyMessageTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    const { styles: dropdownItem } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && `dropdown__item_direction_${directionClass}`, className, !isActive
-            ? fillClass && `fill_${fillClass}`
-            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
-            ? fillHoverClass && `fill_hover_${fillHoverClass}`
-            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, sizeClass && `dropdown__item_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
-            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
-}
-
-exports.Dropdown = Dropdown;
-exports.DropdownItem = DropdownItem;
-exports.dropdownItemAppearance = dropdownItemAppearance;
-exports.dropdownItemConfig = dropdownItemConfig;