@astral/ui 4.36.0 → 4.37.0

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AutocompleteRenderInputParams } from './types';
-export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material/Autocomplete/Autocomplete").AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo, "div">>, "size" | "clearText" | "closeText" | "noOptionsText" | "openText" | "renderInput"> & Pick<import("../TextField").TextFieldProps, "label" | "success" | "error" | "placeholder" | "required" | "inputRef" | "helperText" | "inputProps"> & {
+export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material").AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo, "div">>, "size" | "clearText" | "closeText" | "noOptionsText" | "openText" | "renderInput"> & Pick<import("../TextField").TextFieldProps, "label" | "success" | "error" | "placeholder" | "required" | "inputRef" | "helperText" | "inputProps"> & {
     renderInput?: ((props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material").TextFieldProps>, "color" | "select" | "margin" | "variant" | "multiline" | "SelectProps"> & {
         success?: boolean | undefined;
         startAdornment?: import("react").ReactNode;

package/components/Autocomplete/Autocomplete.js

@@ -1,29 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ListItemIcon from '@mui/material/ListItemIcon';
 import MuiPopper from '@mui/material/Popper';
-import { useCallback } from 'react';
+import { useCallback, useRef, } from 'react';
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { DownOutlineMd } from '../../icons/DownOutlineMd';
 import { Checkbox } from '../Checkbox';
 import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
 import { Loader } from '../Loader';
 import { OverflowTypography } from '../OverflowTypography';
-import { Tag } from '../Tag';
+import { TagsList } from '../TagsList';
 import { TextField } from '../TextField';
 import { classNames } from '../utils/classNames';
-import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, } from './constants';
+import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, INPUT_MIN_WIDTH, } from './constants';
 import { StyledAutocomplete, StyledMenuItem } from './styles';
 import { useLogic } from './useLogic';
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(props);
-    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading, ...restProps } = props;
+    const inputBaseRef = useRef(null);
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading, value, onChange, ...restProps } = props;
     const renderInput = useCallback((inputParams) => {
+        const createStartAdornment = () => {
+            if (!multiple || !Array.isArray(value)) {
+                return null;
+            }
+            const tagsListElement = (_jsx(TagsList, { data: value, getOptionLabel: (option) => getOptionLabel?.(option) ??
+                    option.toString(), inputContainerRef: inputBaseRef, reservedWidth: INPUT_MIN_WIDTH, onChange: (tagValues) => {
+                    if (!onChange) {
+                        return;
+                    }
+                    const syntheticEvent = {
+                        type: 'change',
+                        target: { value: tagValues },
+                        currentTarget: { value: tagValues },
+                    };
+                    const reason = 'removeOption';
+                    onChange(syntheticEvent, tagValues, reason);
+                } }));
+            return tagsListElement;
+        };
         const generalInputParams = {
             ...inputParams,
             inputProps: {
                 ...inputParams.inputProps,
                 className: classNames(inputParams?.inputProps?.className, inputProps?.className),
             },
+            InputProps: {
+                ...inputParams.InputProps,
+                ref: (element) => {
+                    inputBaseRef.current = element;
+                    const orig = inputParams.InputProps?.ref;
+                    if (typeof orig === 'function') {
+                        orig(element);
+                    }
+                    else if (orig) {
+                        orig.current = element;
+                    }
+                },
+                // Если есть externalRenderTags, используем renderTags(mui использует inputParams.InputProps?.startAdornment)
+                startAdornment: externalRenderTags
+                    ? inputParams.InputProps?.startAdornment
+                    : createStartAdornment(),
+            },
             inputRef,
             required,
             placeholder: isValueEmpty ? placeholder : '',
@@ -40,7 +77,9 @@ const AutocompleteInner = (props, ref) => {
         return _jsx(TextField, { ...generalInputParams });
     }, [
         isValueEmpty,
+        value,
         externalRenderInput,
+        externalRenderTags,
         inputRef,
         required,
         placeholder,
@@ -50,6 +89,9 @@ const AutocompleteInner = (props, ref) => {
         helperText,
         size,
         hideHelperText,
+        multiple,
+        getOptionLabel,
+        onChange,
     ]);
     const renderOption = useCallback((optionProps, option, optionState, ownerState) => {
         if (externalRenderOption) {
@@ -59,26 +101,22 @@ const AutocompleteInner = (props, ref) => {
         const { key, ...restOptionProps } = optionProps;
         return (_jsxs(StyledMenuItem, { selected: isSelected, ...restOptionProps, children: [multiple && (_jsx(ListItemIcon, { children: _jsx(Checkbox, { role: "menuitemcheckbox", checked: isSelected }) })), _jsx(OverflowTypography, { rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, ...overflowOption, children: optionProps.key })] }, key));
     }, [multiple, overflowOption, externalRenderOption]);
-    const renderTags = useCallback((tags, getTagProps, ownerSate) => {
-        if (externalRenderTags) {
-            return externalRenderTags(tags, getTagProps, ownerSate);
-        }
-        return tags.map((tag, index) => {
-            const title = getOptionLabel?.(tag) || '';
-            const { key, ...tagProps } = getTagProps({ index });
-            return (_jsx(Tag, { variant: "light", color: "grey", label: title, ...tagProps }, key));
-        });
-    }, [getOptionLabel, externalRenderTags]);
     const renderPopper = useCallback((popperProps) => {
         if (!isPopperVisible) {
             return null;
         }
         return _jsx(MuiPopper, { ...popperProps });
     }, [isPopperVisible]);
+    const renderTags = useCallback((tags, getTagProps, ownerState) => {
+        if (externalRenderTags) {
+            return externalRenderTags(tags, getTagProps, ownerState);
+        }
+        return null;
+    }, [externalRenderTags]);
     return (_jsx(StyledAutocomplete, { ...restProps, ref: ref, size: size, clearText: clearText, closeText: !loading ? closeText : '', openText: !loading ? openText : '', loadingText: loadingText, multiple: multiple, disableCloseOnSelect: multiple, clearIcon: _jsx(CrossOutlineMd, {}), loading: loading, popupIcon: loading ? _jsx(Loader, { color: "primary", size: "small" }) : _jsx(DownOutlineMd, {}), forcePopupIcon: true, slotProps: {
             popper: {
                 component: renderPopper,
             },
-        }, getOptionLabel: getOptionLabel, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, ...autocompleteProps }));
+        }, getOptionLabel: getOptionLabel, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, onChange: onChange, ...autocompleteProps }));
 };
 export const Autocomplete = forwardRefWithGeneric(AutocompleteInner);

