@astral/ui 4.104.2 → 4.105.0

package/components/ActionGroup/SecondaryVisibleActions/ActionNode/index.js

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

package/components/ActionGroup/SecondaryVisibleActions/SecondaryVisibleActions.d.ts

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

package/components/ActionGroup/SecondaryVisibleActions/SecondaryVisibleActions.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { IconButton } from '../../IconButton';
-import { Tooltip } from '../../Tooltip';
-export const SecondaryVisibleActions = ({ actions, className, size, }) => {
-    return (_jsx(_Fragment, { children: actions.map((action) => {
-            const { name, icon, disabledReason, disabled, isBlockingOperation, ...mainProps } = action;
-            return (_jsx(Tooltip, { title: disabled ? disabledReason : name, withoutContainer: !disabled, children: _jsx(IconButton, { variant: "outlined", color: "grey", size: size, name: name, disabled: disabled, className: className, ...mainProps, children: icon }) }, name));
-        }) }));
+import { ActionNode } from './ActionNode';
+export const SecondaryVisibleActions = ({ actions, className, size = 'medium', isRenderActionDisabled = false, }) => {
+    return (_jsx(_Fragment, { children: actions.map((action) => (_jsx(ActionNode, { action: action, size: size, className: className, isRenderActionDisabled: isRenderActionDisabled }, action.name))) }));
 };

package/components/ActionGroup/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const actionGroupClassnames: {
+    action: string;
+};

package/components/ActionGroup/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const actionGroupClassnames = {
+    action: createUIKitClassname('action-group__action'),
+};

package/components/ActionGroup/index.d.ts

@@ -1,6 +1,7 @@
 export { ActionGroup } from './ActionGroup';
+export { actionGroupClassnames } from './constants';
 export * from './hooks';
 export { MainActions, useMainActions } from './MainActions';
 export { SecondaryActions } from './SecondaryActions';
 export { SecondaryVisibleActions } from './SecondaryVisibleActions';
-export type { ActionGroupProps, MainAction, MainActionsProps, SecondaryAction, SecondaryActionProps, SecondaryVisibleAction, SecondaryVisibleActionProps, } from './types';
+export type { ActionElementProps, ActionGroupProps, ActionRenderContext, MainAction, MainActionsProps, NestedActionRenderContext, SecondaryAction, SecondaryActionProps, SecondaryVisibleAction, SecondaryVisibleActionProps, } from './types';

package/components/ActionGroup/index.js

@@ -1,4 +1,5 @@
 export { ActionGroup } from './ActionGroup';
+export { actionGroupClassnames } from './constants';
 export * from './hooks';
 export { MainActions, useMainActions } from './MainActions';
 export { SecondaryActions } from './SecondaryActions';

package/components/ActionGroup/public.d.ts

@@ -1,6 +1,7 @@
 export { ActionGroup } from './ActionGroup';
+export { actionGroupClassnames } from './constants';
 export * from './hooks';
 export { MainActions, useMainActions } from './MainActions';
 export { SecondaryActions } from './SecondaryActions';
 export { SecondaryVisibleActions } from './SecondaryVisibleActions';
-export type { ActionGroupProps, MainAction, MainActionsProps, SecondaryActionProps, SecondaryVisibleActionProps, } from './types';
+export type { ActionElementProps, ActionGroupProps, ActionRenderContext, MainAction, MainActionsProps, NestedActionRenderContext, SecondaryActionProps, SecondaryVisibleActionProps, } from './types';

package/components/ActionGroup/public.js

@@ -1,4 +1,5 @@
 export { ActionGroup } from './ActionGroup';
+export { actionGroupClassnames } from './constants';
 export * from './hooks';
 export { MainActions, useMainActions } from './MainActions';
 export { SecondaryActions } from './SecondaryActions';

package/components/ActionGroup/styles.js

@@ -1,5 +1,10 @@
 import { styled } from '../styled';
+import { actionGroupClassnames } from './constants';
 export const Wrapper = styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
+
+  .${actionGroupClassnames.action} {
+    flex-grow: 1;
+  }
 `;

package/components/ActionGroup/types.d.ts

@@ -1,9 +1,51 @@
-import type { ComponentProps, ElementType, ReactNode } from 'react';
+import type { ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 import type { ButtonProps, ButtonSize } from '../Button';
 import type { DropdownButtonProps } from '../DropdownButton';
 import type { ListItemButtonProps } from '../ListItemButton';
 import type { MenuItemProps } from '../MenuItem';
 import type { TooltipProps } from '../Tooltip';
+/** Свойства стандартного элемента действия, из которых продукт может собрать собственный элемент в `renderAction` */
+export type ActionElementProps = {
+    /** Содержимое действия: название */
+    children: ReactNode;
+    /** Признак блокировки действия */
+    disabled?: boolean;
+    /** Признак загрузки действия */
+    loading?: boolean;
+    /** Обработчик нажатия на действие */
+    onClick?: ButtonProps['onClick'];
+    /** Размер, совпадающий с размером группы действий */
+    size: ButtonSize;
+    /** Класс, отвечающий за поведение действия в ряду группы */
+    className: string;
+};
+/** Контекст renderAction */
+export type ActionRenderContext = {
+    /** Стандартный элемент действия */
+    defaultElement: ReactElement;
+    /** Свойства действия */
+    elementProps: ActionElementProps;
+    /** DOM-узел действия */
+    anchorEl: HTMLElement | null;
+};
+/** Контекст renderAction у действия с выпадающим списком */
+export type NestedActionRenderContext = Pick<ActionRenderContext, 'defaultElement'>;
+type WithRenderAction<TContext = ActionRenderContext> = {
+    /**
+     * Подменяет отображение действия: стандартный элемент можно обернуть
+     * или собрать заново из `elementProps`
+     */
+    renderAction?: (context: TContext) => ReactNode;
+};
+type WithRenderActionDisabled = {
+    /**
+     * Отключает вызов `renderAction` — для копии действий, скрытой через css:
+     * попап из подмены открывается в портале, и css его не прячет
+     *
+     * @default false
+     */
+    isRenderActionDisabled?: boolean;
+};
 type NestedAction = MenuItemProps & {
     /** Название действия */
     text: string;
@@ -33,7 +75,7 @@ export type SingleAction<TMainActionComponent extends ElementType> = Omit<Button
      * Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонент
      */
     component?: TMainActionComponent;
-} & Omit<ComponentProps<ElementType extends TMainActionComponent ? 'button' : TMainActionComponent>, ''>;
+} & WithRenderAction & Omit<ComponentProps<ElementType extends TMainActionComponent ? 'button' : TMainActionComponent>, ''>;
 export type MultipleAction<TMainActionComponent extends ElementType> = Omit<DropdownButtonProps, 'children' | 'name' | 'component'> & {
     /**
      * Флаг показа выпадающего списка при клике
@@ -63,7 +105,7 @@ export type MultipleAction<TMainActionComponent extends ElementType> = Omit<Drop
      * Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонент
      */
     component?: TMainActionComponent;
-} & Omit<ComponentProps<ElementType extends TMainActionComponent ? 'button' : TMainActionComponent>, ''>;
+} & WithRenderAction<NestedActionRenderContext> & Omit<ComponentProps<ElementType extends TMainActionComponent ? 'button' : TMainActionComponent>, ''>;
 /** Модель основного экшена */
 export type MainAction<TMainActionComponent extends ElementType> = SingleAction<TMainActionComponent> | MultipleAction<TMainActionComponent>;
 export type MainActionsProps<TMainActionComponent extends ElementType> = {
@@ -73,7 +115,7 @@ export type MainActionsProps<TMainActionComponent extends ElementType> = {
      */
     isDisabled?: boolean;
     size?: ButtonSize;
-};
+} & WithRenderActionDisabled;
 /** Модель второстепенного экшена */
 export type SecondaryAction<TSecondaryActionComponent extends ElementType> = Omit<ListItemButtonProps, 'children' | 'component'> & {
     /**
@@ -114,7 +156,7 @@ export type SecondaryVisibleAction = Omit<ButtonProps, 'children'> & {
      * Если true, блокирует взаимодействие с actions
      */
     isBlockingOperation?: boolean;
-};
+} & WithRenderAction;
 export type SecondaryVisibleActionProps = {
     /**
      * Видимые второстепенные действия
@@ -125,7 +167,7 @@ export type SecondaryVisibleActionProps = {
      */
     className?: string;
     size?: ButtonSize;
-};
+} & WithRenderActionDisabled;
 export type ActionGroupProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = {
     /**
      * Основные действия

package/components/PageHeader/MobilePageActions/MobilePageActions.js

@@ -3,10 +3,10 @@ import { MainActions, SecondaryActions, SecondaryVisibleActions, } from '../Page
 import { ActionWrapper, SecondaryActionsWrapper, ShowMoreButton, StyledCollapse, StyledMainActions, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const MobilePageActions = (props) => {
-    const { disabledAction, isActive, handleToggle, visibleMainActions, hiddenMainActions, isVisibleShowMoreButton, isLoading, } = useLogic(props);
+    const { disabledAction, isRenderActionDisabled, isActive, handleToggle, visibleMainActions, hiddenMainActions, isVisibleShowMoreButton, isLoading, } = useLogic(props);
     const { secondary, secondaryVisible, className } = props;
     if (isLoading) {
         return null;
     }
-    return (_jsxs(Wrapper, { className: className, role: "presentation", children: [_jsxs(ActionWrapper, { children: [_jsx(StyledMainActions, { actions: visibleMainActions, isDisabled: disabledAction, "$isVisibleShowMoreButton": isVisibleShowMoreButton, size: "large" }), _jsxs(StyledCollapse, { in: isActive, children: [_jsx(MainActions, { isDisabled: disabledAction, actions: hiddenMainActions, size: "large" }), _jsxs(SecondaryActionsWrapper, { children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: "large" })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: "large" }))] })] })] }), isVisibleShowMoreButton && (_jsx(ShowMoreButton, { onClick: handleToggle, children: isActive ? 'Скрыть другие действия' : 'Показать другие действия' }))] }));
+    return (_jsxs(Wrapper, { className: className, role: "presentation", children: [_jsxs(ActionWrapper, { children: [_jsx(StyledMainActions, { actions: visibleMainActions, isDisabled: disabledAction, "$isVisibleShowMoreButton": isVisibleShowMoreButton, size: "large", isRenderActionDisabled: isRenderActionDisabled }), _jsxs(StyledCollapse, { in: isActive, children: [_jsx(MainActions, { isDisabled: disabledAction, actions: hiddenMainActions, size: "large", isRenderActionDisabled: isRenderActionDisabled }), _jsxs(SecondaryActionsWrapper, { children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: "large", isRenderActionDisabled: true })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: "large" }))] })] })] }), isVisibleShowMoreButton && (_jsx(ShowMoreButton, { onClick: handleToggle, children: isActive ? 'Скрыть другие действия' : 'Показать другие действия' }))] }));
 };

package/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/components/PageHeader/MobilePageActions/useLogic/useLogic.js

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { useActionsState } from '../../../ActionGroup';
+import { useViewportType } from '../../../useViewportType';
 export const useLogic = ({ main, secondary, secondaryVisible, isLoading, }) => {
     const [isActive, setIsActive] = useState(false);
     const { disabledAction } = useActionsState({ main, secondary });
+    const { isMobile } = useViewportType();
     const handleToggle = () => {
         setIsActive(!isActive);
     };
@@ -10,6 +12,7 @@ export const useLogic = ({ main, secondary, secondaryVisible, isLoading, }) => {
     const hiddenMainActions = main?.slice(2);
     return {
         disabledAction,
+        isRenderActionDisabled: !isMobile,
         isActive,
         handleToggle,
         visibleMainActions,

package/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/components/PageHeader/PageActions/MainActions/MainActions.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MainActions as ActionGroupMainActions, } from '../../../ActionGroup';
 import { Wrapper } from './styles';
-export const MainActions = ({ actions, isDisabled, className, size, spacing = 2, }) => {
+export const MainActions = ({ actions, isDisabled, className, size, spacing = 2, isRenderActionDisabled, }) => {
     if (!actions || (actions && actions.length === 0)) {
         return null;
     }
-    return (_jsx(Wrapper, { className: className, "$spacing": spacing, children: _jsx(ActionGroupMainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size }) }));
+    return (_jsx(Wrapper, { className: className, "$spacing": spacing, children: _jsx(ActionGroupMainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size, isRenderActionDisabled: isRenderActionDisabled }) }));
 };

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

@@ -1,10 +1,15 @@
 import { buttonClasses } from '@mui/material/Button';
+import { actionGroupClassnames } from '../../../ActionGroup';
 import { styled } from '../../../styled';
 import { tooltipClassnames } from '../../../Tooltip';
 export const Wrapper = styled.div `
   display: flex;
   gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
+  .${actionGroupClassnames.action} {
+    flex-grow: 1;
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     flex-wrap: wrap;
     gap: ${({ theme }) => theme.spacing(2)};

package/components/PageHeader/PageActions/PageActions.js

@@ -11,10 +11,10 @@ import { ActionWrapper, CollapsedActionsWrapper, FocusModeButton, MainActionsWra
 import { useLogic } from './useLogic';
 const PageActionsInner = (props, ref) => {
     const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
-    const { disabledAction, buttonClassnames, isFocusedMode, handleClick, tooltipTitle, collapsedActions, classnames, } = useLogic(props);
+    const { disabledAction, isRenderActionDisabled, buttonClassnames, isFocusedMode, handleClick, tooltipTitle, collapsedActions, classnames, } = useLogic(props);
     if (isLoading) {
         return (_jsx(Wrapper, { children: _jsx(PageActionSkeleton, { size: size }) }));
     }
-    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$spacing": spacing, children: [_jsx(Tooltip, { title: tooltipTitle, enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: _jsx(FocusModeButton, { className: buttonClassnames, variant: "outlined", onClick: handleClick, "aria-label": tooltipTitle, color: "grey", children: isFocusedMode ? _jsx(MinimizeOutlineMd, {}) : _jsx(FullSizeOutlineMd, {}) }) }), _jsx(MainActionsWrapper, { "$spacing": spacing, className: classnames, children: _jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }) }), (secondaryVisible || secondary) && (_jsxs(SecondaryVisibleWrapper, { "$spacing": spacing, className: classnames, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] })), collapsedActions.length > 0 && (_jsx(CollapsedActionsWrapper, { className: classnames, children: _jsx(SecondaryActions, { isDisabled: disabledAction, actions: collapsedActions, size: size }) }))] }) }));
+    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$spacing": spacing, children: [_jsx(Tooltip, { title: tooltipTitle, enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: _jsx(FocusModeButton, { className: buttonClassnames, variant: "outlined", onClick: handleClick, "aria-label": tooltipTitle, color: "grey", children: isFocusedMode ? _jsx(MinimizeOutlineMd, {}) : _jsx(FullSizeOutlineMd, {}) }) }), _jsx(MainActionsWrapper, { "$spacing": spacing, className: classnames, children: _jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing, isRenderActionDisabled: isRenderActionDisabled }) }), (secondaryVisible || secondary) && (_jsxs(SecondaryVisibleWrapper, { "$spacing": spacing, className: classnames, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size, isRenderActionDisabled: isRenderActionDisabled })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] })), collapsedActions.length > 0 && (_jsx(CollapsedActionsWrapper, { className: classnames, children: _jsx(SecondaryActions, { isDisabled: disabledAction, actions: collapsedActions, size: size }) }))] }) }));
 };
 export const PageActions = forwardRefWithGeneric(PageActionsInner);

package/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/components/PageHeader/PageActions/SecondaryVisibleActions/SecondaryVisibleActions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyledMobileButton, StyledSecondaryVisibleActions } from './styles';
-export const SecondaryVisibleActions = ({ actions, size = 'medium', }) => {
-    return (_jsxs(_Fragment, { children: [actions.map(({ disabledReason, isBlockingOperation, icon, name, ...restActionProps }) => {
+export const SecondaryVisibleActions = ({ actions, size = 'medium', isRenderActionDisabled, }) => {
+    return (_jsxs(_Fragment, { children: [actions.map(({ disabledReason, isBlockingOperation, icon, name, renderAction, ...restActionProps }) => {
                 return (_jsx(StyledMobileButton, { variant: "outlined", size: size, color: "grey", ...restActionProps, children: name }, name));
-            }), _jsx(StyledSecondaryVisibleActions, { actions: actions, size: size })] }));
+            }), _jsx(StyledSecondaryVisibleActions, { actions: actions, size: size, isRenderActionDisabled: isRenderActionDisabled })] }));
 };

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

@@ -9,6 +9,12 @@ export declare const StyledMobileButton: import("../../../styled").StyledCompone
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledSecondaryVisibleActions: import("../../../styled").StyledComponent<import("../../../ActionGroup").SecondaryVisibleActionProps & {
+export declare const StyledSecondaryVisibleActions: import("../../../styled").StyledComponent<{
+    actions: import("../../../ActionGroup").SecondaryVisibleAction[];
+    className?: string | undefined;
+    size?: import("../../../Button").ButtonSize | undefined;
+} & {
+    isRenderActionDisabled?: boolean | undefined;
+} & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/PageHeader/PageActions/useLogic/useLogic.d.ts

@@ -3,6 +3,7 @@ import { type SecondaryAction } from '../../../ActionGroup';
 import type { PageActionsProps } from '../types';
 export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>({ main, secondary, secondaryVisible, withCollapseOnLaptop, }: PageActionsProps<TMainActionComponent, TSecondaryActionComponent>) => {
     disabledAction: boolean;
+    isRenderActionDisabled: boolean;
     buttonClassnames: string;
     isFocusedMode: boolean;
     handleClick: () => void;

package/components/PageHeader/PageActions/useLogic/useLogic.js

@@ -2,11 +2,13 @@ import { useContext, useMemo } from 'react';
 import { useActionsState } from '../../../ActionGroup';
 import { NextFeatureFlagsContext } from '../../../ConfigProvider/NextFeatureFlagsContext';
 import { DashboardContext } from '../../../DashboardContext';
+import { useViewportType } from '../../../useViewportType';
 import { cn } from '../../../utils/cn';
 import { actionsClassnames, focusModeButtonClassnames } from '../constants';
 export const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = false, }) => {
     const { showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop } = useContext(NextFeatureFlagsContext);
     const { setFocusedMode, isFocusedMode } = useContext(DashboardContext);
+    const { isMobile } = useViewportType();
     const { disabledAction } = useActionsState({ main, secondary });
     const buttonClassnames = useMemo(() => cn({
         [focusModeButtonClassnames.isShowOnDesktop]: showFocusModeButtonOnDesktop,
@@ -58,6 +60,7 @@ export const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLapt
     }, [withCollapseOnLaptop]);
     return {
         disabledAction,
+        isRenderActionDisabled: isMobile,
         buttonClassnames,
         isFocusedMode,
         handleClick,

package/components/index.d.ts

@@ -1,5 +1,5 @@
 export * from './Accordion';
-export { ActionGroup, type ActionGroupProps, type MainAction, useMainActions, } from './ActionGroup';
+export { ActionGroup, type ActionElementProps, type ActionGroupProps, type ActionRenderContext, type MainAction, type NestedActionRenderContext, useMainActions, } from './ActionGroup';
 export { AddressAutocomplete, type AddressAutocompleteProps, type AddressAutocompleteValue, } from './AddressAutocomplete';
 export { alertClassnames, Alert, type AlertProps, type AlertSeverity, } from './Alert';
 export { AsyncAutocomplete, type AsyncAutocompleteProps, } from './AsyncAutocomplete';

package/node/components/ActionGroup/MainActions/ActionNode/ActionNode.d.ts

@@ -0,0 +1,9 @@
+import { type ElementType } from 'react';
+import type { ProcessedMainAction } from '../hooks';
+export type ActionNodeProps<TMainActionComponent extends ElementType> = ProcessedMainAction<TMainActionComponent> & {
+    isRenderActionDisabled?: boolean;
+};
+/**
+ * Отображает одно основное действие: стандартный узел кита либо то, что вернул `renderAction`
+ */
+export declare const ActionNode: <TMainActionComponent extends ElementType>(props: ActionNodeProps<TMainActionComponent>) => import("react/jsx-runtime").JSX.Element;

package/node/components/ActionGroup/MainActions/ActionNode/ActionNode.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionNode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DropdownButton_1 = require("../../../DropdownButton");
+const MenuItem_1 = require("../../../MenuItem");
+const Tooltip_1 = require("../../../Tooltip");
+const styles_1 = require("../styles");
+/**
+ * Отображает одно основное действие: стандартный узел кита либо то, что вернул `renderAction`
+ */
+const ActionNode = (props) => {
+    const { tooltipProps, renderAction, isRenderActionDisabled = false } = props;
+    const { key, ...restTooltipProps } = tooltipProps;
+    const isRenderActionCalled = !isRenderActionDisabled && Boolean(renderAction);
+    // Якорь в состоянии, а не в ref: мутация ref.current не вызывает обновление, и popover на первом кадре остался бы без якоря
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    // Лишний render при монтировании достаётся только действиям с renderAction.
+    const anchorRef = isRenderActionCalled && !props.isNested ? setAnchorEl : undefined;
+    const defaultElement = ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...restTooltipProps, ref: anchorRef, children: props.isNested ? ((0, jsx_runtime_1.jsx)(DropdownButton_1.DropdownButton, { ...props.buttonProps, children: props.nestedActions.map(({ key: nestedKey, text, ...nestedProps }) => ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { ...nestedProps, children: text }, nestedKey))) })) : ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, { ...props.buttonProps })) }));
+    if (isRenderActionDisabled || !props.renderAction) {
+        return defaultElement;
+    }
+    if (props.isNested) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.renderAction({ defaultElement }) });
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.renderAction({
+            defaultElement,
+            elementProps: props.elementProps,
+            anchorEl,
+        }) }));
+};
+exports.ActionNode = ActionNode;

