@astral/ui 4.106.0 → 4.108.0

package/components/AsyncAutocomplete/useLogic/useLogic.d.ts

@@ -366,6 +366,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
         openOnFocus?: boolean | undefined;
         selectOnFocus?: boolean | undefined;
         loadedDataError?: string | undefined;
+        focusedHelperText?: string | undefined;
         overflowOption?: import("../..").OverflowedElementProps | undefined;
         options: TOptions[];
         disabled: boolean | undefined;

package/components/Autocomplete/Autocomplete.d.ts

@@ -18,4 +18,5 @@ export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends b
     openText?: string | undefined;
     clearText?: string | undefined;
     hideHelperText?: boolean | undefined;
+    focusedHelperText?: string | undefined;
 } & import("react").RefAttributes<unknown>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/components/Autocomplete/Autocomplete.js

@@ -10,21 +10,23 @@ import { Loader } from '../Loader';
 import { OverflowTypography } from '../OverflowTypography';
 import { TagsList } from '../TagsList';
 import { TextField } from '../TextField';
+import { Typography } from '../Typography';
 import { cn } from '../utils/cn';
 import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, INPUT_MIN_WIDTH, } from './constants';
-import { StyledAutocomplete, StyledMenuItem } from './styles';
+import { StyledAutocomplete, StyledFocusedHelperOption, StyledMenuItem, } from './styles';
 import { useLogic } from './useLogic';
+import { checkIsFocusedHelperOption } from './utils';
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(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 { 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, focusedHelperText, 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) => {
+            return (_jsx(TagsList, { data: value, getOptionLabel: (option) => getOptionLabel?.(option) ??
+                    option.toString(), inputContainerRef: inputBaseRef, fieldRef: inputBaseRef, reservedWidth: INPUT_MIN_WIDTH, onChange: (tagValues) => {
                     if (!onChange) {
                         return;
                     }
@@ -36,7 +38,6 @@ const AutocompleteInner = (props, ref) => {
                     const reason = 'removeOption';
                     onChange(syntheticEvent, tagValues, reason);
                 } }));
-            return tagsListElement;
         };
         const generalInputParams = {
             ...inputParams,
@@ -94,13 +95,16 @@ const AutocompleteInner = (props, ref) => {
         onChange,
     ]);
     const renderOption = useCallback((optionProps, option, optionState, ownerState) => {
+        const { key, ...restOptionProps } = optionProps;
+        if (checkIsFocusedHelperOption(option)) {
+            return (_jsx(StyledFocusedHelperOption, { role: "presentation", ...restOptionProps, children: _jsx(Typography, { variant: "body1", color: "grey", colorIntensity: "600", children: focusedHelperText }) }, key));
+        }
         if (externalRenderOption) {
             return externalRenderOption(optionProps, option, optionState, ownerState);
         }
         const isSelected = Boolean(optionProps['aria-selected']);
-        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]);
+    }, [focusedHelperText, multiple, overflowOption, externalRenderOption]);
     const renderPopper = useCallback((popperProps) => {
         if (!isPopperVisible) {
             return null;
@@ -117,6 +121,6 @@ const AutocompleteInner = (props, ref) => {
             popper: {
                 component: renderPopper,
             },
-        }, getOptionLabel: getOptionLabel, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, onChange: onChange, ...autocompleteProps }));
+        }, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, ...autocompleteProps }));
 };
 export const Autocomplete = forwardRefWithGeneric(AutocompleteInner);

package/components/Autocomplete/constants.d.ts

