@astral/ui 4.36.1 → 4.37.1

package/components/NotificationList/ListItem/styles.d.ts

@@ -10,6 +10,7 @@ export declare const Title: import("../../styled").StyledComponent<import("../..
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -19,6 +20,7 @@ export declare const DateText: import("../../styled").StyledComponent<import("..
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/OverflowTypography/OverflowTypography.d.ts

@@ -342,6 +342,7 @@ export declare const OverflowTypography: import("react").ForwardRefExoticCompone
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/components/OverflowTypography/styles.d.ts

@@ -9,6 +9,7 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & OverflowTypographyWrapperProps, {}, {}>;
@@ -18,6 +19,7 @@ export declare const Wrapper: import("../styled").StyledComponent<import("../Typ
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/PageContent/PageContentHeader/Title/styles.d.ts

@@ -5,6 +5,7 @@ export declare const TitleWrapper: import("../../../styled").StyledComponent<imp
     colorIntensity?: import("../../../Typography").Intensity | undefined;
     component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/PageHeader/HeaderContent/Description/styles.d.ts

@@ -5,6 +5,7 @@ export declare const StyledTypography: import("../../../styled").StyledComponent
     colorIntensity?: import("../../../Typography").Intensity | undefined;
     component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/PageHeader/Title/styles.d.ts

@@ -5,6 +5,7 @@ export declare const TitleWrapper: import("../../styled").StyledComponent<import
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/Pagination/PaginationItem/styles.d.ts

@@ -5,6 +5,7 @@ export declare const Ellipsis: import("../../styled").StyledComponent<import("..
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/PinButton/styles.d.ts

@@ -14,6 +14,7 @@ export declare const Content: import("../styled").StyledComponent<import("../Typ
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/ProductSwitcher/Content/styles.d.ts

@@ -19,6 +19,7 @@ export declare const ProductName: import("../../styled").StyledComponent<import(
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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';

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

@@ -0,0 +1 @@
+export declare const getAvailableWidth: (containerEl: HTMLElement, reservedWidth?: number) => number;

package/components/TagsList/utils/getAvailableWidth/getAvailableWidth.js

@@ -0,0 +1,7 @@
+export const getAvailableWidth = (containerEl, reservedWidth = 0) => {
+    const containerWidth = containerEl.clientWidth;
+    const paddingLeft = parseFloat(getComputedStyle(containerEl).paddingLeft);
+    const paddingRight = parseFloat(getComputedStyle(containerEl).paddingRight);
+    const availableWidth = containerWidth - paddingLeft - paddingRight - reservedWidth;
+    return availableWidth;
+};

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

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

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

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

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

@@ -1,2 +1,2 @@
 import type { TagValue } from '../../types';
-export declare const getKey: (option: TagValue, keyId: string) => string;
+export declare const getKey: <TData extends TagValue>(option: TData, keyId: string | undefined, getOptionLabel: (tagOption: TData) => string | number) => string;

package/components/TagsList/utils/getKey/getKey.js

@@ -1,7 +1,10 @@
-export const getKey = (option, keyId) => {
+export const getKey = (option, keyId, getOptionLabel) => {
     if (typeof option === 'string') {
         return option;
     }
-    const key = option[keyId];
-    return typeof key === 'number' ? key.toString() : key;
+    if (keyId) {
+        const key = option[keyId];
+        return typeof key === 'number' ? key.toString() : key;
+    }
+    return getOptionLabel(option).toString();
 };

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

@@ -0,0 +1,2 @@
+import { type Theme } from '../../../theme/types';
+export declare const getTagWidth: (label: string | number, theme: Theme, isCounter?: boolean) => number;

package/components/TagsList/utils/getTagWidth/getTagWidth.js

@@ -0,0 +1,21 @@
+import { MAX_TAG_WIDTH } from '../../Tag';
+export const getTagWidth = (label, theme, isCounter = false) => {
+    /** 16px иконка и 2px padding */
+    const DELETE_ICON_WIDTH = 18;
+    const el = document.createElement('div');
+    el.textContent = label.toString();
+    el.style.visibility = 'hidden';
+    el.style.position = 'absolute';
+    el.style.display = 'inline-flex';
+    el.style.whiteSpace = 'nowrap';
+    el.style.padding = theme.spacing(0, 2);
+    el.style.paddingLeft = theme.spacing(2);
+    el.style.paddingRight = isCounter ? theme.spacing(2) : theme.microSpacing(1);
+    el.style.boxSizing = 'border-box';
+    document.body.appendChild(el);
+    const width = isCounter
+        ? el.getBoundingClientRect().width
+        : el.getBoundingClientRect().width + DELETE_ICON_WIDTH;
+    document.body.removeChild(el);
+    return Math.ceil(Math.min(width, parseInt(MAX_TAG_WIDTH, 10)));
+};

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

@@ -0,0 +1 @@
+export * from './getTagWidth';

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

@@ -0,0 +1 @@
+export * from './getTagWidth';

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

@@ -1,2 +1,5 @@
 export { getElementByText } from './getElementByText';
 export { getKey } from './getKey';
+export { getTagWidth } from './getTagWidth';
+export { getAvailableWidth } from './getAvailableWidth';
+export { calculateVisibleTagsCount } from './calculateVisibleTagsCount';

package/components/TagsList/utils/index.js

@@ -1,2 +1,5 @@
 export { getElementByText } from './getElementByText';
 export { getKey } from './getKey';
+export { getTagWidth } from './getTagWidth';
+export { getAvailableWidth } from './getAvailableWidth';
+export { calculateVisibleTagsCount } from './calculateVisibleTagsCount';

package/components/TextField/TextField.js

@@ -4,7 +4,7 @@ import { FormHelperTextContent } from '../FormHelperText';
 import { classNames } from '../utils/classNames';
 import { textFieldClassnames } from './constants';
 import { StyledTextField } from './styles';
-export const TextField = forwardRef(({ success, error, helperText: helperTextProp, fullWidth = false, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed = true, onBlur, hideHelperText = false, className, ...props }, ref) => {
+export const TextField = forwardRef(({ success, error, helperText: helperTextProp, fullWidth = false, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed = true, onBlur, hideHelperText = false, className, disabled, ...props }, ref) => {
     const color = useMemo(() => {
         if (success) {
             return 'success';
@@ -37,9 +37,10 @@ export const TextField = forwardRef(({ success, error, helperText: helperTextPro
         }
         onBlur?.(event);
     };
-    const classes = useMemo(() => {
-        return classNames(className, hideHelperText ? textFieldClassnames.hideHelperText : '');
-    }, [className, hideHelperText]);
+    const classnames = useMemo(() => classNames(className, {
+        [textFieldClassnames.hideHelperText]: hideHelperText,
+        [textFieldClassnames.disabled]: disabled,
+    }), [className, hideHelperText, disabled]);
     return (_jsx(StyledTextField, { ref: ref, variant: "outlined", fullWidth: fullWidth, error: error, color: color, helperText: helperText, InputProps: {
             startAdornment,
             endAdornment,
@@ -47,5 +48,5 @@ export const TextField = forwardRef(({ success, error, helperText: helperTextPro
         }, inputProps: {
             maxLength,
             ...inputProps,
-        }, onBlur: handleBlur, className: classes, ...props }));
+        }, onBlur: handleBlur, className: classnames, disabled: disabled, ...props }));
 });