kamotive_ui 1.2.23 → 1.2.24

package/dist/components/DateInput/DateInput.js

@@ -13,7 +13,7 @@ import { ChevronLeft } from '../../Icons/ChevronLeft/ChevronLeft';
 import { Button } from '../Button/Button';
 registerLocale('ru', ru);
 registerLocale('en', enUS);
-const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, className, disabled = false, readOnly = false, dateFormat = 'dd.MM.yyyy' }, ref) => {
+const CustomInput = forwardRef(({ value = '', lng, 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('');
@@ -26,6 +26,8 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
         month: { start: 3, end: 5 },
         year: { start: 6, end: 10 },
     };
+    const placeholderText = lng === 'ru' ? 'Не выбрано' : 'Not selected';
+    const displayValue = value || placeholderText;
     const selectDatePart = (part) => {
         setSelectedPart(part);
         setTempInput('');
@@ -52,18 +54,20 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
         if (!inputRef.current)
             return;
         setHasFocus(true);
-        const cursorPosition = inputRef.current.selectionStart || 0;
-        let newSelectedPart;
-        if (cursorPosition <= positions.day.end) {
-            newSelectedPart = 'day';
-        }
-        else if (cursorPosition <= positions.month.end) {
-            newSelectedPart = 'month';
-        }
-        else {
-            newSelectedPart = 'year';
+        if (value) {
+            const cursorPosition = inputRef.current.selectionStart || 0;
+            let newSelectedPart;
+            if (cursorPosition <= positions.day.end) {
+                newSelectedPart = 'day';
+            }
+            else if (cursorPosition <= positions.month.end) {
+                newSelectedPart = 'month';
+            }
+            else {
+                newSelectedPart = 'year';
+            }
+            selectDatePart(newSelectedPart);
         }
-        selectDatePart(newSelectedPart);
     };
     const handleKeyDown = (e) => {
         if (!inputRef.current || !onDateChange || selectedPart === null)
@@ -166,7 +170,9 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
     };
     const handleFocus = () => {
         setHasFocus(true);
-        selectDatePart('day');
+        if (value) {
+            selectDatePart('day');
+        }
     };
     const handleBlur = () => {
         setHasFocus(false);
@@ -193,7 +199,7 @@ 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, onChange: () => { }, readOnly: readOnly, disabled: disabled, className: className }));
+    return (React.createElement("input", { ref: inputRef, value: input || displayValue, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onChange: () => { }, readOnly: !value || 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, 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, {
@@ -212,7 +218,7 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
         [styles['label--left']]: isLeftLabel,
         [styles['label--required']]: required,
     });
-    const [selectedDate, setSelectedDate] = useState(value ? new Date(value) : new Date());
+    const [selectedDate, setSelectedDate] = useState(value ? new Date(value) : null);
     const [isMonthPickerOpen, setIsMonthPickerOpen] = useState(false);
     const datePickerRef = useRef(null);
     const inputRef = useRef(null);
@@ -359,6 +365,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, dateFormat: dateFormat }) })),
+            }), { customInput: React.createElement(CustomInput, { ref: inputRef, lng: lng, 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/DateInput/DateInput.module.css

@@ -1,7 +1,5 @@
 .wrapper--input {
 	position: relative;
-	max-width: 267px;
-	width: 100%;
 }
 
 .wrapper--input-label {
@@ -35,6 +33,7 @@
 	border-radius: 10px;
 	display: inline-flex;
 	width: 100%;
+	box-sizing: border-box;
 }
 
 .input--left {
@@ -93,7 +92,7 @@
 	color: var(--text-dark);
 }
 
-.label--default .lg {
+.label--default.lg {
 	font-size: 12px;
 }
 
@@ -101,7 +100,7 @@
 	font-size: 10px;
 }
 
-.label--default .sm {
+.label--default.sm {
 	font-size: 16px;
 }
 
@@ -115,11 +114,11 @@
 	font-size: 14px;
 }
 
-.label--left .md {
+.label--left.md {
 	font-size: 12px;
 }
 
-.label--left .sm {
+.label--left.sm {
 	font-size: 10px;
 }
 

package/dist/components/Dropdown/Dropdown.d.ts

@@ -5,7 +5,7 @@ import { DropdownProps, TOptions } from '../../types';
  */
 export interface DropdownListItemProps {
     item: TOptions | null;
-    getOptionLabel?: ((option: TOptions) => string);
+    getOptionLabel?: (option: TOptions) => string;
     size: 'md' | 'lg';
     selectedItem: TOptions | null;
     variant?: 'icons' | 'text';
@@ -13,6 +13,7 @@ export interface DropdownListItemProps {
     isActive?: boolean;
     activeIndex?: number;
     index?: number;
+    isChild?: boolean;
 }
 export declare const DropdownListItem: FC<DropdownListItemProps>;
 export declare const Dropdown: FC<DropdownProps>;

package/dist/components/Dropdown/Dropdown.js

@@ -12,26 +12,79 @@ const isTextOverflowing = (element) => {
         return false;
     return element.scrollWidth > element.clientWidth;
 };
+const getComparisonValue = (item, getOptionLabel) => {
+    if (!item)
+        return null;
+    if (getOptionLabel && typeof getOptionLabel === 'function') {
+        return getOptionLabel(item);
+    }
+    // Если есть value, используем его
+    if (item.value !== undefined) {
+        return item.value;
+    }
+    // Если есть id, используем его для сравнения
+    if (item.id !== undefined) {
+        return item.id;
+    }
+    // Иначе используем сам объект
+    return item;
+};
 function checkItem(item, getOptionLabel, disabled, isDivider) {
     if (typeof item === 'object' && item !== null) {
         const itemCopy = Object.assign({}, item);
-        //проверка на вложенные объекты с таким же типом
-        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);
+        // Проверяем только поле value на вложенные объекты
+        if (getOptionLabel) {
+            const labelResult = getOptionLabel(itemCopy);
+            // Если getOptionLabel возвращает массив
+            if (Array.isArray(labelResult)) {
+                if (!itemCopy.children) {
+                    itemCopy.children = [];
+                }
+                labelResult.forEach((labelItem) => {
+                    const processedLabelItem = checkItem(labelItem, getOptionLabel, disabled, isDivider);
+                    if (processedLabelItem) {
+                        itemCopy.children.push(processedLabelItem);
+                    }
+                });
+                // Для родительского элемента используем первый элемент массива или name
+                const displayValue = labelResult.length > 0
+                    ? typeof labelResult[0] === 'object'
+                        ? labelResult[0].name || labelResult[0].value || 'Группа'
+                        : labelResult[0]
+                    : itemCopy.name || 'Группа опций';
+                return Object.assign(Object.assign({}, itemCopy), { value: displayValue, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+            }
+            else {
+                // Обычная обработка, если getOptionLabel возвращает строку
+                return Object.assign(Object.assign({}, itemCopy), { value: labelResult, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+            }
+        }
+        if (!getOptionLabel && 'value' in itemCopy && itemCopy.value !== null && !React.isValidElement(itemCopy.value)) {
+            if (Array.isArray(itemCopy.value)) {
+                if (!itemCopy.children) {
+                    itemCopy.children = [];
+                }
+                // Обрабатываем каждый элемент массива
+                itemCopy.value.forEach((nestedItem) => {
+                    const processedNestedItem = checkItem(nestedItem, getOptionLabel, disabled, isDivider);
+                    if (processedNestedItem) {
+                        itemCopy.children.push(processedNestedItem);
+                    }
+                });
+                // Для родительского элемента используем name или первое значение
+                itemCopy.value = itemCopy.name || 'Группа опций';
+            }
+            else if (typeof itemCopy.value === 'object') {
+                const nestedItem = checkItem(itemCopy.value, getOptionLabel, disabled, isDivider);
                 if (nestedItem) {
                     if (!itemCopy.children) {
                         itemCopy.children = [];
                     }
                     itemCopy.children.push(nestedItem);
-                    delete itemCopy[key];
+                    // Заменяем value на обработанное значение
+                    itemCopy.value = nestedItem.value;
                 }
             }
-        });
-        // проверка на наличие пользовательского поля для вывода(передаваемой функции getOptionLabel)
-        if (getOptionLabel) {
-            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 itemCopy) {
             return Object.assign(Object.assign({}, itemCopy), { disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
@@ -57,7 +110,7 @@ function checkItem(item, getOptionLabel, disabled, isDivider) {
         return null;
     }
 }
-export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedItem, variant, onChange, isActive, activeIndex, index, }) => {
+export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedItem, variant, onChange, isActive, activeIndex, index, isChild = false, }) => {
     var _a, _b;
     const itemRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
@@ -70,20 +123,36 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
         return () => {
             window.removeEventListener('resize', checkOverflow);
         };
-    }, [item === null || item === void 0 ? void 0 : item.value]);
+    }, [getComparisonValue(item, getOptionLabel)]);
     const handleItemClick = useCallback((event) => {
         event.preventDefault();
         event.stopPropagation();
         if (!(item === null || item === void 0 ? void 0 : item.disabled)) {
-            onChange(event, item);
+            if (!(item === null || item === void 0 ? void 0 : item.children) || item.children.length === 0) {
+                onChange(event, item); // Если у элемента есть дети, не выбираем родительский элемент
+            }
         }
     }, [item, onChange]);
-    const itemContainerClasses = classNames(styles[`item--container`], { [styles['item--container--active']]: isActive });
+    const hasChildren = (item === null || item === void 0 ? void 0 : item.children) && item.children.length > 0;
+    const itemContainerClasses = classNames(styles[`item--container`], {
+        [styles['item--container--active']]: isActive,
+        [styles['item--container--parent']]: hasChildren && !isChild,
+        [styles['item--container--child']]: isChild,
+    });
     const itemClassess = classNames(styles[`item-block`], styles[`button--${size}`], {
         [styles['item-block--disabled']]: item === null || item === void 0 ? void 0 : item.disabled,
         [styles['item-block--active']]: isActive,
+        [styles['item-block--parent']]: hasChildren && !isChild, // Стиль для родительских элементов
+        [styles['item-block--child']]: isChild, // Стиль для дочерних элементов
+    });
+    const itemBlock = classNames(styles[`item-block`], styles[`item-block-${variant}`], 
+    // { [styles[`item-block-${variant}--selected`]]: selectedItem?.value === item?.value },
+    {
+        [styles[`item-block-${variant}--selected`]]: getComparisonValue(selectedItem, getOptionLabel) === getComparisonValue(item, getOptionLabel),
+        [styles['item-block--disabled']]: item === null || item === void 0 ? void 0 : item.disabled,
+        [styles['item-block--parent']]: hasChildren && !isChild,
+        [styles['item-block--child']]: isChild,
     });
-    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 });
     const itemContent = (React.createElement("div", { className: itemContainerClasses, onClick: handleItemClick },
         React.createElement("div", { className: itemClassess },
             React.createElement("div", { className: itemBlock },
@@ -93,14 +162,15 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
                         strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
                     }),
                 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(IconCheck, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: "#0D99FF" }))),
+                    React.createElement("span", null, getComparisonValue(item, getOptionLabel))),
+                !hasChildren &&
+                    getComparisonValue(selectedItem, getOptionLabel) === getComparisonValue(item, getOptionLabel) && (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) => {
+        hasChildren && (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 (React.createElement(DropdownListItem, { key: (_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : `${index}-${childIndex}`, item: child, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, onChange: onChange, isActive: false, activeIndex: activeIndex, index: childIndex, isChild: true }));
         })))));
