@astral/ui 4.106.0 → 4.107.0

package/components/Autocomplete/Autocomplete.js

@@ -23,8 +23,8 @@ const AutocompleteInner = (props, ref) => {
             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 +36,6 @@ const AutocompleteInner = (props, ref) => {
                     const reason = 'removeOption';
                     onChange(syntheticEvent, tagValues, reason);
                 } }));
-            return tagsListElement;
         };
         const generalInputParams = {
             ...inputParams,

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

package/components/TagsList/TagsList.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CounterTag, Wrapper } from './styles';
+import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
+import { IconButton } from '../IconButton';
+import { NewPopover } from '../NewPopover';
+import { Typography } from '../Typography';
+import { POPOVER_CLOSE_TEXT, POPOVER_TITLE_TEXT } from './constants';
+import { PopoverTags } from './PopoverTags';
+import { CounterTag, PopoverContentWrapper, PopoverHeader, Wrapper, } from './styles';
 import { Tag } from './Tag';
 import { useLogic } from './useLogic';
 import { getKey } from './utils';
@@ -8,10 +14,10 @@ import { getKey } from './utils';
  * Не предназначен для использования в продуктах, не экспортируется из пакета
  */
 export const TagsList = (props) => {
-    const { hiddenCount, tagsContainerRef, visibleOptions, getTagProps, showCounter, } = useLogic(props);
-    const { className, keyId, isDisabled, onClick, getOptionLabel } = props;
+    const { hiddenCount, tagsContainerRef, counterRef, visibleOptions, getTagProps, showCounter, isPopoverOpen, isPopoverEnabled, setPopoverContentRef, popoverContentCssVars, stopPopoverEventPropagation, popoverAnchorEl, closePopover, startPopoverDelay, cancelPopoverDelay, handleTagClick, handleCounterClick, } = useLogic(props);
+    const { className, data = [], keyId, isDisabled, 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"))] }));
+                return (_jsx(Tag, { isDisabled: isDisabled, onClick: handleTagClick, ...tagProps }, getKey(option, keyId, getOptionLabel)));
+            }), showCounter && (_jsx(CounterTag, { ref: counterRef, isDisabled: isDisabled, label: `+${hiddenCount}`, onClick: handleCounterClick, onMouseEnter: isPopoverEnabled ? startPopoverDelay : undefined, onMouseLeave: isPopoverEnabled ? cancelPopoverDelay : undefined }, "more")), _jsx(NewPopover, { isOpen: isPopoverOpen, anchorEl: popoverAnchorEl, disableAutoFocus: true, onClose: closePopover, children: _jsxs(PopoverContentWrapper, { ref: setPopoverContentRef, style: popoverContentCssVars, onClick: stopPopoverEventPropagation, onMouseDown: stopPopoverEventPropagation, children: [_jsxs(PopoverHeader, { children: [_jsx(Typography, { variant: "h5", children: POPOVER_TITLE_TEXT }), _jsx(IconButton, { variant: "text", title: POPOVER_CLOSE_TEXT, "aria-label": POPOVER_CLOSE_TEXT, onClick: closePopover, children: _jsx(CrossOutlineMd, {}) })] }), _jsx(PopoverTags, { data: data, keyId: keyId, isDisabled: isDisabled, getOptionLabel: getOptionLabel, getTagProps: getTagProps })] }) })] }));
 };

package/components/TagsList/constants.d.ts

@@ -1,2 +1,37 @@
 export declare const MIN_AVAILABLE_WIDTH = 50;
 export declare const GAP_BETWEEN_TAGS = 4;
+/**
+ * Задержка появления всплывающего окна при наведении на счётчик (мс)
+ */
+export declare const POPOVER_HOVER_DELAY = 500;
+/**
+ * Максимальная ширина всплывающего окна (px)
+ */
+export declare const POPOVER_MAX_WIDTH = 480;
+/**
+ * Максимальная высота всплывающего окна (px)
+ */
+export declare const POPOVER_MAX_HEIGHT = 370;
+/**
+ * Количество тэгов, которые всплывающее окно вмещает в строку в любом случае:
+ * задаёт его минимальную ширину
+ */
+export declare const POPOVER_MIN_TAGS_IN_ROW = 2;
+/**
+ * Отступ между тэгами во всплывающем окне в единицах theme.spacing.
+ * Используется и в стилях, и в расчёте минимальной ширины окна
+ */
+export declare const POPOVER_TAGS_GAP_SPACING = 2;
+/**
+ * Горизонтальный отступ контейнера тэгов во всплывающем окне в единицах
+ * theme.spacing. Используется и в стилях, и в расчёте минимальной ширины окна
+ */
+export declare const POPOVER_TAGS_PADDING_SPACING = 4;
+/**
+ * Заголовок всплывающего окна со списком выбранных элементов
+ */
+export declare const POPOVER_TITLE_TEXT = "\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u044B\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B";
+/**
+ * Доступное имя кнопки, закрывающей всплывающее окно
+ */
+export declare const POPOVER_CLOSE_TEXT = "\u0417\u0430\u043A\u0440\u044B\u0442\u044C";

package/components/TagsList/constants.js

@@ -1,2 +1,37 @@
 export const MIN_AVAILABLE_WIDTH = 50;
 export const GAP_BETWEEN_TAGS = 4; // 4px
+/**
+ * Задержка появления всплывающего окна при наведении на счётчик (мс)
+ */
+export const POPOVER_HOVER_DELAY = 500;
+/**
+ * Максимальная ширина всплывающего окна (px)
+ */
+export const POPOVER_MAX_WIDTH = 480;
+/**
+ * Максимальная высота всплывающего окна (px)
+ */
+export const POPOVER_MAX_HEIGHT = 370;
+/**
+ * Количество тэгов, которые всплывающее окно вмещает в строку в любом случае:
+ * задаёт его минимальную ширину
+ */
+export const POPOVER_MIN_TAGS_IN_ROW = 2;
+/**
+ * Отступ между тэгами во всплывающем окне в единицах theme.spacing.
+ * Используется и в стилях, и в расчёте минимальной ширины окна
+ */
+export const POPOVER_TAGS_GAP_SPACING = 2;
+/**
+ * Горизонтальный отступ контейнера тэгов во всплывающем окне в единицах
+ * theme.spacing. Используется и в стилях, и в расчёте минимальной ширины окна
+ */
+export const POPOVER_TAGS_PADDING_SPACING = 4;
+/**
+ * Заголовок всплывающего окна со списком выбранных элементов
+ */
+export const POPOVER_TITLE_TEXT = 'Выбранные элементы';
+/**
+ * Доступное имя кнопки, закрывающей всплывающее окно
+ */
+export const POPOVER_CLOSE_TEXT = 'Закрыть';

package/components/TagsList/styles.d.ts

