kamotive_ui 2.3.26 → 4.5.26

package/dist/components/Button/Button.d.ts

@@ -3,4 +3,4 @@ import { ButtonProps } from '../../types';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -5,7 +5,7 @@ import { Typography } from '../Typography/Typography';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
-export const Button = ({ label, variant = 'fill', size = 'md', mode, style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form }) => {
+export const Button = React.forwardRef(({ label, variant = 'fill', size = 'md', mode, style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form, className, active, }, ref) => {
     const btnIcon = icon || typeof children === 'object' && children;
     let modeStyle = 'text';
     if (mode) {
@@ -15,9 +15,10 @@ export const Button = ({ label, variant = 'fill', size = 'md', mode, style, cond
         modeStyle = (!label && !children) ? 'icon' : 'default';
     }
     const buttonCondition = error ? 'error' : (condition || 'default');
-    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${modeStyle}`], {
+    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${modeStyle}`], className, {
         [styles[`button--${variant}-${buttonCondition}`]]: buttonCondition && !color,
-        [styles[`button--${variant}-custom`]]: color && !error
+        [styles[`button--${variant}-custom`]]: color && !error,
+        [styles[`button--${variant}-${buttonCondition}--active`]]: active && buttonCondition && !color,
     });
     const iconColorFn = () => {
         if (buttonCondition && !color) {
@@ -60,7 +61,7 @@ export const Button = ({ label, variant = 'fill', size = 'md', mode, style, cond
         return (React.createElement("button", { className: buttonClasses },
             React.createElement(Typography, { variant: "Body1" }, "\u041A\u043D\u043E\u043F\u043A\u0430")));
     }
-    return (React.createElement("button", { className: buttonClasses, style: Object.assign(Object.assign({}, style), (color && !error ? {
+    return (React.createElement("button", { className: buttonClasses, ref: ref, style: Object.assign(Object.assign({}, style), (color && !error ? {
             '--button-color': color,
             '--button-hover-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 90%, black)` : `color-mix(in srgb, ${color} 10%, transparent)`,
             '--button-active-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 20%, transparent)`,
@@ -77,4 +78,4 @@ export const Button = ({ label, variant = 'fill', size = 'md', mode, style, cond
             });
         })(),
         (modeStyle === 'text' || modeStyle === 'default') && (React.createElement(Typography, { variant: "Body1" }, label ? label : typeof children === 'string' && children))));
-};
+});

package/dist/components/Button/Button.module.css

@@ -200,7 +200,8 @@
   color: var(--blue-main);
   border: 1px solid var(--blue-main);
 }
-.button--outline-default:hover {
+.button--outline-default:hover,
+.button--outline-default--active {
   background-color: rgba(13, 153, 255, 0.07);
   color: var(--blue-main);
   border: 1px solid var(--blue-main);

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

@@ -16,4 +16,4 @@ export interface DropdownListItemProps<T extends BaseOptions> {
     isChild?: boolean;
 }
 export declare const DropdownListItem: <T extends BaseOptions>({ item, getOptionLabel, size, selectedItem, variant, onChange, isActive, activeIndex, index, isChild, }: DropdownListItemProps<T>) => React.JSX.Element;
-export declare const Dropdown: <T extends BaseOptions>({ options, id, label, placeholder, required, value, defaultValue, onChange, showLoadMore, loadMore, getOptionLabel, variant, size, style, className, isLeftLabel, isDivider, disabled, readOnly, isOpened, error, helperText, onOpen, onClick, onBlur, onFocus, onClose, clearable, enableAutocomplete, onSearch, isLoadMoreLoading, isSearchLoading, noOptionsText, lng, multiple, limitTags, }: DropdownProps<T>) => React.JSX.Element;
+export declare const Dropdown: <T extends BaseOptions>({ options, id, label, placeholder, required, value, defaultValue, onChange, showLoadMore, loadMore, getOptionLabel, variant, size, style, className, isLeftLabel, isDivider, disabled, readOnly, isOpened, error, helperText, onOpen, onClick, onBlur, onFocus, onClose, clearable, enableAutocomplete, onSearch, isOptionsLoading, isSearchLoading, noOptionsText, lng, multiple, limitTags, }: DropdownProps<T>) => React.JSX.Element;

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') {
@@ -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,
@@ -180,9 +189,11 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
         })))));
     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, 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, }) => {
     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 +277,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 +299,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 +309,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) {
@@ -332,6 +361,10 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
     };
     //для выбора опции из списка с клавиатуры
     const handleKeyDown = (event) => {
+        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 +385,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 +441,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 +453,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 +480,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();
@@ -489,18 +533,28 @@ 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 })),
-            !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')))))));
+            !multiple && !selectedItem && !searchValue && !(isOpen && enableAutocomplete) && (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 && !searchValue && !(isOpen && enableAutocomplete) && (React.createElement("span", null, (_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);
     };
+    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 },
+        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);
+            } },
             showSpinner ? (React.createElement("div", { className: `${styles['item-block']}`, style: { padding: '10px', display: 'flex', flexDirection: "column", alignItems: 'center', justifyContent: 'center', margin: '0 auto' } },
                 React.createElement(Spinner, null))) : (React.createElement(React.Fragment, null, optionsToRender && optionsToRender.length > 0 ? (optionsToRender.map((option, index) => {
                 var _a;
@@ -508,15 +562,27 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
             })) : (React.createElement("div", { className: `${styles['item-block']}`, style: { margin: '15px auto', textAlign: 'center', color: 'var(--text-grey)' } }, 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
+                } }, 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]);
@@ -594,6 +660,8 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
             tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onKeyDown: (e) => {
                 if (disabled)
                     return;
+                if (enableAutocomplete && e.target instanceof HTMLInputElement)
+                    return;
                 handleKeyDown(e);
             } },
             getTextField(),

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

