@itcase/ui 1.9.56 → 1.9.58

package/dist/components/DatePeriod/appearance/datePeriodShape.js

@@ -0,0 +1,35 @@
+const datePeriodAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+    },
+    roundedXL: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { datePeriodAppearanceShape };

package/dist/components/DatePeriod/appearance/datePeriodSize.js

@@ -0,0 +1,24 @@
+const datePeriodAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        chipsAppearanceSize: 'sizeXL',
+        datePickerAppearanceSize: 'sizeL',
+        datePickerInputAppearanceSize: 'sizeL',
+        selectAppearanceSize: 'sizeL',
+    },
+    sizeM: {
+        size: 'm',
+        chipsAppearanceSize: 'sizeL',
+        datePickerAppearanceSize: 'sizeM',
+        datePickerInputAppearanceSize: 'sizeM',
+        selectAppearanceSize: 'sizeM',
+    },
+    sizeS: {
+        size: 's',
+        chipsAppearanceSize: 'sizeM',
+        datePickerAppearanceSize: 'sizeS',
+        datePickerInputAppearanceSize: 'sizeS',
+        selectAppearanceSize: 'sizeS',
+    },
+};
+export { datePeriodAppearanceSize };

package/dist/components/DatePeriod/appearance/datePeriodSurface.js

@@ -0,0 +1,17 @@
+const datePeriodAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        chipsAppearance: 'surfacePrimary ghost',
+        datePickerAppearance: 'surfacePrimary',
+        datePickerInputAppearance: 'defaultPrimary',
+        selectAppearance: 'defaultPrimary solid',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        chipsAppearance: 'surfacePrimary ghost',
+        datePickerAppearance: 'surfacePrimary',
+        datePickerInputAppearance: 'defaultPrimary',
+        selectAppearance: 'defaultPrimary solid',
+    },
+};
+export { datePeriodAppearanceSurface };

package/dist/components/DatePeriod/index.js

@@ -0,0 +1,2 @@
+export { DatePeriod, datePeriodConfig } from './DatePeriod';
+export { datePeriodAppearance } from './DatePeriod.appearance';

package/dist/components/DatePeriod.js

@@ -7,7 +7,7 @@ import { a as ChipsGroup, C as Chips } from '../ChipsGroup_es_BTe1MYhV.js';
 import { D as DatePickerInput } from '../DatePicker_es_t3u6yddn.js';
 import 'react-select';
 import '../Icon_es_kewxGRUB.js';
-import { S as SelectContainer } from '../SelectContainer_es_CXkK4_Om.js';
+import { S as SelectContainer } from '../SelectContainer_es_BYBGTq-u.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
@@ -15,7 +15,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import '../context/UIContext.js';
-import '../Group_es_C_WChp2_.js';
+import '../Group_es_CP-uIchb.js';
 import { mergeAppearanceKeys } from '../utils/mergeAppearanceKeys.js';
 import '../hooks/useStyles/useStyles.js';
 import '../hooks.js';

package/dist/components/DatePicker/DatePicker.appearance.js

@@ -0,0 +1,9 @@
+import { datePickerSize } from './appearance/datePickerSize';
+import { datePickerStyle } from './appearance/datePickerStyle';
+import { datePickerAppearanceSurface } from './appearance/datePickerSurface';
+const datePickerAppearance = {
+    ...datePickerAppearanceSurface,
+    ...datePickerSize,
+    ...datePickerStyle,
+};
+export { datePickerAppearance };

