@astral/ui 4.106.0 → 4.107.0

package/components/TagsList/utils/calculatePopoverWidth/calculatePopoverWidth.js

@@ -0,0 +1,22 @@
+import { POPOVER_MAX_WIDTH, POPOVER_MIN_TAGS_IN_ROW, POPOVER_TAGS_GAP_SPACING, POPOVER_TAGS_PADDING_SPACING, } from '../../constants';
+import { getTagWidth } from '../getTagWidth';
+const getSpacingValue = (theme, spacing) => parseInt(theme.spacing(spacing), 10);
+/**
+ * Минимальная ширина popover: вмещает в строку POPOVER_MIN_TAGS_IN_ROW самых
+ * широких тэгов вместе с отступом между ними и отступами контейнера
+ */
+const getMinWidth = (tagLabels, theme) => {
+    const widestTagWidths = tagLabels
+        .map((label) => getTagWidth(label, theme))
+        .sort((current, next) => next - current)
+        .slice(0, POPOVER_MIN_TAGS_IN_ROW);
+    const tagsWidth = widestTagWidths.reduce((width, tagWidth) => width + tagWidth, 0);
+    const gapsWidth = Math.max(widestTagWidths.length - 1, 0) *
+        getSpacingValue(theme, POPOVER_TAGS_GAP_SPACING);
+    const paddingsWidth = getSpacingValue(theme, POPOVER_TAGS_PADDING_SPACING) * 2;
+    return tagsWidth + gapsWidth + paddingsWidth;
+};
+/**
+ * Вычисляет ширину всплывающего окна
+ */
+export const calculatePopoverWidth = (fieldWidth, tagLabels, theme) => Math.min(Math.max(fieldWidth, getMinWidth(tagLabels, theme)), POPOVER_MAX_WIDTH);

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

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

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

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

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

@@ -3,3 +3,4 @@ export { getKey } from './getKey';
 export { getTagWidth } from './getTagWidth';
 export { getAvailableWidth } from './getAvailableWidth';
 export { calculateVisibleTagsCount } from './calculateVisibleTagsCount';
+export { calculatePopoverWidth } from './calculatePopoverWidth';

package/components/TagsList/utils/index.js

@@ -3,3 +3,4 @@ export { getKey } from './getKey';
 export { getTagWidth } from './getTagWidth';
 export { getAvailableWidth } from './getAvailableWidth';
 export { calculateVisibleTagsCount } from './calculateVisibleTagsCount';
+export { calculatePopoverWidth } from './calculatePopoverWidth';

package/components/TreeLikeAsyncAutocomplete/Input/Input.js

@@ -9,13 +9,14 @@ 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, isVisibleTagsList, onChange, textFieldProps, onClearAll, } = useLogic({
+    const { isVisibleClearButton, isVisibleTagsList, onChange, textFieldProps, onClearAll, fieldRef, } = useLogic({
         inputRef,
+        InputProps: restProps.InputProps,
         value,
         onChange: propsOnChange,
         disabled,
         onClick,
         isLoading,
     });
-    return (_jsx(StyledTextField, { ...restProps, hideHelperText: hideHelperText, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, ...textFieldProps, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: value, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: onChange })), endAdornment: _jsxs(IconWrapper, { children: [isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: onClearAll })), isLoading ? (_jsx(Loader, { size: "small" })) : (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) }))] }) }));
+    return (_jsx(StyledTextField, { ...restProps, hideHelperText: hideHelperText, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, ...textFieldProps, InputProps: { ...restProps.InputProps, ref: fieldRef }, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: value, keyId: "id", isDisabled: disabled, fieldRef: fieldRef, getOptionLabel: (option) => option.label, onClick: onClick, onChange: onChange })), endAdornment: _jsxs(IconWrapper, { children: [isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: onClearAll })), isLoading ? (_jsx(Loader, { size: "small" })) : (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) }))] }) }));
 });

package/components/TreeLikeAsyncAutocomplete/Input/useLogic/useLogic.d.ts

@@ -1,13 +1,14 @@
 import { type MouseEvent, type SyntheticEvent } from 'react';
 import { type TreeLikeAsyncAutocompleteValue } from '../../types';
 import type { InputProps } from '../types';
-type UseLogicParams = Pick<InputProps, 'value' | 'disabled' | 'inputRef' | 'onChange' | 'isLoading' | 'onClick'>;
-export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, onChange: propsOnChange, onClick: propsOnClick, }: UseLogicParams) => {
+type UseLogicParams = Pick<InputProps, 'value' | 'disabled' | 'inputRef' | 'InputProps' | 'onChange' | 'isLoading' | 'onClick'>;
+export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange: propsOnChange, onClick: propsOnClick, }: UseLogicParams) => {
     isVisibleClearButton: boolean;
     onClearAll: (event: SyntheticEvent<HTMLButtonElement>) => void;
     onChange: (newValue: TreeLikeAsyncAutocompleteValue | undefined) => void;
     onClick: (event: MouseEvent<HTMLDivElement>) => void;
     isVisibleTagsList: boolean;
+    fieldRef: import("react").RefObject<HTMLElement | null>;
     textFieldProps: {
         value: string;
         $isHidden: boolean;

package/components/TreeLikeAsyncAutocomplete/Input/useLogic/useLogic.js

@@ -1,7 +1,8 @@
 import { useEffect, useRef, } from 'react';
 import { useForwardedRef } from '../../../useForwardedRef';
-export const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onChange: propsOnChange, onClick: propsOnClick, }) => {
+export const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange: propsOnChange, onClick: propsOnClick, }) => {
     const inputRef = useForwardedRef(externalInputRef);
+    const fieldRef = useForwardedRef(externalInputProps?.ref);
     const prevValue = useRef(undefined);
     useEffect(() => {
         if (value && !prevValue.current) {
@@ -40,6 +41,7 @@ export const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRe
         onChange,
         onClick,
         isVisibleTagsList: hasValue,
+        fieldRef,
         textFieldProps: {
             value: preparedValue,
             $isHidden: hasValue,

package/components/TreeLikeAutocomplete/Input/Input.js

@@ -8,7 +8,7 @@ import { EndAdornmentWrapper, StyledLoader, StyledTagsList, StyledTextField, } f
 import { useLogic } from './useLogic';
 const ClearButton = ({ disabled, onClick }) => (_jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, title: CLEAR_TEXT, "aria-label": CLEAR_TEXT, onClick: onClick, children: _jsx(CrossOutlineMd, {}) }));
 export const Input = forwardRef((props, forwardedRef) => {
-    const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, } = useLogic(props);
+    const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, fieldRef, } = useLogic(props);
     const { value, valueToRender, disabled, isLoading, onChange, onClick, ...restProps } = props;
-    return (_jsx(StyledTextField, { ...restProps, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: _jsxs(EndAdornmentWrapper, { children: [isLoading && _jsx(StyledLoader, {}), isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: handleClearAll })), _jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) })] }), onClick: onClick, ...textFieldProps }));
+    return (_jsx(StyledTextField, { ...restProps, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, InputProps: { ...restProps.InputProps, ref: fieldRef }, startAdornment: isVisibleTagsList && (_jsx(StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, fieldRef: fieldRef, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: _jsxs(EndAdornmentWrapper, { children: [isLoading && _jsx(StyledLoader, {}), isVisibleClearButton && (_jsx(ClearButton, { disabled: disabled, onClick: handleClearAll })), _jsx(IconButton, { variant: "text", color: "grey", disabled: disabled, children: _jsx(DownOutlineMd, {}) })] }), onClick: onClick, ...textFieldProps }));
 });

package/components/TreeLikeAutocomplete/Input/useLogic/useLogic.d.ts

@@ -2,12 +2,13 @@ import { type SyntheticEvent } from 'react';
 import { type TreeListData } from '../../../Tree';
 import type { TreeLikeAutocompleteValue } from '../../types';
 import { type InputProps } from '../types';