@@ -3,6 +3,14 @@ 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 CounterTag: import("../styled").StyledComponent<import("./Tag").TagProps & {
+export declare const CounterTag: import("../styled").StyledComponent<import("./Tag").TagProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const PopoverContentWrapper: 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 PopoverHeader: 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>, {}>;

package/components/TagsList/styles.js

@@ -1,6 +1,6 @@
 import { styled } from '../styled';
 import { tagClassnames } from '../Tag';
-import { GAP_BETWEEN_TAGS } from './constants';
+import { GAP_BETWEEN_TAGS, POPOVER_MAX_WIDTH } from './constants';
 import { Tag } from './Tag';
 export const Wrapper = styled.div `
   overflow: hidden;
@@ -8,9 +8,28 @@ export const Wrapper = styled.div `
   column-gap: ${GAP_BETWEEN_TAGS}px;
 `;
 export const CounterTag = styled(Tag) `
+  cursor: pointer;
+
   overflow: unset;
 
   .${tagClassnames.label} {
     min-width: unset;
   }
 `;
+export const PopoverContentWrapper = styled.div `
+  --tags-list-popover-width: ${POPOVER_MAX_WIDTH}px;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  width: var(--tags-list-popover-width);
+  max-width: ${POPOVER_MAX_WIDTH}px;
+  padding-block: ${({ theme }) => theme.spacing(4)};
+`;
+export const PopoverHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding-inline: ${({ theme }) => theme.spacing(4)};
+`;

package/components/TagsList/types.d.ts

@@ -31,6 +31,10 @@ export type TagsListProps<TData extends TagValue = TagValue> = {
      * Ref на внешний контейнер, чья ширина используется как база для расчёта доступного пространства..
      */
     inputContainerRef?: RefObject<HTMLElement | null>;
+    /**
+     * Ref на поле инпута
+     */
+    fieldRef: RefObject<HTMLElement | null>;
     /**
      * Зарезервированная ширина, которая будет вычтена из доступной ширины при расчете количества отображаемых тегов
      */

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

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

package/components/TagsList/useLogic/hooks/index.js

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

package/components/TagsList/useLogic/hooks/useHoverDelay/index.d.ts

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

package/components/TagsList/useLogic/hooks/useHoverDelay/index.js

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

package/components/TagsList/useLogic/hooks/useHoverDelay/types.d.ts

@@ -0,0 +1,20 @@
+export type UseHoverDelayResult = {
+    /**
+     * Запускает отсчёт задержки. Повторный вызов перезапускает отсчёт
+     */
+    start: () => void;
+    /**
+     * Отменяет отсчёт, если он не завершился
+     */
+    cancel: () => void;
+};
+export type UseHoverDelayParams = {
+    /**
+     * Функция, вызывающаяся при hover-эффекте после задержки
+     */
+    onHover: () => void;
+    /**
+     * Задержка вызова функции в мс
+     */
+    delay: number;
+};

package/components/TagsList/useLogic/hooks/useHoverDelay/types.js

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

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

@@ -0,0 +1,5 @@
+import { type UseHoverDelayParams, type UseHoverDelayResult } from './types';
+/**
+ * Откладывает вызов на время удержания указателя над элементом.
+ */
+export declare const useHoverDelay: ({ delay, onHover, }: UseHoverDelayParams) => UseHoverDelayResult;

package/components/TagsList/useLogic/hooks/useHoverDelay/useHoverDelay.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Откладывает вызов на время удержания указателя над элементом.
+ */
+export const useHoverDelay = ({ delay, onHover, }) => {
+    const timeoutRef = useRef(undefined);
+    const savedOnHoverRef = useRef(onHover);
+    useEffect(() => {
+        savedOnHoverRef.current = onHover;
+    });
+    const cancel = () => {
+        if (timeoutRef.current === undefined) {
+            return;
+        }
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+    };
+    const start = () => {
+        cancel();
+        timeoutRef.current = setTimeout(() => {
+            timeoutRef.current = undefined;
+            savedOnHoverRef.current();
+        }, delay);
+    };
+    useEffect(() => cancel, []);
+    return { start, cancel };
+};

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

@@ -1,15 +1,27 @@
-/// <reference types="react" />
+import { type CSSProperties, type MouseEvent, type SyntheticEvent } from 'react';
 import type { TagsListProps, TagValue } from '../types';
 type UseLogicParams<TData extends TagValue> = TagsListProps<TData>;
-export declare const useLogic: <TData extends TagValue>({ data, keyId, getOptionLabel, onChange, inputContainerRef, reservedWidth, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends TagValue>({ data, keyId, isDisabled, getOptionLabel, onChange, onClick, inputContainerRef, fieldRef, reservedWidth, }: UseLogicParams<TData>) => {
     visibleOptions: TData[];
     hiddenCount: number;
     showCounter: boolean;
     tagsContainerRef: import("react").RefObject<HTMLDivElement | null>;
+    counterRef: import("react").RefObject<HTMLDivElement | null>;
     getTagProps: (option: TData) => {
         label: string | number;
         shrinks: boolean;
         onDelete: () => void;
     };
+    isPopoverOpen: boolean;
+    isPopoverEnabled: boolean;
+    setPopoverContentRef: (node: HTMLDivElement | null) => void;
+    popoverContentCssVars: CSSProperties;
+    stopPopoverEventPropagation: (event: SyntheticEvent) => void;
+    popoverAnchorEl: HTMLElement | null;
+    closePopover: () => void;
+    startPopoverDelay: () => void;
+    cancelPopoverDelay: () => void;
+    handleTagClick: (event: MouseEvent<HTMLDivElement>) => void;
+    handleCounterClick: (event: MouseEvent<HTMLDivElement>) => void;
 };
 export {};

package/components/TagsList/useLogic/useLogic.js

@@ -1,13 +1,38 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { useTheme } from '../../theme/hooks/useTheme';
-import { MIN_AVAILABLE_WIDTH } from '../constants';
-import { calculateVisibleTagsCount, getAvailableWidth } from '../utils';
-export const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputContainerRef, reservedWidth = 0, }) => {
+import { useClickAwayEffect } from '../../useClickAwayEffect';
+import { useNewToggle } from '../../useNewToggle';
+import { useViewportType } from '../../useViewportType';
+import { MIN_AVAILABLE_WIDTH, POPOVER_HOVER_DELAY } from '../constants';
+import { calculatePopoverWidth, calculateVisibleTagsCount, getAvailableWidth, } from '../utils';
+import { useHoverDelay } from './hooks/useHoverDelay';
+export const useLogic = ({ data = [], keyId, isDisabled, getOptionLabel, onChange, onClick, inputContainerRef, fieldRef, reservedWidth = 0, }) => {
     const [visibleOptions, setVisibleOptions] = useState([]);
     const [hiddenCount, setHiddenCount] = useState(0);
+    const [isPopoverOpen, togglePopover] = useNewToggle(false);
+    const [isPopoverContentMounted, togglePopoverContentMounted] = useNewToggle(false);
+    /**
+     * Ширина окна и якорь позиционирования фиксируются на момент открытия
+     * и дальше не пересчитываются
+     */
+    const [popoverWidth, setPopoverWidth] = useState(0);
+    const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
     const tagsContainerRef = useRef(null);
     const availableWidthRef = useRef(0);
+    const popoverContentRef = useRef(null);
+    const counterRef = useRef(null);
     const theme = useTheme();
+    const { isMobile } = useViewportType();
+    const openPopover = () => {
+        const field = fieldRef.current;
+        if (isPopoverOpen || !field) {
+            return;
+        }
+        setPopoverWidth(calculatePopoverWidth(field.getBoundingClientRect().width, data.map((item) => getOptionLabel(item).toString()), theme));
+        setPopoverAnchorEl(field);
+        togglePopover(true);
+    };
+    const closePopover = () => togglePopover(false);
     /**
      * Обновляет доступную ширину для расчета количества отображаемых тегов
      */
@@ -64,6 +89,7 @@ export const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputCont
         if (!data.length) {
             setVisibleOptions([]);
             setHiddenCount(0);
+            closePopover();
             return;
         }
         const resizeObserver = new ResizeObserver(() => {
@@ -102,11 +128,65 @@ export const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputCont
         return { label, shrinks: false, onDelete };
     };
     const showCounter = hiddenCount > 0;
+    const { start: startPopoverDelay, cancel: cancelPopoverDelay } = useHoverDelay({ onHover: openPopover, delay: POPOVER_HOVER_DELAY });
+    const setPopoverContentRef = useCallback((node) => {
+        popoverContentRef.current = node;
+        togglePopoverContentMounted(Boolean(node));
+    }, []);
+    const popoverExcludedNodes = useMemo(() => [counterRef], []);
+    useClickAwayEffect({
+        ref: popoverContentRef,
+        onClickAway: closePopover,
+        isActive: isPopoverOpen && isPopoverContentMounted,
+        excludeNodes: popoverExcludedNodes,
+    });
+    const isPopoverEnabled = !isMobile && !isDisabled;
+    const handleTagClick = (event) => {
+        event.stopPropagation();
+        onClick?.(event);
+    };
+    const handleCounterClick = (event) => {
+        event.stopPropagation();
+        cancelPopoverDelay();
+        // На мобильной ширине и в заблокированном поле у счётчика прежнее поведение — список опций
+        if (!isPopoverEnabled) {
+            onClick?.(event);
+            return;
+        }
+        if (isPopoverOpen) {
+            closePopover();
+            return;
+        }
+        openPopover();
+    };
+    /**
+     * Окно живёт в портале, но синтетические события React всплывают по дереву
+     * компонентов и доходят до обработчиков поля: у MUI Select это `handleMouseDown`,
+     * который переводит фокус на поле и открывает список, у TreeLike* — `onClick` поля
+     */
+    const stopPopoverEventPropagation = (event) => {
+        event.stopPropagation();
+    };
+    const popoverContentCssVars = {
+        '--tags-list-popover-width': `${popoverWidth}px`,
+    };
     return {
         visibleOptions,
         hiddenCount,
         showCounter,
         tagsContainerRef,
+        counterRef,
         getTagProps,
+        isPopoverOpen,
+        isPopoverEnabled,
+        setPopoverContentRef,
+        popoverContentCssVars,
+        stopPopoverEventPropagation,
+        popoverAnchorEl,
+        closePopover,
+        startPopoverDelay,
+        cancelPopoverDelay,
+        handleTagClick,
+        handleCounterClick,
     };
 };

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

@@ -0,0 +1,5 @@
+import type { Theme } from '../../../theme/types';
+/**
+ * Вычисляет ширину всплывающего окна
+ */
+export declare const calculatePopoverWidth: (fieldWidth: number, tagLabels: string[], theme: Theme) => number;