-    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);
+    return showTooltip ? (React.createElement(Tooltip, { label: ((_b = getComparisonValue(item, getOptionLabel)) === 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);
@@ -121,7 +191,7 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         [styles['dropdown--container-helperText']]: errorInput,
     });
     const buttonClassess = classNames(styles.button, styles[`button--${size}`], {
-        [styles['button-item--selected']]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) && !disabled,
+        [styles['button-item--selected']]: getComparisonValue(selectedItem, getOptionLabel) && !disabled,
         [styles['button--readOnly']]: readOnly,
         [styles['button--disabled']]: disabled,
         [styles['button--error']]: errorInput,
@@ -160,7 +230,9 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         const newIsOpen = !isOpen;
         setIsOpen(newIsOpen);
         if (newIsOpen && enableAutocomplete) {
-            const value = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) ? selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value.toString() : searchValue;
+            const value = getComparisonValue(selectedItem, getOptionLabel)
+                ? getComparisonValue(selectedItem, getOptionLabel).toString()
+                : searchValue;
             setSearchValue(value);
             setFilteredOptions(modifiedOptions);
             requestAnimationFrame(() => {
@@ -177,7 +249,7 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         event.preventDefault();
         event.stopPropagation();
         const newEvent = Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: item }) });
-        if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== (item === null || item === void 0 ? void 0 : item.value)) {
+        if (getComparisonValue(selectedItem, getOptionLabel) !== getComparisonValue(item, getOptionLabel)) {
             setSelectedItem(item);
             setIsOpen(false);
             onChange === null || onChange === void 0 ? void 0 : onChange(newEvent, item);
@@ -209,10 +281,10 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         }
         if (enableAutocomplete &&
             event.target instanceof HTMLInputElement &&
-            (event.key !== 'ArrowDown' &&
-                event.key !== 'ArrowUp' &&
-                event.key !== 'Enter' &&
-                event.key !== 'Escape')) {
+            event.key !== 'ArrowDown' &&
+            event.key !== 'ArrowUp' &&
+            event.key !== 'Enter' &&
+            event.key !== 'Escape') {
             return;
         }
         switch (event.key) {
@@ -245,14 +317,12 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
     const handleReset = (event) => {
         event.preventDefault();
         event.stopPropagation();
-        const startValue = defaultValue
-            ? checkItem(defaultValue)
-            : null;
+        const startValue = defaultValue ? checkItem(defaultValue) : null;
         setSelectedItem(startValue !== null && startValue !== void 0 ? startValue : null);
         if (!enableAutocomplete) {
             setIsOpen(false);
         }
-        setSearchValue("");
+        setSearchValue('');
         setFilteredOptions(modifiedOptions);
         onChange === null || onChange === void 0 ? void 0 : onChange(event, startValue !== null && startValue !== void 0 ? startValue : null);
         onClose === null || onClose === void 0 ? void 0 : onClose(event);
@@ -273,7 +343,7 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         return () => {
             window.removeEventListener('resize', checkOverflow);
         };
-    }, [selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value]);
+    }, [getComparisonValue(selectedItem, getOptionLabel)]);
     const getTextField = () => {
         var _a, _b;
         const textFieldContent = (React.createElement("div", { className: selectedItemClassess, ref: selectedItemRef },
@@ -282,7 +352,9 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
                 React.cloneElement(selectedItem.icon, {
                     strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
                 }),
-            isOpen && enableAutocomplete ? (React.createElement("input", { ref: inputRef, type: "text", value: searchValue, className: styles.inlineSearchInput, onChange: handleSearchChange, placeholder: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) ? selectedItem.value.toString() : 'Поиск...', onClick: (e) => {
+            isOpen && enableAutocomplete ? (React.createElement("input", { ref: inputRef, type: "text", value: searchValue, className: styles.inlineSearchInput, onChange: handleSearchChange, placeholder: getComparisonValue(selectedItem, getOptionLabel)
+                    ? getComparisonValue(selectedItem, getOptionLabel).toString()
+                    : 'Поиск...', onClick: (e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -295,18 +367,16 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
                 }, onBlur: (e) => {
                     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 : 'Выберите значение'))));
+                }, onKeyDown: handleKeyDown, autoFocus: true })) : selectedItem ? (getComparisonValue(selectedItem, getOptionLabel)) : (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);
+            React.createElement(Tooltip, { label: ((_b = getComparisonValue(selectedItem, getOptionLabel)) === null || _b === void 0 ? void 0 : _b.toString()) || '', position: "bottom-left", style: { width: '100% !important' } }, textFieldContent))) : (textFieldContent);
     };
     const getDropdownMenu = () => {
-        const optionsToRender = enableAutocomplete && searchValue
-            ? filteredOptions
-            : modifiedOptions;
+        const optionsToRender = enableAutocomplete && searchValue ? filteredOptions : modifiedOptions;
         const menu = isOpen && (React.createElement("div", { className: dropdownClassess }, optionsToRender && optionsToRender.length > 0 ? (optionsToRender.map((optionsToRender, index) => {
             var _a;
             return (React.createElement(DropdownListItem, { key: (_a = optionsToRender === null || optionsToRender === void 0 ? void 0 : optionsToRender.key) !== null && _a !== void 0 ? _a : index, item: optionsToRender, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
-        })) : (React.createElement("div", { className: `${styles['item-container']} ${styles['item-block']}`, style: { paddingLeft: "15px" } }, noOptionsText))));
+        })) : (React.createElement("div", { className: `${styles['item-container']} ${styles['item-block']}`, style: { paddingLeft: '15px' } }, noOptionsText))));
         return isOpen ? menu : null;
     };
     useEffect(() => {
@@ -321,13 +391,13 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
             const text = (_a = label !== null && label !== void 0 ? label : placeholder) !== null && _a !== void 0 ? _a : '';
             let newWidth;
             if (!isLeftLabel) {
-                const textWidth = Math.max((text || '').length, (((_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === null || _b === void 0 ? void 0 : _b.toString()) || '').length);
+                const textWidth = Math.max((text || '').length, (((_b = getComparisonValue(selectedItem, getOptionLabel)) === null || _b === void 0 ? void 0 : _b.toString()) || '').length);
                 const inPixel = size === 'lg' ? 11 : 9;
                 newWidth = textWidth * inPixel;
             }
             else {
                 const inPixel = size === 'lg' ? 11 : 9;
-                const selectedValue = ((_c = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === null || _c === void 0 ? void 0 : _c.toString()) || '';
+                const selectedValue = ((_c = getComparisonValue(selectedItem, getOptionLabel)) === null || _c === void 0 ? void 0 : _c.toString()) || '';
                 newWidth = (text.length + selectedValue.length) * inPixel + 40;
             }
             setContainerWidth(newWidth);
@@ -341,7 +411,8 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         if (options) {
             const modifiedOptions = options.map((option, index) => {
                 const modifiedOption = checkItem === null || checkItem === void 0 ? void 0 : checkItem(option, getOptionLabel, disabled, isDivider);
-                if (modifiedOption && modifiedOption.value === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value)) {
+                if (modifiedOption &&
+                    getComparisonValue(modifiedOption, getOptionLabel) === getComparisonValue(selectedItem, getOptionLabel)) {
                     setActiveIndex(index);
                 }
                 return modifiedOption;
@@ -373,7 +444,7 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled, tabIndex: 0, onKeyDown: handleKeyDown },
             getTextField(),
             React.createElement("div", { className: styles.actionButtons },
-                clearable && !readOnly && !disabled && (selectedItem || enableAutocomplete && searchValue) && (React.createElement("div", { className: styles.resetButton },
+                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()),

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

@@ -145,7 +145,7 @@
   overflow-x: hidden;
 }
 
-.textField{
+.textField {
   width: 100%;
   overflow: hidden;
 }
@@ -173,16 +173,18 @@
 }
 
 .item--container {
-  padding: 0.5em 0.5em;
-  width: 87%;
-  margin: auto;
+  padding: 6px;
+  width: 89%;
+  /* margin: auto; */
+  margin-left: 10px;
 }
 
 .item--container:hover,
 .item--container--active {
   background-color: rgba(120, 120, 128, 0.08);
   border-radius: 5px;
-  margin: auto;
+  width: 89%;
+  /* margin: auto; */
 }
 
 .item-block {
@@ -312,3 +314,26 @@
   text-overflow: ellipsis;
   color: var(--error-main);
 }
+
+/* Стили для родительских элементов */
+.item-block--parent {
+  font-weight: 600;
+  cursor: default;
+}
+
+.item--container--child {
+  width: 100%;
+}
+.item--container--child:hover {
+  width: 100%;
+}
+
+/* Стили для дочерних элементов */
+.item-block--child {
+  font-weight: 400;
+  cursor: pointer;
+  padding-left: 6px;
+  display: grid;
+  grid-template-columns: 1fr 20px;
+  justify-content: space-between;
+}

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { LinkProps } from '../../types';
+export declare const Link: FC<LinkProps>;

package/dist/components/Link/Link.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './Link.module.css';
+export const Link = ({ href, children, title, className, style, underline = 'hover' }) => {
+    const stylesUnderline = underline === 'hover' && styles.linkHover;
+    return (React.createElement("a", { href: href, title: title, className: classNames(styles.link, stylesUnderline, className), style: style }, children));
+};

package/dist/components/Link/Link.module.css

@@ -0,0 +1,11 @@
+.link {
+    color: var(--text-dark)
+}
+
+.linkHover {
+    text-decoration: none;
+}
+
+.linkHover:hover {
+    text-decoration: underline;
+}

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { ListItem as ListItem } from './components/ListItem/ListItem';
 export { Breadcrumb as Breadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { Breadcrumbs as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { Tooltip as Tooltip } from './components/Tooltip/Tooltip';
-export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, FileAttachProps, FileListAttaсhedProps, FileItemProps, FileLoaderProps, SpinnerProps, DialogProps, IconButtonProps, BaseListProps, ListProps, ListItemProps, BreadcrumbProps, BreadcrumbsProps, TooltipProps, } from './types';
+export { Link as Link } from './components/Link/Link';
+export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, FileAttachProps, FileListAttaсhedProps, FileItemProps, FileLoaderProps, SpinnerProps, DialogProps, IconButtonProps, BaseListProps, ListProps, ListItemProps, BreadcrumbProps, BreadcrumbsProps, TooltipProps, LinkProps, } from './types';
 import './fonts.css';
 import './colors.css';

package/dist/index.js

@@ -26,5 +26,6 @@ export { ListItem as ListItem } from './components/ListItem/ListItem';
 export { Breadcrumb as Breadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { Breadcrumbs as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { Tooltip as Tooltip } from './components/Tooltip/Tooltip';
+export { Link as Link } from './components/Link/Link';
 import './fonts.css';
 import './colors.css';

package/dist/types/index.d.ts

@@ -163,15 +163,7 @@ export interface ToggleButtonProps {
     label?: string;
 }
 export type BaseOptions = {
-    id?: string;
-    key?: string | number;
-    name?: string;
-    description?: string;
-    value?: string | number;
-    icon?: React.JSX.Element;
-    disabled?: boolean;
-    isDivider?: boolean;
-    children?: TOptions[];
+    [key: string]: any;
 };
 export type TOptions<T = {}> = BaseOptions & T;
 export interface DropdownProps {
@@ -192,7 +184,7 @@ export interface DropdownProps {
     /** Callback, который будет вызван при изменении значения */
     onChange?: (event: any, value: string | number | TOptions | null) => void;
     /** Функция для получения текста опции */
-    getOptionLabel?: (option: TOptions) => keyof TOptions;
+    getOptionLabel?: (option: TOptions) => string;
     /** Вариaнты выпадающего списка(текст + иконка, текст)' */
     variant?: 'icons' | 'text';
     /** Размер */
@@ -587,3 +579,17 @@ export interface TooltipProps {
     /** Подсказка, следующая за курсором */
     followCursor?: boolean;
 }
+export interface LinkProps {
+    /**Гипертекстовая ссылка */
+    href: string;
+    /** Дочерние элементы */
+    children: ReactNode;
+    /**Заголовок, содержащий дополнительную информацию о ссылке */
+    title?: string;
+    /** Дополнительный класс */
+    className?: string;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
+    /**Подчеркивание */
+    underline?: 'hover' | 'underline';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.23",
+  "version": "1.2.24",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [