@astral/ui 4.104.2 → 4.105.0

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

@@ -14,9 +14,11 @@ 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 });
-exports.SecondaryVisibleActions = exports.SecondaryActions = exports.useMainActions = exports.MainActions = exports.ActionGroup = void 0;
+exports.SecondaryVisibleActions = exports.SecondaryActions = exports.useMainActions = exports.MainActions = exports.actionGroupClassnames = exports.ActionGroup = void 0;
 var ActionGroup_1 = require("./ActionGroup");
 Object.defineProperty(exports, "ActionGroup", { enumerable: true, get: function () { return ActionGroup_1.ActionGroup; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "actionGroupClassnames", { enumerable: true, get: function () { return constants_1.actionGroupClassnames; } });
 __exportStar(require("./hooks"), exports);
 var MainActions_1 = require("./MainActions");
 Object.defineProperty(exports, "MainActions", { enumerable: true, get: function () { return MainActions_1.MainActions; } });

package/node/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/node/components/ActionGroup/public.js

@@ -14,9 +14,11 @@ 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 });
-exports.SecondaryVisibleActions = exports.SecondaryActions = exports.useMainActions = exports.MainActions = exports.ActionGroup = void 0;
+exports.SecondaryVisibleActions = exports.SecondaryActions = exports.useMainActions = exports.MainActions = exports.actionGroupClassnames = exports.ActionGroup = void 0;
 var ActionGroup_1 = require("./ActionGroup");
 Object.defineProperty(exports, "ActionGroup", { enumerable: true, get: function () { return ActionGroup_1.ActionGroup; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "actionGroupClassnames", { enumerable: true, get: function () { return constants_1.actionGroupClassnames; } });
 __exportStar(require("./hooks"), exports);
 var MainActions_1 = require("./MainActions");
 Object.defineProperty(exports, "MainActions", { enumerable: true, get: function () { return MainActions_1.MainActions; } });

package/node/components/ActionGroup/styles.js

@@ -2,7 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
+
+  .${constants_1.actionGroupClassnames.action} {
+    flex-grow: 1;
+  }
 `;

package/node/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/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;

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

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

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

@@ -5,11 +5,13 @@ const react_1 = require("react");
 const ActionGroup_1 = require("../../../ActionGroup");
 const NextFeatureFlagsContext_1 = require("../../../ConfigProvider/NextFeatureFlagsContext");
 const DashboardContext_1 = require("../../../DashboardContext");
+const useViewportType_1 = require("../../../useViewportType");
 const cn_1 = require("../../../utils/cn");
 const constants_1 = require("../constants");
 const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = false, }) => {
     const { showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop } = (0, react_1.useContext)(NextFeatureFlagsContext_1.NextFeatureFlagsContext);
     const { setFocusedMode, isFocusedMode } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const { disabledAction } = (0, ActionGroup_1.useActionsState)({ main, secondary });
     const buttonClassnames = (0, react_1.useMemo)(() => (0, cn_1.cn)({
         [constants_1.focusModeButtonClassnames.isShowOnDesktop]: showFocusModeButtonOnDesktop,
@@ -61,6 +63,7 @@ const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = fa
     }, [withCollapseOnLaptop]);
     return {
         disabledAction,
+        isRenderActionDisabled: isMobile,
         buttonClassnames,
         isFocusedMode,
         handleClick,

package/node/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.104.2",
+  "version": "4.105.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {