@astral/ui 4.104.2 → 4.106.0

package/node/components/InfiniteTreeList/useLogic/useLogic.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const ConfigProvider_1 = require("../../ConfigProvider");
+const useViewportType_1 = require("../../useViewportType");
 const constants_1 = require("../constants");
 const hooks_1 = require("../hooks");
 const utils_1 = require("../utils");
@@ -12,6 +13,7 @@ const utils_1 = require("../utils");
  */
 const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isError, isLoading, scrollRef, isEndReached, onLoadMore, renderItem, renderParent, itemSkeleton, endOfScrollMsg, noDataImgSrc, errorImgSrc, }) => {
     const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const enterAnimation = (0, hooks_1.useEnterAnimation)();
     const parentSlotsRef = (0, react_1.useRef)(null);
     if (!parentSlotsRef.current) {
@@ -28,6 +30,7 @@ const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isError, isL
         enterAnimation,
         onCollapse: resetExpandNotification,
     });
+    const skeletonCount = itemSkeleton ? constants_1.CHILDREN_SKELETON_COUNT : 1;
     const { registerChildren, nodePaginationMap, parentItems } = (0, hooks_1.useChildrenState)({
         items,
         flatList,
@@ -37,49 +40,185 @@ const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isError, isL
         enterAnimation,
         insertChildren,
         syncChildrenPlaceholders,
-        skeletonCount: itemSkeleton ? constants_1.CHILDREN_SKELETON_COUNT : 1,
+        skeletonCount,
         releaseParentSlot,
     });
-    const { scrollParent, tailRegistry, isEndReachedWithScroll, virtuosoProps, onTopButtonProps, } = (0, hooks_1.useListScroll)({
+    const checkNodeExists = (0, react_1.useCallback)((nodeId) => flatList.some(({ id }) => id === nodeId), [flatList]);
+    const { currentNodeId, baseNodeId, activeLevelKeys, hasUpperLevel, isRootLevel, enterNode, leaveNode, } = (0, hooks_1.useLevelNavigation)({ items, isMobile, checkNodeExists });
+    const isBaseNodeExpanded = Boolean(baseNodeId && expandedIds.has(baseNodeId));
+    // Если корневой узел 1, то базовым уровнем становятся его дочерние элементы на
+    // мобильных устройствах
+    (0, react_1.useEffect)(() => {
+        if (!isMobile || !baseNodeId || isBaseNodeExpanded) {
+            return;
+        }
+        onToggle({ id: baseNodeId });
+    }, [isMobile, baseNodeId, isBaseNodeExpanded, onToggle]);
+    const currentNode = (0, react_1.useMemo)(() => {
+        if (!currentNodeId) {
+            return undefined;
+        }
+        return flatList.find(({ id }) => id === currentNodeId);
+    }, [currentNodeId, flatList]);
+    const levelTitle = currentNode?.title;
+    (0, hooks_1.useNodeTitleValidation)({
+        isMobile,
+        currentNodeId: currentNode?.id,
+        title: levelTitle,
+    });
+    const displayedList = (0, react_1.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 = (0, utils_1.getLevelKey)(isMobile ? currentNodeId : undefined);
+    const { scrollParent, listRef, tailRegistry, isEndReachedWithScroll, virtuosoProps, onTopButtonProps, saveLevelSnapshot, dropLevelSnapshot, } = (0, hooks_1.useListScroll)({
         scrollRef,
         isEndReached,
         onLoadMore,
-        flatListRef,
+        displayedList,
         enterAnimation,
+        isRootLevel,
+        levelKey,
+        activeLevelKeys,
     });
-    const contentStateProps = (0, react_1.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 = (0, react_1.useRef)(levelKey);
+    (0, react_1.useEffect)(() => {
+        if (prevLevelKeyRef.current === levelKey) {
+            return;
+        }
+        prevLevelKeyRef.current = levelKey;
+        enterAnimation.reset();
+    }, [levelKey, enterAnimation]);
+    const prepareNodeChildren = (0, react_1.useCallback)((listItem) => {
+        if (!expandedIdsRef.current.has(listItem.id)) {
+            onToggle(listItem);
+        }
+        const hasChildrenInList = Boolean(listItem.children?.length) ||
+            (0, utils_1.countDirectChildren)(flatListRef.current, listItem.id) > 0;
+        if (!hasChildrenInList) {
+            syncChildrenPlaceholders(listItem.id, true, skeletonCount);
+        }
+    }, [
+        onToggle,
+        flatListRef,
+        expandedIdsRef,
+        syncChildrenPlaceholders,
+        skeletonCount,
+    ]);
+    // На мобильной ширине дети узла открываются отдельным уровнем
+    const handleEnterNode = (0, react_1.useCallback)((item) => {
+        const listItem = flatListRef.current.find(({ id }) => id === item.id);
+        if (!listItem?.meta.hasNested) {
+            return;
+        }
+        prepareNodeChildren(listItem);
+        // Открытие уровня — не появление строк, анимировать их не нужно
+        enterAnimation.reset();
+        saveLevelSnapshot();
+        // Переход внутрь узла показывает уровень с начала
+        dropLevelSnapshot((0, utils_1.getLevelKey)(item.id));
+        enterNode(item.id);
+    }, [
+        flatListRef,
+        prepareNodeChildren,
+        enterAnimation,
+        saveLevelSnapshot,
+        dropLevelSnapshot,
+        enterNode,
+    ]);
+    const handleToggle = (0, react_1.useCallback)((item) => {
+        if (isMobile) {
+            handleEnterNode(item);
+            return;
+        }
+        onToggle(item);
+    }, [isMobile, handleEnterNode, onToggle]);
+    const handleLeaveLevel = (0, react_1.useCallback)(() => {
+        enterAnimation.reset();
+        saveLevelSnapshot();
+        leaveNode();
+    }, [saveLevelSnapshot, leaveNode, enterAnimation]);
+    const isNoData = !items?.length;
+    const state = (0, react_1.useMemo)(() => {
+        if (!isNoData) {
+            return undefined;
+        }
+        if (isLoading) {
+            return 'loading';
+        }
+        if (isError) {
+            return 'error';
+        }
+        return 'noData';
+    }, [isNoData, isLoading, isError]);
+    const contentStateProps = (0, react_1.useMemo)(() => ({
+        isLoading: state === 'loading',
+        isError: state === 'error',
+        loadingTitle: 'Загрузка данных',
+        errorState: {
+            imgAlt: 'Что-то пошло не так',
+            errorList: [errorMsg || ''],
+            imgSrc: errorImgSrc ?? imagesMap.defaultErrorImgSrc,
+            onRetry,
+        },
+    }), [state, errorMsg, errorImgSrc, onRetry, imagesMap]);
+    // Футер отвечает за корневой список
     const footerContext = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        if ((0, utils_1.checkHasFooterContent)(footerContext)) {
+            return undefined;
+        }
+        return displayedList[displayedList.length - 1]?.id;
+    }, [footerContext, displayedList]);
+    const levelHeaderProps = (0, react_1.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,
@@ -88,7 +227,6 @@ const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isError, isL
         // Fallback подставляется один раз: ниже по дереву строка выбирает функцию по
         // типу узла, не проверяя, передал ли потребитель renderParent
         renderParent: renderParent ?? renderItem,
-        items,
         onRetry,
         noDataImgSrc,
         enterAnimation,

package/node/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/node/components/InfiniteTreeList/utils/checkHasFooterContent/checkHasFooterContent.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkHasFooterContent = void 0;
+/**
+ * Проверяет, покажет ли футер списка placeholder
+ */
+const checkHasFooterContent = ({ isLoading, isError, isEndReached, }) => Boolean(isLoading || isError || isEndReached);
+exports.checkHasFooterContent = checkHasFooterContent;

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

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

package/node/components/InfiniteTreeList/utils/checkHasFooterContent/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("./checkHasFooterContent"), exports);

package/node/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/node/components/InfiniteTreeList/utils/checkHasNested/checkHasNested.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkHasNested = void 0;
+/**
+ * Проверяет, есть ли у элемента вложенность: тем же признаком список решает,
+ * рисовать ли строке Chevron, а мобильный режим — уводит ли строка внутрь узла
+ */
+const checkHasNested = (item) => Boolean(item.children) || item.hasChildren === true;
+exports.checkHasNested = checkHasNested;

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

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

package/node/components/InfiniteTreeList/utils/checkHasNested/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("./checkHasNested"), exports);

package/node/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/node/components/InfiniteTreeList/utils/createTailRegistry/createTailRegistry.js

@@ -7,6 +7,22 @@ exports.createTailRegistry = void 0;
  */
 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);
@@ -14,7 +30,13 @@ 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) {
@@ -27,17 +49,13 @@ 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/node/components/InfiniteTreeList/utils/flattenTree/flattenTree.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.flattenTree = void 0;
+const checkHasNested_1 = require("../checkHasNested");
 /**
  * Проверяет, подгружаются ли дочерние элементы узла отдельно.
  */
@@ -18,7 +19,7 @@ const flattenTree = (items, expandedIds, parentPath = [], level = 0, parentId) =
         const flattenedItem = {
             ...item,
             meta: {
-                hasNested: Boolean(item.children) || item.hasChildren === true,
+                hasNested: (0, checkHasNested_1.checkHasNested)(item),
                 isChildrenAsync,
                 level,
                 path,

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLevelKey = void 0;
+const constants_1 = require("../../constants");
+/**
+ * Ключ уровня для снимков скролла и пересоздания списка
+ */
+const getLevelKey = (nodeId) => nodeId === undefined ? constants_1.ROOT_LEVEL_KEY : `${constants_1.NODE_LEVEL_KEY_PREFIX}${nodeId}`;
+exports.getLevelKey = getLevelKey;

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

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

package/node/components/InfiniteTreeList/utils/getLevelKey/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("./getLevelKey"), exports);

package/node/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/node/components/InfiniteTreeList/utils/index.js

@@ -14,6 +14,8 @@ 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("./checkHasFooterContent"), exports);
+__exportStar(require("./checkHasNested"), exports);
 __exportStar(require("./checkHasSkeletonPlaceholders"), exports);
 __exportStar(require("./checkIsChildrenPlaceholder"), exports);
 __exportStar(require("./checkIsChildrenPlaceholderOf"), exports);
@@ -28,6 +30,7 @@ __exportStar(require("./flattenTree"), exports);
 __exportStar(require("./getEnteringChildren"), exports);
 __exportStar(require("./getIdsToKeep"), exports);
 __exportStar(require("./getInitialExpandedIds"), exports);
+__exportStar(require("./getLevelKey"), exports);
 __exportStar(require("./getNestedItems"), exports);
 __exportStar(require("./insertChildren"), exports);
 __exportStar(require("./removeChildren"), exports);

package/node/components/PageHeader/MobilePageActions/MobilePageActions.js

@@ -6,11 +6,11 @@ const PageActions_1 = require("../PageActions");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const MobilePageActions = (props) => {
-    const { disabledAction, isActive, handleToggle, visibleMainActions, hiddenMainActions, isVisibleShowMoreButton, isLoading, } = (0, useLogic_1.useLogic)(props);
+    const { disabledAction, isRenderActionDisabled, isActive, handleToggle, visibleMainActions, hiddenMainActions, isVisibleShowMoreButton, isLoading, } = (0, useLogic_1.useLogic)(props);
     const { secondary, secondaryVisible, className } = props;
     if (isLoading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, role: "presentation", children: [(0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledMainActions, { actions: visibleMainActions, isDisabled: disabledAction, "$isVisibleShowMoreButton": isVisibleShowMoreButton, size: "large" }), (0, jsx_runtime_1.jsxs)(styles_1.StyledCollapse, { in: isActive, children: [(0, jsx_runtime_1.jsx)(PageActions_1.MainActions, { isDisabled: disabledAction, actions: hiddenMainActions, size: "large" }), (0, jsx_runtime_1.jsxs)(styles_1.SecondaryActionsWrapper, { children: [secondaryVisible && ((0, jsx_runtime_1.jsx)(PageActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: "large" })), secondary && ((0, jsx_runtime_1.jsx)(PageActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: "large" }))] })] })] }), isVisibleShowMoreButton && ((0, jsx_runtime_1.jsx)(styles_1.ShowMoreButton, { onClick: handleToggle, children: isActive ? 'Скрыть другие действия' : 'Показать другие действия' }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, role: "presentation", children: [(0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledMainActions, { actions: visibleMainActions, isDisabled: disabledAction, "$isVisibleShowMoreButton": isVisibleShowMoreButton, size: "large", isRenderActionDisabled: isRenderActionDisabled }), (0, jsx_runtime_1.jsxs)(styles_1.StyledCollapse, { in: isActive, children: [(0, jsx_runtime_1.jsx)(PageActions_1.MainActions, { isDisabled: disabledAction, actions: hiddenMainActions, size: "large", isRenderActionDisabled: isRenderActionDisabled }), (0, jsx_runtime_1.jsxs)(styles_1.SecondaryActionsWrapper, { children: [secondaryVisible && ((0, jsx_runtime_1.jsx)(PageActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: "large", isRenderActionDisabled: true })), secondary && ((0, jsx_runtime_1.jsx)(PageActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: "large" }))] })] })] }), isVisibleShowMoreButton && ((0, jsx_runtime_1.jsx)(styles_1.ShowMoreButton, { onClick: handleToggle, children: isActive ? 'Скрыть другие действия' : 'Показать другие действия' }))] }));
 };
 exports.MobilePageActions = MobilePageActions;

