@astral/ui 4.36.1 → 4.37.0

package/node/components/TagsList/useLogic/useLogic.js

@@ -3,146 +3,106 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useTheme_1 = require("../../theme/hooks/useTheme");
-const useLogic = ({ data = [], keyId, getOptionLabel, onChange, }) => {
-    // Сколько тегов можно отобразить в инпуте
-    const [maxItems, setMaxItems] = (0, react_1.useState)(1);
-    const ignoreResizeRef = (0, react_1.useRef)(false);
+const constants_1 = require("../constants");
+const utils_1 = require("../utils");
+const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputContainerRef, reservedWidth = 0, }) => {
+    const [visibleOptions, setVisibleOptions] = (0, react_1.useState)([]);
+    const [hiddenCount, setHiddenCount] = (0, react_1.useState)(0);
     const tagsContainerRef = (0, react_1.useRef)(null);
+    const availableWidthRef = (0, react_1.useRef)(0);
     const theme = (0, useTheme_1.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 = (0, utils_1.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 < constants_1.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);
-    };
-    (0, react_1.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 = (0, utils_1.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);
+    };
+    (0, react_1.useEffect)(() => {
+        updateAvailableWidth();
+    }, [reservedWidth]);
+    (0, react_1.useLayoutEffect)(() => {
         recomputeMaxItems();
-        // Не пересчитываем ширину контейнера, так как сами ее модифицировали
-        ignoreResizeRef.current = true;
-    }, [data]);
+    }, []);
     (0, react_1.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/node/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/node/components/TagsList/utils/calculateVisibleTagsCount/calculateVisibleTagsCount.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateVisibleTagsCount = void 0;
+const constants_1 = require("../../constants");
+const getTagWidth_1 = require("../getTagWidth");
+/**
+ * Вычисляет количество тегов, которые могут поместиться в доступную ширину
+ * с учетом пробелов между тегами и счетчика оставшихся элементов
+ */
+const calculateVisibleTagsCount = (tagLabels, availableWidth, theme) => {
+    if (!tagLabels.length || availableWidth <= 0) {
+        return 0;
+    }
+    const tagWidths = tagLabels.map((label) => (0, getTagWidth_1.getTagWidth)(label, theme));
+    const canFitTagAtIndex = (tagIndex, accumulatedWidth) => {
+        const isFirstTag = tagIndex === 0;
+        const gapWidth = isFirstTag ? 0 : constants_1.GAP_BETWEEN_TAGS;
+        const tagsAfterCurrent = tagLabels.length - (tagIndex + 1);
+        const counterTagWidth = tagsAfterCurrent > 0
+            ? (0, getTagWidth_1.getTagWidth)(`+${tagsAfterCurrent}`, theme, true) + constants_1.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 ? constants_1.GAP_BETWEEN_TAGS : 0), 0);
+        return !canFitTagAtIndex(index, widthBeforeCurrentTag);
+    });
+    const visibleTagsCount = fittingTagIndex === -1 ? tagLabels.length : fittingTagIndex;
+    if (visibleTagsCount === 0) {
+        const counterWidthAlone = (0, getTagWidth_1.getTagWidth)(`+${tagLabels.length}`, theme);
+        const remainingAfterCounter = availableWidth - counterWidthAlone;
+        return remainingAfterCounter < constants_1.MIN_AVAILABLE_WIDTH ? 0 : 1;
+    }
+    return visibleTagsCount;
+};
+exports.calculateVisibleTagsCount = calculateVisibleTagsCount;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateVisibleTagsCount = void 0;
+var calculateVisibleTagsCount_1 = require("./calculateVisibleTagsCount");
+Object.defineProperty(exports, "calculateVisibleTagsCount", { enumerable: true, get: function () { return calculateVisibleTagsCount_1.calculateVisibleTagsCount; } });

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvailableWidth = void 0;
+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;
+};
+exports.getAvailableWidth = getAvailableWidth;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvailableWidth = void 0;
+var getAvailableWidth_1 = require("./getAvailableWidth");
+Object.defineProperty(exports, "getAvailableWidth", { enumerable: true, get: function () { return getAvailableWidth_1.getAvailableWidth; } });

package/node/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/node/components/TagsList/utils/getKey/getKey.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getKey = void 0;
-const getKey = (option, keyId) => {
+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();
 };
 exports.getKey = getKey;

package/node/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/node/components/TagsList/utils/getTagWidth/getTagWidth.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTagWidth = void 0;
+const Tag_1 = require("../../Tag");
+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(Tag_1.MAX_TAG_WIDTH, 10)));
+};
+exports.getTagWidth = getTagWidth;

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

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

package/node/components/TagsList/{public.js → utils/getTagWidth/index.js}

@@ -14,5 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TagsList"), exports);
-__exportStar(require("./types"), exports);
+__exportStar(require("./getTagWidth"), exports);

