kamotive_ui 2.3.26 → 3.6.26

package/dist/components/Dropdown/Dropdown.js

@@ -26,9 +26,15 @@ const getComparisonValue = (item, getOptionLabel) => {
         if ('id' in item)
             return item.id;
     }
-    // Иначе используем сам объект
     return item;
 };
+const getItemId = (item) => {
+    if (!item || typeof item !== 'object')
+        return null;
+    if ('id' in item)
+        return item.id;
+    return null;
+};
 function checkItem(item, getOptionLabel, disabled, isDivider) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     if (typeof item === 'string' || typeof item === 'number') {
@@ -109,7 +115,7 @@ function checkItem(item, getOptionLabel, disabled, isDivider) {
     }
     return null;
 }
-export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedItem, variant, onChange, isActive, activeIndex, index, isChild = false, }) => {
+export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedItem, variant, onChange, isActive, activeIndex, index, isChild = false, testId }) => {
     var _a, _b;
     const itemRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
@@ -140,9 +146,12 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
     }, [item, onChange]);
     const hasChildren = item !== null && typeof item === 'object' && 'children' in item && Array.isArray(item.children) && item.children.length > 0;
     const isDisabled = item !== null && typeof item === 'object' && 'disabled' in item && item.disabled;
+    const itemId = getItemId(item);
     const isSelectedItem = Array.isArray(selectedItem)
-        ? selectedItem.some((i) => getComparisonValue(i, getOptionLabel) === getComparisonValue(item, getOptionLabel))
-        : getComparisonValue(selectedItem, getOptionLabel) === getComparisonValue(item, getOptionLabel);
+        ? selectedItem.some((i) => itemId !== null ? getItemId(i) === itemId : getComparisonValue(i, getOptionLabel) === getComparisonValue(item, getOptionLabel))
+        : itemId !== null
+            ? getItemId(selectedItem) === itemId
+            : getComparisonValue(selectedItem, getOptionLabel) === getComparisonValue(item, getOptionLabel);
     const itemContainerClasses = classNames(styles[`item--container`], {
         [styles['item--container--active']]: isActive,
         [styles['item--container--parent']]: hasChildren && !isChild,
@@ -163,7 +172,7 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
         [styles['item-block--child']]: isChild,
     });
     const itemData = item !== null && typeof item === 'object' ? item : null;
-    const itemContent = (React.createElement("div", { className: itemContainerClasses, onClick: handleItemClick },
+    const itemContent = (React.createElement("div", { className: itemContainerClasses, onClick: handleItemClick, "data-test-id": `${testId}-item` },
         React.createElement("div", { className: itemClassess },
             React.createElement("div", { className: itemBlock },
                 variant === 'icons' && (itemData === null || itemData === void 0 ? void 0 : itemData.icon) &&
@@ -171,18 +180,21 @@ 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, getComparisonValue(item, getOptionLabel))),
-                !hasChildren && isSelectedItem && (React.createElement(IconCheck, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: "#0D99FF" }))),
+                    React.createElement("span", { "data-test-id": `${testId}-item-title` }, getComparisonValue(item, getOptionLabel))),
+                !hasChildren && isSelectedItem && (React.createElement("span", { "data-test-id": `${testId}-checked-icon`, style: { display: 'inline-flex' } },
+                    React.createElement(IconCheck, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: "#0D99FF" })))),
             (itemData === null || itemData === void 0 ? void 0 : itemData.isDivider) && React.createElement("div", { className: styles.divider })),
-        hasChildren && (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, "data-test-id": `${testId}-nested-block` }, (_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.id) !== 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 (React.createElement(DropdownListItem, { key: (_a = child === null || child === void 0 ? void 0 : child.id) !== 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, testId: `${testId}-nested-${childIndex}` }));
         })))));
-    return showTooltip ? (React.createElement(Tooltip, { label: ((_b = getComparisonValue(item, getOptionLabel)) === 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", testId: `${testId}`, className: variant === 'filter' ? styles.filterTooltipWidth : '' }, itemContent)) : (itemContent);
 };
-export const Dropdown = ({ options, id, label, placeholder, required = false, value, defaultValue, onChange, showLoadMore = false, loadMore, getOptionLabel, variant = 'text', size = 'lg', style, className, isLeftLabel = false, isDivider = false, disabled = false, readOnly = false, isOpened = false, error = false, helperText, onOpen, onClick, onBlur, onFocus, onClose, clearable = true, enableAutocomplete = false, onSearch, isLoadMoreLoading, isSearchLoading, noOptionsText = 'Нет вариантов для выбора', lng = 'ru', multiple = false, limitTags = 1, }) => {
+export const Dropdown = ({ options, id, label, placeholder, required = false, value, defaultValue, onChange, showLoadMore = false, loadMore, getOptionLabel, variant = 'text', size = 'lg', style, className, isLeftLabel = false, isDivider = false, disabled = false, readOnly = false, isOpened = false, error = false, helperText, onOpen, onClick, onBlur, onFocus, onClose, clearable = true, enableAutocomplete = false, onSearch, isOptionsLoading, isSearchLoading, noOptionsText, lng = 'ru', multiple = false, limitTags = 1, testId = 'default' }) => {
     const inputRef = useRef(null);
     const containerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const hoveredIndexRef = useRef(-1);
     const onCloseRef = useRef(onClose);
     const labelChipRef = useRef(new Map());
     const selectedItemRef = useRef(null);
@@ -266,6 +278,14 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         setIsOpen(newIsOpen);
         if (newIsOpen) {
             onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
+            const currentItem = multiple ? null : selectedItem;
+            const initialIndex = currentItem
+                ? displayOptions.findIndex((opt) => {
+                    const id = getItemId(opt);
+                    return id !== null ? id === getItemId(currentItem) : getComparisonValue(opt, getOptionLabel) === getComparisonValue(currentItem, getOptionLabel);
+                })
+                : -1;
+            setActiveIndex(initialIndex);
             if (enableAutocomplete && onChange) {
                 const selectedValue = ((_a = getComparisonValue(selectedItem, getOptionLabel)) === null || _a === void 0 ? void 0 : _a.toString()) || '';
                 setIsInitialOpen(true);
@@ -280,6 +300,7 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         else if (!newIsOpen) {
             onClose === null || onClose === void 0 ? void 0 : onClose(event);
             setSearchValue('');
+            hoveredIndexRef.current = -1;
         }
     };
     const onChangeHandler = (event, item) => {
@@ -289,23 +310,32 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
             setErrorInput(false);
             setSearchValue('');
             setSelectedItems((selectedItems) => {
-                const isSelected = selectedItems.some((i) => getComparisonValue(i, getOptionLabel) === getComparisonValue(item, getOptionLabel));
-                const newSelectedItems = isSelected ?
-                    selectedItems.filter((i) => getComparisonValue(i, getOptionLabel) !== getComparisonValue(item, getOptionLabel)) :
-                    [...selectedItems, item];
+                const itemId = getItemId(item);
+                const isSame = (i) => itemId !== null
+                    ? getItemId(i) === itemId
+                    : getComparisonValue(i, getOptionLabel) === getComparisonValue(item, getOptionLabel);
+                const isSelected = selectedItems.some(isSame);
+                const newSelectedItems = isSelected
+                    ? selectedItems.filter((i) => !isSame(i))
+                    : [...selectedItems, item];
                 const newEvent = Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: newSelectedItems }) });
-                onChange === null || onChange === void 0 ? void 0 : onChange(newEvent, newSelectedItems);
+                onChange === null || onChange === void 0 ? void 0 : onChange(event, newSelectedItems);
                 return newSelectedItems;
             });
             return;
         }
         const newEvent = Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: item }) });