package/node/components/PageHeader/MobilePageActions/useLogic/useLogic.d.ts

@@ -3,6 +3,7 @@ import { type MobilePageActionsProps } from '../MobilePageActions';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = MobilePageActionsProps<TMainActionComponent, TSecondaryActionComponent>;
 export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>({ main, secondary, secondaryVisible, isLoading, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent>) => {
     disabledAction: boolean;
+    isRenderActionDisabled: boolean;
     isActive: boolean;
     handleToggle: () => void;
     visibleMainActions: import("../../../ActionGroup").MainAction<TMainActionComponent>[] | undefined;

package/node/components/PageHeader/MobilePageActions/useLogic/useLogic.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const ActionGroup_1 = require("../../../ActionGroup");
+const useViewportType_1 = require("../../../useViewportType");
 const useLogic = ({ main, secondary, secondaryVisible, isLoading, }) => {
     const [isActive, setIsActive] = (0, react_1.useState)(false);
     const { disabledAction } = (0, ActionGroup_1.useActionsState)({ main, secondary });
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const handleToggle = () => {
         setIsActive(!isActive);
     };
@@ -13,6 +15,7 @@ const useLogic = ({ main, secondary, secondaryVisible, isLoading, }) => {
     const hiddenMainActions = main?.slice(2);
     return {
         disabledAction,
+        isRenderActionDisabled: !isMobile,
         isActive,
         handleToggle,
         visibleMainActions,

package/node/components/PageHeader/PageActions/MainActions/MainActions.d.ts

@@ -13,5 +13,5 @@ type PageMainActionsProps<TMainActionComponent extends ElementType> = Omit<MainA
      */
     spacing?: number;
 };
-export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, spacing, }: PageMainActionsProps<TMainActionComponent>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, spacing, isRenderActionDisabled, }: PageMainActionsProps<TMainActionComponent>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/node/components/PageHeader/PageActions/MainActions/MainActions.js

@@ -4,10 +4,10 @@ exports.MainActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ActionGroup_1 = require("../../../ActionGroup");
 const styles_1 = require("./styles");
-const MainActions = ({ actions, isDisabled, className, size, spacing = 2, }) => {
+const MainActions = ({ actions, isDisabled, className, size, spacing = 2, isRenderActionDisabled, }) => {
     if (!actions || (actions && actions.length === 0)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, "$spacing": spacing, children: (0, jsx_runtime_1.jsx)(ActionGroup_1.MainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, "$spacing": spacing, children: (0, jsx_runtime_1.jsx)(ActionGroup_1.MainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size, isRenderActionDisabled: isRenderActionDisabled }) }));
 };
 exports.MainActions = MainActions;

package/node/components/PageHeader/PageActions/MainActions/styles.js

@@ -2,12 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 const Button_1 = require("@mui/material/Button");
+const ActionGroup_1 = require("../../../ActionGroup");
 const styled_1 = require("../../../styled");
 const Tooltip_1 = require("../../../Tooltip");
 exports.Wrapper = styled_1.styled.div `
   display: flex;
   gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
+  .${ActionGroup_1.actionGroupClassnames.action} {
+    flex-grow: 1;
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     flex-wrap: wrap;
     gap: ${({ theme }) => theme.spacing(2)};

package/node/components/PageHeader/PageActions/PageActions.js

@@ -14,10 +14,10 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const PageActionsInner = (props, ref) => {
     const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
-    const { disabledAction, buttonClassnames, isFocusedMode, handleClick, tooltipTitle, collapsedActions, classnames, } = (0, useLogic_1.useLogic)(props);
+    const { disabledAction, isRenderActionDisabled, buttonClassnames, isFocusedMode, handleClick, tooltipTitle, collapsedActions, classnames, } = (0, useLogic_1.useLogic)(props);
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(PageActionSkeleton_1.PageActionSkeleton, { size: size }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { "$spacing": spacing, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: tooltipTitle, enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: (0, jsx_runtime_1.jsx)(styles_1.FocusModeButton, { className: buttonClassnames, variant: "outlined", onClick: handleClick, "aria-label": tooltipTitle, color: "grey", children: isFocusedMode ? (0, jsx_runtime_1.jsx)(MinimizeOutlineMd_1.MinimizeOutlineMd, {}) : (0, jsx_runtime_1.jsx)(FullSizeOutlineMd_1.FullSizeOutlineMd, {}) }) }), (0, jsx_runtime_1.jsx)(styles_1.MainActionsWrapper, { "$spacing": spacing, className: classnames, children: (0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }) }), (secondaryVisible || secondary) && ((0, jsx_runtime_1.jsxs)(styles_1.SecondaryVisibleWrapper, { "$spacing": spacing, className: classnames, children: [secondaryVisible && ((0, jsx_runtime_1.jsx)(SecondaryVisibleActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && ((0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] })), collapsedActions.length > 0 && ((0, jsx_runtime_1.jsx)(styles_1.CollapsedActionsWrapper, { className: classnames, children: (0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: collapsedActions, size: size }) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { "$spacing": spacing, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: tooltipTitle, enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: (0, jsx_runtime_1.jsx)(styles_1.FocusModeButton, { className: buttonClassnames, variant: "outlined", onClick: handleClick, "aria-label": tooltipTitle, color: "grey", children: isFocusedMode ? (0, jsx_runtime_1.jsx)(MinimizeOutlineMd_1.MinimizeOutlineMd, {}) : (0, jsx_runtime_1.jsx)(FullSizeOutlineMd_1.FullSizeOutlineMd, {}) }) }), (0, jsx_runtime_1.jsx)(styles_1.MainActionsWrapper, { "$spacing": spacing, className: classnames, children: (0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing, isRenderActionDisabled: isRenderActionDisabled }) }), (secondaryVisible || secondary) && ((0, jsx_runtime_1.jsxs)(styles_1.SecondaryVisibleWrapper, { "$spacing": spacing, className: classnames, children: [secondaryVisible && ((0, jsx_runtime_1.jsx)(SecondaryVisibleActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: size, isRenderActionDisabled: isRenderActionDisabled })), secondary && ((0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] })), collapsedActions.length > 0 && ((0, jsx_runtime_1.jsx)(styles_1.CollapsedActionsWrapper, { className: classnames, children: (0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: collapsedActions, size: size }) }))] }) }));
 };
 exports.PageActions = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(PageActionsInner);

package/node/components/PageHeader/PageActions/SecondaryVisibleActions/SecondaryVisibleActions.d.ts

@@ -1,2 +1,2 @@
 import { type SecondaryVisibleActionProps } from '../../../ActionGroup';
-export declare const SecondaryVisibleActions: ({ actions, size, }: SecondaryVisibleActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SecondaryVisibleActions: ({ actions, size, isRenderActionDisabled, }: SecondaryVisibleActionProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/PageHeader/PageActions/SecondaryVisibleActions/SecondaryVisibleActions.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SecondaryVisibleActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("./styles");
-const SecondaryVisibleActions = ({ actions, size = 'medium', }) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [actions.map(({ disabledReason, isBlockingOperation, icon, name, ...restActionProps }) => {
+const SecondaryVisibleActions = ({ actions, size = 'medium', isRenderActionDisabled, }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [actions.map(({ disabledReason, isBlockingOperation, icon, name, renderAction, ...restActionProps }) => {
                 return ((0, jsx_runtime_1.jsx)(styles_1.StyledMobileButton, { variant: "outlined", size: size, color: "grey", ...restActionProps, children: name }, name));
-            }), (0, jsx_runtime_1.jsx)(styles_1.StyledSecondaryVisibleActions, { actions: actions, size: size })] }));
+            }), (0, jsx_runtime_1.jsx)(styles_1.StyledSecondaryVisibleActions, { actions: actions, size: size, isRenderActionDisabled: isRenderActionDisabled })] }));
 };
 exports.SecondaryVisibleActions = SecondaryVisibleActions;