@itcase/ui 1.8.122 → 1.8.124

package/dist/Divider_cjs_DrmV2ezS.js

@@ -0,0 +1,105 @@
+'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 dividerAppearancePrimary = {
+    primaryPrimary: {
+        fill: 'primaryPrimary',
+    },
+};
+
+const dividerAppearanceSecondary = {
+    secondaryPrimary: {
+        fill: 'secondaryPrimary',
+    },
+};
+
+const dividerAppearanceSize = {
+    sizeL: {
+        size: 'l',
+    },
+    sizeM: {
+        size: 'm',
+    },
+    sizeS: {
+        size: 's',
+    },
+};
+
+const dividerAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+    },
+};
+
+const dividerAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+    },
+};
+
+const dividerAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+    },
+};
+
+const dividerAppearance = {
+    ...dividerAppearanceSize,
+    ...dividerAppearanceAccent,
+    ...dividerAppearanceError,
+    ...dividerAppearancePrimary,
+    ...dividerAppearanceSecondary,
+    ...dividerAppearanceSuccess,
+    ...dividerAppearanceSurface,
+    ...dividerAppearanceWarning,
+};
+
+const dividerConfig = {
+    appearance: dividerAppearance,
+    setAppearance: (appearanceConfig) => {
+        dividerConfig.appearance = appearanceConfig;
+    },
+};
+function Divider(props) {
+    const { className, appearance, isDisabled, isActive, 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;
+    // @ts-expect-error
+    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`), style: hrStyles }));
+}
+
+exports.Divider = Divider;
+exports.dividerAppearance = dividerAppearance;
+exports.dividerConfig = dividerConfig;

package/dist/Divider_es_BiYozVBS.js

@@ -0,0 +1,101 @@
+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 dividerAppearancePrimary = {
+    primaryPrimary: {
+        fill: 'primaryPrimary',
+    },
+};
+
+const dividerAppearanceSecondary = {
+    secondaryPrimary: {
+        fill: 'secondaryPrimary',
+    },
+};
+
+const dividerAppearanceSize = {
+    sizeL: {
+        size: 'l',
+    },
+    sizeM: {
+        size: 'm',
+    },
+    sizeS: {
+        size: 's',
+    },
+};
+
+const dividerAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+    },
+};
+
+const dividerAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+    },
+};
+
+const dividerAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+    },
+};
+
+const dividerAppearance = {
+    ...dividerAppearanceSize,
+    ...dividerAppearanceAccent,
+    ...dividerAppearanceError,
+    ...dividerAppearancePrimary,
+    ...dividerAppearanceSecondary,
+    ...dividerAppearanceSuccess,
+    ...dividerAppearanceSurface,
+    ...dividerAppearanceWarning,
+};
+
+const dividerConfig = {
+    appearance: dividerAppearance,
+    setAppearance: (appearanceConfig) => {
+        dividerConfig.appearance = appearanceConfig;
+    },
+};
+function Divider(props) {
+    const { className, appearance, isDisabled, isActive, isSkeleton } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, dividerConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    // @ts-expect-error
+    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`), style: hrStyles }));
+}
+
+export { Divider as D, dividerAppearance as a, dividerConfig as d };