@@ -46,7 +46,8 @@
   position: relative;
   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; */
@@ -194,9 +195,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;
@@ -431,7 +438,8 @@
     cursor: pointer;
 
 }
-.loadMore:hover {
+.loadMore:hover,
+.loadMore--active {
   color: var(--blue-dark);
 }
 

package/dist/components/FileLoader/FileLoader.js

@@ -5,6 +5,100 @@ import { Typography } from '../Typography/Typography';
 import { IconUpload } from '../../Icons';
 import { FileItem } from '../FileItem/FileItem';
 import classNames from 'classnames';
+const getFileNameWithoutExtension = (filename) => {
+    const lastDotIndex = filename.lastIndexOf('.');
+    if (lastDotIndex === -1 || lastDotIndex === 0 || lastDotIndex === filename.length - 1) {
+        return filename;
+    }
+    return filename.substring(0, lastDotIndex);
+};
+const getFileExtension = (filename) => {
+    const lastDotIndex = filename.lastIndexOf('.');
+    if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
+        return '';
+    }
+    return filename.substring(lastDotIndex).toLowerCase();
+};
+// Функция для получения всех доступных форматов в виде строки
+const getAcceptedFormatsString = (acceptedFormats) => {
+    const uniqueFormats = new Set();
+    for (const key in acceptedFormats) {
+        if (acceptedFormats.hasOwnProperty(key)) {
+            acceptedFormats[key].forEach((format) => {
+                uniqueFormats.add(format.replace('.', ''));
+            });
+        }
+    }
+    return Array.from(uniqueFormats).join(', ');
+};
+const fileValidatorInner = (file, maxFileSize, maxFileCount, maxFileName, addedFilesLength, lng, acceptedFormats, rejectedFormats, fileValidator) => {
+    const fileExtension = getFileExtension(file.name);
+    const fileNameWithoutExt = getFileNameWithoutExtension(file.name);
+    const nameLength = Array.from(fileNameWithoutExt).length;
+    const fileParts = file.name.split('.');
+    const fileExt = fileParts.length > 1 ? `.${fileParts.pop().toLowerCase()}` : '';
+    const checks = {
+        isSizeTooLarge: file.size > maxFileSize * 1024 * 1024 * 1024,
+        isTooManyFiles: addedFilesLength > maxFileCount - 1,
+        isNameTooLarge: typeof maxFileName === 'number' && maxFileName > 0 && nameLength > maxFileName,
+        isAcceptedFormatValid: true,
+        isRejectedFormatValid: true
+    };
+    // Проверка форматов
+    if (acceptedFormats && !rejectedFormats) {
+        const acceptedExtensions = Object.values(acceptedFormats).reduce((acc, val) => acc.concat(val), []);
+        checks.isAcceptedFormatValid = acceptedExtensions.includes(fileExtension);
+    }
+    if (rejectedFormats) {
+        const rejectedExtensions = Object.values(rejectedFormats).reduce((acc, val) => acc.concat(val), []);
+        checks.isRejectedFormatValid = !rejectedExtensions.includes(fileExt);
+    }
+    switch (true) {
+        case checks.isSizeTooLarge:
+            return {
+                code: 'size-too-large',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`
+                    : `Maximum file size ${maxFileSize.toFixed(0)} GB`,
+            };
+        case checks.isTooManyFiles:
+            return {
+                code: 'files-count-too-large',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Максимальное количество файлов ${maxFileCount}`
+                    : `Maximum number of files ${maxFileCount}`,
+            };
+        case checks.isNameTooLarge:
+            return {
+                code: 'name-too-large',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Имя файла не может превышать ${maxFileName} символов.`
+                    : `File name must be under ${maxFileName} symbols.`,
+            };
+        case !checks.isAcceptedFormatValid:
+            return {
+                code: 'file-invalid-type',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Файл должен быть одного из следующих типов: ${Object.values(acceptedFormats).reduce((acc, val) => acc.concat(val), []).join(', ')}`
+                    : `File must be one of: ${Object.values(acceptedFormats).reduce((acc, val) => acc.concat(val), []).join(', ')}`,
+            };
+        case !checks.isRejectedFormatValid:
+            return {
+                code: 'file-invalid-type',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Файл не должен быть одного из следующих типов: ${getAcceptedFormatsString(rejectedFormats)}`
+                    : `File must not be one of: ${getAcceptedFormatsString(rejectedFormats)}`,
+            };
+        default: {
+            if (fileValidator) {
+                const customValidationResult = fileValidator(file);
+                if (customValidationResult)
+                    return customValidationResult;
+            }
+            return null;
+        }
+    }
+};
 export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxFileName = 0, acceptedFormats = {
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
@@ -25,92 +119,15 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
             setLoadingFilesNames([]);
         }
     }));
-    const fileValidatorInner = (file) => {
-        if (file.size > maxFileSize * 1024 * 1024 * 1024) {
-            return {
-                code: 'size-too-large',
-                message: lng === 'ru' || lng.includes('ru')
-                    ? `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`
-                    : `Maximum file size ${maxFileSize.toFixed(0)} GB`,
-            };
-        }
-        // Проверка на дубликаты в filesList
-        // if (filesList.find((existingFile: TAttachments) => existingFile.filename === file.name)) {
-        //   return {
-        //     code: 'repeating-file-name',
-        //     message: lng === 'ru' || lng.includes('ru') ? `Файл уже существует в списке прикрепленных файлов` : `File already exists in the list of attached files`,
-        //   };
-        // }
-        // Проверка на дубликаты в addedFiles
-        // if (addedFiles.find((addedFile: File) => addedFile.name === file.name)) {
-        //   return {
-        //     code: 'repeating-file-name',
-        //     message: lng === 'ru' || lng.includes('ru') ? `Файл уже добавлен` : `File already added`,
-        //   };
-        // }
-        if (addedFiles.length > maxFileCount - 1) {
-            return {
-                code: 'files-count-too-large',
-                message: lng === 'ru' || lng.includes('ru') ? `Максимальное количество файлов ${maxFileCount}` : `Maximum number of files ${maxFileCount}`,
-            };
-        }
-        if (maxFileName && file.name.length > maxFileName) {
-            return {
-                code: 'name-too-large',
-                message: lng === 'ru' || lng.includes('ru') ? `Имя файла не может превышать ${maxFileName} символов` : `File name must be under ${maxFileName} symbols`,
-            };
-        }
-        if (acceptedFormats && !rejectedFormats) {
-            const acceptedExtensions = Object.values(acceptedFormats)
-                .reduce((acc, val) => acc.concat(val), []);
-            const fileParts = file.name.split('.');
-            const fileExtension = fileParts.length > 1
-                ? `.${fileParts.pop().toLowerCase()}`
-                : '';
-            if (!acceptedExtensions.includes(fileExtension)) {
-                return {
-                    code: 'file-invalid-type',
-                    message: lng === 'ru' || lng.includes('ru')
-                        ? `Файл должен быть одного из следующих типов: ${acceptedExtensions.join(', ')}`
-                        : `File must be one of: ${acceptedExtensions.join(', ')}`,
-                };
-            }
-        }
-        if (rejectedFormats) {
-            const rejectedExtensions = Object.values(rejectedFormats)
-                .reduce((acc, val) => acc.concat(val), []);
-            const fileParts = file.name.split('.');
-            const fileExtension = fileParts.length > 1
-                ? `.${fileParts.pop().toLowerCase()}`
-                : '';
-            if (rejectedExtensions.includes(fileExtension)) {
-                return {
-                    code: 'file-invalid-type',
-                    message: lng === 'ru' || lng.includes('ru')
-                        ? `Файл не должен быть одного из следующих типов: ${getAcceptedFormatsString(rejectedFormats)}`
-                        : `File must not be one of: ${getAcceptedFormatsString(rejectedFormats)}`,
-                };
-            }
-        }
-        if (fileValidator) {
-            const customValidationResult = fileValidator(file);
-            if (customValidationResult) {
-                return customValidationResult;
-            }
-        }
-        return null;
-    };
     const { getRootProps, getInputProps } = useDropzone({
         onDrop: (acceptedFiles, fileRejections) => {
             setAddedFiles([...addedFiles, ...acceptedFiles]);
-            const newFormatAttachments = acceptedFiles.map((file) => {
-                return {
-                    id: `file-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
-                    filename: file.name,
-                    size: file.size,
-                    type: file.type,
-                };
-            });
+            const newFormatAttachments = acceptedFiles.map((file) => ({
+                id: `file-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+                filename: file.name,
+                size: file.size,
+                type: file.type,
+            }));
             setLoadingFilesNames(newFormatAttachments.map((file) => { var _a; return (_a = file === null || file === void 0 ? void 0 : file.filename) !== null && _a !== void 0 ? _a : 'Без названия'; }));
             setIsLoadingFiles(true);
             setAddedFilesFormatted([...addedFilesFormated, ...newFormatAttachments]);
@@ -160,7 +177,7 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
                 setErrorFiles([...errorFiles, ...formattedRejections]);
             }
         },
-        validator: fileValidatorInner,
+        validator: (file) => fileValidatorInner(file, maxFileSize, maxFileCount, maxFileName, addedFiles.length, lng, acceptedFormats, rejectedFormats, fileValidator),
         accept: undefined,
         maxFiles: maxFileCount,
         disabled: !canAdd,
@@ -176,27 +193,11 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
             setLoadingFilesNames(loadingFilesNames.filter((name) => name !== fileToDelete.filename));
         }
     };
-    const acceptedFileItems = addedFilesFormated.map((file) => {
-        return (React.createElement(FileItem, { key: file.id, file: file, 
-            //loading={loadingFilesNames.includes(file.filename)} // Показываем лоадер только для новых файлов
-            onDelete: handleDeleteFiles, isAddedFile: true, lng: lng }));
-    });
     const handleDeleteRejectedFile = (id) => {
         setErrorFiles(errorFiles.filter((rejection) => rejection.file.id !== id));
     };
+    const acceptedFileItems = addedFilesFormated.map((file) => (React.createElement(FileItem, { key: file.id, file: file, onDelete: handleDeleteFiles, isAddedFile: true, lng: lng })));
     const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(FileItem, { key: file.id, file: file, error: errors[0].message, onDelete: handleDeleteRejectedFile, isRejectedFile: true, lng: lng })));
-    // Функция для получения всех доступных форматов в виде строки
-    const getAcceptedFormatsString = (acceptedFormats) => {
-        const uniqueFormats = new Set();
-        for (const key in acceptedFormats) {
-            if (acceptedFormats.hasOwnProperty(key)) {
-                acceptedFormats[key].forEach((format) => {
-                    uniqueFormats.add(format.replace('.', ''));
-                });
-            }
-        }
-        return Array.from(uniqueFormats).join(', ');
-    };
     useEffect(() => {
         if (addedFiles.length === 0) {
             setAddedFilesFormatted([]);
@@ -213,11 +214,9 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
             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"),
-                " ",
                 React.createElement("span", null, " \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B"))) : (React.createElement(React.Fragment, null,
-                React.createElement("span", { style: { textDecoration: 'underline' } }, "\u0421lick on this area"),
-                " ",
-                React.createElement("span", null, "or drag files here")))),
+                React.createElement("span", { style: { textDecoration: 'underline' } }, "Click on this area"),
+                React.createElement("span", null, " or drag files here")))),
             React.createElement("div", null,
                 maxFileSize &&
                     (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" },
@@ -233,5 +232,5 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
         rejectedFormats && (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `${lng === 'ru' || lng.includes('ru') ? 'Неподдерживаемые форматы:' : 'Unsupported formats:'} ${getAcceptedFormatsString(rejectedFormats)}`)),
         (addedFiles === null || addedFiles === void 0 ? void 0 : addedFiles.length) > 0 || (errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.length) > 0 ? (React.createElement("div", { className: styles['addedFiles'] },
             acceptedFileItems,
-            fileRejectionItems)) : lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "\u0424\u0430\u0439\u043B\u044B \u043D\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u044B")) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "Files not added"))));
+            fileRejectionItems)) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, lng === 'ru' || lng.includes('ru') ? 'Файлы не добавлены' : 'Files not added'))));
 });