-        if (getComparisonValue(selectedItem, getOptionLabel) !== getComparisonValue(item, getOptionLabel)) {
+        const selectedId = getItemId(selectedItem);
+        const itemId = getItemId(item);
+        const isDifferent = selectedId !== null && itemId !== null
+            ? selectedId !== itemId
+            : getComparisonValue(selectedItem, getOptionLabel) !== getComparisonValue(item, getOptionLabel);
+        if (isDifferent) {
             setSelectedItem(item);
             setIsOpen(false);
             setSearchValue('');
             onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
-            onChange === null || onChange === void 0 ? void 0 : onChange(newEvent, item);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, item);
             onClose === null || onClose === void 0 ? void 0 : onClose(event);
         }
         if (item) {
@@ -316,7 +346,11 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         }
     };
     const handleSearchChange = (event) => {
-        const value = event.target.value;
+        let value = event.target.value;
+        const regex = /(\S+)\.\s+$/; //проверка автоматического подставления точки после двойных пробелов
+        if (regex.test(value)) {
+            value = value.replace(regex, '$1  ');
+        }
         event.preventDefault();
         event.stopPropagation();
         if (value === '') {
@@ -332,6 +366,17 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
     };
     //для выбора опции из списка с клавиатуры
     const handleKeyDown = (event) => {
+        if (event.target instanceof HTMLInputElement) {
+            const inputTarget = event.target;
+            if (event.key === ' ' && !inputTarget.value.trim()) {
+                event.preventDefault();
+                return;
+            }
+        }
+        if (isOpen && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         if (!isOpen) {
             if (event.key === 'Enter' || event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -352,15 +397,26 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                displayOptions && setActiveIndex((prev) => (prev < displayOptions.length - 1 ? prev + 1 : prev));
+                displayOptions && setActiveIndex((prev) => {
+                    const start = prev < 0 ? hoveredIndexRef.current : prev;
+                    const hasLoadMore = showLoadMore && !!loadMore && !isSearchingNow && !showSpinner;
+                    const max = displayOptions.length - 1 + (hasLoadMore ? 1 : 0);
+                    return start <= max ? start + 1 : start;
+                });
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                displayOptions && setActiveIndex((prev) => (prev > 0 ? prev - 1 : prev));
+                displayOptions && setActiveIndex((prev) => {
+                    const start = prev < 0 ? hoveredIndexRef.current : prev;
+                    return start > 0 ? start - 1 : start;
+                });
                 break;
             case 'Enter':
                 event.preventDefault();
-                if (activeIndex >= 0 && activeIndex < displayOptions.length) {
+                if (activeIndex === displayOptions.length && showLoadMore && loadMore) {
+                    loadMore();
+                }
+                else if (activeIndex >= 0 && activeIndex < displayOptions.length) {
                     const selectedOption = displayOptions[activeIndex];
                     onChangeHandler(event, selectedOption);
                     setIsOpen(false);
@@ -397,7 +453,7 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         }
         setSearchValue('');
         onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
-        onChange === null || onChange === void 0 ? void 0 : onChange(event, multiple ? [] : startValue !== null && startValue !== void 0 ? startValue : null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, []);
         close && (onClose === null || onClose === void 0 ? void 0 : onClose(event));
         setActiveIndex(-1);
         if (required) {
@@ -409,9 +465,9 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         event.preventDefault();
         event.stopPropagation();
         item && setSelectedItems((selectedItems) => {
-            const newSelectedItems = selectedItems.filter((i) => getComparisonValue(i, getOptionLabel) !== getComparisonValue(item, getOptionLabel));
-            const newEvent = Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: newSelectedItems }) });
-            onChange === null || onChange === void 0 ? void 0 : onChange(newEvent, newSelectedItems);
+            const itemId = getItemId(item);
+            const newSelectedItems = selectedItems.filter((i) => itemId !== null ? getItemId(i) !== itemId : getComparisonValue(i, getOptionLabel) !== getComparisonValue(item, getOptionLabel));
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, newSelectedItems);
             if (required && newSelectedItems.length === 0) {
                 setErrorInput(true);
                 setErrorInputHelperText((helperText !== null && helperText !== void 0 ? helperText : lng === 'ru') ? 'Поле обязательно для заполнения' : 'Field is required');
@@ -436,9 +492,9 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         const hidden = selectedItems.length - visible.length;
         return (React.createElement("div", { className: styles.chipsWrap },
             visible.map((opt) => {
-                var _a, _b;
-                const key = String((_a = getComparisonValue(opt, getOptionLabel)) !== null && _a !== void 0 ? _a : getSelectedItemsText());
-                const label = String((_b = getComparisonValue(opt, getOptionLabel)) !== null && _b !== void 0 ? _b : '');
+                var _a, _b, _c;
+                const key = String((_b = (_a = getItemId(opt)) !== null && _a !== void 0 ? _a : getComparisonValue(opt, getOptionLabel)) !== null && _b !== void 0 ? _b : getSelectedItemsText());
+                const label = String((_c = getComparisonValue(opt, getOptionLabel)) !== null && _c !== void 0 ? _c : '');
                 const chip = (React.createElement("span", { className: styles.chip, onMouseEnter: () => requestAnimationFrame(() => recalcChipTooltips()), onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -467,15 +523,15 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
                 if (isOpen && enableAutocomplete) {
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }
-            } },
+            }, "data-test-id": `${testId}-dropdown-value-wrapper` },
             variant === 'icons' && !multiple &&
                 (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
                 React.cloneElement(selectedItem.icon, {
                     strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
                 }),
             multiple && selectedItems.length > 0 && getChips(),
-            !multiple && selectedItem && (React.createElement("span", { style: { display: (isOpen && enableAutocomplete && searchValue) ? 'none' : 'block' } }, getComparisonValue(selectedItem, getOptionLabel))),
-            isOpen && enableAutocomplete && (React.createElement("input", { ref: inputRef, type: "text", value: searchValue, className: styles.inlineSearchInput, onChange: handleSearchChange, placeholder: !searchValue && !selectedItem
+            !multiple && selectedItem && (React.createElement("span", { "data-test-id": `${testId}-dropdown-current-value`, style: { display: (isOpen && enableAutocomplete && searchValue) ? 'none' : 'block' } }, getComparisonValue(selectedItem, getOptionLabel))),
+            isOpen && enableAutocomplete && (React.createElement("input", { ref: inputRef, type: "text", name: "text", value: searchValue, className: styles.inlineSearchInput, onChange: handleSearchChange, placeholder: !searchValue && !selectedItem
                     ? (lng === 'ru' ? 'Поиск...' : 'Search...')
                     : '', onClick: (e) => {
                     e.stopPropagation();
@@ -488,35 +544,57 @@ 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 })),
-            !isOpen && (React.createElement(React.Fragment, null,
-                !multiple && !selectedItem && !searchValue && !isOpen && (React.createElement("span", null, (_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : (lng === 'ru' ? 'Выберите значение' : 'Select value'))),
-                multiple && selectedItems.length === 0 && !isOpen && (React.createElement("span", null, (_b = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _b !== void 0 ? _b : (lng === 'ru' ? 'Выберите значения' : 'Select values')))))));
+                }, onKeyDown: handleKeyDown, autoFocus: true, "data-test-id": `${testId}-dropdown-search-input` })),
+            !multiple && !selectedItem && !searchValue && !(isOpen && enableAutocomplete) && (React.createElement("span", { "data-test-id": `${testId}-dropdown-placeholder` }, (_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : (lng === 'ru' ? 'Выберите значение' : 'Select value'))),
+            multiple && selectedItems.length === 0 && !searchValue && !(isOpen && enableAutocomplete) && (React.createElement("span", { "data-test-id": `${testId}-dropdown-placeholder` }, (_b = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _b !== void 0 ? _b : (lng === 'ru' ? 'Выберите значения' : 'Select values')))));
         return showSelectedTooltip ? (React.createElement("div", { className: styles.textField },
-            React.createElement(Tooltip, { label: ((_c = getComparisonValue(selectedItem, getOptionLabel)) === null || _c === void 0 ? void 0 : _c.toString()) || '', position: "bottom-left", style: { width: '100% !important' } }, textFieldContent))) : (textFieldContent);
+            React.createElement(Tooltip, { label: ((_c = getComparisonValue(selectedItem, getOptionLabel)) === null || _c === void 0 ? void 0 : _c.toString()) || '', position: "bottom-left", style: { width: '100% !important' }, className: variant === 'filter' ? styles.filterTooltipWidth : '', "data-test-id": `${testId}-dropdown-tooltip` }, textFieldContent))) : (textFieldContent);
     };
+    const isSearchingNow = !isInitialOpen && !!searchValue.trim();
+    const showSpinner = isSearchLoading || (isOptionsLoading && displayOptions.length === 0);
     const getDropdownMenu = () => {
-        //const optionsToRender = enableAutocomplete && searchValue ? filteredOptions : modifiedOptions;
         const optionsToRender = displayOptions;
-        const isSearchingNow = !isInitialOpen && !!searchValue.trim();
-        const showSpinner = isSearchLoading || (isLoadMoreLoading && optionsToRender.length === 0);
-        const menu = isOpen && (React.createElement("div", { className: dropdownClassess },
-            showSpinner ? (React.createElement("div", { className: `${styles['item-block']}`, style: { padding: '10px', display: 'flex', flexDirection: "column", alignItems: 'center', justifyContent: 'center', margin: '0 auto' } },
+        const menu = isOpen && (React.createElement("div", { className: dropdownClassess, ref: dropdownRef, onMouseMove: (e) => {
+                var _a;
+                const items = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[class*="item--container"]');
+                if (!items)
+                    return;
+                const target = e.target.closest('[class*="item--container"]');
+                if (!target)
+                    return;
+                const idx = Array.from(items).indexOf(target);
+                if (idx !== -1)
+                    hoveredIndexRef.current = idx;
+                setActiveIndex(-1);
+            }, "data-test-id": `${testId}-dropdown-options-list` },
+            showSpinner ? (React.createElement("div", { className: `${styles['item-block']}`, style: { padding: '10px', display: 'flex', flexDirection: "column", alignItems: 'center', justifyContent: 'center', margin: '0 auto' }, "data-test-id": `${testId}-dropdown-spinner` },
                 React.createElement(Spinner, null))) : (React.createElement(React.Fragment, null, optionsToRender && optionsToRender.length > 0 ? (optionsToRender.map((option, index) => {
                 var _a;
-                return (React.createElement(DropdownListItem, { key: (_a = option === null || option === void 0 ? void 0 : option.id) !== null && _a !== void 0 ? _a : index, item: option, getOptionLabel: getOptionLabel, size: size, selectedItem: multiple ? selectedItems : selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
-            })) : (React.createElement("div", { className: `${styles['item-block']}`, style: { margin: '15px auto', textAlign: 'center', color: 'var(--text-grey)' } }, lng === 'ru' || lng.includes('ru')
+                return (React.createElement(DropdownListItem, { key: (_a = option === null || option === void 0 ? void 0 : option.id) !== null && _a !== void 0 ? _a : index, item: option, getOptionLabel: getOptionLabel, size: size, selectedItem: multiple ? selectedItems : selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index, testId: `${testId}-dropdown-option-${index}` }));
+            })) : (React.createElement("div", { className: `${styles['item-block']}`, style: { margin: '15px auto', textAlign: 'center', color: 'var(--text-grey)' }, "data-test-id": `${testId}-dropdown-empty` }, lng === 'ru' || lng.includes('ru')
                 ? noOptionsText || 'Нет вариантов для выбора'
                 : noOptionsText || 'No options to select')))),
-            !showSpinner && !isSearchingNow && showLoadMore && loadMore && (React.createElement(Button, { style: { width: '97%', margin: '10px auto', display: 'block', boxSizing: 'border-box' }, disabled: isLoadMoreLoading, variant: 'outline', onClick: (e) => {
+            !showSpinner && !isSearchingNow && showLoadMore && loadMore && (React.createElement(Button, { ref: loadMoreRef, style: { width: '97%', margin: '10px auto', display: 'block', boxSizing: 'border-box' }, disabled: isOptionsLoading, variant: 'outline', active: activeIndex === displayOptions.length, onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     loadMore();
-                } }, isLoadMoreLoading
+                }, testId: `${testId}-dropdown-loadmore` }, isOptionsLoading
                 ? (lng === 'ru' ? 'Загрузка...' : 'Loading...')
                 : (lng === 'ru' ? 'Загрузить еще' : 'Load more')))));
         return isOpen ? menu : null;
     };
+    const loadMoreRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (activeIndex < 0 || !dropdownRef.current)
+            return;
+        if (activeIndex === displayOptions.length) {
+            (_a = loadMoreRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+            return;
+        }
+        const items = dropdownRef.current.querySelectorAll('[class*="item--container"]');
+        (_b = items[activeIndex]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
+    }, [activeIndex, displayOptions.length]);
     useEffect(() => {
         onCloseRef.current = onClose;
     }, [onClose]);
@@ -565,7 +643,16 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
     }, [error]);
     useEffect(() => {
         const checkOverflow = () => {
-            setShowSelectedTooltip(isTextOverflowing(selectedItemRef.current));
+            if (!selectedItemRef.current)
+                return;
+            const firstChild = selectedItemRef.current.firstElementChild;
+            if (firstChild) {
+                const hasOverflow = firstChild.scrollWidth > selectedItemRef.current.clientWidth;
+                setShowSelectedTooltip(hasOverflow);
+            }
+            else {
+                setShowSelectedTooltip(isTextOverflowing(selectedItemRef.current));
+            }
         };
         checkOverflow();
         window.addEventListener('resize', checkOverflow);
@@ -587,23 +674,25 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         window.addEventListener('resize', recalcChipTooltips);
         return () => window.removeEventListener('resize', recalcChipTooltips);
     }, [multiple, selectedItems, limitTags, recalcChipTooltips]);
-    return (React.createElement("div", { id: id, className: wrapperClassess, ref: containerRef, onClick: onClick, style: style ? style : { width: isLeftLabel && containerWidth ? `${containerWidth}px` : '100%' } },
-        label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
+    return (React.createElement("div", { id: id, className: wrapperClassess, ref: containerRef, onClick: onClick, style: style ? style : { width: isLeftLabel && containerWidth ? `${containerWidth}px` : '100%' }, "data-test-id": `${testId}-dropdown-block` },
+        label && (React.createElement(Typography, { variant: "Caption", className: labelClasses, testId: `${testId}-dropdown` }, label)),
         React.createElement("div", { className: buttonClassess, onClick: disabled || readOnly ? undefined : handleToggle, role: "button", 
             // disabled={disabled}
             tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onKeyDown: (e) => {
                 if (disabled)
                     return;
+                if (enableAutocomplete && e.target instanceof HTMLInputElement)
+                    return;
                 handleKeyDown(e);
-            } },
+            }, "data-test-id": `${testId}-dropdown-trigger-button` },
             getTextField(),
             React.createElement("div", { className: styles.actionButtons },
                 clearable &&
                     !readOnly &&
                     !disabled &&
-                    (selectedItem || (multiple && selectedItems.length !== 0) || (enableAutocomplete && searchValue)) && (React.createElement("div", { className: styles.resetButton },
+                    (selectedItem || (multiple && selectedItems.length !== 0) || (enableAutocomplete && searchValue)) && (React.createElement("div", { className: styles.resetButton, "data-test-id": `${testId}-dropdown-clear-button` },
                     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', htmlColor: 'var(--icons-medium)' })) : (React.createElement(ChevronUp, { strokeWidth: size === 'lg' ? '0.5' : '0.3', htmlColor: 'var(--icons-medium)' })))),
+                React.createElement("div", { className: styles.dropdownIcon, "data-test-id": `${testId}-dropdown-open-button` }, !isOpen ? (React.createElement(ChevronDown, { strokeWidth: size === 'lg' ? '0.5' : '0.3', htmlColor: 'var(--icons-medium)' })) : (React.createElement(ChevronUp, { strokeWidth: size === 'lg' ? '0.5' : '0.3', htmlColor: 'var(--icons-medium)' })))),
             getDropdownMenu()),
-        errorInput && errorInputHelperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText !== null && helperText !== void 0 ? helperText : errorInputHelperText))));
+        errorInput && errorInputHelperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]), testId: `${testId}-dropdown-error` }, helperText !== null && helperText !== void 0 ? helperText : errorInputHelperText))));
 };

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

@@ -45,8 +45,11 @@
   justify-content: space-between;
   position: relative;
   width: 100%;
+   min-width: 0; 
+   max-width: 100%;
 }
-.button:hover {
+.button:hover,
+.button--outline-default--active  {
   border: 1px solid #0d9aff00;
   box-shadow: 0px 0px 0px 0.75px var(--blue-main);
   /* outline: none; */
@@ -62,6 +65,7 @@
   border-bottom: 1px solid var(--grey-mediumLight) !important;
   border-radius: 0 !important;
   padding: 0 !important;
+  min-width: 0;
 }
 
 .button--filter:hover {
@@ -194,9 +198,15 @@
   
 }
 
-.item--container:hover{
+.item--container:hover,
+.item--container--active {
   background-color: rgba(120, 120, 128, 0.08);
-  width: 97% !important; 
+  width: 97% !important;
+  transition: background-color 0.15s ease;
+}
+
+.dropdown:has(.item--container--active) .item--container:not(.item--container--active):hover {
+  background-color: transparent;
 }
 .item--container:has(._item-block--disabled):hover {
   background-color: transparent;
@@ -330,6 +340,9 @@
   min-width: 0; 
   cursor: text;
   overflow: hidden; 
+
+  min-width: 0;
+  flex: 1
 }
 
 .item-selected span{
@@ -339,6 +352,7 @@
   min-width: 0;    
   flex-shrink: 1; 
   width: 100%;
+  max-width: 100%;
 }
 .item-selected .chipsWrap span{
    width: auto; 
@@ -431,7 +445,8 @@
     cursor: pointer;
 
 }
-.loadMore:hover {
+.loadMore:hover,
+.loadMore--active {
   color: var(--blue-dark);
 }
 
@@ -496,3 +511,9 @@
   user-select: none;
   white-space: nowrap;
 }
+
+.filterTooltipWidth {
+   max-width: 320px !important; 
+   white-space: normal !important; 
+  word-break: break-word !important;
+}

package/dist/components/FileAttach/FileAttach.js

@@ -10,11 +10,11 @@ export const FileAttach = forwardRef(({ filesList = [], maxFileSize = 2, maxFile
     'model/gltf-binary': ['.glb'],
     'application/octet-stream': ['.prt', '.step', '.stp'],
     'text/plain': ['.syslog'],
-}, rejectedFormats, addedFiles, setAddedFiles, onDownload, onDelete, canAdd = true, canDelete = true, canDownload = true, position = 'bottom', lng = 'ru', className, style, fileValidator, }, ref) => {
+}, rejectedFormats, addedFiles, setAddedFiles, onDownload, onDelete, canAdd = true, canDelete = true, canDownload = true, position = 'bottom', lng = 'ru', className, style, fileValidator, testId = 'default' }, ref) => {
     const fileAttachClasses = classNames(styles['fileAttach'], className, {
         [styles[`fileAttach_position_${position}`]]: position,
     });
-    return (React.createElement("div", { className: fileAttachClasses, style: style },
-        React.createElement(FileLoader, { ref: ref, maxFileSize: maxFileSize, maxFileCount: maxFileCount, maxFileName: maxFileName, acceptedFormats: acceptedFormats, rejectedFormats: rejectedFormats, addedFiles: addedFiles, setAddedFiles: setAddedFiles, canAdd: canAdd, lng: lng, fileValidator: fileValidator }),
-        React.createElement(FileListAttaсhed, { filesList: filesList, onDelete: onDelete, onDownload: onDownload, canDelete: canDelete, canDownload: canDownload, lng: lng })));
+    return (React.createElement("div", { className: fileAttachClasses, style: style, "data-test-id": `${testId}-fileAttach-block` },
+        React.createElement(FileLoader, { ref: ref, maxFileSize: maxFileSize, maxFileCount: maxFileCount, maxFileName: maxFileName, acceptedFormats: acceptedFormats, rejectedFormats: rejectedFormats, addedFiles: addedFiles, setAddedFiles: setAddedFiles, canAdd: canAdd, lng: lng, fileValidator: fileValidator, testId: `${testId}-fileAttach` }),
+        React.createElement(FileListAttaсhed, { filesList: filesList, onDelete: onDelete, onDownload: onDownload, canDelete: canDelete, canDownload: canDownload, lng: lng, testId: `${testId}-fileAttach` })));
 });

package/dist/components/FileItem/FileItem.js

@@ -6,7 +6,7 @@ import { IconClose, IconDownload, IconFile } from '../../Icons';
 import { Tooltip } from '../Tooltip/Tooltip';
 import classNames from 'classnames';
 import { formatFileSize } from '../AttachedFilesPreview/AttachedFilesPreview';
-export const FileItem = ({ file, loading = false, error = '', onDownload, onDelete, canDelete = true, canDownload = true, style, isAddedFile, isRejectedFile, isComment = false, lng }) => {
+export const FileItem = ({ file, loading = false, error = '', onDownload, onDelete, canDelete = true, canDownload = true, style, isAddedFile, isRejectedFile, isComment = false, lng, testId = 'default' }) => {
     const [isLoadingFinished, setIsLoadingFinished] = useState(false);
     const [animationDuration, setAnimationDuration] = useState(0);
     const [maxLength, setMaxLength] = useState(30);
@@ -98,19 +98,19 @@ export const FileItem = ({ file, loading = false, error = '', onDownload, onDele
             onDownload(file);
         }
     };
-    return (React.createElement("div", { className: fileItemClasses, style: style, ref: fileItemRef, onClick: () => !(isAddedFile || isRejectedFile) && canDownload && file && onDownload && onDownload(file) },
+    return (React.createElement("div", { "data-test-id": `${testId}-file-item`, className: fileItemClasses, style: style, ref: fileItemRef, onClick: () => !(isAddedFile || isRejectedFile) && canDownload && file && onDownload && onDownload(file) },
         React.createElement("div", { className: styles['fileItemFile'] },
             React.createElement("div", { className: styles['fileItemInfo'] },
                 React.createElement("div", { className: styles['fileItemIcon'] },
                     React.createElement(IconFile, { htmlColor: 'var(--icons-grey)' })),
                 React.createElement("div", { className: styles['fileItemName'], ref: fileNameRef },
-                    (file === null || file === void 0 ? void 0 : file.filename) && (file === null || file === void 0 ? void 0 : file.filename.length) > maxLength ? (React.createElement(Tooltip, { label: file.filename, position: "bottom-center", displayDelay: 300 },
-                        React.createElement(Typography, { variant: "Body1", color: "var(--text-dark)" }, croppedName(file.filename)))) : (React.createElement(Typography, { variant: "Body1", color: "var(--text-dark)" }, file.filename && croppedName(file.filename))),
-                    file.size !== 0 && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, formatFileSize(file.size, lng))))),
+                    (file === null || file === void 0 ? void 0 : file.filename) && (file === null || file === void 0 ? void 0 : file.filename.length) > maxLength ? (React.createElement(Tooltip, { label: file.filename, position: "bottom-center", displayDelay: 300, testId: `${testId}-file-item` },
+                        React.createElement(Typography, { testId: `${testId}-file-item`, variant: "Body1", color: "var(--text-dark)" }, croppedName(file.filename)))) : (React.createElement(Typography, { testId: `${testId}-file-item`, variant: "Body1", color: "var(--text-dark)" }, file.filename && croppedName(file.filename))),
+                    file.size !== 0 && (React.createElement(Typography, { testId: `${testId}-file-item-size`, variant: "Caption", color: "var(--grey-medium)" }, formatFileSize(file.size, lng))))),
             React.createElement("div", { className: styles['fileItemActions'] },
-                !(isAddedFile || isRejectedFile) && canDownload && !isComment && (React.createElement(IconButton, { className: fileIcons, icon: React.createElement(IconDownload, null), title: lng === 'ru' ? 'Скачать' : 'Download', onClick: (e) => handleDownloadClick(e, file), color: "var(--icons-grey)", size: "sm" })),
+                !(isAddedFile || isRejectedFile) && canDownload && !isComment && (React.createElement(IconButton, { className: fileIcons, icon: React.createElement(IconDownload, null), title: lng === 'ru' ? 'Скачать' : 'Download', onClick: (e) => handleDownloadClick(e, file), color: "var(--icons-grey)", size: "sm", "data-test-id": `${testId}-file-item-download-button` })),
                 canDelete && (React.createElement(IconButton, { className: fileIcons, icon: React.createElement(IconClose, null), title: lng === 'ru' ? 'Удалить' : 'Delete', onClick: (e) => handleDeleteClick(e, file.id || ''), 
                     // color="var(--icons-grey)"
-                    size: "sm" })))),
-        error && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)", style: { paddingLeft: "5px" } }, error))));
+                    size: "sm", "data-test-id": `${testId}-file-item-close-button` })))),
+        error && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)", style: { paddingLeft: "5px" }, testId: `${testId}-file-item-error` }, error))));
 };

