kamotive_ui 1.2.21 → 1.2.23

package/dist/Icons/IconWarning/IconWarning.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconWarning = ({ color = 'inherit', htmlColor, strokeWidth = '0.3', style }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, style: style },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, strokeLinejoin: "round", d: "M1,21L11.5,2.81L22,21H1M20.27,20L11.5,4.81L2.73,20H20.27M11,14V10H12V14H11M11,16H12V18H11V16Z" })));
+};

package/dist/Icons/index.d.ts

@@ -1,21 +1,21 @@
-export { ChevronDown10 } from './ChevronDown/ChevronDown10';
+export { ChevronDown } from './ChevronDown/ChevronDown';
 export { ChevronRight } from './ChevronRight/ChevronRight';
 export { ChevronLeft } from './ChevronLeft/ChevronLeft';
-export { ChevronUp10 } from './ChevronUp/ChevronUp10';
-export { IconAlarm10 } from './IconAlarm/IconAlarm10';
-export { IconAccount10 } from './IconAccount/IconAccount10';
-export { IconBank10 } from './IconBank/IconBank10';
-export { IconBell10 } from './IconBell/IconBell10';
-export { IconBriefcase10 } from './IconBriefcase/IconBriefcase10';
-export { IconCalendar10 } from './IconCalendar/IconCalendar10';
-export { IconCheck10 } from './IconCheck/IconCheck10';
-export { IconEyeOff10 } from './IconEyeOff/IconEyeOff10';
-export { IconSuccess10 } from './IconSuccess/IconSuccess10';
-export { IconInfo10 } from './IconInfo/IconInfo10';
-export { IconWarning10 } from './IconWarning/IconWarning10';
-export { IconError10 } from './IconError/IconError10';
-export { IconClose10 } from './IconClose/IconClose10';
-export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
+export { ChevronUp } from './ChevronUp/ChevronUp';
+export { IconAlarm } from './IconAlarm/IconAlarm';
+export { IconAccount } from './IconAccount/IconAccount';
+export { IconAddress } from './IconAddress/IconAddress';
+export { IconBell } from './IconBell/IconBell';
+export { IconBriefcase } from './IconBriefcase/IconBriefcase';
+export { IconCalendar } from './IconCalendar/IconCalendar';
+export { IconCheck } from './IconCheck/IconCheck';
+export { IconEyeOff } from './IconEyeOff/IconEyeOff';
+export { IconSuccess } from './IconSuccess/IconSuccess';
+export { IconInfo } from './IconInfo/IconInfo';
+export { IconWarning } from './IconWarning/IconWarning';
+export { IconError } from './IconError/IconError';
+export { IconClose } from './IconClose/IconClose';
+export { IconColorPicker } from './IconColorPicker/IconColorPicker';
 export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconDownload } from './IconDownload/IconDownload';
@@ -23,5 +23,10 @@ export { IconAdd } from './IconAdd/IconAdd';
 export { IconPhone } from './IconPhone/IconPhone';
 export { IconLocation } from './IconLocation/IconLocation';
 export { IconEmail } from './IconEmail/IconEmail';
-export { IconEye10 } from './IconEye/IconEye10';
+export { IconEye } from './IconEye/IconEye';
 export { IconPencil } from './IconPencil/IconPencil';
+export { IconDelete } from './IconDelete/IconDelete';
+export { IconDublicate } from './IconDublicate/IconDublicate';
+export { IconSpaceChange } from './IconSpaceChange/IconSpaceChange';
+export { IconGoTo } from './IconGoTo/IconGoTo';
+export { IconHome } from './IconHome/IconHome';

package/dist/Icons/index.js

@@ -1,21 +1,21 @@
-export { ChevronDown10 } from './ChevronDown/ChevronDown10';
+export { ChevronDown } from './ChevronDown/ChevronDown';
 export { ChevronRight } from './ChevronRight/ChevronRight';
 export { ChevronLeft } from './ChevronLeft/ChevronLeft';