package/node/components/ActionGroup/MainActions/ActionNode/index.d.ts

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

package/node/components/ActionGroup/MainActions/ActionNode/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("./ActionNode"), exports);

package/node/components/ActionGroup/MainActions/MainActions.d.ts

@@ -1,3 +1,3 @@
 import { type ElementType } from 'react';
 import type { MainActionsProps } from '../types';
-export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, size, }: MainActionsProps<TMainActionComponent>) => import("react/jsx-runtime").JSX.Element;
+export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, size, isRenderActionDisabled, }: MainActionsProps<TMainActionComponent>) => import("react/jsx-runtime").JSX.Element;

package/node/components/ActionGroup/MainActions/MainActions.js

@@ -2,21 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const MenuItem_1 = require("../../MenuItem");
-const Tooltip_1 = require("../../Tooltip");
+const ActionNode_1 = require("./ActionNode");
 const hooks_1 = require("./hooks");
-const styles_1 = require("./styles");
-const MainActions = ({ actions, isDisabled, size, }) => {
+const MainActions = ({ actions, isDisabled, size, isRenderActionDisabled = false, }) => {
     const processedActions = (0, hooks_1.useMainActions)({ actions, size, isDisabled });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: processedActions.map(({ tooltipProps, isNested, buttonProps, nestedActions }) => {
-            const { key: tooltipKey, ...restTooltipProps } = tooltipProps;
-            if (isNested) {
-                return ((0, react_1.createElement)(Tooltip_1.Tooltip, { ...restTooltipProps, key: tooltipKey },
-                    (0, jsx_runtime_1.jsx)(styles_1.StyledDropdownButton, { ...buttonProps, children: nestedActions.map(({ key, text, ...nestedProps }) => ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { ...nestedProps, children: text }, key))) })));
-            }
-            return ((0, react_1.createElement)(Tooltip_1.Tooltip, { ...restTooltipProps, key: tooltipKey },
-                (0, jsx_runtime_1.jsx)(styles_1.StyledButton, { ...buttonProps })));
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: processedActions.map((action) => ((0, jsx_runtime_1.jsx)(ActionNode_1.ActionNode, { isRenderActionDisabled: isRenderActionDisabled, ...action }, action.tooltipProps.key))) }));
 };
 exports.MainActions = MainActions;