package/dist/DropdownItem_cjs_rKLdFxSj.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var Icon = require('./Icon_cjs_DpFxIFv5.js');
+var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
+var Divider = require('./Divider_cjs_DrmV2ezS.js');
+var Text = require('./Text_cjs_BDTjOTVB.js');
+
+function Dropdown(props) {
+    const { className, appearance, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, before, after, isOpen, isSkeleton, setIsOpen, onClickItem, children, } = props;
+    const dropdownRef = React.useRef(null);
+    // const [isOpen, setIsOpen] = useState(false)
+    const [animationState, setAnimationState] = React.useState({
+        className: '',
+    });
+    const onAnimationEnd = React.useCallback(() => {
+        // When component is change his visibility(display) in DOM,
+        // animation of close can run unnecessary on showing element.
+        // const dropdownElement = dropdownRef.current
+        setAnimationState((prevState) => ({
+            className: isOpen ? prevState.className : '',
+        }));
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (animationOpen && animationClose) {
+            setAnimationState(() => ({
+                className: isOpen ? animationOpen : animationClose,
+            }));
+        }
+    }, [isOpen, animationOpen, animationClose]);
+    // Close dropdown by click outside
+    React.useEffect(() => {
+        // Add a handler to keep track of the click target.
+        function onClickWindow(event) {
+            const dropdownElement = dropdownRef.current;
+            if (dropdownElement && animationOpen) {
+                // Is event target inside of dropdown element
+                const isContainsTarget = dropdownElement.contains(event.target);
+                // Is dropdown element has "open" class
+                const hasOpenClass = dropdownElement.classList.contains(animationOpen);
+                if (!isContainsTarget && hasOpenClass) {
+                    // Trigger close event with animation
+                    // dropdownElement.click() - trigger "onClickWindow" again
+                    setIsOpen(false);
+                }
+            }
+        }
+        // Add event listener for current dropdown on first render
+        window.addEventListener('click', onClickWindow);
+        return () => {
+            // Remove event listener for current dropdown on unmount
+            window.removeEventListener('click', onClickWindow);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const { alignmentClass, fillClass, fillHoverClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
+    const { styles } = useStyles.useStyles(props);
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, (children || dropdownList) && (jsxRuntime.jsxs("div", { className: clsx('dropdown__wrapper', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
+                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+                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, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
+}
+
+const dropdownAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentPrimaryActive',
+        fillActiveHover: 'accentHoverPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        badgeAppearance: 'surfacePrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'accentTextPrimary',
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+    },
+};
+
+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: 'surfacePrimaryActive',
+        fillHover: 'surfaceHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'surfaceTextPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+const dropdownItemAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+
+const dropdownItemConfig = {
+    appearance: dropdownItemAppearance,
+    setAppearance: (appearanceConfig) => {
+        dropdownItemConfig.appearance = appearanceConfig;
+    },
+};
+function DropdownItem(props) {
+    const { className, appearance, label, desc, isDisabled, badgeValue, emptyMessage, showDivider, before, after, isActive, isHover, isSkeleton, 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, sizeClass, widthClass, } = propsGenerator;
+    // @ts-expect-error
+    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 && `dropdown__item_shape_${shapeClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
+            `dropdown__item_justify-content_${justifyContentClass}`), 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: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, 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;

package/dist/DropdownItem_es_B-1qtEa7.js

@@ -0,0 +1,206 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+import { I as Icon, B as Badge } from './Icon_es_D5eiycFI.js';
+import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
+import { D as Divider } from './Divider_es_BiYozVBS.js';
+import { T as Text } from './Text_es_CnymlElo.js';
+
+function Dropdown(props) {
+    const { className, appearance, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, before, after, isOpen, isSkeleton, setIsOpen, onClickItem, children, } = props;
+    const dropdownRef = useRef(null);
+    // const [isOpen, setIsOpen] = useState(false)
+    const [animationState, setAnimationState] = useState({
+        className: '',
+    });
+    const onAnimationEnd = useCallback(() => {
+        // When component is change his visibility(display) in DOM,
+        // animation of close can run unnecessary on showing element.
+        // const dropdownElement = dropdownRef.current
+        setAnimationState((prevState) => ({
+            className: isOpen ? prevState.className : '',
+        }));
+    }, [isOpen]);
+    useEffect(() => {
+        if (animationOpen && animationClose) {
+            setAnimationState(() => ({
+                className: isOpen ? animationOpen : animationClose,
+            }));
+        }
+    }, [isOpen, animationOpen, animationClose]);
+    // Close dropdown by click outside
+    useEffect(() => {
+        // Add a handler to keep track of the click target.
+        function onClickWindow(event) {
+            const dropdownElement = dropdownRef.current;
+            if (dropdownElement && animationOpen) {
+                // Is event target inside of dropdown element
+                const isContainsTarget = dropdownElement.contains(event.target);
+                // Is dropdown element has "open" class
+                const hasOpenClass = dropdownElement.classList.contains(animationOpen);
+                if (!isContainsTarget && hasOpenClass) {
+                    // Trigger close event with animation
+                    // dropdownElement.click() - trigger "onClickWindow" again
+                    setIsOpen(false);
+                }
+            }
+        }
+        // Add event listener for current dropdown on first render
+        window.addEventListener('click', onClickWindow);
+        return () => {
+            // Remove event listener for current dropdown on unmount
+            window.removeEventListener('click', onClickWindow);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { alignmentClass, fillClass, fillHoverClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, (children || dropdownList) && (jsxs("div", { className: clsx('dropdown__wrapper', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
+                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+                onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
+}
+
+const dropdownAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentPrimaryActive',
+        fillActiveHover: 'accentHoverPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        badgeAppearance: 'surfacePrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'accentTextPrimary',
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+    },
+};
+
+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: 'surfacePrimaryActive',
+        fillHover: 'surfaceHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'surfaceTextPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+const dropdownItemAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+
+const dropdownItemConfig = {
+    appearance: dropdownItemAppearance,
+    setAppearance: (appearanceConfig) => {
+        dropdownItemConfig.appearance = appearanceConfig;
+    },
+};
+function DropdownItem(props) {
+    const { className, appearance, label, desc, isDisabled, badgeValue, emptyMessage, showDivider, before, after, isActive, isHover, isSkeleton, onClick, onMouseEnter, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, dropdownItemConfig);
+    const propsGenerator = 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, sizeClass, widthClass, } = propsGenerator;
+    // @ts-expect-error
+    const { styles: dropdownItem } = useStyles(props);
+    return (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 && `dropdown__item_shape_${shapeClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
+            `dropdown__item_justify-content_${justifyContentClass}`), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsx(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 || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsx(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 && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+}
+
+export { Dropdown as D, DropdownItem as a, dropdownItemConfig as b, dropdownItemAppearance as d };