package/components/Autocomplete/constants.d.ts

@@ -1,2 +1,8 @@
 export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+export declare const INPUT_MIN_WIDTH = 110;
 export declare const DEFAULT_PLACEHOLDER = "\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0434\u043B\u044F \u043F\u043E\u0438\u0441\u043A\u0430";
+export declare const autocompleteClassnames: {
+    root: string;
+    multiple: string;
+    emptyValue: string;
+};

package/components/Autocomplete/constants.js

@@ -1,2 +1,9 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+export const INPUT_MIN_WIDTH = 110;
 export const DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';
+export const autocompleteClassnames = {
+    root: createUIKitClassname('autocomplete'),
+    multiple: createUIKitClassname('autocomplete_multiple'),
+    emptyValue: createUIKitClassname('autocomplete_empty-value'),
+};

package/components/Autocomplete/styles.js

@@ -5,6 +5,7 @@ import { inputBaseClasses } from '@mui/material/InputBase';
 import { MenuItem } from '../MenuItem';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
+import { autocompleteClassnames, INPUT_MIN_WIDTH } from './constants';
 export const StyledMenuItem = styled(MenuItem) `
     max-height: ${({ theme }) => theme.spacing(13)};
 
@@ -23,5 +24,18 @@ export const StyledAutocomplete = styled(MuiAutocomplete) `
   
   & .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}:hover {
       background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
-    }
+  }
+
+  &:not(.${autocompleteClassnames.emptyValue}) .${inputBaseClasses.root} {
+    gap: ${({ theme }) => theme.spacing(3)};
+  }
+
+  & .${autocompleteClasses.inputRoot} .${inputBaseClasses.input} {
+    min-width: ${INPUT_MIN_WIDTH}px;
+  }
+
+  & .${autocompleteClasses.inputRoot} {
+    flex-wrap: nowrap;
+  }
+    
 `;

package/components/Autocomplete/useLogic/useLogic.d.ts

@@ -2,10 +2,11 @@ import { type AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
 import { type SyntheticEvent } from 'react';
 import { type AutocompleteProps } from '../types';
 type UseLogicParams<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>;
-export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight, freeSolo, options, loading, isLoadedDataError, loadedDataError, noOptionsText, onInputChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
+export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError, noOptionsText, onInputChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
     isValueEmpty: boolean;
     isPopperVisible: boolean | undefined;
     autocompleteProps: {
+        className: string;
         isOptionEqualToValue: (option: TAutocompleteValueProps, currentValue: TAutocompleteValueProps) => boolean;
         autoHighlight: boolean;
         noOptionsText: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;

package/components/Autocomplete/useLogic/useLogic.js

@@ -1,6 +1,8 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { classNames } from '../../utils/classNames';
+import { autocompleteClassnames } from '../constants';
 import { checkIsInputEmpty } from './utils';
-export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
+export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
     const [innerInputValue, setInnerInputValue] = useState('');
     const isValueEmpty = checkIsInputEmpty(value);
     const isInnerInputValueNotEmpty = innerInputValue.length >= 1;
@@ -21,10 +23,17 @@ export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToVal
             setInnerInputValue(currentValue);
         }
     };
+    const classnames = useMemo(() => {
+        return classNames(className, autocompleteClassnames.root, {
+            [autocompleteClassnames.multiple]: multiple,
+            [autocompleteClassnames.emptyValue]: isValueEmpty,
+        });
+    }, [multiple, isValueEmpty]);
     return {
         isValueEmpty,
         isPopperVisible,
         autocompleteProps: {
+            className: classnames,
             isOptionEqualToValue,
             autoHighlight: freeSolo ? false : autoHighlight,
             noOptionsText: isLoadedDataError ? loadedDataError : noOptionsText,

package/components/TagsList/Tag/Tag.d.ts

@@ -20,7 +20,7 @@ export type TagProps = {
     /**
      * Хендлер клика по тегу
      */
-    onClick: (value: MouseEvent<HTMLDivElement>) => void;
+    onClick?: (value: MouseEvent<HTMLDivElement>) => void;
     /**
      * Название класса, применяется к корневому компоненту
      */

package/components/TagsList/Tag/constants.d.ts

@@ -0,0 +1 @@
+export declare const MAX_TAG_WIDTH = "246px";

package/components/TagsList/Tag/constants.js

@@ -0,0 +1 @@
+export const MAX_TAG_WIDTH = '246px';

package/components/TagsList/Tag/index.d.ts

@@ -1 +1,2 @@
 export * from './Tag';
+export * from './constants';

package/components/TagsList/Tag/index.js

@@ -1 +1,2 @@
 export * from './Tag';
+export * from './constants';

package/components/TagsList/Tag/styles.js

@@ -3,6 +3,8 @@ import { Tag, tagClassnames } from '../../Tag';
 export const StyledTag = styled(Tag, {
     shouldForwardProp: (prop) => prop !== '$shrinks',
 }) `