-export { ChevronUp10 } from './ChevronUp/ChevronUp10';
-export { IconAlarm10 } from './IconAlarm/IconAlarm10';
-export { IconAccount10 } from './IconAccount/IconAccount10';
-export { IconBank10 } from './IconBank/IconBank10';
-export { IconBell10 } from './IconBell/IconBell10';
-export { IconBriefcase10 } from './IconBriefcase/IconBriefcase10';
-export { IconCalendar10 } from './IconCalendar/IconCalendar10';
-export { IconCheck10 } from './IconCheck/IconCheck10';
-export { IconEyeOff10 } from './IconEyeOff/IconEyeOff10';
-export { IconSuccess10 } from './IconSuccess/IconSuccess10';
-export { IconInfo10 } from './IconInfo/IconInfo10';
-export { IconWarning10 } from './IconWarning/IconWarning10';
-export { IconError10 } from './IconError/IconError10';
-export { IconClose10 } from './IconClose/IconClose10';
-export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
+export { ChevronUp } from './ChevronUp/ChevronUp';
+export { IconAlarm } from './IconAlarm/IconAlarm';
+export { IconAccount } from './IconAccount/IconAccount';
+export { IconAddress } from './IconAddress/IconAddress';
+export { IconBell } from './IconBell/IconBell';
+export { IconBriefcase } from './IconBriefcase/IconBriefcase';
+export { IconCalendar } from './IconCalendar/IconCalendar';
+export { IconCheck } from './IconCheck/IconCheck';
+export { IconEyeOff } from './IconEyeOff/IconEyeOff';
+export { IconSuccess } from './IconSuccess/IconSuccess';
+export { IconInfo } from './IconInfo/IconInfo';
+export { IconWarning } from './IconWarning/IconWarning';
+export { IconError } from './IconError/IconError';
+export { IconClose } from './IconClose/IconClose';
+export { IconColorPicker } from './IconColorPicker/IconColorPicker';
 export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconDownload } from './IconDownload/IconDownload';
@@ -23,5 +23,10 @@ export { IconAdd } from './IconAdd/IconAdd';
 export { IconPhone } from './IconPhone/IconPhone';
 export { IconLocation } from './IconLocation/IconLocation';
 export { IconEmail } from './IconEmail/IconEmail';
-export { IconEye10 } from './IconEye/IconEye10';
+export { IconEye } from './IconEye/IconEye';
 export { IconPencil } from './IconPencil/IconPencil';
+export { IconDelete } from './IconDelete/IconDelete';
+export { IconDublicate } from './IconDublicate/IconDublicate';
+export { IconSpaceChange } from './IconSpaceChange/IconSpaceChange';
+export { IconGoTo } from './IconGoTo/IconGoTo';
+export { IconHome } from './IconHome/IconHome';

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -13,5 +13,5 @@ export const Breadcrumb = ({ onClick, active, label, icon, children }) => {
     const iconClassNames = classNames(childrenClassNames, styles.icon);
     return (React.createElement("button", { className: classNames(styles.breadcrumb), onClick: handleClick },
         icon && React.createElement("span", { className: iconClassNames }, icon),
-        React.createElement(Typography, { variant: "Body2-Medium", style: { fontWeight: '500' }, className: childrenClassNames }, label || children)));
+        React.createElement(Typography, { variant: "Body1-Medium", className: childrenClassNames }, label || children)));
 };

package/dist/components/ColorPicker/ColorPicker.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { Chrome } from '@uiw/react-color';
 import EditableInput from '@uiw/react-color-editable-input';
 import { GithubPlacement } from '@uiw/react-color-github';
