@astral/ui 4.11.0 → 4.13.0

package/components/DataGridActionCell/useLogic/useLogic.d.ts

@@ -2,9 +2,12 @@ import { type MouseEventHandler } from 'react';
 import { type DataGridActionCellProps } from '../DataGridActionCell';
 import type { NestedAction, SingleAction } from '../types';
 type UseLogicParams<TRowData> = DataGridActionCellProps<TRowData>;
-export declare const useLogic: <TRowData>({ row, actions, }: UseLogicParams<TRowData>) => {
-    isDisabledAction: boolean;
+export declare const useLogic: <TRowData>({ row, actions, mainActions, secondaryActions, }: UseLogicParams<TRowData>) => {
     handleActionClick: (onClick: ((row: TRowData) => void) | (MouseEventHandler<HTMLLIElement> & ((row: TRowData) => void)) | undefined) => () => void;
     handleWrapperClick: MouseEventHandler<HTMLDivElement>;
+    actions: import("../DataGridActionCell").DataGridActions<TRowData> | undefined;
+    mainActions: (() => import("react").ReactNode) | undefined;
+    secondaryActions: ((props: import("..").DataGridSecondaryActionsProps<TRowData>) => import("react").ReactNode) | undefined;
+    hasSecondaryActions: boolean | ((props: import("..").DataGridSecondaryActionsProps<TRowData>) => import("react").ReactNode);
 };
 export {};

package/components/DataGridActionCell/useLogic/useLogic.js

@@ -1,21 +1,18 @@
-import { useCallback, useContext, useEffect, } from 'react';
-import { RowContext } from '../../DataGrid';
-export const useLogic = ({ row, actions, }) => {
-    const { main, secondary } = actions;
-    const { addDisabledRow, removeDisabledRow } = useContext(RowContext);
-    const blockingAction = [...main, ...(secondary || [])].find((action) => action.isBlockingOperation && action.loading);
-    const isDisabledAction = Boolean(blockingAction);
-    useEffect(() => {
-        if (blockingAction) {
-            return addDisabledRow(blockingAction?.loadingNote);
-        }
-        removeDisabledRow();
-    }, [blockingAction]);
+import { useCallback } from 'react';
+export const useLogic = ({ row, actions, mainActions, secondaryActions, }) => {
     const handleActionClick = useCallback((onClick) => () => {
         onClick?.(row);
     }, [row]);
     const handleWrapperClick = (event) => {
         event.stopPropagation();
     };
-    return { isDisabledAction, handleActionClick, handleWrapperClick };
+    const hasSecondaryActions = secondaryActions || actions?.secondary !== undefined;
+    return {
+        handleActionClick,
+        handleWrapperClick,
+        actions,
+        mainActions,
+        secondaryActions,
+        hasSecondaryActions,
+    };
 };

package/components/MenuOrganization/MenuOrganization.js

@@ -12,11 +12,12 @@ import { OrganizationListSkeleton } from './OrganizationListSkeleton';
 import { ActionWrapper, OrganizationsWrapper, SearchWrapper, StyledTypography, } from './styles';
 import { useLogic } from './useLogic';
 export const MenuOrganization = (props) => {
+    const { anchorOrigin = { vertical: 'bottom', horizontal: 'right' }, transformOrigin = { vertical: 'top', horizontal: 'right' }, } = props;
     const { action, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, } = useLogic(props);
     if (isComponentLoading) {
         return _jsx(MenuOrganizationSkeleton, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(OrganizationButton, { ...organizationButtonProps }), _jsxs(Popover, { ...popoverProps, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, children: [isShowSearchField && (_jsx(SearchWrapper, { children: _jsx(SearchField, { fullWidth: true, ...searchProps }) })), _jsx(OrganizationsWrapper, { "$isLoading": isLoading, className: menuOrganizationClassnames.root, children: _jsx(ContentState, { isLoading: isLoading, isCustom: isError, customState: {
+    return (_jsxs(_Fragment, { children: [_jsx(OrganizationButton, { ...organizationButtonProps }), _jsxs(Popover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, children: [isShowSearchField && (_jsx(SearchWrapper, { children: _jsx(SearchField, { fullWidth: true, ...searchProps }) })), _jsx(OrganizationsWrapper, { "$isLoading": isLoading, className: menuOrganizationClassnames.root, children: _jsx(ContentState, { isLoading: isLoading, isCustom: isError, customState: {
                                 title: (_jsx(StyledTypography, { children: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435" })),
                                 Actions: (_jsx(Button, { variant: "light", color: "grey", onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })),
                                 className: menuOrganizationClassnames.errorPlaceholder,

package/components/MenuOrganization/types.d.ts

@@ -1,3 +1,4 @@
+import type { PopoverOrigin } from '@mui/material';
 import type { ComponentProps, ElementType, ReactNode } from 'react';
 import type { ButtonProps } from '../Button';
 export type Organization = {
@@ -126,4 +127,16 @@ export type MenuOrganizationProps<TData extends Organization = Organization> = {
     renderPreview?: (organization: TData, params: {
         className?: string;
     }) => ReactNode;
+    /**
+     * Позиция точки привязки на кнопке
+     * @example
+     * anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+     */
+    anchorOrigin?: PopoverOrigin;
+    /**
+     * Позиция точки привязки на Popover
+     * @example
+     * transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+     */
+    transformOrigin?: PopoverOrigin;
 };

package/components/index.d.ts

@@ -35,7 +35,7 @@ export { Counter, type CounterProps } from './Counter';
 export { DashboardAlert, type DashboardAlertProps } from './DashboardAlert';
 export { type DashboardLayoutProps, DashboardLayout, MenuSidebarButton, type MenuSidebarButtonProps, SidebarButton, SidebarCounter, type SidebarCounterProps, SidebarPopover, type SidebarPopoverItemProps, type SidebarPopoverProps, type SidebarProps as DashboardSidebarProps, DashboardContext, type DashboardContextProps, SidebarSkeleton, } from './DashboardLayout';
 export { DashboardSidebarContext as SidebarContext, type DashboardSidebarContextProps as SidebarContextProps, } from './DashboardSidebarProvider';
-export { DataGridActionCell, type DataGridActionCellProps, type DataGridActions, } from './DataGridActionCell';
+export { DataGridActionCell, type DataGridActionCellProps, type DataGridActions, DataGridMainActions, DataGridSecondaryActions, type DataGridMainActionsProps, type DataGridSecondaryActionsProps, DataGridSecondaryActionsSkeleton, } from './DataGridActionCell';
 export { DataGridMinimalisticPagination, type DataGridMinimalisticPaginationProps, } from './DataGridMinimalisticPagination';
 export * from './DataGridPagination';
 export { DatePicker, type DatePickerProps, datePickerClassnames, } from './DatePicker';

package/components/index.js

@@ -35,7 +35,7 @@ export { Counter } from './Counter';
 export { DashboardAlert } from './DashboardAlert';
 export { DashboardLayout, MenuSidebarButton, SidebarButton, SidebarCounter, SidebarPopover, DashboardContext, SidebarSkeleton, } from './DashboardLayout';
 export { DashboardSidebarContext as SidebarContext, } from './DashboardSidebarProvider';
-export { DataGridActionCell, } from './DataGridActionCell';
+export { DataGridActionCell, DataGridMainActions, DataGridSecondaryActions, DataGridSecondaryActionsSkeleton, } from './DataGridActionCell';
 export { DataGridMinimalisticPagination, } from './DataGridMinimalisticPagination';
 export * from './DataGridPagination';
 export { DatePicker, datePickerClassnames, } from './DatePicker';

package/node/components/DataGridActionCell/ActionCellContext/ActionCellContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ActionCellHandler } from '../types';
+export type ActionCellContextProps<TAction> = {
+    isDisabled: boolean;
+    onActionClick: ActionCellHandler<TAction>;
+    disabledReason?: string;
+    addDisabledCell: (disabledReason?: string) => void;
+    removeDisabledCell: () => void;
+};
+export declare const ActionCellContext: import("react").Context<ActionCellContextProps<unknown>>;

package/node/components/DataGridActionCell/ActionCellContext/ActionCellContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCellContext = void 0;
+const react_1 = require("react");
+exports.ActionCellContext = (0, react_1.createContext)({
+    isDisabled: false,
+    onActionClick: () => undefined,
+    addDisabledCell: () => undefined,
+    removeDisabledCell: () => undefined,
+});

package/node/components/DataGridActionCell/ActionCellContext/ActionCellProvider/ActionCellProvider.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { ActionCellHandler } from '../../types';
+type ActionCellContextProviderProps<TAction> = {
+    children: ReactNode;
+    onActionClick: ActionCellHandler<TAction>;
+};
+export declare const ActionCellContextProvider: <TAction>({ children, onActionClick, }: ActionCellContextProviderProps<TAction>) => JSX.Element;
+export {};

package/node/components/DataGridActionCell/ActionCellContext/ActionCellProvider/ActionCellProvider.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCellContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ActionCellContext_1 = require("../ActionCellContext");
+const ActionCellContextProvider = ({ children, onActionClick, }) => {
+    const [isDisabled, setDisabled] = (0, react_1.useState)(false);
+    const [disabledReason, setDisabledReason] = (0, react_1.useState)();
+    const addDisabledCell = (0, react_1.useCallback)((reason) => {
+        setDisabled(true);
+        setDisabledReason(reason);
+    }, []);
+    const removeDisabledCell = (0, react_1.useCallback)(() => {
+        setDisabled(false);
+        setDisabledReason(undefined);
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        isDisabled,
+        disabledReason,
+        addDisabledCell,
+        removeDisabledCell,
+        onActionClick,
+    }), [
+        isDisabled,
+        disabledReason,
+        addDisabledCell,
+        removeDisabledCell,
+        onActionClick,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(ActionCellContext_1.ActionCellContext.Provider, { value: contextValue, children: children }));
+};
+exports.ActionCellContextProvider = ActionCellContextProvider;

package/node/components/DataGridActionCell/ActionCellContext/ActionCellProvider/index.d.ts

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

package/node/components/DataGridActionCell/{SecondaryAction → ActionCellContext/ActionCellProvider}/index.js

@@ -14,4 +14,4 @@ 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("./SecondaryAction"), exports);
+__exportStar(require("./ActionCellProvider"), exports);

package/node/components/DataGridActionCell/ActionCellContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ActionCellContext';
+export * from './ActionCellProvider';

package/node/components/DataGridActionCell/ActionCellContext/index.js

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

package/node/components/DataGridActionCell/DataGridActionCell.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { type ReactNode } from 'react';
+import { type DataGridSecondaryActionsProps } from './DataGridSecondaryActions';
 import type { MainActionKind, SecondaryActionKind } from './types';
 export type DataGridActions<TAction> = {
     /**
@@ -13,8 +14,23 @@ export type DataGridActions<TAction> = {
 export type DataGridActionCellProps<TRow> = {
     /**
      * Действия
+     * @deprecated Используйте `mainActions` и `secondaryActions`.
+     *
+     * Новый подход обеспечивает:
+     *   - Ленивую загрузку вторичных действий с бэкенда
+     *   - Рендеринг `secondaryActions` только при открытии dropdown-меню
+     *   - Улучшенную производительность при работе со сложной логикой
+     *   - Оптимизацию за счет tree shaking
      */
-    actions: DataGridActions<TRow>;
+    actions?: DataGridActions<TRow>;
+    /**
+     * Компонент всегда отображаемых действий
+     */
+    mainActions?: () => ReactNode;
+    /**
+     * Компонент доп. действий, которые скрыты в popover за кнопкой
+     */
+    secondaryActions?: (props: DataGridSecondaryActionsProps<TRow>) => ReactNode;
     /**
      * Данные строки
      */

package/node/components/DataGridActionCell/DataGridActionCell.js

@@ -2,20 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridActionCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const MainAction_1 = require("./MainAction");
-const SecondaryAction_1 = require("./SecondaryAction");
+const ActionCellContext_1 = require("./ActionCellContext");
+const DataGridMainActions_1 = require("./DataGridMainActions");
+const SecondaryActionsButton_1 = require("./SecondaryActionsButton");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const TOOLTIP_PLACEMENT = {
-    mainAction: 'top',
-    secondaryAction: 'left',
-};
 const DataGridActionCell = (props) => {
-    const { isDisabledAction, handleWrapperClick, handleActionClick } = (0, useLogic_1.useLogic)(props);
-    const { actions } = props;
-    const { main, secondary } = actions;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleWrapperClick, children: [main.map((action) => {
-                return ((0, jsx_runtime_1.jsx)(MainAction_1.MainAction, { action: action, onActionClick: handleActionClick, isDisabled: isDisabledAction, tooltipPlacement: TOOLTIP_PLACEMENT.mainAction }, action.name));
-            }), secondary && ((0, jsx_runtime_1.jsx)(SecondaryAction_1.SecondaryActions, { actions: secondary, onActionClick: handleActionClick, tooltipPlacement: TOOLTIP_PLACEMENT.secondaryAction, isDisabled: isDisabledAction }))] }));
+    const { handleWrapperClick, handleActionClick, actions, mainActions, secondaryActions, hasSecondaryActions, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(ActionCellContext_1.ActionCellContextProvider, { onActionClick: handleActionClick, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleWrapperClick, children: [mainActions ? (mainActions()) : ((0, jsx_runtime_1.jsx)(DataGridMainActions_1.DataGridMainActions, { actions: actions?.main })), hasSecondaryActions && ((0, jsx_runtime_1.jsx)(SecondaryActionsButton_1.SecondaryActionsButton, { actions: actions?.secondary, renderActions: secondaryActions }))] }) }));
 };
 exports.DataGridActionCell = DataGridActionCell;

package/node/components/DataGridActionCell/{MainAction/MainAction.d.ts → DataGridMainActions/Action/Action.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { type TooltipProps } from '../../Tooltip';
-import type { ActionCellHandler, MainActionKind } from '../types';
+import { type TooltipProps } from '../../../Tooltip';
+import type { ActionCellHandler, MainActionKind } from '../../types';
 type MainActionProps<TAction> = {
     /**
      *  Основные действия
@@ -19,5 +19,5 @@ type MainActionProps<TAction> = {
      */
     tooltipPlacement?: TooltipProps['placement'];
 };
-export declare const MainAction: <TAction>({ action, onActionClick, isDisabled, tooltipPlacement, }: MainActionProps<TAction>) => JSX.Element;
+export declare const Action: <TAction>({ action, onActionClick, isDisabled, tooltipPlacement, }: MainActionProps<TAction>) => JSX.Element;
 export {};

package/node/components/DataGridActionCell/{MainAction/MainAction.js → DataGridMainActions/Action/Action.js}

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MainAction = void 0;
+exports.Action = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const IconDropdownButton_1 = require("../../IconDropdownButton");
-const MenuItem_1 = require("../../MenuItem");
-const Tooltip_1 = require("../../Tooltip");
+const IconDropdownButton_1 = require("../../../IconDropdownButton");
+const MenuItem_1 = require("../../../MenuItem");
+const Tooltip_1 = require("../../../Tooltip");
 const MainIconButton_1 = require("./MainIconButton");
-const MainAction = ({ action, onActionClick, isDisabled, tooltipPlacement, }) => {
+const Action = ({ action, onActionClick, isDisabled, tooltipPlacement, }) => {
     if ('actions' in action) {
         const { disabled, icon, name, disabledReason, actions } = action;
         return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabledReason || name, withoutContainer: !disabled, placement: tooltipPlacement, children: (0, jsx_runtime_1.jsx)(IconDropdownButton_1.IconDropdownButton, { icon: icon, variant: "text", disabled: isDisabled || disabled, children: actions.map(({ name: nestedActionName, onClick: onClickNested, ...props }) => ((0, react_1.createElement)(MenuItem_1.MenuItem, { ...props, key: nestedActionName, onClick: onActionClick(onClickNested) }, nestedActionName))) }) }, name));
     }
     return ((0, jsx_runtime_1.jsx)(MainIconButton_1.MainIconButton, { action: action, onActionClick: onActionClick, isDisabled: isDisabled, tooltipPlacement: tooltipPlacement }));
 };
-exports.MainAction = MainAction;
+exports.Action = Action;

package/{components/DataGridActionCell/MainAction → node/components/DataGridActionCell/DataGridMainActions/Action}/MainIconButton/MainIconButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { type IconButtonProps } from '../../../IconButton';
-import { type TooltipProps } from '../../../Tooltip';
-import { type ActionCellHandler, type SingleAction } from '../../types';
+import { type IconButtonProps } from '../../../../IconButton';
+import { type TooltipProps } from '../../../../Tooltip';
+import { type ActionCellHandler, type SingleAction } from '../../../types';
 export type MainIconButtonProps<TAction> = {
     action: IconButtonProps & SingleAction<TAction>;
     /**

package/node/components/DataGridActionCell/{MainAction → DataGridMainActions/Action}/MainIconButton/MainIconButton.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainIconButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ConfirmAction_1 = require("../../../ConfirmAction");
-const IconButton_1 = require("../../../IconButton");
-const Tooltip_1 = require("../../../Tooltip");
+const ConfirmAction_1 = require("../../../../ConfirmAction");
+const IconButton_1 = require("../../../../IconButton");
+const Tooltip_1 = require("../../../../Tooltip");
 const useLogic_1 = require("./useLogic");
 const MainIconButton = (props) => {
     const { tooltipProps } = (0, useLogic_1.useLogic)(props);

package/node/components/DataGridActionCell/DataGridMainActions/Action/index.d.ts

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

package/node/components/DataGridActionCell/{MainAction → DataGridMainActions/Action}/index.js

@@ -14,4 +14,4 @@ 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("./MainAction"), exports);
+__exportStar(require("./Action"), exports);

package/node/components/DataGridActionCell/DataGridMainActions/DataGridMainActions.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { MainActionKind } from '../types';
+export type DataGridMainActionsProps<TAction> = {
+    /**
+     * Действия отображаются слева направо в порядке, указанном в массиве
+     */
+    actions?: MainActionKind<TAction>[];
+};
+/**
+ * Компонент для отображения основных действий в ячейке таблицы DataGrid.
+ *
+ * Основные действия отображаются в виде отдельных кнопок непосредственно в ячейке
+ * и предназначены для наиболее часто используемых операций над строкой данных.
+ *
+ * @remarks
+ * - Компонент автоматически обрабатывает блокирующие операции, что предотвращает одновременное выполнение нескольких действий
+ * - Для действий автоматически отображаются тултипы с заданным позиционированием
+ *
+ * @example
+ * ```tsx
+ * <DataGridMainActions
+ *   actions={[
+ *     { name: 'edit', icon: <EditIcon />, onClick: handleEdit },
+ *     { name: 'delete', icon: <DeleteIcon />, onClick: handleDelete, isBlockingOperation: true }
+ *   ]}
+ *   onActionClick={(handler) => (event) => handler(event)}
+ *   tooltipPlacement="top"
+ * />
+ * ```
+ */
+export declare const DataGridMainActions: <TAction>({ actions, }: DataGridMainActionsProps<TAction>) => JSX.Element;

package/node/components/DataGridActionCell/DataGridMainActions/DataGridMainActions.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridMainActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../constants");
+const hooks_1 = require("../hooks");
+const Action_1 = require("./Action");
+/**
+ * Компонент для отображения основных действий в ячейке таблицы DataGrid.
+ *
+ * Основные действия отображаются в виде отдельных кнопок непосредственно в ячейке
+ * и предназначены для наиболее часто используемых операций над строкой данных.
+ *
+ * @remarks
+ * - Компонент автоматически обрабатывает блокирующие операции, что предотвращает одновременное выполнение нескольких действий
+ * - Для действий автоматически отображаются тултипы с заданным позиционированием
+ *
+ * @example
+ * ```tsx
+ * <DataGridMainActions
+ *   actions={[
+ *     { name: 'edit', icon: <EditIcon />, onClick: handleEdit },
+ *     { name: 'delete', icon: <DeleteIcon />, onClick: handleDelete, isBlockingOperation: true }
+ *   ]}
+ *   onActionClick={(handler) => (event) => handler(event)}
+ *   tooltipPlacement="top"
+ * />
+ * ```
+ */
+const DataGridMainActions = ({ actions, }) => {
+    const { isDisabled, onActionClick } = (0, hooks_1.useBlockingActions)(actions);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions?.map((action) => {
+            return ((0, jsx_runtime_1.jsx)(Action_1.Action, { action: action, onActionClick: onActionClick, isDisabled: isDisabled, tooltipPlacement: constants_1.TOOLTIP_PLACEMENT.mainAction }, action.name));
+        }) }));
+};
+exports.DataGridMainActions = DataGridMainActions;

package/node/components/DataGridActionCell/DataGridMainActions/index.d.ts

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

package/node/components/DataGridActionCell/DataGridMainActions/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("./DataGridMainActions"), exports);

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActions.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import type { SecondaryActionKind } from '../types';
+export type DataGridSecondaryActionsProps<TAction> = {
+    /**
+     * Доп. действия отображаются в виде списка элементов меню (`MenuItem`)
+     */
+    actions?: SecondaryActionKind<TAction>[];
+    /**
+     *  Флаг состояния загрузки, применяется когда actions подгружаются динамически
+     */
+    isLoading?: boolean;
+};
+/**
+ * Компонент для отображения дополнительных действий в выпадающем меню ячейки таблицы DataGrid.
+ *
+ * Вторичные действия отображаются в выпадающем меню (dropdown) и предназначены для менее
+ * используемых операций, которые не требуют постоянного отображения в интерфейсе.
+ *
+ * @remarks
+ * - Компонент поддерживает состояние загрузки (`isLoading`), при котором отображается скелетон вместо действий
+ * - Автоматически обрабатывает блокирующие операции, что предотвращает одновременное выполнение нескольких действий
+ * - Меню привязывается к кнопке "три точки"
+ * - Состояние меню (`open`, `anchorEl`) берется из `SecondaryActionsMenuContext`, не требуется прокидывать пропсы вручную
+ *
+ * @example
+ * Использование с контекстом (рекомендуется):
+ * ```tsx
+ * <DataGridSecondaryActions
+ *   actions={[
+ *     { name: 'Дублировать', onClick: handleDuplicate },
+ *     { name: 'Архивировать', onClick: handleArchive, disabled: !canArchive },
+ *     { name: 'Экспортировать', onClick: handleExport }
+ *   ]}
+ *   isLoading={isActionsLoading}
+ * />
+ * ```
+ *
+ * @example
+ * Использование с явными пропсами (для обратной совместимости):
+ * ```tsx
+ * <DataGridSecondaryActions
+ *   actions={actions}
+ *   open={isMenuOpen}
+ *   anchorEl={buttonRef.current}
+ * />
+ * ```
+ */
+export declare const DataGridSecondaryActions: <TAction>({ actions, isLoading, }: DataGridSecondaryActionsProps<TAction>) => JSX.Element;

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActions.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridSecondaryActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Menu_1 = require("../../Menu");
+const MenuItem_1 = require("../../MenuItem");
+const constants_1 = require("../constants");
+const hooks_1 = require("../hooks");
+const SecondaryActionsMenuContext_1 = require("../SecondaryActionsMenuContext");
+const DataGridSecondaryActionsSkeleton_1 = require("./DataGridSecondaryActionsSkeleton");
+/**
+ * Компонент для отображения дополнительных действий в выпадающем меню ячейки таблицы DataGrid.
+ *
+ * Вторичные действия отображаются в выпадающем меню (dropdown) и предназначены для менее
+ * используемых операций, которые не требуют постоянного отображения в интерфейсе.
+ *
+ * @remarks
+ * - Компонент поддерживает состояние загрузки (`isLoading`), при котором отображается скелетон вместо действий
+ * - Автоматически обрабатывает блокирующие операции, что предотвращает одновременное выполнение нескольких действий
+ * - Меню привязывается к кнопке "три точки"
+ * - Состояние меню (`open`, `anchorEl`) берется из `SecondaryActionsMenuContext`, не требуется прокидывать пропсы вручную
+ *
+ * @example
+ * Использование с контекстом (рекомендуется):
+ * ```tsx
+ * <DataGridSecondaryActions
+ *   actions={[
+ *     { name: 'Дублировать', onClick: handleDuplicate },
+ *     { name: 'Архивировать', onClick: handleArchive, disabled: !canArchive },
+ *     { name: 'Экспортировать', onClick: handleExport }
+ *   ]}
+ *   isLoading={isActionsLoading}
+ * />
+ * ```
+ *
+ * @example
+ * Использование с явными пропсами (для обратной совместимости):
+ * ```tsx
+ * <DataGridSecondaryActions
+ *   actions={actions}
+ *   open={isMenuOpen}
+ *   anchorEl={buttonRef.current}
+ * />
+ * ```
+ */
+const DataGridSecondaryActions = ({ actions, isLoading, }) => {
+    const { onActionClick } = (0, hooks_1.useBlockingActions)(actions);
+    const { open, anchorEl } = (0, SecondaryActionsMenuContext_1.useSecondaryActionsMenu)();
+    const renderActions = () => {
+        return actions?.map((action) => {
+            const { onClick, name, loading, isBlockingOperation, loadingNote, ...restProps } = action;
+            return ((0, react_1.createElement)(MenuItem_1.MenuItem, { ...restProps, key: name, tooltipPlacement: constants_1.TOOLTIP_PLACEMENT.secondaryActions, onClick: onActionClick(onClick) }, name));
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(Menu_1.Menu, { open: open, anchorEl: anchorEl, children: isLoading ? (0, jsx_runtime_1.jsx)(DataGridSecondaryActionsSkeleton_1.DataGridSecondaryActionsSkeleton, {}) : renderActions() }));
+};
+exports.DataGridSecondaryActions = DataGridSecondaryActions;

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActionsSkeleton/DataGridSecondaryActionsSkeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DataGridSecondaryActionsSkeleton: () => JSX.Element;

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActionsSkeleton/DataGridSecondaryActionsSkeleton.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridSecondaryActionsSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Skeleton_1 = require("../../../Skeleton");
+const styles_1 = require("./styles");
+const DataGridSecondaryActionsSkeleton = () => ((0, jsx_runtime_1.jsxs)(styles_1.SkeletonWrapper, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: 110, height: 12 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: 60, height: 12 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: 90, height: 12 })] }));
+exports.DataGridSecondaryActionsSkeleton = DataGridSecondaryActionsSkeleton;

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActionsSkeleton/index.d.ts

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

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActionsSkeleton/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("./DataGridSecondaryActionsSkeleton"), exports);

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActionsSkeleton/styles.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, React.JSX.IntrinsicElements, {}>;

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActionsSkeleton/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonWrapper = void 0;
+const material_1 = require("@mui/material");
+exports.SkeletonWrapper = (0, material_1.styled)('div') `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(5)};
+
+  min-width: 140px;
+  min-height: 96px;  
+  padding: ${({ theme }) => theme.microSpacing(5, 6)};
+`;

package/node/components/DataGridActionCell/DataGridSecondaryActions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGridSecondaryActions';
+export * from './DataGridSecondaryActionsSkeleton';