package/dist/components/FileListAttached/FileListAtta/321/201hed.js

@@ -3,12 +3,12 @@ import styles from './FileListAttached.module.css';
 import { Typography } from '../Typography/Typography';
 import { FileItem } from '../FileItem/FileItem';
 import classNames from 'classnames';
-export const FileListAttaсhed = ({ filesList, onDelete, onDownload, canDelete, canDownload, isInfoShown = true, lng = 'ru', className, style, }) => {
+export const FileListAttaсhed = ({ filesList, onDelete, onDownload, canDelete, canDownload, isInfoShown = true, lng = 'ru', className, style, testId = 'default' }) => {
     if (!filesList || filesList.length === 0) {
-        return lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "\u041D\u0435\u0442 \u043F\u0440\u0438\u043A\u0440\u0435\u043F\u043B\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432")) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "No attached files"));
+        return lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' }, testId: `${testId}-files-attached-empty` }, "\u041D\u0435\u0442 \u043F\u0440\u0438\u043A\u0440\u0435\u043F\u043B\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432")) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' }, testId: `${testId}-files-attached-empty` }, "No attached files"));
     }
-    return (React.createElement("div", { className: classNames(styles['fileList'], className), style: style },
+    return (React.createElement("div", { className: classNames(styles['fileList'], className), style: style, "data-test-id": `${testId}-files-attached-block` },
         isInfoShown &&
-            (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--text-dark)", style: { lineHeight: '20px' }, className: styles['fileListHeader'] }, `Прикрепленные файлы (${filesList.length})`)) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--text-dark)", style: { lineHeight: '20px' }, className: styles['fileListHeader'] }, `Attached files (${filesList.length})`))),
-        React.createElement("div", { className: styles['fileListFiles'] }, filesList.map((file) => (React.createElement(FileItem, { key: file.id, file: file, onDownload: onDownload, onDelete: onDelete, canDelete: canDelete, canDownload: canDownload, lng: lng }))))));
+            (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--text-dark)", style: { lineHeight: '20px' }, className: styles['fileListHeader'], testId: `${testId}-files-attached` }, `Прикрепленные файлы (${filesList.length})`)) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--text-dark)", style: { lineHeight: '20px' }, className: styles['fileListHeader'], testId: `${testId}-files-attached` }, `Attached files (${filesList.length})`))),
+        React.createElement("div", { className: styles['fileListFiles'], "data-test-id": `${testId}-files-attached-list` }, filesList.map((file, index) => (React.createElement(FileItem, { key: file.id, file: file, onDownload: onDownload, onDelete: onDelete, canDelete: canDelete, canDownload: canDownload, lng: lng, testId: `${testId}-files-attached-${index}` }))))));
 };