-import { IconColorPicker10 } from '../../Icons';
+import { IconColorPicker } from '../../Icons';
 ;
 // Функция для преобразования HEXA в HEX
 const hexaToHex = (hexa = 'fff') => {
@@ -149,7 +149,7 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
                     height: `${height}px`,
                 } }),
             isOpen && (React.createElement("div", { ref: popoverRef, className: popoverClassess },
-                isOpen && React.createElement(IconColorPicker10, { className: styles.colorPickerIcon, htmlColor: 'var(--white)' }),
+                isOpen && React.createElement(IconColorPicker, { className: styles.colorPickerIcon, htmlColor: 'var(--white)' }),
                 React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: styles.customChrome, showEyeDropper: false }),
                 React.createElement("div", { className: styles.hex, style: { padding: '0 10px 0 20px' } },
                     React.createElement(EditableInput, { value: hexaToHex(selectedColor), style: { width: 68, alignItems: 'flex-start' }, onChange: (e, color) => {

package/dist/components/ColorPicker/ColorPicker.module.css

@@ -218,9 +218,14 @@
 .colorPickerIcon {
   position: absolute;
   top: 69%;
-  left: 8px;
+  left: 7px;
   z-index: 200;
   padding: 10px;
+  
+}
+.colorPicker  svg {
+    width: 16px;
+    height: 16px;
 }
 
 .hex {

package/dist/components/DateInput/DateInput.js

@@ -3,21 +3,24 @@ import styles from './DateInput.module.css';
 import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
 import DatePicker from 'react-datepicker';
-import { IconCalendar10 } from '../../Icons/IconCalendar/IconCalendar10';
+import { IconCalendar } from '../../Icons/IconCalendar/IconCalendar';
 import 'react-datepicker/dist/react-datepicker.css';
 import { registerLocale } from 'react-datepicker';
 import { ru } from 'date-fns/locale/ru';
+import { enUS } from 'date-fns/locale/en-US';
 import { ChevronRight } from '../../Icons/ChevronRight/ChevronRight';
 import { ChevronLeft } from '../../Icons/ChevronLeft/ChevronLeft';
 import { Button } from '../Button/Button';
 registerLocale('ru', ru);
-const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, className, disabled = false, readOnly = false }, ref) => {
+registerLocale('en', enUS);
+const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, className, disabled = false, readOnly = false, dateFormat = 'dd.MM.yyyy' }, ref) => {
     const inputRef = useRef(null);
     const [selectedPart, setSelectedPart] = useState(null);
     const [tempInput, setTempInput] = useState('');
     const [hasFocus, setHasFocus] = useState(false);
     const [shouldReselect, setShouldReselect] = useState(false);
     const [input, setInput] = useState(value);
+    const separator = dateFormat.includes('.') ? '.' : dateFormat.includes('-') ? '-' : '/';
     const positions = {
         day: { start: 0, end: 2 },
         month: { start: 3, end: 5 },
@@ -74,7 +77,7 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
                 selectDatePart('month');
             }
         }
-        else if (e.key === 'ArrowRight' || e.key === '.') {
+        else if (e.key === 'ArrowRight' || e.key === separator) {
             e.preventDefault();
             if (selectedPart === 'day') {
                 selectDatePart('month');
@@ -85,12 +88,13 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
         }
         else if (/^\d$/.test(e.key)) {
             e.preventDefault();
-            if (!/^\d{2}\.\d{2}\.\d{4}$/.test(input)) {
+            const dateRegex = new RegExp(`^\\d{2}\\${separator}\\d{2}\\${separator}\\d{4}$`);
+            if (!dateRegex.test(input)) {
                 const today = new Date();
                 handleDateUpdate(today, e.key);
                 return;
             }
-            const [day, month, year] = input.split('.').map((part) => parseInt(part, 10));
+            const [day, month, year] = input.split(separator).map((part) => parseInt(part, 10));
             const currentDate = new Date(year, month - 1, day);
             handleDateUpdate(currentDate, e.key);
         }
@@ -141,7 +145,7 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
                 updateInputValue(key, positions.month.start);
                 return;
             }
-            updateInputValue(key, positions.day.start + 1);
+            updateInputValue(key, positions.month.start + 1);
             let newMonth = parseInt(newTempInput, 10);
             newDate.setMonth(newMonth - 1);
             onDateChange(newDate);
@@ -189,9 +193,9 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
     useImperativeHandle(ref, () => ({
         removeSelection,
     }), [removeSelection]);
-    return (React.createElement("input", { ref: inputRef, value: input, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, readOnly: readOnly, disabled: disabled, className: className }));
+    return (React.createElement("input", { ref: inputRef, value: input, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onChange: () => { }, readOnly: readOnly, disabled: disabled, className: className }));
 });
-export const DateInput = ({ id, label = 'Выберите дату', size = 'lg', value, style, className, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, minDate = new Date('1975-12-31'), maxDate = new Date('2074-12-31'), inputClassName, calendarClassName, dateFormat = 'dd.MM.yyyy', }) => {
+export const DateInput = ({ id, label = 'Выберите дату', size = 'lg', value, style, className, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, lng = 'ru', minDate = new Date('1975-12-31'), maxDate = new Date('2074-12-31'), inputClassName, calendarClassName, dateFormat = 'dd.MM.yyyy', }) => {
     const wrapperClassess = classNames(styles['wrapper--input'], className, {
         [styles['wrapper--left']]: isLeftLabel,
         [styles['wrapper--input-label']]: label && !isLeftLabel && !required,
@@ -212,20 +216,36 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
     const [isMonthPickerOpen, setIsMonthPickerOpen] = useState(false);
     const datePickerRef = useRef(null);
     const inputRef = useRef(null);
-    const months = [
-        'Январь',
-        'Февраль',
-        'Март',
-        'Апрель',
-        'Май',
-        'Июнь',
-        'Июль',
-        'Август',
-        'Сентябрь',
-        'Октябрь',
-        'Ноябрь',
-        'Декабрь',
-    ];
+    const weekDays = lng === 'ru' ? ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'] : ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+    const months = lng === 'ru'
+        ? [
+            'Январь',
+            'Февраль',
+            'Март',
+            'Апрель',
+            'Май',
+            'Июнь',
+            'Июль',
+            'Август',
+            'Сентябрь',
+            'Октябрь',
+            'Ноябрь',
+            'Декабрь',
+        ]
+        : [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ];
     const years = Array.from({ length: maxDate.getFullYear() - minDate.getFullYear() }, (_, i) => minDate.getFullYear() + i);
     const handleDateChange = (date) => {
         if (date) {
@@ -297,12 +317,12 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
             React.createElement("div", { className: styles.buttonContainer },
                 React.createElement(Button, { condition: "info", onClick: () => {
                         setIsMonthPickerOpen(false);
-                    } }, "\u041E\u0442\u043C\u0435\u043D\u0430"),
+                    } }, lng === 'ru' ? "Отмена" : "Cancel"),
                 React.createElement(Button, { onClick: () => {
                         date.setMonth(currentMonth);
                         date.setFullYear(currentYear);
                         setIsMonthPickerOpen(false);
-                    } }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"))));
+                    } }, lng === 'ru' ? "Применить" : "Apply"))));
     };
     const getMonthPickerWithDate = (date) => {
         return () => React.createElement(MonthPicker, { date: date });
@@ -325,8 +345,12 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
     };
     return (React.createElement("div", { className: wrapperClassess, style: style },
         label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
-        React.createElement("div", { className: styles.icon, onClick: () => { var _a; return (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(true); } }, icon || React.createElement(IconCalendar10, null)),
-        React.createElement(DatePicker, Object.assign({ id: id, ref: datePickerRef, selected: selectedDate, onChange: handleDateChange, onBlur: onBlur, dateFormat: dateFormat, locale: "ru", readOnly: readOnly, disabled: disabled, showPopperArrow: false, calendarClassName: classNames(styles.calendar, calendarClassName), popperClassName: styles.calendarPopper, onCalendarClose: () => setIsMonthPickerOpen(false), minDate: minDate, maxDate: maxDate, inline: false, calendarStartDay: 1, dayClassName: (date) => {
+        React.createElement("div", { className: styles.icon, onClick: () => { var _a; return (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(true); } }, icon || React.createElement(IconCalendar, null)),
+        React.createElement(DatePicker, Object.assign({ id: id, ref: datePickerRef, selected: selectedDate, onChange: handleDateChange, onBlur: onBlur, dateFormat: dateFormat, locale: lng === 'ru' ? 'ru' : 'en', readOnly: readOnly, disabled: disabled, showPopperArrow: false, calendarClassName: classNames(styles.calendar, calendarClassName), popperClassName: styles.calendarPopper, onCalendarClose: () => setIsMonthPickerOpen(false), minDate: minDate, maxDate: maxDate, inline: false, calendarStartDay: 1, formatWeekDay: (dayName) => {
+                const dayIndex = ['понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота', 'воскресенье']
+                    .findIndex(day => day === dayName);
+                return weekDays[dayIndex];
+            }, dayClassName: (date) => {
                 return date.getMonth() === (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) && date.getFullYear() === (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear())
                     ? 'current-month-day'
                     : '';
@@ -335,6 +359,6 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
             : {
                 renderCustomHeader: renderCustomHeader,
                 renderDayContents: renderDayContents,
-            }), { customInput: React.createElement(CustomInput, { ref: inputRef, className: classNames(inputClassess, inputClassName), onDateChange: handleCustomInputChange, onClose: handleCloseDatePicker, disabled: disabled, readOnly: readOnly }) })),
+            }), { customInput: React.createElement(CustomInput, { ref: inputRef, className: classNames(inputClassess, inputClassName), onDateChange: handleCustomInputChange, onClose: handleCloseDatePicker, disabled: disabled, readOnly: readOnly, dateFormat: dateFormat }) })),
         error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText))));
 };