-export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, onChange, }: InputProps) => {
+export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange, }: InputProps) => {
     textFieldProps: {
         $isHidden: boolean;
         inputRef: import("react").RefObject<HTMLInputElement | null>;
         value: string | TreeLikeAutocompleteValue;
     };
+    fieldRef: import("react").RefObject<HTMLElement | null>;
     isVisibleTagsList: boolean;
     isVisibleClearButton: boolean;
     handleChange: (newValue: TreeListData[] | undefined) => void;

package/components/TreeLikeAutocomplete/Input/useLogic/useLogic.js

@@ -1,7 +1,8 @@
 import { useEffect, useRef, } from 'react';
 import { useForwardedRef } from '../../../useForwardedRef';
-export const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onChange, }) => {
+export const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange, }) => {
     const inputRef = useForwardedRef(externalInputRef);
+    const fieldRef = useForwardedRef(externalInputProps?.ref);
     const prevValue = useRef(undefined);
     useEffect(() => {
         if (value && !prevValue.current) {
@@ -38,6 +39,7 @@ export const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRe
             inputRef,
             value: preparedValue,
         },
+        fieldRef,
         isVisibleTagsList: hasValue,
         isVisibleClearButton,
         handleChange,

package/node/components/Autocomplete/Autocomplete.js

@@ -29,8 +29,8 @@ const AutocompleteInner = (props, ref) => {
             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) => {
+            return ((0, jsx_runtime_1.jsx)(TagsList_1.TagsList, { data: value, getOptionLabel: (option) => getOptionLabel?.(option) ??
+                    option.toString(), inputContainerRef: inputBaseRef, fieldRef: inputBaseRef, reservedWidth: constants_1.INPUT_MIN_WIDTH, onChange: (tagValues) => {
                     if (!onChange) {
                         return;
                     }
@@ -42,7 +42,6 @@ const AutocompleteInner = (props, ref) => {
                     const reason = 'removeOption';
                     onChange(syntheticEvent, tagValues, reason);
                 } }));
-            return tagsListElement;
         };
         const generalInputParams = {
             ...inputParams,

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

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

package/node/components/Select/Select.js

@@ -24,7 +24,7 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const ClearButton = (0, react_1.forwardRef)(({ onClick, disabled }, ref) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { disabled: disabled, ref: ref, onClick: onClick, variant: "text", title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.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, } = (0, useLogic_1.useLogic)({
+    const { isOpened, isShowingClearButton, isNoData, onClearAll, openSelect, closeSelect, resetButtonRef, isShowingSelectAll, handleChangeOption, isSelectedAll, isIndeterminate, handleChangeArrayValue, selectAllClassName, findMenuItemsLabel, isShowingPlaceholder, fieldRef, } = (0, useLogic_1.useLogic)({
         ...props,
         children,
         value,
@@ -36,11 +36,12 @@ const SelectInner = ({ required, getOptionLabel, placeholder, helperText, hideHe
         onSelectAll,
         onUnselectAll,
         loading,
+        ref,
     });
     const renderValue = (selectedOptions) => {
         // Массив с выбранными опциями
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return ((0, jsx_runtime_1.jsx)(TagsList_1.TagsList, { data: selectedOptions, getOptionLabel: getOptionLabel || ((optionLabel) => optionLabel), onChange: handleChangeArrayValue, onClick: openSelect }));
+            return ((0, jsx_runtime_1.jsx)(TagsList_1.TagsList, { data: selectedOptions, getOptionLabel: getOptionLabel || ((optionLabel) => optionLabel), fieldRef: fieldRef, onChange: handleChangeArrayValue, onClick: openSelect }));
         }
         // Пустой массив или пустая строка
         if ((Array.isArray(selectedOptions) || typeof selectedOptions === 'string') &&
@@ -53,6 +54,6 @@ const SelectInner = ({ required, getOptionLabel, placeholder, helperText, hideHe
         }
         return findMenuItemsLabel(children, selectedOptions);
     };
-    return ((0, jsx_runtime_1.jsxs)(FormControl_1.default, { error: error, fullWidth: fullWidth, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(styles_1.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: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [loading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, { color: "primary", size: "small" }), !loading && isShowingClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), !loading && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) : (0, jsx_runtime_1.jsx)(UpOutlineMd_1.UpOutlineMd, {}) }))] }), children: [(0, jsx_runtime_1.jsx)(styles_1.Placeholder, { value: "", children: placeholder }), !loading && isShowingSelectAll && ((0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: constants_1.SELECT_ALL_VALUE, children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(styles_1.StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, { error: error, success: success, hideHelperText: hideHelperText, children: helperText })] }));
+    return ((0, jsx_runtime_1.jsxs)(FormControl_1.default, { error: error, fullWidth: fullWidth, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(styles_1.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: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [loading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, { color: "primary", size: "small" }), !loading && isShowingClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), !loading && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) : (0, jsx_runtime_1.jsx)(UpOutlineMd_1.UpOutlineMd, {}) }))] }), children: [(0, jsx_runtime_1.jsx)(styles_1.Placeholder, { value: "", children: placeholder }), !loading && isShowingSelectAll && ((0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: constants_1.SELECT_ALL_VALUE, children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(styles_1.StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, { error: error, success: success, hideHelperText: hideHelperText, children: helperText })] }));
 };
 exports.Select = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(SelectInner);

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

@@ -4,12 +4,14 @@ exports.useLogic = void 0;
 const MenuItem_1 = require("@mui/material/MenuItem");
 const react_1 = require("react");
 const MenuItem_2 = require("../../MenuItem");
+const useForwardedRef_1 = require("../../useForwardedRef");
 const getNodeText_1 = require("../../utils/getNodeText");
 const isSyncReactElement_1 = require("../../utils/isSyncReactElement");
 const constants_1 = require("../constants");
 const isShowingPlaceholder_1 = require("./utils/isShowingPlaceholder");
-const useLogic = ({ value, onChange, children, open: externalIsOpened, defaultOpen, multiple, isEnableAllSelection, isShowClearButton = true, valueOptions, onSelectAll, onUnselectAll, name, placeholder, onClose, onOpen, loading, }) => {
+const useLogic = ({ value, onChange, children, open: externalIsOpened, defaultOpen, multiple, isEnableAllSelection, isShowClearButton = true, valueOptions, onSelectAll, onUnselectAll, name, placeholder, onClose, onOpen, loading, ref, }) => {
     const [isOpened, setOpened] = (0, react_1.useState)(!loading && (defaultOpen || externalIsOpened || false));
+    const fieldRef = (0, useForwardedRef_1.useForwardedRef)(ref);
     const resetButtonRef = (0, react_1.useRef)(null);
     const optionsLength = Array.isArray(valueOptions)
         ? valueOptions?.length
@@ -132,6 +134,7 @@ const useLogic = ({ value, onChange, children, open: externalIsOpened, defaultOp
         selectAllClassName,
         findMenuItemsLabel,
         isShowingPlaceholder: (0, isShowingPlaceholder_1.isShowingPlaceholder)(value, placeholder),
+        fieldRef,
     };
 };
 exports.useLogic = useLogic;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverTags = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../utils");
+const styles_1 = require("./styles");
+/**
+ * Показывает все выбранные элементы тэгами с переносом по строкам.
+ * Используется как содержимое всплывающего окна TagsList
+ */
+const PopoverTags = ({ data, keyId, isDisabled, getOptionLabel, getTagProps, }) => ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: data.map((option) => ((0, jsx_runtime_1.jsx)(styles_1.StyledTag, { isDisabled: isDisabled, ...getTagProps(option) }, (0, utils_1.getKey)(option, keyId, getOptionLabel)))) }));
+exports.PopoverTags = PopoverTags;

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PopoverTags"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Tag").TagProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTag = exports.Wrapper = void 0;
+const styled_1 = require("../../styled");
+const constants_1 = require("../constants");
+const Tag_1 = require("../Tag");
+exports.Wrapper = styled_1.styled.div `
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(constants_1.POPOVER_TAGS_GAP_SPACING)};
+
+  max-height: ${constants_1.POPOVER_MAX_HEIGHT}px;
+  padding-inline: ${({ theme }) => theme.spacing(constants_1.POPOVER_TAGS_PADDING_SPACING)};
+`;
+exports.StyledTag = (0, styled_1.styled)(Tag_1.Tag) `
+  max-width: 100%;
+`;

package/node/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/node/components/TagsList/PopoverTags/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const OverflowTypography_1 = require("../../OverflowTypography");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const Tag = (props) => {
+exports.Tag = (0, react_1.forwardRef)((props, ref) => {
     const { onMouseDown } = (0, useLogic_1.useLogic)();
     const { shrinks, isDisabled, label, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTag, { "$shrinks": shrinks, color: "grey", variant: "light", disabled: isDisabled, label: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { children: label }), ...restProps, onMouseDown: onMouseDown }));
-};
-exports.Tag = Tag;
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTag, { ref: ref, "$shrinks": shrinks, color: "grey", variant: "light", disabled: isDisabled, label: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { children: label }), ...restProps, onMouseDown: onMouseDown }));
+});

package/node/components/TagsList/TagsList.js

@@ -2,6 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagsList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
+const IconButton_1 = require("../IconButton");
+const NewPopover_1 = require("../NewPopover");
+const Typography_1 = require("../Typography");
+const constants_1 = require("./constants");
+const PopoverTags_1 = require("./PopoverTags");
 const styles_1 = require("./styles");
 const Tag_1 = require("./Tag");
 const useLogic_1 = require("./useLogic");
@@ -11,11 +17,11 @@ const utils_1 = require("./utils");
  * Не предназначен для использования в продуктах, не экспортируется из пакета
  */
 const TagsList = (props) => {
-    const { hiddenCount, tagsContainerRef, visibleOptions, getTagProps, showCounter, } = (0, useLogic_1.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, } = (0, useLogic_1.useLogic)(props);
+    const { className, data = [], keyId, isDisabled, 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"))] }));
+                return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { isDisabled: isDisabled, onClick: handleTagClick, ...tagProps }, (0, utils_1.getKey)(option, keyId, getOptionLabel)));
+            }), showCounter && ((0, jsx_runtime_1.jsx)(styles_1.CounterTag, { ref: counterRef, isDisabled: isDisabled, label: `+${hiddenCount}`, onClick: handleCounterClick, onMouseEnter: isPopoverEnabled ? startPopoverDelay : undefined, onMouseLeave: isPopoverEnabled ? cancelPopoverDelay : undefined }, "more")), (0, jsx_runtime_1.jsx)(NewPopover_1.NewPopover, { isOpen: isPopoverOpen, anchorEl: popoverAnchorEl, disableAutoFocus: true, onClose: closePopover, children: (0, jsx_runtime_1.jsxs)(styles_1.PopoverContentWrapper, { ref: setPopoverContentRef, style: popoverContentCssVars, onClick: stopPopoverEventPropagation, onMouseDown: stopPopoverEventPropagation, children: [(0, jsx_runtime_1.jsxs)(styles_1.PopoverHeader, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h5", children: constants_1.POPOVER_TITLE_TEXT }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", title: constants_1.POPOVER_CLOSE_TEXT, "aria-label": constants_1.POPOVER_CLOSE_TEXT, onClick: closePopover, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(PopoverTags_1.PopoverTags, { data: data, keyId: keyId, isDisabled: isDisabled, getOptionLabel: getOptionLabel, getTagProps: getTagProps })] }) })] }));
 };
 exports.TagsList = TagsList;

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

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

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

@@ -3,6 +3,14 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     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("@emotion/styled/dist/declarations/src/types").StyledComponent<import("./Tag").TagProps & {
+export declare const CounterTag: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("./Tag").TagProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const PopoverContentWrapper: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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/node/components/TagsList/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CounterTag = exports.Wrapper = void 0;
+exports.PopoverHeader = exports.PopoverContentWrapper = exports.CounterTag = exports.Wrapper = void 0;
 const styled_1 = require("../styled");
 const Tag_1 = require("../Tag");
 const constants_1 = require("./constants");
@@ -11,9 +11,28 @@ exports.Wrapper = styled_1.styled.div `
   column-gap: ${constants_1.GAP_BETWEEN_TAGS}px;
 `;
 exports.CounterTag = (0, styled_1.styled)(Tag_2.Tag) `
+  cursor: pointer;
+
   overflow: unset;
 
   .${Tag_1.tagClassnames.label} {
     min-width: unset;
   }
 `;
+exports.PopoverContentWrapper = styled_1.styled.div `
+  --tags-list-popover-width: ${constants_1.POPOVER_MAX_WIDTH}px;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  width: var(--tags-list-popover-width);
+  max-width: ${constants_1.POPOVER_MAX_WIDTH}px;
+  padding-block: ${({ theme }) => theme.spacing(4)};
+`;
+exports.PopoverHeader = styled_1.styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding-inline: ${({ theme }) => theme.spacing(4)};
+`;

package/node/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/node/components/TagsList/useLogic/hooks/index.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useHoverDelay"), exports);

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

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