@itcase/ui 1.9.58 → 1.9.60

package/dist/DropdownItem_es_DjPgbwtU.js

@@ -1,225 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
-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';
-import { I as Icon, B as Badge } from './Icon_es_kewxGRUB.js';
-import { D as Divider } from './Divider_es_D2snK_vn.js';
-import { T as Text } from './Text_es_DVNvU0m0.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 = useRef(null);
-    const appearanceConfig = useAppearanceConfig(appearance, dropdownConfig);
-    const [animationState, setAnimationState] = useState({
-        className: '',
-    });
-    const onAnimationEnd = useCallback(() => {
-        setAnimationState((prevState) => ({
-            className: isOpen ? prevState.className : '',
-        }));
-    }, [isOpen]);
-    useEffect(() => {
-        if (animationOpen && animationClose) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setAnimationState(() => ({
-                className: isOpen ? animationOpen : animationClose,
-            }));
-        }
-    }, [isOpen, animationOpen, animationClose]);
-    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(props, appearanceConfig);
-    const { alignmentClass, fillClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
-    const { styles } = useStyles(props);
-    return (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) && (jsxs("div", { className: clsx('dropdown__wrapper'), 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, 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(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, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    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 && `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: [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: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, 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 };