+  overflow: hidden;
+
   /* 4em ширина необходима для отображения двух букв и избежания перекрытия кнопкой сброса всего текста тега */
   min-width: ${({ $shrinks }) => ($shrinks ? 'calc(2em + 20px)' : 'unset')};
   max-width: 246px;

package/components/TagsList/TagsList.js

@@ -8,10 +8,10 @@ import { getKey } from './utils';
  * Не предназначен для использования в продуктах, не экспортируется из пакета
  */
 export const TagsList = (props) => {
-    const { maxItems, tagsContainerRef, visibleOptions, getTagProps } = useLogic(props);
-    const { className, data, keyId, isDisabled, onClick } = props;
-    return (_jsxs(Wrapper, { className: className, ref: tagsContainerRef, children: [visibleOptions?.map((option, index) => {
-                const tagProps = getTagProps(option, index);
-                return (_jsx(Tag, { isDisabled: isDisabled, onClick: onClick, ...tagProps }, getKey(option, keyId)));
-            }), data && maxItems < data.length && (_jsx(CounterTag, { isDisabled: isDisabled, label: `+${data.length - maxItems}`, onClick: onClick }, "more"))] }));
+    const { hiddenCount, tagsContainerRef, visibleOptions, getTagProps, showCounter, } = useLogic(props);
+    const { className, keyId, isDisabled, onClick, getOptionLabel } = props;
+    return (_jsxs(Wrapper, { className: className, ref: tagsContainerRef, children: [visibleOptions?.map((option) => {
+                const tagProps = getTagProps(option);
+                return (_jsx(Tag, { isDisabled: isDisabled, onClick: onClick, ...tagProps }, getKey(option, keyId, getOptionLabel)));
+            }), showCounter && (_jsx(CounterTag, { isDisabled: isDisabled, label: `+${hiddenCount}`, onClick: onClick }, "more"))] }));
 };

