@astral/ui 4.105.0 → 4.107.0

package/components/InfiniteTreeList/useLogic/useLogic.js

@@ -1,14 +1,16 @@
-import { useCallback, useContext, useMemo, useRef } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
+import { useViewportType } from '../../useViewportType';
 import { CHILDREN_SKELETON_COUNT } from '../constants';
-import { useChildrenState, useEnterAnimation, useExpandNotifier, useFlatTree, useListScroll, } from '../hooks';
-import { createParentSlots } from '../utils';
+import { useChildrenState, useEnterAnimation, useExpandNotifier, useFlatTree, useLevelNavigation, useListScroll, useNodeTitleValidation, } from '../hooks';
+import { checkHasFooterContent, countDirectChildren, createParentSlots, getLevelKey, } from '../utils';
 /**
  * Логика списка: сводит плоский список, данные дочерних элементов, скролл
  * и анимацию появления строк в props для `Virtuoso` и дочерних компонентов
  */
 export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isError, isLoading, scrollRef, isEndReached, onLoadMore, renderItem, renderParent, itemSkeleton, endOfScrollMsg, noDataImgSrc, errorImgSrc, }) => {
     const { imagesMap } = useContext(ConfigContext);
+    const { isMobile } = useViewportType();
     const enterAnimation = useEnterAnimation();
     const parentSlotsRef = useRef(null);
     if (!parentSlotsRef.current) {
@@ -25,6 +27,7 @@ export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isErr
         enterAnimation,
         onCollapse: resetExpandNotification,
     });
+    const skeletonCount = itemSkeleton ? CHILDREN_SKELETON_COUNT : 1;
     const { registerChildren, nodePaginationMap, parentItems } = useChildrenState({
         items,
         flatList,
@@ -34,49 +37,185 @@ export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isErr
         enterAnimation,
         insertChildren,
         syncChildrenPlaceholders,
-        skeletonCount: itemSkeleton ? CHILDREN_SKELETON_COUNT : 1,
+        skeletonCount,
         releaseParentSlot,
     });
-    const { scrollParent, tailRegistry, isEndReachedWithScroll, virtuosoProps, onTopButtonProps, } = useListScroll({
+    const checkNodeExists = useCallback((nodeId) => flatList.some(({ id }) => id === nodeId), [flatList]);
+    const { currentNodeId, baseNodeId, activeLevelKeys, hasUpperLevel, isRootLevel, enterNode, leaveNode, } = useLevelNavigation({ items, isMobile, checkNodeExists });
+    const isBaseNodeExpanded = Boolean(baseNodeId && expandedIds.has(baseNodeId));
+    // Если корневой узел 1, то базовым уровнем становятся его дочерние элементы на
+    // мобильных устройствах
+    useEffect(() => {
+        if (!isMobile || !baseNodeId || isBaseNodeExpanded) {
+            return;
+        }
+        onToggle({ id: baseNodeId });
+    }, [isMobile, baseNodeId, isBaseNodeExpanded, onToggle]);
+    const currentNode = useMemo(() => {
+        if (!currentNodeId) {
+            return undefined;
+        }
+        return flatList.find(({ id }) => id === currentNodeId);
+    }, [currentNodeId, flatList]);
+    const levelTitle = currentNode?.title;
+    useNodeTitleValidation({
+        isMobile,
+        currentNodeId: currentNode?.id,
+        title: levelTitle,
+    });
+    const displayedList = useMemo(() => {
+        if (!isMobile) {
+            return flatList;
+        }
+        if (!currentNodeId) {
+            return flatList.filter((item) => item.meta.level === 0);
+        }
+        return flatList.filter((item) => item.meta.parentId === currentNodeId);
+    }, [isMobile, flatList, currentNodeId]);
+    // Уровни живут только на мобильной ширине
+    const levelKey = getLevelKey(isMobile ? currentNodeId : undefined);
+    const { scrollParent, listRef, tailRegistry, isEndReachedWithScroll, virtuosoProps, onTopButtonProps, saveLevelSnapshot, dropLevelSnapshot, } = useListScroll({
         scrollRef,
         isEndReached,
         onLoadMore,
-        flatListRef,
+        displayedList,
         enterAnimation,
+        isRootLevel,
+        levelKey,
+        activeLevelKeys,
     });
-    const contentStateProps = useMemo(() => {
-        const isNoData = !items?.length;
-        return {
-            // Проверка на текущие элементы списка необходима для рендера loading состояния при подгрузке данных
-            // вместо общего LoadingPlaceholder на всю страницу
-            isLoading: isNoData && isLoading,
-            isError: isNoData && isError,
-            loadingTitle: 'Загрузка данных',
-            errorState: {
-                imgAlt: 'Что-то пошло не так',
-                errorList: [errorMsg || ''],
-                imgSrc: errorImgSrc ?? imagesMap.defaultErrorImgSrc,
-                onRetry,
-            },
-        };
-    }, [items, isLoading, isError, errorMsg, errorImgSrc, onRetry, imagesMap]);
+    // Смена уровня — не появление строк, анимировать их не нужно
+    const prevLevelKeyRef = useRef(levelKey);
+    useEffect(() => {
+        if (prevLevelKeyRef.current === levelKey) {
+            return;
+        }
+        prevLevelKeyRef.current = levelKey;
+        enterAnimation.reset();
+    }, [levelKey, enterAnimation]);
+    const prepareNodeChildren = useCallback((listItem) => {
+        if (!expandedIdsRef.current.has(listItem.id)) {
+            onToggle(listItem);
+        }
+        const hasChildrenInList = Boolean(listItem.children?.length) ||
+            countDirectChildren(flatListRef.current, listItem.id) > 0;
+        if (!hasChildrenInList) {
+            syncChildrenPlaceholders(listItem.id, true, skeletonCount);
+        }
+    }, [
+        onToggle,
+        flatListRef,
+        expandedIdsRef,
+        syncChildrenPlaceholders,
+        skeletonCount,
+    ]);
+    // На мобильной ширине дети узла открываются отдельным уровнем
+    const handleEnterNode = useCallback((item) => {
+        const listItem = flatListRef.current.find(({ id }) => id === item.id);
+        if (!listItem?.meta.hasNested) {
+            return;
+        }
+        prepareNodeChildren(listItem);
+        // Открытие уровня — не появление строк, анимировать их не нужно
+        enterAnimation.reset();
+        saveLevelSnapshot();
+        // Переход внутрь узла показывает уровень с начала
+        dropLevelSnapshot(getLevelKey(item.id));
+        enterNode(item.id);
+    }, [
+        flatListRef,
+        prepareNodeChildren,
+        enterAnimation,
+        saveLevelSnapshot,
+        dropLevelSnapshot,
+        enterNode,
+    ]);
+    const handleToggle = useCallback((item) => {
+        if (isMobile) {
+            handleEnterNode(item);
+            return;
+        }
+        onToggle(item);
+    }, [isMobile, handleEnterNode, onToggle]);
+    const handleLeaveLevel = useCallback(() => {
+        enterAnimation.reset();
+        saveLevelSnapshot();
+        leaveNode();
+    }, [saveLevelSnapshot, leaveNode, enterAnimation]);
+    const isNoData = !items?.length;
+    const state = useMemo(() => {
+        if (!isNoData) {
+            return undefined;
+        }
+        if (isLoading) {
+            return 'loading';
+        }
+        if (isError) {
+            return 'error';
+        }
+        return 'noData';
+    }, [isNoData, isLoading, isError]);
+    const contentStateProps = useMemo(() => ({
+        isLoading: state === 'loading',
+        isError: state === 'error',
+        loadingTitle: 'Загрузка данных',
+        errorState: {
+            imgAlt: 'Что-то пошло не так',
+            errorList: [errorMsg || ''],
+            imgSrc: errorImgSrc ?? imagesMap.defaultErrorImgSrc,
+            onRetry,
+        },
+    }), [state, errorMsg, errorImgSrc, onRetry, imagesMap]);
+    // Футер отвечает за корневой список
     const footerContext = useMemo(() => ({
+        isLoading: isRootLevel && isLoading,
+        isError: isRootLevel && isError,
+        isEndReached: isRootLevel && isEndReachedWithScroll,
+        endOfScrollMsg,
+        onRetry,
+    }), [
+        isRootLevel,
         isLoading,
         isError,
-        isEndReached: isEndReachedWithScroll,
+        isEndReachedWithScroll,
         endOfScrollMsg,
         onRetry,
-    }), [isLoading, isError, isEndReachedWithScroll, endOfScrollMsg, onRetry]);
+    ]);
+    const lastRowId = useMemo(() => {
+        if (checkHasFooterContent(footerContext)) {
+            return undefined;
+        }
+        return displayedList[displayedList.length - 1]?.id;
+    }, [footerContext, displayedList]);
+    const levelHeaderProps = useMemo(() => {
+        if (!isMobile || !currentNodeId) {
+            return undefined;
+        }
+        if (!levelTitle && !hasUpperLevel) {
+            return undefined;
+        }
+        return {
+            title: levelTitle,
+            hasBackButton: hasUpperLevel,
+            onBack: handleLeaveLevel,
+        };
+    }, [isMobile, currentNodeId, levelTitle, hasUpperLevel, handleLeaveLevel]);
     return {
-        flatList,
-        onToggle,
+        displayedList,
+        levelKey,
+        lastRowId,
+        levelHeaderProps,
+        onToggle: handleToggle,
         nodePaginationMap,
         registerChildren,
         notifyExpand,
         parentItems,
         acquireParentSlot,
         contentStateProps,
+        isNoData,
+        state,
         scrollParent,
+        listRef,
         virtuosoProps,
         footerContext,
         onTopButtonProps,
@@ -85,7 +224,6 @@ export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isErr
         // Fallback подставляется один раз: ниже по дереву строка выбирает функцию по
         // типу узла, не проверяя, передал ли потребитель renderParent
         renderParent: renderParent ?? renderItem,
-        items,
         onRetry,
         noDataImgSrc,
         enterAnimation,

package/components/InfiniteTreeList/utils/checkHasFooterContent/checkHasFooterContent.d.ts

@@ -0,0 +1,5 @@
+import type { ListFooterContext } from '../../ListFooter';
+/**
+ * Проверяет, покажет ли футер списка placeholder
+ */
+export declare const checkHasFooterContent: ({ isLoading, isError, isEndReached, }: ListFooterContext) => boolean;

package/components/InfiniteTreeList/utils/checkHasFooterContent/checkHasFooterContent.js

@@ -0,0 +1,4 @@
+/**
+ * Проверяет, покажет ли футер списка placeholder
+ */
+export const checkHasFooterContent = ({ isLoading, isError, isEndReached, }) => Boolean(isLoading || isError || isEndReached);

package/components/InfiniteTreeList/utils/checkHasFooterContent/index.d.ts

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

package/components/InfiniteTreeList/utils/checkHasFooterContent/index.js

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

package/components/InfiniteTreeList/utils/checkHasNested/checkHasNested.d.ts

@@ -0,0 +1,6 @@
+import type { InfiniteTreeListData } from '../../types';
+/**
+ * Проверяет, есть ли у элемента вложенность: тем же признаком список решает,
+ * рисовать ли строке Chevron, а мобильный режим — уводит ли строка внутрь узла
+ */
+export declare const checkHasNested: <TData extends InfiniteTreeListData<TData>>(item: TData) => boolean;

package/components/InfiniteTreeList/utils/checkHasNested/checkHasNested.js

@@ -0,0 +1,5 @@
+/**
+ * Проверяет, есть ли у элемента вложенность: тем же признаком список решает,
+ * рисовать ли строке Chevron, а мобильный режим — уводит ли строка внутрь узла
+ */
+export const checkHasNested = (item) => Boolean(item.children) || item.hasChildren === true;

package/components/InfiniteTreeList/utils/checkHasNested/index.d.ts

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

package/components/InfiniteTreeList/utils/checkHasNested/index.js

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

package/components/InfiniteTreeList/utils/createTailRegistry/createTailRegistry.d.ts

@@ -1,7 +1,8 @@
 export type TailRegistry = {
     /**
      * Регистрирует хвост ветки. Тот же `parentId` и `itemId` — обновляет callback.
-     * Новый `itemId` сбрасывает `isLoadMoreRequested`
+     * Новый `itemId` сбрасывает `isLoadMoreRequested` и сразу проверяет хвост
+     * по последнему известному диапазону
      */
     register: (parentId: string, itemId: string, endReached: () => void) => void;
     /**
@@ -9,10 +10,14 @@ export type TailRegistry = {
      */
     unregister: (parentId: string, itemId?: string) => void;
     /**
-     * Вызывает `endReached` для хвостов, чей индекс попадает в видимый диапазон.
-     * `getIndex === -1` пропускает запись
+     * Запоминает видимый диапазон и вызывает `endReached` для хвостов, чей индекс
+     * в него попадает. `getIndex === -1` пропускает запись
      */
     checkRange: (endIndex: number, getIndex: (itemId: string) => number) => void;
+    /**
+     * Забывает запомненный диапазон: он относится к прежнему набору строк
+     */
+    forgetRange: () => void;
 };
 /**
  * Реестр хвостов вложенных веток. Живёт на экземпляре списка и переживает

package/components/InfiniteTreeList/utils/createTailRegistry/createTailRegistry.js

@@ -4,6 +4,22 @@
  */
 export const createTailRegistry = () => {
     const entries = new Map();
+    // Диапазон приходит от виртуализации раньше, чем монтируется строка хвоста:
+    // без запоминания диапазона хвост, видимый с первого кадра уровня, не
+    // сработал бы вовсе
+    let lastEndIndex = null;
+    let lastGetIndex = null;
+    const checkEntry = (entry) => {
+        if (entry.isLoadMoreRequested || lastEndIndex === null || !lastGetIndex) {
+            return;
+        }
+        const index = lastGetIndex(entry.itemId);
+        if (index === -1 || lastEndIndex < index) {
+            return;
+        }
+        entry.isLoadMoreRequested = true;
+        entry.endReached();
+    };
     return {
         register(parentId, itemId, endReached) {
             const existing = entries.get(parentId);
@@ -11,7 +27,13 @@ export const createTailRegistry = () => {
                 existing.endReached = endReached;
                 return;
             }
-            entries.set(parentId, { itemId, endReached, isLoadMoreRequested: false });
+            const entry = {
+                itemId,
+                endReached,
+                isLoadMoreRequested: false,
+            };
+            entries.set(parentId, entry);
+            checkEntry(entry);
         },
         unregister(parentId, itemId) {
             if (itemId === undefined) {
@@ -24,17 +46,13 @@ export const createTailRegistry = () => {
             }
         },
         checkRange(endIndex, getIndex) {
-            entries.forEach((entry) => {
-                if (entry.isLoadMoreRequested) {
-                    return;
-                }
-                const index = getIndex(entry.itemId);
-                if (index === -1 || endIndex < index) {
-                    return;
-                }
-                entry.isLoadMoreRequested = true;
-                entry.endReached();
-            });
+            lastEndIndex = endIndex;
+            lastGetIndex = getIndex;
+            entries.forEach(checkEntry);
+        },
+        forgetRange() {
+            lastEndIndex = null;
+            lastGetIndex = null;
         },
     };
 };

package/components/InfiniteTreeList/utils/flattenTree/flattenTree.js

@@ -1,3 +1,4 @@
+import { checkHasNested } from '../checkHasNested';
 /**
  * Проверяет, подгружаются ли дочерние элементы узла отдельно.
  */
@@ -15,7 +16,7 @@ export const flattenTree = (items, expandedIds, parentPath = [], level = 0, pare
         const flattenedItem = {
             ...item,
             meta: {
-                hasNested: Boolean(item.children) || item.hasChildren === true,
+                hasNested: checkHasNested(item),
                 isChildrenAsync,
                 level,
                 path,

package/components/InfiniteTreeList/utils/getLevelKey/getLevelKey.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Ключ уровня для снимков скролла и пересоздания списка
+ */
+export declare const getLevelKey: (nodeId?: string) => string;

package/components/InfiniteTreeList/utils/getLevelKey/getLevelKey.js

@@ -0,0 +1,5 @@
+import { NODE_LEVEL_KEY_PREFIX, ROOT_LEVEL_KEY } from '../../constants';
+/**
+ * Ключ уровня для снимков скролла и пересоздания списка
+ */
+export const getLevelKey = (nodeId) => nodeId === undefined ? ROOT_LEVEL_KEY : `${NODE_LEVEL_KEY_PREFIX}${nodeId}`;

package/components/InfiniteTreeList/utils/getLevelKey/index.d.ts

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

package/components/InfiniteTreeList/utils/getLevelKey/index.js

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

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

@@ -1,3 +1,5 @@
+export * from './checkHasFooterContent';
+export * from './checkHasNested';
 export * from './checkHasSkeletonPlaceholders';
 export * from './checkIsChildrenPlaceholder';
 export * from './checkIsChildrenPlaceholderOf';
@@ -12,6 +14,7 @@ export * from './flattenTree';
 export * from './getEnteringChildren';
 export * from './getIdsToKeep';
 export * from './getInitialExpandedIds';
+export * from './getLevelKey';
 export * from './getNestedItems';
 export * from './insertChildren';
 export * from './removeChildren';

package/components/InfiniteTreeList/utils/index.js

@@ -1,3 +1,5 @@
+export * from './checkHasFooterContent';
+export * from './checkHasNested';
 export * from './checkHasSkeletonPlaceholders';
 export * from './checkIsChildrenPlaceholder';
 export * from './checkIsChildrenPlaceholderOf';
@@ -12,6 +14,7 @@ export * from './flattenTree';
 export * from './getEnteringChildren';
 export * from './getIdsToKeep';
 export * from './getInitialExpandedIds';
+export * from './getLevelKey';
 export * from './getNestedItems';
 export * from './insertChildren';
 export * from './removeChildren';

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