@astral/ui 4.36.1 → 4.37.0

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 }));
 });

package/components/TextField/constants.d.ts

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

package/components/TextField/constants.js

@@ -1,4 +1,5 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const textFieldClassnames = {
     hideHelperText: createUIKitClassname('text-field__helper-text_hidden'),
+    disabled: createUIKitClassname('text-field_disabled'),
 };

package/components/TextField/styles.js

@@ -14,4 +14,8 @@ export const StyledTextField = styled(TextField) `
       }
     } 
   }
+
+  &.${textFieldClassnames.disabled} {
+    pointer-events: none;
+  }
 `;

package/components/TreeLikeAsyncAutocomplete/Input/Input.js

@@ -9,7 +9,7 @@ import { IconWrapper, StyledTagsList, StyledTextField } from './styles';
 import { useLogic } from './useLogic';
 const ClearButton = ({ disabled, onClick }) => (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, onClick: onClick, title: CLEAR_TEXT, "aria-label": CLEAR_TEXT, children: _jsx(CrossOutlineMd, {}) }));
 export const Input = forwardRef(({ disabled, onChange: propsOnChange, value, inputRef, hideHelperText = false, onClick, isLoading, ...restProps }, forwardedRef) => {
-    const { isVisibleClearButton, onChange, isVisibleTagsList, textFieldProps, onClearAll, } = useLogic({
+    const { isVisibleClearButton, isVisibleTagsList, onChange, textFieldProps, onClearAll, } = useLogic({
         inputRef,
         value,
         onChange: propsOnChange,

package/node/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/node/components/Autocomplete/Autocomplete.js

@@ -14,7 +14,7 @@ const Checkbox_1 = require("../Checkbox");
 const forwardRefWithGeneric_1 = require("../forwardRefWithGeneric");
 const Loader_1 = require("../Loader");
 const OverflowTypography_1 = require("../OverflowTypography");
-const Tag_1 = require("../Tag");
+const TagsList_1 = require("../TagsList");
 const TextField_1 = require("../TextField");
 const classNames_1 = require("../utils/classNames");
 const constants_1 = require("./constants");
@@ -22,14 +22,51 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = (0, useLogic_1.useLogic)(props);
-    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = constants_1.DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading, ...restProps } = props;
+    const inputBaseRef = (0, react_1.useRef)(null);
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = constants_1.DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading, value, onChange, ...restProps } = props;
     const renderInput = (0, react_1.useCallback)((inputParams) => {
+        const createStartAdornment = () => {
+            if (!multiple || !Array.isArray(value)) {
+                return null;
+            }
+            const tagsListElement = ((0, jsx_runtime_1.jsx)(TagsList_1.TagsList, { data: value, getOptionLabel: (option) => getOptionLabel?.(option) ??
+                    option.toString(), inputContainerRef: inputBaseRef, reservedWidth: constants_1.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: (0, classNames_1.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 : '',
@@ -46,7 +83,9 @@ const AutocompleteInner = (props, ref) => {
         return (0, jsx_runtime_1.jsx)(TextField_1.TextField, { ...generalInputParams });
     }, [
         isValueEmpty,
+        value,
         externalRenderInput,
+        externalRenderTags,
         inputRef,
         required,
         placeholder,
@@ -56,6 +95,9 @@ const AutocompleteInner = (props, ref) => {
         helperText,
         size,
         hideHelperText,
+        multiple,
+        getOptionLabel,
+        onChange,
     ]);
     const renderOption = (0, react_1.useCallback)((optionProps, option, optionState, ownerState) => {
         if (externalRenderOption) {
@@ -65,26 +107,22 @@ const AutocompleteInner = (props, ref) => {
         const { key, ...restOptionProps } = optionProps;
         return ((0, jsx_runtime_1.jsxs)(styles_1.StyledMenuItem, { selected: isSelected, ...restOptionProps, children: [multiple && ((0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { role: "menuitemcheckbox", checked: isSelected }) })), (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: constants_1.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, ...overflowOption, children: optionProps.key })] }, key));
     }, [multiple, overflowOption, externalRenderOption]);
-    const renderTags = (0, react_1.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 ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { variant: "light", color: "grey", label: title, ...tagProps }, key));
-        });
-    }, [getOptionLabel, externalRenderTags]);
     const renderPopper = (0, react_1.useCallback)((popperProps) => {
         if (!isPopperVisible) {
             return null;
         }
         return (0, jsx_runtime_1.jsx)(Popper_1.default, { ...popperProps });
     }, [isPopperVisible]);
+    const renderTags = (0, react_1.useCallback)((tags, getTagProps, ownerState) => {
+        if (externalRenderTags) {
+            return externalRenderTags(tags, getTagProps, ownerState);
+        }
+        return null;
+    }, [externalRenderTags]);
     return ((0, jsx_runtime_1.jsx)(styles_1.StyledAutocomplete, { ...restProps, ref: ref, size: size, clearText: clearText, closeText: !loading ? closeText : '', openText: !loading ? openText : '', loadingText: loadingText, multiple: multiple, disableCloseOnSelect: multiple, clearIcon: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}), loading: loading, popupIcon: loading ? (0, jsx_runtime_1.jsx)(Loader_1.Loader, { color: "primary", size: "small" }) : (0, jsx_runtime_1.jsx)(DownOutlineMd_1.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 }));
 };
 exports.Autocomplete = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(AutocompleteInner);

package/node/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/node/components/Autocomplete/constants.js

@@ -1,5 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_PLACEHOLDER = exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = void 0;
+exports.autocompleteClassnames = exports.DEFAULT_PLACEHOLDER = exports.INPUT_MIN_WIDTH = exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+exports.INPUT_MIN_WIDTH = 110;
 exports.DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';
+exports.autocompleteClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('autocomplete'),
+    multiple: (0, createUIKitClassname_1.createUIKitClassname)('autocomplete_multiple'),
+    emptyValue: (0, createUIKitClassname_1.createUIKitClassname)('autocomplete_empty-value'),
+};

package/node/components/Autocomplete/styles.js

@@ -31,6 +31,7 @@ const InputBase_1 = require("@mui/material/InputBase");
 const MenuItem_1 = require("../MenuItem");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.StyledMenuItem = (0, styled_1.styled)(MenuItem_1.MenuItem) `
     max-height: ${({ theme }) => theme.spacing(13)};
 
@@ -49,5 +50,18 @@ exports.StyledAutocomplete = (0, styled_1.styled)(Autocomplete_1.default) `
   
   & .${Autocomplete_1.autocompleteClasses.endAdornment} .${IconButton_1.iconButtonClasses.root}:hover {
       background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
-    }
+  }
+
+  &:not(.${constants_1.autocompleteClassnames.emptyValue}) .${InputBase_1.inputBaseClasses.root} {
+    gap: ${({ theme }) => theme.spacing(3)};
+  }
+
+  & .${Autocomplete_1.autocompleteClasses.inputRoot} .${InputBase_1.inputBaseClasses.input} {
+    min-width: ${constants_1.INPUT_MIN_WIDTH}px;
+  }
+
+  & .${Autocomplete_1.autocompleteClasses.inputRoot} {
+    flex-wrap: nowrap;
+  }
+    
 `;

package/node/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/node/components/Autocomplete/useLogic/useLogic.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const classNames_1 = require("../../utils/classNames");
+const constants_1 = require("../constants");
 const utils_1 = require("./utils");
-const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
+const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
     const [innerInputValue, setInnerInputValue] = (0, react_1.useState)('');
     const isValueEmpty = (0, utils_1.checkIsInputEmpty)(value);
     const isInnerInputValueNotEmpty = innerInputValue.length >= 1;
@@ -24,10 +26,17 @@ const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, aut
             setInnerInputValue(currentValue);
         }
     };
+    const classnames = (0, react_1.useMemo)(() => {
+        return (0, classNames_1.classNames)(className, constants_1.autocompleteClassnames.root, {
+            [constants_1.autocompleteClassnames.multiple]: multiple,
+            [constants_1.autocompleteClassnames.emptyValue]: isValueEmpty,
+        });
+    }, [multiple, isValueEmpty]);
     return {
         isValueEmpty,
         isPopperVisible,
         autocompleteProps: {
+            className: classnames,
             isOptionEqualToValue,
             autoHighlight: freeSolo ? false : autoHighlight,
             noOptionsText: isLoadedDataError ? loadedDataError : noOptionsText,

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

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

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

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

package/node/components/TagsList/Tag/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_TAG_WIDTH = void 0;
+exports.MAX_TAG_WIDTH = '246px';

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

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

package/node/components/TagsList/Tag/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Tag"), exports);
+__exportStar(require("./constants"), exports);

package/node/components/TagsList/Tag/styles.js

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

package/node/components/TagsList/TagsList.js

@@ -11,11 +11,11 @@ const utils_1 = require("./utils");
  * Не предназначен для использования в продуктах, не экспортируется из пакета
  */
 const TagsList = (props) => {
-    const { maxItems, tagsContainerRef, visibleOptions, getTagProps } = (0, useLogic_1.useLogic)(props);
-    const { className, data, keyId, isDisabled, onClick } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, ref: tagsContainerRef, children: [visibleOptions?.map((option, index) => {
-                const tagProps = getTagProps(option, index);
-                return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { isDisabled: isDisabled, onClick: onClick, ...tagProps }, (0, utils_1.getKey)(option, keyId)));
-            }), data && maxItems < data.length && ((0, jsx_runtime_1.jsx)(styles_1.CounterTag, { isDisabled: isDisabled, label: `+${data.length - maxItems}`, onClick: onClick }, "more"))] }));
+    const { hiddenCount, tagsContainerRef, visibleOptions, getTagProps, showCounter, } = (0, useLogic_1.useLogic)(props);
+    const { className, keyId, isDisabled, onClick, getOptionLabel } = props;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, ref: tagsContainerRef, children: [visibleOptions?.map((option) => {
+                const tagProps = getTagProps(option);
+                return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { isDisabled: isDisabled, onClick: onClick, ...tagProps }, (0, utils_1.getKey)(option, keyId, getOptionLabel)));
+            }), showCounter && ((0, jsx_runtime_1.jsx)(styles_1.CounterTag, { isDisabled: isDisabled, label: `+${hiddenCount}`, onClick: onClick }, "more"))] }));
 };
 exports.TagsList = TagsList;

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

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

package/node/components/TagsList/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GAP_BETWEEN_TAGS = exports.MIN_AVAILABLE_WIDTH = void 0;
+exports.MIN_AVAILABLE_WIDTH = 50;
+exports.GAP_BETWEEN_TAGS = 4; // 4px

package/node/components/TagsList/styles.js

@@ -3,12 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CounterTag = exports.Wrapper = void 0;
 const styled_1 = require("../styled");
 const Tag_1 = require("../Tag");
+const constants_1 = require("./constants");
 const Tag_2 = require("./Tag");
 exports.Wrapper = styled_1.styled.div `
+  overflow: hidden;
   display: flex;
-  column-gap: ${({ theme }) => theme.spacing(1)};
+  column-gap: ${constants_1.GAP_BETWEEN_TAGS}px;
 `;
 exports.CounterTag = (0, styled_1.styled)(Tag_2.Tag) `
+  overflow: unset;
+
   .${Tag_1.tagClassnames.label} {
     min-width: unset;
   }

package/node/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/node/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;