@@ -1,6 +1,7 @@
 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 FOCUSED_HELPER_OPTION: unique symbol;
 export declare const autocompleteClassnames: {
     root: string;
     multiple: string;

package/components/Autocomplete/constants.js

@@ -2,6 +2,7 @@ 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 FOCUSED_HELPER_OPTION = Symbol('focusedHelperOption');
 export const autocompleteClassnames = {
     root: createUIKitClassname('autocomplete'),
     multiple: createUIKitClassname('autocomplete_multiple'),

package/components/Autocomplete/styles.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import MuiAutocomplete from '@mui/material/Autocomplete';
+export declare const StyledFocusedHelperOption: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const StyledMenuItem: import("../styled").StyledComponent<import("..").WithoutEmotionSpecific<Omit<import("@mui/material").MenuItemProps, "component">> & {
     disabledReason?: string | undefined;
     note?: string | undefined;

package/components/Autocomplete/styles.js

@@ -7,6 +7,15 @@ import { MenuItem } from '../MenuItem';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
 import { autocompleteClassnames, INPUT_MIN_WIDTH } from './constants';
+export const StyledFocusedHelperOption = styled.li `
+  &&.${autocompleteClasses.option} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    opacity: 1;
+  }
+`;
 export const StyledMenuItem = styled(MenuItem) `
     max-height: ${({ theme }) => theme.spacing(13)};
 

package/components/Autocomplete/types.d.ts

@@ -48,4 +48,8 @@ export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean
      * Включает/отключает резервирование места под helperText
      */
     hideHelperText?: boolean;
+    /**
+     * Текст подсказки в popover при фокусе
+     */
+    focusedHelperText?: string;
 };

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

@@ -1,16 +1,23 @@
-import { type AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
+import { type AutocompleteChangeDetails, type AutocompleteChangeReason, type AutocompleteFreeSoloValueMapping, type AutocompleteInputChangeReason, type AutocompleteValue } from '@mui/material';
 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, multiple, className, 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, inputValue, getOptionLabel: externalGetOptionLabel, isOptionEqualToValue: externalOptionEqualToValue, getOptionDisabled: externalGetOptionDisabled, filterOptions: externalFilterOptions, groupBy: externalGroupBy, openOnFocus, autoHighlight, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError, noOptionsText, focusedHelperText, onInputChange, onChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
     isValueEmpty: boolean;
-    isPopperVisible: boolean | undefined;
+    isPopperVisible: boolean;
     autocompleteProps: {
         className: string;
         isOptionEqualToValue: (option: TAutocompleteValueProps, currentValue: TAutocompleteValueProps) => boolean;
+        getOptionDisabled: (option: 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;
+        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 | undefined;
+        options: readonly TAutocompleteValueProps[];
+        getOptionLabel: (option: TAutocompleteValueProps | AutocompleteFreeSoloValueMapping<TFreeSolo>) => string;
+        filterOptions: ((options: TAutocompleteValueProps[], state: import("@mui/material").FilterOptionsState<TAutocompleteValueProps>) => TAutocompleteValueProps[]) | undefined;
+        groupBy: ((option: TAutocompleteValueProps) => string) | undefined;
+        onChange: (event: SyntheticEvent, newValue: AutocompleteValue<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<TAutocompleteValueProps> | undefined) => void;
         onInputChange: (event: SyntheticEvent, currentValue: string, reason: AutocompleteInputChangeReason) => void;
+        openOnFocus: boolean;
     };
 };
 export {};

package/components/Autocomplete/useLogic/useLogic.js

@@ -1,22 +1,81 @@
 import { useCallback, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn';
-import { autocompleteClassnames } from '../constants';
-import { checkIsInputEmpty } from './utils';
-export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
+import { autocompleteClassnames, FOCUSED_HELPER_OPTION } from '../constants';
+import { checkIsFocusedHelperOption } from '../utils';
+import { checkIsFocusedHelperChange, checkIsInputEmpty, checkIsPopperVisible, } from './utils';
+export const useLogic = ({ value, inputValue, getOptionLabel: externalGetOptionLabel, isOptionEqualToValue: externalOptionEqualToValue, getOptionDisabled: externalGetOptionDisabled, filterOptions: externalFilterOptions, groupBy: externalGroupBy, openOnFocus, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', focusedHelperText, onInputChange, onChange, }) => {
     const [innerInputValue, setInnerInputValue] = useState('');
     const isValueEmpty = checkIsInputEmpty(value);
-    const isInnerInputValueNotEmpty = innerInputValue.length >= 1;
-    const isOptionsAvailable = options.length > 0;
-    const isPopperVisible = (loading && isOptionsAvailable) ||
-        (!loading && !isOptionsAvailable && isInnerInputValueNotEmpty) ||
-        isOptionsAvailable ||
-        isLoadedDataError;
+    const isInputTextEmpty = (inputValue ?? '').length === 0 && innerInputValue.length === 0;
+    const hasOptions = options.length > 0;
+    const hasFocusedHelperText = Boolean(focusedHelperText);
+    const shouldShowFocusedHelper = hasFocusedHelperText &&
+        isInputTextEmpty &&
+        !hasOptions &&
+        !loading &&
+        !isLoadedDataError;
+    const isPopperVisible = checkIsPopperVisible({
+        loading,
+        hasOptions,
+        isInputValueNotEmpty: !isInputTextEmpty,
+        isLoadedDataError,
+        shouldShowFocusedHelper,
+    });
+    const hasFocusedHelperOption = shouldShowFocusedHelper && Boolean(freeSolo);
+    const resolvedNoOptionsText = useMemo(() => {
+        if (isLoadedDataError) {
+            return loadedDataError;
+        }
+        if (shouldShowFocusedHelper) {
+            return focusedHelperText;
+        }
+        return noOptionsText;
+    }, [
+        isLoadedDataError,
+        loadedDataError,
+        shouldShowFocusedHelper,
+        focusedHelperText,
+        noOptionsText,
+    ]);
+    const autocompleteOptions = useMemo(() => {
+        if (hasFocusedHelperOption) {
+            return [FOCUSED_HELPER_OPTION];
+        }
+        return options;
+    }, [hasFocusedHelperOption, options]);
+    const resolveGetOptionLabel = useCallback((option) => {
+        if (checkIsFocusedHelperOption(option)) {
+            return focusedHelperText ?? '';
+        }
+        if (externalGetOptionLabel) {
+            return externalGetOptionLabel(option);
+        }
+        const optionWithLabel = option;
+        return optionWithLabel.label ?? String(option);
+    }, [externalGetOptionLabel, focusedHelperText]);
+    const handleChange = useCallback((event, newValue, reason, details) => {
+        if (checkIsFocusedHelperChange(newValue, details?.option)) {
+            return;
+        }
+        onChange?.(event, newValue, reason, details);
+    }, [onChange]);
     const isOptionEqualToValue = useCallback((option, currentValue) => {
+        if (checkIsFocusedHelperOption(option) ||
+            checkIsFocusedHelperOption(currentValue)) {
+            return false;
+        }
         if (externalOptionEqualToValue) {
             return externalOptionEqualToValue(option, currentValue);
         }
         return JSON.stringify(option) === JSON.stringify(currentValue);
     }, [externalOptionEqualToValue]);
+    const resolveGetOptionDisabled = useCallback((option) => {
+        if (checkIsFocusedHelperOption(option)) {
+            return true;
+        }
+        return externalGetOptionDisabled?.(option) ?? false;
+    }, [externalGetOptionDisabled]);
+    const resolvedOpenOnFocus = hasFocusedHelperText || Boolean(openOnFocus);
     const handleInputChange = (event, currentValue, reason) => {
         onInputChange?.(event, currentValue, reason);
         if (!loading) {
@@ -28,16 +87,23 @@ export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToVal
             [autocompleteClassnames.multiple]: multiple,
             [autocompleteClassnames.emptyValue]: isValueEmpty,
         });
-    }, [multiple, isValueEmpty]);
+    }, [className, multiple, isValueEmpty]);
     return {
         isValueEmpty,
         isPopperVisible,
         autocompleteProps: {
             className: classnames,
             isOptionEqualToValue,
+            getOptionDisabled: resolveGetOptionDisabled,
             autoHighlight: freeSolo ? false : autoHighlight,
-            noOptionsText: isLoadedDataError ? loadedDataError : noOptionsText,
+            noOptionsText: resolvedNoOptionsText,
+            options: autocompleteOptions,
+            getOptionLabel: resolveGetOptionLabel,
+            filterOptions: hasFocusedHelperOption ? undefined : externalFilterOptions,
+            groupBy: hasFocusedHelperOption ? undefined : externalGroupBy,
+            onChange: handleChange,
             onInputChange: handleInputChange,
+            openOnFocus: resolvedOpenOnFocus,
         },
     };
 };

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

@@ -0,0 +1,4 @@
+/**
+ * Проверяет, является ли значение при onChange focusedHelper-опцией (freeSolo)
+ */
+export declare const checkIsFocusedHelperChange: (newValue: unknown, changedOption?: unknown) => boolean;

package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/checkIsFocusedHelperChange.js

@@ -0,0 +1,17 @@
+import { checkIsFocusedHelperOption } from '../../../utils';
+/**
+ * Проверяет, является ли значение при onChange focusedHelper-опцией (freeSolo)
+ */
+export const checkIsFocusedHelperChange = (newValue, changedOption) => {
+    if (checkIsFocusedHelperOption(changedOption)) {
+        return true;
+    }
+    if (checkIsFocusedHelperOption(newValue)) {
+        return true;
+    }
+    if (Array.isArray(newValue) &&
+        newValue.some((item) => checkIsFocusedHelperOption(item))) {
+        return true;
+    }
+    return false;
+};

package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.d.ts

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

package/components/Autocomplete/useLogic/utils/checkIsFocusedHelperChange/index.js

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

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

@@ -0,0 +1,8 @@
+export type CheckIsPopperVisibleParams = {
+    loading?: boolean;
+    hasOptions: boolean;
+    isInputValueNotEmpty: boolean;
+    isLoadedDataError?: boolean;
+    shouldShowFocusedHelper: boolean;
+};
+export declare const checkIsPopperVisible: ({ loading, hasOptions, isInputValueNotEmpty, isLoadedDataError, shouldShowFocusedHelper, }: CheckIsPopperVisibleParams) => boolean;

package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/checkIsPopperVisible.js

@@ -0,0 +1,6 @@
+export const checkIsPopperVisible = ({ loading = false, hasOptions, isInputValueNotEmpty, isLoadedDataError = false, shouldShowFocusedHelper, }) => {
+    if (shouldShowFocusedHelper || hasOptions || isLoadedDataError) {
+        return true;
+    }
+    return !loading && isInputValueNotEmpty;
+};

package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.d.ts

@@ -0,0 +1 @@
+export { checkIsPopperVisible, type CheckIsPopperVisibleParams, } from './checkIsPopperVisible';

package/components/Autocomplete/useLogic/utils/checkIsPopperVisible/index.js

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

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

@@ -1 +1,3 @@
 export * from './checkIsInputEmpty';
+export * from './checkIsPopperVisible';
+export * from './checkIsFocusedHelperChange';

package/components/Autocomplete/useLogic/utils/index.js

@@ -1 +1,3 @@
 export * from './checkIsInputEmpty';
+export * from './checkIsPopperVisible';
+export * from './checkIsFocusedHelperChange';

package/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.d.ts

@@ -0,0 +1,5 @@
+import { FOCUSED_HELPER_OPTION } from '../../constants';
+/**
+ * Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
+ */
+export declare const checkIsFocusedHelperOption: (option: unknown) => option is typeof FOCUSED_HELPER_OPTION;

package/components/Autocomplete/utils/checkIsFocusedHelperOption/checkIsFocusedHelperOption.js

@@ -0,0 +1,7 @@
+import { FOCUSED_HELPER_OPTION } from '../../constants';
+/**
+ * Определяет, является ли опция специальной опцией для отображения focusedHelperText при freeSolo=true
+ */
+export const checkIsFocusedHelperOption = (option) => {
+    return option === FOCUSED_HELPER_OPTION;
+};

package/components/Autocomplete/utils/checkIsFocusedHelperOption/index.d.ts

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

package/components/Autocomplete/utils/checkIsFocusedHelperOption/index.js

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

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

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

package/components/Autocomplete/utils/index.js

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

package/components/Onboarding/ui/StepStrategy/steps/HighlightStep/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StepPopover: import("../../../../../styled").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "disableMobileDrawer" | "hasArrow"> & {
+export declare const StepPopover: import("../../../../../styled").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "hasArrow" | "disableMobileDrawer"> & {
     variant?: import("../../../../../HintPopover").HintPopoverVariant | undefined;
     title?: import("react").ReactNode;
     action?: import("react").ReactNode;

package/components/Select/Select.js

@@ -18,7 +18,7 @@ import { EndAdornmentWrapper, Placeholder, StateWrapper, StyledSelect, } from '.
 import { useLogic } from './useLogic';
 const ClearButton = forwardRef(({ onClick, disabled }, ref) => (_jsx(IconButton, { disabled: disabled, ref: ref, onClick: onClick, variant: "text", title: CLEAR_TEXT, "aria-label": CLEAR_TEXT, children: _jsx(CrossOutlineMd, {}) })));
 const SelectInner = ({ required, getOptionLabel, placeholder, helperText, hideHelperText = false, loading, success, children, disabled, error, label, fullWidth, onChange: externalOnChange, isShowClearButton, isEnableAllSelection = false, valueOptions, value, onSelectAll, onUnselectAll, ...props }, ref) => {
-    const { isOpened, isShowingClearButton, isNoData, onClearAll, openSelect, closeSelect, resetButtonRef, isShowingSelectAll, handleChangeOption, isSelectedAll, isIndeterminate, handleChangeArrayValue, selectAllClassName, findMenuItemsLabel, isShowingPlaceholder, } = useLogic({
+    const { isOpened, isShowingClearButton, isNoData, onClearAll, openSelect, closeSelect, resetButtonRef, isShowingSelectAll, handleChangeOption, isSelectedAll, isIndeterminate, handleChangeArrayValue, selectAllClassName, findMenuItemsLabel, isShowingPlaceholder, fieldRef, } = useLogic({
         ...props,
         children,
         value,
@@ -30,11 +30,12 @@ const SelectInner = ({ required, getOptionLabel, placeholder, helperText, hideHe
         onSelectAll,
         onUnselectAll,
         loading,
+        ref,
     });
     const renderValue = (selectedOptions) => {
         // Массив с выбранными опциями
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return (_jsx(TagsList, { data: selectedOptions, getOptionLabel: getOptionLabel || ((optionLabel) => optionLabel), onChange: handleChangeArrayValue, onClick: openSelect }));
+            return (_jsx(TagsList, { data: selectedOptions, getOptionLabel: getOptionLabel || ((optionLabel) => optionLabel), fieldRef: fieldRef, onChange: handleChangeArrayValue, onClick: openSelect }));
         }
         // Пустой массив или пустая строка
         if ((Array.isArray(selectedOptions) || typeof selectedOptions === 'string') &&
@@ -47,6 +48,6 @@ const SelectInner = ({ required, getOptionLabel, placeholder, helperText, hideHe
         }
         return findMenuItemsLabel(children, selectedOptions);
     };
-    return (_jsxs(FormControl, { error: error, fullWidth: fullWidth, children: [label && (_jsx(InputLabel, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), _jsxs(StyledSelect, { ...props, value: value === null || value === undefined ? '' : value, open: isOpened, disabled: disabled, onOpen: openSelect, onClose: closeSelect, renderValue: renderValue, IconComponent: () => null, displayEmpty: true, ref: ref, fullWidth: fullWidth, onChange: handleChangeOption, "$isShowingPlaceholder": isShowingPlaceholder, endAdornment: _jsxs(EndAdornmentWrapper, { children: [loading && _jsx(Loader, { color: "primary", size: "small" }), !loading && isShowingClearButton && (_jsx(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), !loading && (_jsx(IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? _jsx(DownOutlineMd, {}) : _jsx(UpOutlineMd, {}) }))] }), children: [_jsx(Placeholder, { value: "", children: placeholder }), !loading && isShowingSelectAll && (_jsxs(MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: SELECT_ALL_VALUE, children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && _jsx(StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), _jsx(FormHelperText, { error: error, success: success, hideHelperText: hideHelperText, children: helperText })] }));
+    return (_jsxs(FormControl, { error: error, fullWidth: fullWidth, children: [label && (_jsx(InputLabel, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), _jsxs(StyledSelect, { ...props, value: value === null || value === undefined ? '' : value, open: isOpened, disabled: disabled, onOpen: openSelect, onClose: closeSelect, renderValue: renderValue, IconComponent: () => null, displayEmpty: true, ref: fieldRef, fullWidth: fullWidth, onChange: handleChangeOption, "$isShowingPlaceholder": isShowingPlaceholder, endAdornment: _jsxs(EndAdornmentWrapper, { children: [loading && _jsx(Loader, { color: "primary", size: "small" }), !loading && isShowingClearButton && (_jsx(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), !loading && (_jsx(IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? _jsx(DownOutlineMd, {}) : _jsx(UpOutlineMd, {}) }))] }), children: [_jsx(Placeholder, { value: "", children: placeholder }), !loading && isShowingSelectAll && (_jsxs(MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: SELECT_ALL_VALUE, children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && _jsx(StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), _jsx(FormHelperText, { error: error, success: success, hideHelperText: hideHelperText, children: helperText })] }));
 };
 export const Select = forwardRefWithGeneric(SelectInner);

package/components/Select/useLogic/useLogic.d.ts

@@ -1,6 +1,13 @@
-import { type ReactNode, type SyntheticEvent } from 'react';
+import { type ForwardedRef, type ReactNode, type SyntheticEvent } from 'react';
 import { type SelectProps } from '../types';
-export declare const useLogic: <TValue>({ value, onChange, children, open: externalIsOpened, defaultOpen, multiple, isEnableAllSelection, isShowClearButton, valueOptions, onSelectAll, onUnselectAll, name, placeholder, onClose, onOpen, loading, }: SelectProps<TValue>) => {
+type UseLogicParams<TValue> = Omit<SelectProps<TValue>, 'ref'> & {
+    /**
+     * Ref, пробрасываемый на контейнер поля: по нему считается ширина
+     * всплывающего окна тэгов и он служит якорем его позиционирования
+     */
+    ref: ForwardedRef<HTMLDivElement>;
+};
+export declare const useLogic: <TValue>({ value, onChange, children, open: externalIsOpened, defaultOpen, multiple, isEnableAllSelection, isShowClearButton, valueOptions, onSelectAll, onUnselectAll, name, placeholder, onClose, onOpen, loading, ref, }: UseLogicParams<TValue>) => {
     isOpened: boolean;
     isNoData: boolean;
     isShowingClearButton: boolean;
@@ -17,4 +24,6 @@ export declare const useLogic: <TValue>({ value, onChange, children, open: exter
     selectAllClassName: string | undefined;
     findMenuItemsLabel: (nodes: ReactNode, selectedValue: TValue) => ReactNode;
     isShowingPlaceholder: boolean;
+    fieldRef: import("react").RefObject<HTMLDivElement | null>;
 };
+export {};

package/components/Select/useLogic/useLogic.js

@@ -1,12 +1,14 @@
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { Children, isValidElement, useRef, useState, } from 'react';
 import { MenuItem } from '../../MenuItem';
+import { useForwardedRef } from '../../useForwardedRef';
 import { getNodeText } from '../../utils/getNodeText';
 import { isSyncReactElement } from '../../utils/isSyncReactElement';
 import { SELECT_ALL_VALUE } from '../constants';
 import { isShowingPlaceholder } from './utils/isShowingPlaceholder';
-export const useLogic = ({ value, onChange, children, open: externalIsOpened, defaultOpen, multiple, isEnableAllSelection, isShowClearButton = true, valueOptions, onSelectAll, onUnselectAll, name, placeholder, onClose, onOpen, loading, }) => {
+export const useLogic = ({ value, onChange, children, open: externalIsOpened, defaultOpen, multiple, isEnableAllSelection, isShowClearButton = true, valueOptions, onSelectAll, onUnselectAll, name, placeholder, onClose, onOpen, loading, ref, }) => {
     const [isOpened, setOpened] = useState(!loading && (defaultOpen || externalIsOpened || false));
+    const fieldRef = useForwardedRef(ref);
     const resetButtonRef = useRef(null);
     const optionsLength = Array.isArray(valueOptions)
         ? valueOptions?.length
@@ -129,5 +131,6 @@ export const useLogic = ({ value, onChange, children, open: externalIsOpened, de
         selectAllClassName,
         findMenuItemsLabel,
         isShowingPlaceholder: isShowingPlaceholder(value, placeholder),
+        fieldRef,
     };
 };

package/components/TagsList/PopoverTags/PopoverTags.d.ts

@@ -0,0 +1,7 @@
+import type { TagValue } from '../types';
+import { type PopoverTagsProps } from './types';
+/**
+ * Показывает все выбранные элементы тэгами с переносом по строкам.
+ * Используется как содержимое всплывающего окна TagsList
+ */
+export declare const PopoverTags: <TData extends TagValue>({ data, keyId, isDisabled, getOptionLabel, getTagProps, }: PopoverTagsProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/components/TagsList/PopoverTags/PopoverTags.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getKey } from '../utils';
+import { StyledTag, Wrapper } from './styles';
+/**
+ * Показывает все выбранные элементы тэгами с переносом по строкам.
+ * Используется как содержимое всплывающего окна TagsList
+ */
+export const PopoverTags = ({ data, keyId, isDisabled, getOptionLabel, getTagProps, }) => (_jsx(Wrapper, { children: data.map((option) => (_jsx(StyledTag, { isDisabled: isDisabled, ...getTagProps(option) }, getKey(option, keyId, getOptionLabel)))) }));

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

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

package/components/TagsList/PopoverTags/index.js

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

package/components/TagsList/PopoverTags/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTag: import("../../styled").StyledComponent<import("../Tag").TagProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/TagsList/PopoverTags/styles.js

@@ -0,0 +1,15 @@
+import { styled } from '../../styled';
+import { POPOVER_MAX_HEIGHT, POPOVER_TAGS_GAP_SPACING, POPOVER_TAGS_PADDING_SPACING, } from '../constants';
+import { Tag } from '../Tag';
+export const Wrapper = styled.div `
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(POPOVER_TAGS_GAP_SPACING)};
+
+  max-height: ${POPOVER_MAX_HEIGHT}px;
+  padding-inline: ${({ theme }) => theme.spacing(POPOVER_TAGS_PADDING_SPACING)};
+`;
+export const StyledTag = styled(Tag) `
+  max-width: 100%;
+`;

package/components/TagsList/PopoverTags/types.d.ts

@@ -0,0 +1,24 @@
+import { type TagProps } from '../Tag';
+import { type TagValue } from '../types';
+export type PopoverTagsProps<TData extends TagValue = TagValue> = {
+    /**
+     * Полный список выбранных элементов
+     */
+    data: TData[];
+    /**
+     * Поле, используемое в качестве ключа списка
+     */
+    keyId?: TData extends object ? keyof TData : never;
+    /**
+     * Если `true`, то тэги будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Используется для определения строкового значения опции
+     */
+    getOptionLabel: (value: TData) => string | number;
+    /**
+     * Возвращает пропсы тэга, включая обработчик удаления
+     */
+    getTagProps: (option: TData) => Pick<TagProps, 'label' | 'onDelete'>;
+};

package/components/TagsList/PopoverTags/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -21,9 +21,17 @@ export type TagProps = {
      * Хендлер клика по тегу
      */
     onClick?: (value: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Хендлер наведения указателя на тег
+     */
+    onMouseEnter?: (value: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Хендлер увода указателя с тега
+     */
+    onMouseLeave?: (value: MouseEvent<HTMLDivElement>) => void;
     /**
      * Название класса, применяется к корневому компоненту
      */
     className?: string;
 };
-export declare const Tag: (props: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/TagsList/Tag/Tag.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { OverflowTypography } from '../../OverflowTypography';
 import { StyledTag } from './styles';
 import { useLogic } from './useLogic';
-export const Tag = (props) => {
+export const Tag = forwardRef((props, ref) => {
     const { onMouseDown } = useLogic();
     const { shrinks, isDisabled, label, ...restProps } = props;
-    return (_jsx(StyledTag, { "$shrinks": shrinks, color: "grey", variant: "light", disabled: isDisabled, label: _jsx(OverflowTypography, { children: label }), ...restProps, onMouseDown: onMouseDown }));
-};
+    return (_jsx(StyledTag, { ref: ref, "$shrinks": shrinks, color: "grey", variant: "light", disabled: isDisabled, label: _jsx(OverflowTypography, { children: label }), ...restProps, onMouseDown: onMouseDown }));
+});