package/dist/components/DatePicker/DatePicker.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import { ru } from 'date-fns/locale';
+import DatePicker from 'react-datepicker';
+import { Button } from 'src/components/Button';
+import { Icon } from 'src/components/Icon';
+import { Input } from 'src/components/Input';
+import { Label } from 'src/components/Label';
+import { Text } from 'src/components/Text';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { datePickerAppearance } from './DatePicker.appearance';
+import { getWeekRange } from './DatePicker.utils';
+const datePickerConfig = {
+    appearance: datePickerAppearance,
+    setAppearance: (appearanceConfig) => {
+        datePickerConfig.appearance = appearanceConfig;
+    },
+};
+function DatePickerInput(props) {
+    const { className, dataTestId, dataTour, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
+    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekNumbers, showWeekPicker, } = datePickerProps;
+    const appearanceConfig = useAppearanceConfig(appearance, datePickerConfig);
+    const propsGenerator = useDevicePropsGenerator(datePickerProps, appearanceConfig);
+    const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
+    const datepickerRef = useRef(null);
+    const [dateStart, dateEnd] = useMemo(() => {
+        let dateStart = undefined;
+        if (value) {
+            if (typeof value === 'string') {
+                dateStart = new Date(value);
+            }
+            else {
+                dateStart = value;
+            }
+        }
+        let dateEnd = undefined;
+        if (endValue) {
+            if (typeof endValue === 'string') {
+                dateEnd = new Date(endValue);
+            }
+            else {
+                dateEnd = endValue;
+            }
+        }
+        return [dateStart, dateEnd];
+    }, [value, endValue]);
+    const handleChange = useCallback((selected) => {
+        const valuesList = Array.isArray(selected) ? selected : [selected];
+        const [selectedDateStart, selectedDateEnd] = valuesList;
+        if (selectedDateStart && showWeekPicker) {
+            const { mondayDate, sundayDate } = getWeekRange(selectedDateStart);
+            onChange?.(mondayDate, sundayDate);
+        }
+        else {
+            onChange?.(selectedDateStart, selectedDateEnd);
+        }
+    }, [showWeekPicker, onChange]);
+    const handleWeekSelect = useCallback((startDateOfSelectedWeek) => {
+        const { mondayDate, sundayDate } = getWeekRange(startDateOfSelectedWeek);
+        onChange?.(mondayDate, sundayDate);
+    }, [onChange]);
+    const renderDayContents = useCallback((day, date) => {
+        return (_jsx(Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
+    }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
+    const renderCustomHeader = useCallback(({ decreaseMonth, increaseMonth, monthDate, }) => (_jsxs("div", { className: "react-datepicker__header--div", children: [iconLeft && (_jsx(Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconLeft, onClick: decreaseMonth })), _jsxs("div", { className: "react-datepicker__data", children: [_jsx(Text, { className: "react-datepicker__month", size: monthTextSize, textColor: monthTextColor, textWeight: monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), _jsx(Text, { className: "react-datepicker__year", size: yearTextSize, textColor: yearTextColor, textWeight: yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), iconRight && (_jsx(Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconRight, onClick: increaseMonth }))] })), [
+        iconFill,
+        iconFillHover,
+        iconFillSize,
+        iconItemFill,
+        iconLeft,
+        iconRight,
+        iconShape,
+        monthTextColor,
+        monthTextSize,
+        monthTextWeight,
+        yearTextColor,
+        yearTextSize,
+        yearTextWeight,
+    ]);
+    const { styles: datePickerStyles } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: datePickerStyles, children: _jsx(DatePicker, { ref: datepickerRef, ...datePickerProps, minDate: disablePastDays ? new Date() : undefined, customInput: _jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, isClearable: false, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined }) }));
+}
+const DatePickerCustomInput = React.forwardRef((props, ref) => {
+    const { inputIcon, inputProps, value, isClearable } = props;
+    const multipleValue = useMemo(() => {
+        if (value) {
+            const twoDates = value.split(' - ');
+            return twoDates[0] === twoDates[1] ? twoDates[0] : value;
+        }
+        return '';
+    }, [value]);
+    return (_jsxs(React.Fragment, { children: [_jsx(Input, { ...props, ...inputProps, className: clsx(inputProps?.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && _jsx(DatePickerInputIcon, { ...inputProps }), isClearable && _jsx(DatePickerClearButton, { ...inputProps })] }));
+});
+function DatePickerClearButton(props) {
+    const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
+    const onClick = useCallback((event) => {
+        datepickerRef?.current?.onClearClick(event);
+        datepickerRef?.current?.handleFocus(event);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsx(React.Fragment, { children: clearLabel ? (_jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })) : ((clearIcon || clearIconSrc) && (_jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
+}
+function DatePickerInputIcon(props) {
+    const { inputIcon, inputIconFill, inputIconFillHover, inputIconFillSize, inputIconItemFill, inputIconShape, inputIconSize, inputIconSrc, onClick, } = props;
+    return (_jsx(Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: () => onClick && onClick() }));
+}
+export { datePickerConfig, DatePickerInput };

package/dist/components/DatePicker/DatePicker.utils.js

@@ -0,0 +1,12 @@
+const getWeekRange = (date) => {
+    const weekDayIndex = date.getDay() || 7;
+    const mondayDate = new Date(date);
+    mondayDate.setDate(date.getDate() - (weekDayIndex - 1));
+    const sundayDate = new Date(mondayDate);
+    sundayDate.setDate(mondayDate.getDate() + 6);
+    return {
+        mondayDate,
+        sundayDate,
+    };
+};
+export { getWeekRange };

package/dist/components/DatePicker/appearance/datePickerSize.js

@@ -0,0 +1,31 @@
+import { icons14 } from '@itcase/icons/default';
+const datePickerSize = {
+    sizeL: {
+        size: 'l',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: '24',
+        iconLeft: icons14.Arrow.ChevronLeft,
+        iconRight: icons14.Arrow.ChevronRight,
+    },
+    sizeM: {
+        size: 'm',
+        daySize: 'xxl',
+        dayTextSize: 'm',
+        iconFillSize: '24',
+        iconLeft: icons14.Arrow.ChevronLeft,
+        iconRight: icons14.Arrow.ChevronRight,
+        iconSize: '14',
+        monthTextSize: 'm',
+        yearTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: '24',
+        iconLeft: icons14.Arrow.ChevronLeft,
+        iconRight: icons14.Arrow.ChevronRight,
+    },
+};
+export { datePickerSize };

package/dist/components/DatePicker/appearance/datePickerStyle.js

@@ -0,0 +1,20 @@
+const datePickerStyle = {
+    solid: {
+        inputProps: {
+            borderColor: 'none',
+        },
+    },
+    outlined: {
+        inputProps: {
+            fill: 'none',
+        },
+    },
+    full: {},
+    ghost: {
+        inputProps: {
+            fill: 'none',
+            borderColor: 'none',
+        },
+    },
+};
+export { datePickerStyle };

package/dist/components/DatePicker/appearance/datePickerSurface.js

@@ -0,0 +1,14 @@
+const datePickerAppearanceSurface = {
+    surfacePrimary: {
+        dayTextColor: 'surfaceTextPrimary',
+        dayTextShape: 'rounded',
+        iconFillHover: 'surfaceSecondary',
+        iconItemFill: 'surfaceItemPrimary',
+        iconShape: 'circular',
+        monthTextColor: 'surfaceTextPrimary',
+        monthTextWeight: '400',
+        yearTextColor: 'surfaceTextPrimary',
+        yearTextWeight: '400',
+    },
+};
+export { datePickerAppearanceSurface };

package/dist/components/DatePicker/index.js

@@ -0,0 +1,2 @@
+export { datePickerConfig, DatePickerInput } from './DatePicker';
+export { datePickerAppearance } from './DatePicker.appearance';

package/dist/components/Divider/Divider.appearance.js

@@ -0,0 +1,19 @@
+import { dividerAppearanceAccent } from './appearance/dividerAccent';
+import { dividerAppearanceError } from './appearance/dividerError';
+import { dividerAppearanceExtra } from './appearance/dividerExtra';
+import { dividerAppearanceSize } from './appearance/dividerSize';
+import { dividerAppearanceSpecial } from './appearance/dividerSpecial';
+import { dividerAppearanceSuccess } from './appearance/dividerSuccess';
+import { dividerAppearanceSurface } from './appearance/dividerSurface';
+import { dividerAppearanceWarning } from './appearance/dividerWarning';
+const dividerAppearance = {
+    ...dividerAppearanceSize,
+    ...dividerAppearanceAccent,
+    ...dividerAppearanceError,
+    ...dividerAppearanceSpecial,
+    ...dividerAppearanceExtra,
+    ...dividerAppearanceSuccess,
+    ...dividerAppearanceSurface,
+    ...dividerAppearanceWarning,
+};
+export { dividerAppearance };

package/dist/components/Divider/Divider.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Divider/Divider.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { dividerAppearance } from './Divider.appearance';
+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, dividerConfig };

package/dist/components/Divider/appearance/dividerAccent.js

@@ -0,0 +1,6 @@
+const dividerAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+    },
+};
+export { dividerAppearanceAccent };

package/dist/components/Divider/appearance/dividerError.js

@@ -0,0 +1,6 @@
+const dividerAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+    },
+};
+export { dividerAppearanceError };

package/dist/components/Divider/appearance/dividerExtra.js

@@ -0,0 +1,6 @@
+const dividerAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+    },
+};
+export { dividerAppearanceExtra };

package/dist/components/Divider/appearance/dividerSize.js

@@ -0,0 +1,12 @@
+const dividerAppearanceSize = {
+    sizeL: {
+        size: 'l',
+    },
+    sizeM: {
+        size: 'm',
+    },
+    sizeS: {
+        size: 's',
+    },
+};
+export { dividerAppearanceSize };

package/dist/components/Divider/appearance/dividerSpecial.js

@@ -0,0 +1,6 @@
+const dividerAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+    },
+};
+export { dividerAppearanceSpecial };