package/components/TagsList/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MIN_AVAILABLE_WIDTH = 50;
+export declare const GAP_BETWEEN_TAGS = 4;

package/components/TagsList/constants.js

@@ -0,0 +1,2 @@
+export const MIN_AVAILABLE_WIDTH = 50;
+export const GAP_BETWEEN_TAGS = 4; // 4px

package/components/TagsList/styles.js

@@ -1,11 +1,15 @@
 import { styled } from '../styled';
 import { tagClassnames } from '../Tag';
+import { GAP_BETWEEN_TAGS } from './constants';
 import { Tag } from './Tag';
 export const Wrapper = styled.div `
+  overflow: hidden;
   display: flex;
-  column-gap: ${({ theme }) => theme.spacing(1)};
+  column-gap: ${GAP_BETWEEN_TAGS}px;
 `;
 export const CounterTag = styled(Tag) `
+  overflow: unset;
+
   .${tagClassnames.label} {
     min-width: unset;
   }

package/components/TagsList/types.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEvent } from 'react';
+import { type MouseEvent, type RefObject } from 'react';
 export type TagValue = string | Record<string, unknown>;
 export type TagsListProps<TData extends TagValue = TagValue> = {
     /**
@@ -14,16 +14,25 @@ export type TagsListProps<TData extends TagValue = TagValue> = {
      */
     isDisabled?: boolean;
     /**
-     * Поле, используемое в качестве ключа списка
+     * Поле, используемое в качестве ключа списка.
+     * Если не передано, для генерации ключа будет использоваться getOptionLabel
      */
-    keyId: TData extends string ? never : keyof TData;
+    keyId?: TData extends string ? never : keyof TData;
     /**
      * Используется для определения строкового значения опции
      */
     getOptionLabel: (value: TData) => string | number;
     onChange: (value: TData[] | undefined) => void;
     /**
-     * Функция, вызываемая при клике не тэг
+     * Функция, вызываемая при клике на тэг
      */
-    onClick: (value: MouseEvent<HTMLDivElement>) => void;
+    onClick?: (value: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Ref на внешний контейнер, чья ширина используется как база для расчёта доступного пространства..
+     */
+    inputContainerRef?: RefObject<HTMLElement | null>;
+    /**
+     * Зарезервированная ширина, которая будет вычтена из доступной ширины при расчете количества отображаемых тегов
+     */
+    reservedWidth?: number;
 };

package/components/TagsList/useLogic/useLogic.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import type { TagValue } from '../types';
-import { type TagsListProps } from '../types';
+import type { TagsListProps, TagValue } from '../types';
 type UseLogicParams<TData extends TagValue> = TagsListProps<TData>;
-export declare const useLogic: <TData extends TagValue>({ data, keyId, getOptionLabel, onChange, }: UseLogicParams<TData>) => {
-    maxItems: number;
+export declare const useLogic: <TData extends TagValue>({ data, keyId, getOptionLabel, onChange, inputContainerRef, reservedWidth, }: UseLogicParams<TData>) => {
     visibleOptions: TData[];
+    hiddenCount: number;
+    showCounter: boolean;
     tagsContainerRef: import("react").RefObject<HTMLDivElement | null>;
-    getTagProps: (option: TData, index: number) => {
+    getTagProps: (option: TData) => {
         label: string | number;
         shrinks: boolean;
         onDelete: () => void;

package/components/TagsList/useLogic/useLogic.js

@@ -1,145 +1,105 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTheme } from '../../theme/hooks/useTheme';
-export const useLogic = ({ data = [], keyId, getOptionLabel, onChange, }) => {
-    // Сколько тегов можно отобразить в инпуте
-    const [maxItems, setMaxItems] = useState(1);
-    const ignoreResizeRef = useRef(false);
+import { MIN_AVAILABLE_WIDTH } from '../constants';
+import { calculateVisibleTagsCount, getAvailableWidth } from '../utils';
+export const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputContainerRef, reservedWidth = 0, }) => {
+    const [visibleOptions, setVisibleOptions] = useState([]);
+    const [hiddenCount, setHiddenCount] = useState(0);
     const tagsContainerRef = useRef(null);
+    const availableWidthRef = useRef(0);
     const theme = useTheme();
     /**
-     * Определяет, сколько тегов можно отобразить в строке,
-     * учитывая ширину контейнера и промежутки (gap) между тегами.
-     *
-     * @param container - DOM-элемент контейнера с тегами
-     * @param gap - расстояние между тегами (например, 4px)
-     * @param padding - отступ внутри тега
-     * @returns количество тегов, которые помещаются без переполнения
+     * Обновляет доступную ширину для расчета количества отображаемых тегов
      */
-    const getTagsCountToAdd = (container, gap, padding) => {
-        const tags = Array.from(container.children);
-        // Если нет ни одного тега, сразу возвращаем 0
-        if (tags.length === 0) {
-            return 0;
+    const updateAvailableWidth = () => {
+        const target = inputContainerRef?.current ?? tagsContainerRef.current;
+        if (target) {
+            availableWidthRef.current = getAvailableWidth(target, reservedWidth);
         }
-        // Преобразуем значение из темы в число
-        const gapValue = parseInt(gap, 10);
-        const paddingValue = parseInt(padding, 10);
-        let totalWidth = 0; // Накопленная ширина всех тегов + gap
-        let lastFittingIndex = tags.length; // Индекс, до которого теги помещаются
-        for (let i = 0; i < tags.length; i++) {
-            const tag = tags[i];
-            const contentEl = tag.firstElementChild;
-            // Полная ширина элемента (включая margin/padding/border)
-            const tagWidth = tag.clientWidth;
-            // gap учитывается, начиная со второго тега
-            const currentGap = i > 0 ? gapValue : 0;
-            // Проверяем, переполнен ли текст внутри тега (например, обрезался)
-            const isContentOverflowing = contentEl?.scrollWidth > contentEl?.clientWidth;
-            // Если добавление текущего тега превышает ширину контейнера
-            // или если сам контент внутри тега не помещается
-            if (totalWidth + currentGap + tagWidth > container.clientWidth ||
-                isContentOverflowing) {
-                lastFittingIndex = i;
-                break;
-            }
-            // Увеличиваем суммарную ширину
-            totalWidth += currentGap + tagWidth + paddingValue;
-        }
-        // Если даже первый тег не влезает, всё равно показываем один тег
-        if (lastFittingIndex === 0 && tags.length > 0) {
-            return 1;
-        }
-        return lastFittingIndex;
     };
-    /**
-     * Пересчитывает максимальное количество тегов (maxItems),
-     * которые помещаются в строку контейнера без переполнения.
-     */
     const recomputeMaxItems = () => {
-        const containerEl = tagsContainerRef.current;
-        // Если контейнер или данные не заданы — прекращаем
-        if (!containerEl || !data?.length) {
+        if (data.length === 0) {
+            setVisibleOptions([]);
+            setHiddenCount(0);
             return;
         }
-        // Берём первый тег как шаблон (для клонирования)
-        const tagTemplate = containerEl.children[0];
-        if (!tagTemplate) {
+        const hasNoInputContainer = !inputContainerRef?.current;
+        const isZeroWidth = availableWidthRef.current === 0;
+        const isSmallWidth = availableWidthRef.current < MIN_AVAILABLE_WIDTH;
+        // Если нет inputContainerRef и доступная ширина слишком мала или не вычислена - показываем первый тег и счетчик(если есть)
+        if (hasNoInputContainer && (isZeroWidth || isSmallWidth)) {
+            setVisibleOptions(data.slice(0, 1));
+            setHiddenCount(data.length - 1);
             return;
         }
-        // Создаём скрытый клон-контейнер, чтобы измерить ширину вне DOM-окружения
-        const clone = document.createElement('div');
-        // Задаем стили для клон-контейнера
-        clone.style.cssText = `
-      visibility: hidden;
-      position: absolute;
-      width: ${containerEl.clientWidth}px;
-      white-space: nowrap;
-    `;
-        // На основе шаблона создаём копии тегов для всех элементов data
-        data.forEach((option) => {
-            const tagClone = tagTemplate.cloneNode(true);
-            const contentEl = tagClone.firstElementChild;
-            if (contentEl) {
-                // Подставляем текст соответствующего option
-                contentEl.textContent = getOptionLabel(option).toString();
-                // Включаем горизонтальный скролл, чтобы можно было определить overflow
-                contentEl.style.overflowX = 'auto';
-            }
-            clone.appendChild(tagClone);
-        });
-        // Добавляем клон-контейнер в DOM, чтобы получить размеры
-        document.body.appendChild(clone);
-        // Вычисляем, сколько тегов влезает с учётом gap и padding
-        const visibleCount = getTagsCountToAdd(clone, theme.spacing(1), theme.spacing(2));
-        // Сохраняем результат в стейт
-        setMaxItems(visibleCount);
-        // Удаляем клон из DOM
-        document.body.removeChild(clone);
-    };
-    useLayoutEffect(() => {
-        if (typeof window === 'undefined' || !data || !data.length) {
+        // Если нет inputContainerRef и данных всего 1, показываем его даже при малой ширине (fallback)
+        if (hasNoInputContainer && data.length === 1) {
+            setVisibleOptions(data.slice(0, 1));
+            setHiddenCount(0);
+            return;
+        }
+        if (isSmallWidth) {
+            setVisibleOptions([]);
+            setHiddenCount(data.length);
+        }
+        // Расчет количества отображаемых тегов
+        const labels = data.map((item) => getOptionLabel(item).toString());
+        const visibleCount = calculateVisibleTagsCount(labels, availableWidthRef.current, theme);
+        const finalCount = Math.min(visibleCount, data.length);
+        if (finalCount === 0 && hasNoInputContainer) {
+            setVisibleOptions(data.slice(0, 1));
+            setHiddenCount(data.length - 1);
             return;
         }
+        setVisibleOptions(data.slice(0, finalCount));
+        setHiddenCount(data.length - finalCount);
+    };
+    useEffect(() => {
+        updateAvailableWidth();
+    }, [reservedWidth]);
+    useLayoutEffect(() => {
         recomputeMaxItems();
-        // Не пересчитываем ширину контейнера, так как сами ее модифицировали
-        ignoreResizeRef.current = true;
-    }, [data]);
+    }, []);
     useEffect(() => {
-        if (typeof window === 'undefined' || !data || !data.length) {
+        if (!data.length) {
+            setVisibleOptions([]);
+            setHiddenCount(0);
             return;
         }
-        if (!tagsContainerRef.current) {
-            throw new Error('Tags container ref is not set');
-        }
-        // Пересчитываем maxItems при ресайзе контейнера
-        const observer = new ResizeObserver(() => {
-            if (ignoreResizeRef.current) {
-                ignoreResizeRef.current = false;
-                return;
-            }
+        const resizeObserver = new ResizeObserver(() => {
+            updateAvailableWidth();
             recomputeMaxItems();
         });
-        observer.observe(tagsContainerRef.current);
-        return () => observer.disconnect();
+        const target = inputContainerRef?.current ?? tagsContainerRef.current;
+        if (!target) {
+            return;
+        }
+        resizeObserver.observe(target);
+        return () => {
+            resizeObserver.disconnect();
+        };
     }, [data]);
-    const getTagProps = (option, index) => {
+    const getTagProps = (option) => {
         const label = getOptionLabel(option);
-        const shrinks = index === maxItems - 1 && maxItems <= data.length;
         const onDelete = () => {
-            const newValue = data?.filter((value) => {
+            const newValue = data.filter((value) => {
                 if (typeof value === 'string') {
                     return value !== option;
                 }
-                return value[keyId] !== option[keyId];
+                if (keyId) {
+                    return value[keyId] !== option[keyId];
+                }
+                return getOptionLabel(value) !== getOptionLabel(option);
             });
-            onChange(newValue?.length ? newValue : []);
+            onChange(newValue.length ? newValue : []);
         };
-        return { label, shrinks, onDelete };
+        return { label, shrinks: false, onDelete };
     };
-    const visibleOptions = data?.slice(0, maxItems);
+    const showCounter = hiddenCount > 0;
     return {
-        maxItems,
         visibleOptions,
+        hiddenCount,
+        showCounter,
         tagsContainerRef,
         getTagProps,
     };

package/components/TagsList/utils/calculateVisibleTagsCount/calculateVisibleTagsCount.d.ts

@@ -0,0 +1,6 @@
+import type { Theme } from '../../../theme/types';
+/**
+ * Вычисляет количество тегов, которые могут поместиться в доступную ширину
+ * с учетом пробелов между тегами и счетчика оставшихся элементов
+ */
+export declare const calculateVisibleTagsCount: (tagLabels: string[], availableWidth: number, theme: Theme) => number;

package/components/TagsList/utils/calculateVisibleTagsCount/calculateVisibleTagsCount.js

@@ -0,0 +1,35 @@
+import { GAP_BETWEEN_TAGS, MIN_AVAILABLE_WIDTH } from '../../constants';
+import { getTagWidth } from '../getTagWidth';
+/**
+ * Вычисляет количество тегов, которые могут поместиться в доступную ширину
+ * с учетом пробелов между тегами и счетчика оставшихся элементов
+ */
+export const calculateVisibleTagsCount = (tagLabels, availableWidth, theme) => {
+    if (!tagLabels.length || availableWidth <= 0) {
+        return 0;
+    }
+    const tagWidths = tagLabels.map((label) => getTagWidth(label, theme));
+    const canFitTagAtIndex = (tagIndex, accumulatedWidth) => {
+        const isFirstTag = tagIndex === 0;
+        const gapWidth = isFirstTag ? 0 : GAP_BETWEEN_TAGS;
+        const tagsAfterCurrent = tagLabels.length - (tagIndex + 1);
+        const counterTagWidth = tagsAfterCurrent > 0
+            ? getTagWidth(`+${tagsAfterCurrent}`, theme, true) + GAP_BETWEEN_TAGS
+            : 0;
+        const totalWidthWithTag = accumulatedWidth + gapWidth + tagWidths[tagIndex];
+        return totalWidthWithTag + counterTagWidth <= availableWidth;
+    };
+    const fittingTagIndex = tagWidths.findIndex((_, index) => {
+        const widthBeforeCurrentTag = tagWidths
+            .slice(0, index)
+            .reduce((sum, width, i) => sum + width + (i > 0 ? GAP_BETWEEN_TAGS : 0), 0);
+        return !canFitTagAtIndex(index, widthBeforeCurrentTag);
+    });
+    const visibleTagsCount = fittingTagIndex === -1 ? tagLabels.length : fittingTagIndex;
+    if (visibleTagsCount === 0) {
+        const counterWidthAlone = getTagWidth(`+${tagLabels.length}`, theme);
+        const remainingAfterCounter = availableWidth - counterWidthAlone;
+        return remainingAfterCounter < MIN_AVAILABLE_WIDTH ? 0 : 1;
+    }
+    return visibleTagsCount;
+};

package/components/TagsList/utils/calculateVisibleTagsCount/index.d.ts

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

package/components/TagsList/utils/calculateVisibleTagsCount/index.js

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