package/node/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/node/components/TagsList/utils/index.js

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getKey = exports.getElementByText = void 0;
+exports.calculateVisibleTagsCount = exports.getAvailableWidth = exports.getTagWidth = exports.getKey = exports.getElementByText = void 0;
 var getElementByText_1 = require("./getElementByText");
 Object.defineProperty(exports, "getElementByText", { enumerable: true, get: function () { return getElementByText_1.getElementByText; } });
 var getKey_1 = require("./getKey");
 Object.defineProperty(exports, "getKey", { enumerable: true, get: function () { return getKey_1.getKey; } });
+var getTagWidth_1 = require("./getTagWidth");
+Object.defineProperty(exports, "getTagWidth", { enumerable: true, get: function () { return getTagWidth_1.getTagWidth; } });
+var getAvailableWidth_1 = require("./getAvailableWidth");
+Object.defineProperty(exports, "getAvailableWidth", { enumerable: true, get: function () { return getAvailableWidth_1.getAvailableWidth; } });
+var calculateVisibleTagsCount_1 = require("./calculateVisibleTagsCount");
+Object.defineProperty(exports, "calculateVisibleTagsCount", { enumerable: true, get: function () { return calculateVisibleTagsCount_1.calculateVisibleTagsCount; } });

package/node/components/TextField/TextField.js

@@ -7,7 +7,7 @@ const FormHelperText_1 = require("../FormHelperText");
 const classNames_1 = require("../utils/classNames");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-exports.TextField = (0, react_1.forwardRef)(({ success, error, helperText: helperTextProp, fullWidth = false, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed = true, onBlur, hideHelperText = false, className, ...props }, ref) => {
+exports.TextField = (0, react_1.forwardRef)(({ success, error, helperText: helperTextProp, fullWidth = false, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed = true, onBlur, hideHelperText = false, className, disabled, ...props }, ref) => {
     const color = (0, react_1.useMemo)(() => {
         if (success) {
             return 'success';
@@ -40,9 +40,10 @@ exports.TextField = (0, react_1.forwardRef)(({ success, error, helperText: helpe
         }
         onBlur?.(event);
     };
-    const classes = (0, react_1.useMemo)(() => {
-        return (0, classNames_1.classNames)(className, hideHelperText ? constants_1.textFieldClassnames.hideHelperText : '');
-    }, [className, hideHelperText]);
+    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(className, {
+        [constants_1.textFieldClassnames.hideHelperText]: hideHelperText,
+        [constants_1.textFieldClassnames.disabled]: disabled,
+    }), [className, hideHelperText, disabled]);
     return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ref: ref, variant: "outlined", fullWidth: fullWidth, error: error, color: color, helperText: helperText, InputProps: {
             startAdornment,
             endAdornment,
@@ -50,5 +51,5 @@ exports.TextField = (0, react_1.forwardRef)(({ success, error, helperText: helpe
         }, inputProps: {
             maxLength,
             ...inputProps,
-        }, onBlur: handleBlur, className: classes, ...props }));
+        }, onBlur: handleBlur, className: classnames, disabled: disabled, ...props }));
 });

package/node/components/TextField/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const textFieldClassnames: {
     hideHelperText: string;
+    disabled: string;
 };

package/node/components/TextField/constants.js

@@ -4,4 +4,5 @@ exports.textFieldClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.textFieldClassnames = {
     hideHelperText: (0, createUIKitClassname_1.createUIKitClassname)('text-field__helper-text_hidden'),
+    disabled: (0, createUIKitClassname_1.createUIKitClassname)('text-field_disabled'),
 };

package/node/components/TextField/styles.js

@@ -20,4 +20,8 @@ exports.StyledTextField = (0, styled_1.styled)(TextField_1.default) `
       }
     } 
   }
+
+  &.${constants_1.textFieldClassnames.disabled} {
+    pointer-events: none;
+  }
 `;

package/node/components/TreeLikeAsyncAutocomplete/Input/Input.js

@@ -12,7 +12,7 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, onClick: onClick, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }));
 exports.Input = (0, react_1.forwardRef)(({ disabled, onChange: propsOnChange, value, inputRef, hideHelperText = false, onClick, isLoading, ...restProps }, forwardedRef) => {
-    const { isVisibleClearButton, onChange, isVisibleTagsList, textFieldProps, onClearAll, } = (0, useLogic_1.useLogic)({
+    const { isVisibleClearButton, isVisibleTagsList, onChange, textFieldProps, onClearAll, } = (0, useLogic_1.useLogic)({
         inputRef,
         value,
         onChange: propsOnChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.36.1",
+  "version": "4.37.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {

package/components/TagsList/public.d.ts

@@ -1,2 +0,0 @@
-export * from './TagsList';
-export * from './types';

package/components/TagsList/public.js

@@ -1,2 +0,0 @@
-export * from './TagsList';
-export * from './types';

package/node/components/TagsList/public.d.ts

@@ -1,2 +0,0 @@
-export * from './TagsList';
-export * from './types';