package/dist/components/Divider/appearance/dividerSuccess.js

@@ -0,0 +1,6 @@
+const dividerAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+    },
+};
+export { dividerAppearanceSuccess };

package/dist/components/Divider/appearance/dividerSurface.js

@@ -0,0 +1,15 @@
+const dividerAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+    },
+};
+export { dividerAppearanceSurface };

package/dist/components/Divider/appearance/dividerWarning.js

@@ -0,0 +1,6 @@
+const dividerAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+    },
+};
+export { dividerAppearanceWarning };

package/dist/components/Divider/index.js

@@ -0,0 +1,2 @@
+export { Divider, dividerConfig } from './Divider';
+export { dividerAppearance } from './Divider.appearance';

package/dist/components/Dot/Dot.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Dot/Dot.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+function Dot(props) {
+    const { className, children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { dataTestId, dataTour, fillClass, borderColorClass, borderTypeClass, shapeClass, sizeClass, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'dot', borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `dot_shape_${shapeClass}`, sizeClass && `dot_size_${sizeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: children }));
+}
+export { Dot };

package/dist/components/Dot/index.js

@@ -0,0 +1 @@
+export { Dot } from './Dot';

package/dist/components/Drawer/Drawer.appearance.js

@@ -0,0 +1,7 @@
+import { drawerAppearanceSize } from './appearance/drawerSize';
+import { drawerAppearanceSurface } from './appearance/drawerSurface';
+const drawerAppearance = {
+    ...drawerAppearanceSize,
+    ...drawerAppearanceSurface,
+};
+export { drawerAppearance };

package/dist/components/Drawer/Drawer.constants.js

@@ -0,0 +1,16 @@
+const ANIMATION_DURATION = 300;
+const ANIMATION_STATE_SNAPSHOTS = {
+    DEFAULT: {
+        isInDOM: true,
+        isOpen: false,
+    },
+    ENTER_FINISH: {
+        isInDOM: true,
+        isOpen: true,
+    },
+    EXIT_FINISH: {
+        isInDOM: false,
+        isOpen: false,
+    },
+};
+export { ANIMATION_DURATION, ANIMATION_STATE_SNAPSHOTS };

package/dist/components/Drawer/Drawer.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import ReactDrawer from 'react-modern-drawer';
+import { Divider } from 'src/components/Divider';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { Title } from 'src/components/Title';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { drawerAppearance } from './Drawer.appearance';
+import { ANIMATION_DURATION, ANIMATION_STATE_SNAPSHOTS, } from './Drawer.constants';
+const drawerConfig = {
+    appearance: drawerAppearance,
+    setAppearance: (appearanceConfig) => {
+        drawerConfig.appearance = appearanceConfig;
+    },
+};
+function Drawer(props) {
+    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
+        ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
+        : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH);
+    useEffect(() => {
+        /* TODO: Remove error after some time */
+        const isNeedShowWarning = process.env.NODE_ENV === 'development' &&
+            typeof isOpenModal !== 'undefined';
+        if (isNeedShowWarning) {
+            throw new Error('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
+        }
+        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 timeout = setTimeout(() => {
+            const newAnimationState = isOpen
+                ? ANIMATION_STATE_SNAPSHOTS.ENTER_FINISH
+                : ANIMATION_STATE_SNAPSHOTS.EXIT_FINISH;
+            setAnimationState(newAnimationState);
+        }, timeoutDelay);
+        return () => {
+            clearTimeout(timeout);
+        };
+        // 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 })] }));
+}
+export { Drawer, drawerConfig };

package/dist/components/Drawer/appearance/drawerSize.js

@@ -0,0 +1,8 @@
+const drawerAppearanceSize = {
+    sizeH3: {
+        titleTextSize: 'h3',
+        descTextSize: 's',
+        dividerSize: 's',
+    },
+};
+export { drawerAppearanceSize };

package/dist/components/Drawer/appearance/drawerSurface.js

@@ -0,0 +1,10 @@
+import { icons24 } from '@itcase/icons/default';
+const drawerAppearanceSurface = {
+    surfacePrimary: {
+        titleTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        closeIcon: icons24.Action.Close,
+        closeIconFillIcon: 'surfaceItemPrimary',
+    },
+};
+export { drawerAppearanceSurface };

package/dist/components/Drawer/index.js

@@ -0,0 +1,2 @@
+export { Drawer, drawerConfig } from './Drawer';
+export { drawerAppearance } from './Drawer.appearance';

package/dist/components/Dropdown/Dropdown.appearance.js

@@ -0,0 +1,13 @@
+import { dropdownAppearanceAccent } from './appearance/dropdownAccent';
+import { dropdownAppearanceShape } from './appearance/dropdownShape';
+import { dropdownAppearanceSize } from './appearance/dropdownSize';
+import { dropdownAppearanceStyle } from './appearance/dropdownStyle';
+import { dropdownAppearanceSurface } from './appearance/dropdownSurface';
+const dropdownAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+export { dropdownAppearance };

package/dist/components/Dropdown/Dropdown.interface.js

@@ -0,0 +1 @@
+export {};