package/dist/components/Dropdown/Dropdown.js

@@ -1,46 +1,52 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './Dropdown.module.css';
 import classNames from 'classnames';
-import { ChevronDown10 } from '../../Icons/ChevronDown/ChevronDown10';
-import { ChevronUp10 } from '../../Icons/ChevronUp/ChevronUp10';
-import { IconClose10 } from '../../Icons/IconClose/IconClose10';
-import { IconCheck10 } from '../../Icons/IconCheck/IconCheck10';
-;
+import { ChevronDown } from '../../Icons/ChevronDown/ChevronDown';
+import { ChevronUp } from '../../Icons/ChevronUp/ChevronUp';
+import { IconClose } from '../../Icons/IconClose/IconClose';
+import { IconCheck } from '../../Icons/IconCheck/IconCheck';
 import { Typography } from '../Typography/Typography';
+import { Tooltip } from '../Tooltip/Tooltip';
+const isTextOverflowing = (element) => {
+    if (!element)
+        return false;
+    return element.scrollWidth > element.clientWidth;
+};
 function checkItem(item, getOptionLabel, disabled, isDivider) {
     if (typeof item === 'object' && item !== null) {
+        const itemCopy = Object.assign({}, item);
         //проверка на вложенные объекты с таким же типом
-        Object.keys(item).forEach((key) => {
-            const value = item[key];
+        Object.keys(itemCopy).forEach((key) => {
+            const value = itemCopy[key];
             if (typeof value === 'object' && value !== null && !React.isValidElement(value)) {
                 const nestedItem = checkItem(value, getOptionLabel, disabled, isDivider);
                 if (nestedItem) {
-                    if (!item.children) {
-                        item.children = [];
+                    if (!itemCopy.children) {
+                        itemCopy.children = [];
                     }
-                    item.children.push(nestedItem);
-                    delete item[key];
+                    itemCopy.children.push(nestedItem);
+                    delete itemCopy[key];
                 }
             }
         });
         // проверка на наличие пользовательского поля для вывода(передаваемой функции getOptionLabel)
         if (getOptionLabel) {
-            return Object.assign(Object.assign({}, item), { value: getOptionLabel(item), disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+            return Object.assign(Object.assign({}, itemCopy), { value: getOptionLabel(itemCopy), disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
         }
-        if ('value' in item) {
-            return Object.assign(Object.assign({}, item), { disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+        if ('value' in itemCopy) {
+            return Object.assign(Object.assign({}, itemCopy), { disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
         }
-        else if ('name' in item && !('value' in item)) {
-            return Object.assign(Object.assign({}, item), { value: item.name, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+        else if ('name' in itemCopy && !('value' in itemCopy)) {
+            return Object.assign(Object.assign({}, itemCopy), { value: itemCopy.name, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
         }
-        else if ('description' in item && !('value' in item)) {
-            return Object.assign(Object.assign({}, item), { value: item.description, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+        else if ('description' in itemCopy && !('value' in itemCopy)) {
+            return Object.assign(Object.assign({}, itemCopy), { value: itemCopy.description, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
         }
         else {
-            const keys = Object.keys(item);
+            const keys = Object.keys(itemCopy);
             if (keys.length) {
-                const firstValue = item[keys[0]];
-                return Object.assign(Object.assign({}, item), { value: firstValue, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+                const firstValue = itemCopy[keys[0]];
+                return Object.assign(Object.assign({}, itemCopy), { value: firstValue, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
             }
         }
     }
@@ -52,7 +58,19 @@ function checkItem(item, getOptionLabel, disabled, isDivider) {
     }
 }
 export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedItem, variant, onChange, isActive, activeIndex, index, }) => {
-    var _a;
+    var _a, _b;
+    const itemRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    useEffect(() => {
+        const checkOverflow = () => {
+            setShowTooltip(isTextOverflowing(itemRef.current));
+        };
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        return () => {
+            window.removeEventListener('resize', checkOverflow);
+        };
+    }, [item === null || item === void 0 ? void 0 : item.value]);
     const handleItemClick = useCallback((event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -66,7 +84,7 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
         [styles['item-block--active']]: isActive,
     });
     const itemBlock = classNames(styles[`item-block`], styles[`item-block-${variant}`], { [styles[`item-block-${variant}--selected`]]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === (item === null || item === void 0 ? void 0 : item.value) }, { [styles['item-block--disabled']]: item === null || item === void 0 ? void 0 : item.disabled });
-    return (React.createElement("div", { className: itemContainerClasses, onClick: handleItemClick },
+    const itemContent = (React.createElement("div", { className: itemContainerClasses, onClick: handleItemClick },
         React.createElement("div", { className: itemClassess },
             React.createElement("div", { className: itemBlock },
                 variant === 'icons' &&
@@ -74,14 +92,15 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
                     React.cloneElement(item.icon, {
                         strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
                     }),
-                React.createElement("div", { className: styles.item },
+                React.createElement("div", { className: styles.item, ref: itemRef },
                     React.createElement("span", null, item === null || item === void 0 ? void 0 : item.value)),
-                (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === (item === null || item === void 0 ? void 0 : item.value) && (React.createElement(IconCheck10, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: "#0D99FF" }))),
+                (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === (item === null || item === void 0 ? void 0 : item.value) && (React.createElement(IconCheck, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: "#0D99FF" }))),
             (item === null || item === void 0 ? void 0 : item.isDivider) && React.createElement("div", { className: styles.divider })),
         (item === null || item === void 0 ? void 0 : item.children) && (React.createElement("div", { className: styles.nestedMenu }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, childIndex) => {
             var _a;
             return (React.createElement(DropdownListItem, { key: (_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : childIndex, item: child, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, onChange: onChange, isActive: activeIndex === index, activeIndex: activeIndex, index: childIndex }));
         })))));
+    return showTooltip ? (React.createElement(Tooltip, { label: ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toString()) || '', position: "bottom-left" }, itemContent)) : (itemContent);
 };
 export const Dropdown = ({ options, id, label, placeholder, required = false, value, defaultValue, onChange, getOptionLabel, variant = 'text', size = 'lg', style, className, isLeftLabel = false, isDivider = false, disabled = false, readOnly = false, isOpened = false, error = false, helperText, onClick, onBlur, onFocus, onClose, clearable = true, enableAutocomplete = false, noOptionsText = 'Нет вариантов для выбора', }) => {
     const [isOpen, setIsOpen] = useState(isOpened);
@@ -243,9 +262,21 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
             setErrorInputHelperText(helperText !== null && helperText !== void 0 ? helperText : 'Поле обязательно для заполнения');
         }
     };
+    const [showSelectedTooltip, setShowSelectedTooltip] = useState(false);
+    const selectedItemRef = useRef(null);
+    useEffect(() => {
+        const checkOverflow = () => {
+            setShowSelectedTooltip(isTextOverflowing(selectedItemRef.current));
+        };
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        return () => {
+            window.removeEventListener('resize', checkOverflow);
+        };
+    }, [selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value]);
     const getTextField = () => {
-        var _a;
-        return (React.createElement("div", { className: selectedItemClassess },
+        var _a, _b;
+        const textFieldContent = (React.createElement("div", { className: selectedItemClassess, ref: selectedItemRef },
             variant === 'icons' &&
                 (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
                 React.cloneElement(selectedItem.icon, {
@@ -265,6 +296,8 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
                     e.stopPropagation();
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
                 }, onKeyDown: handleKeyDown, autoFocus: true })) : selectedItem ? (selectedItem.value) : (searchValue || ((_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : 'Выберите значение'))));
+        return showSelectedTooltip ? (React.createElement("div", { className: styles.textField },
+            React.createElement(Tooltip, { label: ((_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === null || _b === void 0 ? void 0 : _b.toString()) || '', position: "bottom-left", style: { width: '100% !important' } }, textFieldContent))) : (textFieldContent);
     };
     const getDropdownMenu = () => {
         const optionsToRender = enableAutocomplete && searchValue
@@ -339,9 +372,10 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
         React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled, tabIndex: 0, onKeyDown: handleKeyDown },
             getTextField(),
-            clearable && !readOnly && !disabled && (selectedItem || enableAutocomplete && searchValue) && (React.createElement("div", { className: styles.resetButton },
-                React.createElement(IconClose10, { strokeWidth: "0.2", htmlColor: "var(--text-light)", onClick: handleReset }))),
-            React.createElement("div", { className: styles.dropdownIcon }, !isOpen ? (React.createElement(ChevronDown10, { strokeWidth: size === 'lg' ? '0.5' : '0.3' })) : (React.createElement(ChevronUp10, { strokeWidth: size === 'lg' ? '0.5' : '0.3' }))),
+            React.createElement("div", { className: styles.actionButtons },
+                clearable && !readOnly && !disabled && (selectedItem || enableAutocomplete && searchValue) && (React.createElement("div", { className: styles.resetButton },
+                    React.createElement(IconClose, { strokeWidth: "0.2", htmlColor: "var(--text-light)", onClick: handleReset }))),
+                React.createElement("div", { className: styles.dropdownIcon }, !isOpen ? (React.createElement(ChevronDown, { strokeWidth: size === 'lg' ? '0.5' : '0.3' })) : (React.createElement(ChevronUp, { strokeWidth: size === 'lg' ? '0.5' : '0.3' })))),
             getDropdownMenu()),
         errorInput && errorInputHelperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText !== null && helperText !== void 0 ? helperText : errorInputHelperText))));
 };

package/dist/components/Dropdown/Dropdown.module.css

@@ -1,7 +1,6 @@
 .dropdown--container {
   position: relative;
   width: 100%;
-  max-width: 260px;
 }
 .dropdown--container-left {
   display: flex;
@@ -35,17 +34,15 @@
   line-height: 16.5px;
   border-radius: 10px;
   cursor: pointer;
-  padding: 10px 15px;
+  padding: 6px 12px;
   transition: all 0.3s ease;
   background-color: transparent;
   color: var(--text-dark);
   border: 1px solid var(--grey-mediumLight);
-  /* mix-blend-mode: multiply; */
   display: flex;
   align-items: center;
   gap: 20px;
   justify-content: space-between;
-  /* min-width: fit-content; */
   position: relative;
   width: 100%;
 }
@@ -100,10 +97,15 @@
 .button:focus-visible {
   outline: none;
 }
-
+.actionButtons {
+  display: flex;
+  gap: 0px;
+  align-items: center;
+  margin-right: -6px;
+}
 .resetButton,
 .dropdownIcon {
-  position: absolute;
+  /* position: absolute; */
   background: none;
   border: none;
   cursor: pointer;
@@ -143,6 +145,20 @@
   overflow-x: hidden;
 }
 
+.textField{
+  width: 100%;
+  overflow: hidden;
+}
+
+.textField > :first-child {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  display: block;
+}
+
 .inlineSearchInput {
   border: none;
   outline: none;
@@ -255,13 +271,13 @@
 
 .item-selected {
   color: var(--text-dark);
-  width: 80%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
   text-align: left;
   position: relative;
+  flex: 1;
 }
 
 .item-selected .inlineSearchInput {

package/dist/components/FileItem/FileItem.js

@@ -3,7 +3,7 @@ import styles from './FileItem.module.css';
 import { Typography } from '../Typography/Typography';
 import { ProgressBar } from '../ProgressBar/ProgressBar';
 import { IconButton } from '../IconButton/IconButton';
-import { IconClose10, IconDownload, IconFile } from '../../Icons';
+import { IconClose, IconDownload, IconFile } from '../../Icons';
 import { Tooltip } from '../Tooltip/Tooltip';
 import classNames from 'classnames';
 export const FileItem = ({ file, loading = false, error = '', onDownload, onDelete, canDelete = true, canDownload = true, style, isAddedFile, isRejectedFile, }) => {
@@ -104,8 +104,8 @@ export const FileItem = ({ file, loading = false, error = '', onDownload, onDele
                         React.createElement(Typography, { variant: "Body1", color: "var(--text-dark)" }, croppedName(file.filename)))) : (React.createElement(Typography, { variant: "Body1", color: "var(--text-dark)" }, croppedName(file.filename))),
                     file.size !== 0 && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `${file.size ? (file.size / 1024).toFixed(1) : 0} кБ`)))),
             React.createElement("div", { className: styles['fileItemActions'] },
-                !(isAddedFile || isRejectedFile) && canDownload && (React.createElement(IconButton, { icon: React.createElement(IconDownload, null), onClick: (e) => handleDownloadClick(e, file), color: "var(--icons-grey)" })),
-                canDelete && (React.createElement(IconButton, { icon: React.createElement(IconClose10, null), onClick: (e) => handleDeleteClick(e, file.id || ''), color: "var(--icons-grey)" })))),
+                !(isAddedFile || isRejectedFile) && canDownload && (React.createElement(IconButton, { className: styles.fileIcon, icon: React.createElement(IconDownload, null), onClick: (e) => handleDownloadClick(e, file), color: "var(--icons-grey)", size: "sm" })),
+                canDelete && (React.createElement(IconButton, { className: styles.fileIcon, icon: React.createElement(IconClose, null), onClick: (e) => handleDeleteClick(e, file.id || ''), color: "var(--icons-grey)", size: "sm" })))),
         loading && !isLoadingFinished && (React.createElement(ProgressBar, { animated: true, size: "sm", value: 100, setIsLoadingFinished: setIsLoadingFinished, animationDuration: animationDuration })),
         error && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)" }, error))));
 };

package/dist/components/FileItem/FileItem.module.css

@@ -21,7 +21,7 @@
   flex-direction: row;
   gap: 5px;
   flex-grow: 1;
-  align-items: flex-start;
+  align-items: center;
   overflow: hidden;
 }
 
@@ -38,7 +38,7 @@
 }
 
 .fileIcon svg path {
-  stroke-width: 0.8;
+  stroke-width: 0.5 !important;
 }
 
 .fileItem_attached {

package/dist/components/FileLoader/FileLoader.js

@@ -154,7 +154,7 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
     return (React.createElement("section", { className: classNames(styles['fileLoader'], className), style: style },
         React.createElement("div", Object.assign({}, getRootProps({ className: `${styles['dropzone']} ${!canAdd ? styles['disabled'] : ''}` })),
             React.createElement("input", Object.assign({}, getInputProps())),
-            React.createElement(IconUpload, { htmlColor: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)' }),
+            React.createElement(IconUpload, { htmlColor: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)', width: '34', height: '34' }),
             React.createElement(Typography, { variant: "Body1", color: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)', style: { textAlign: 'center' } }, lng === 'ru' || lng.includes('ru') ? (React.createElement(React.Fragment, null,
                 React.createElement("span", { style: { textDecoration: 'underline' } }, "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043D\u0430 \u043E\u0431\u043B\u0430\u0441\u0442\u044C"),
                 " ",