@astral/ui 4.113.3 → 4.114.0

package/node/components/ActionGroup/ActionGroup.js

@@ -8,8 +8,8 @@ const SecondaryActions_1 = require("./SecondaryActions");
 const SecondaryVisibleActions_1 = require("./SecondaryVisibleActions");
 const styles_1 = require("./styles");
 const ActionGroup = (props) => {
-    const { main, secondary, secondaryVisible, className, size = 'medium', } = props;
+    const { main, secondary, secondaryVisible, secondaryPopoverProps, className, size = 'medium', } = props;
     const { disabledAction } = (0, hooks_1.useActionsState)({ main, secondary });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [secondary && ((0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size })), secondaryVisible && ((0, jsx_runtime_1.jsx)(SecondaryVisibleActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: size })), main && ((0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [secondary && ((0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size, popoverProps: secondaryPopoverProps })), secondaryVisible && ((0, jsx_runtime_1.jsx)(SecondaryVisibleActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: size })), main && ((0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size }))] }));
 };
 exports.ActionGroup = ActionGroup;

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

@@ -1,3 +1,3 @@
 import { type ElementType } from 'react';
 import type { SecondaryActionProps } from '../types';
-export declare const SecondaryActions: <TSecondaryActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, }: SecondaryActionProps<TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SecondaryActions: <TSecondaryActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, popoverProps, }: SecondaryActionProps<TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element | null;

package/node/components/ActionGroup/SecondaryActions/SecondaryActions.js

@@ -8,11 +8,11 @@ const IconDropdownButton_1 = require("../../IconDropdownButton");
 const ListItemButton_1 = require("../../ListItemButton");
 const ListItemText_1 = require("../../ListItemText");
 const TOOLTIP_PLACEMENT = 'right';
-const SecondaryActions = ({ actions, isDisabled, className, size, }) => {
+const SecondaryActions = ({ actions, isDisabled, className, size, popoverProps, }) => {
     if (!actions.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(IconDropdownButton_1.IconDropdownButton, { disabled: isDisabled, icon: (0, jsx_runtime_1.jsx)(DotsOutlineMd_1.DotsOutlineMd, {}), variant: "outlined", color: "grey", size: size, className: className, children: actions.map(({ text, ...secondaryProps }) => ((0, react_1.createElement)(ListItemButton_1.ListItemButton, { tooltipPlacement: TOOLTIP_PLACEMENT, ...secondaryProps, key: text },
+    return ((0, jsx_runtime_1.jsx)(IconDropdownButton_1.IconDropdownButton, { disabled: isDisabled, icon: (0, jsx_runtime_1.jsx)(DotsOutlineMd_1.DotsOutlineMd, {}), variant: "outlined", color: "grey", size: size, className: className, popoverProps: popoverProps, children: actions.map(({ text, ...secondaryProps }) => ((0, react_1.createElement)(ListItemButton_1.ListItemButton, { tooltipPlacement: TOOLTIP_PLACEMENT, ...secondaryProps, key: text },
             (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: text })))) }));
 };
 exports.SecondaryActions = SecondaryActions;

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

@@ -1,6 +1,7 @@
 import type { ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 import type { ButtonProps, ButtonSize } from '../Button';
 import type { DropdownButtonProps } from '../DropdownButton';
+import type { IconDropdownButtonProps } from '../IconDropdownButton';
 import type { ListItemButtonProps } from '../ListItemButton';
 import type { MenuItemProps } from '../MenuItem';
 import type { TooltipProps } from '../Tooltip';
@@ -143,6 +144,10 @@ export type SecondaryActionProps<TSecondaryActionComponent extends ElementType>
      */
     className?: string;
     size?: ButtonSize;
+    /**
+     * Пропсы Popover меню второстепенных действий
+     */
+    popoverProps?: IconDropdownButtonProps['popoverProps'];
 };
 /** Модель второстепенного видимого экшена */
 export type SecondaryVisibleAction = Omit<ButtonProps, 'children'> & {
@@ -177,6 +182,10 @@ export type ActionGroupProps<TMainActionComponent extends ElementType = ElementT
      * Второстепенные действия, спрятанные за троеточием
      */
     secondary?: SecondaryAction<TSecondaryActionComponent>[];
+    /**
+     * Пропсы Popover меню второстепенных действий
+     */
+    secondaryPopoverProps?: IconDropdownButtonProps['popoverProps'];
     /**
      * Видимые второстепенные действия
      */

package/node/components/DataGrid/DataGrid.js

@@ -29,6 +29,12 @@ const pinnedSectionsCva = (0, cva_1.cva)(constants_2.dataGridClassnames.pinnedSe
 });
 const dataGridCva = (0, cva_1.cva)(constants_2.dataGridClassnames.root, {
     variants: {
+        hasMassActions: {
+            true: constants_2.dataGridClassnames.hasMassActions,
+        },
+        isMassActionsOpen: {
+            true: constants_2.dataGridClassnames.massActionsOpen,
+        },
         hasPinnedColumns: {
             true: constants_2.dataGridClassnames.hasPinnedSections,
         },
@@ -59,9 +65,9 @@ const bodyCva = (0, cva_1.cva)(constants_2.dataGridClassnames.body, {
     },
 });
 const DataGrid = (props) => {
-    const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, hasGroupedColumns, gridViewMode, mobileDisplayVariant, isSelfContained, } = (0, useLogic_1.useLogic)(props);
+    const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, hasGroupedColumns, gridViewMode, mobileDisplayVariant, isSelfContained, isMassActionsOpen, hasMassActions, } = (0, useLogic_1.useLogic)(props);
     const { emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { columns, selectedRows = [], minDisplayRows = constants_2.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, renderRow, renderLink, } = props;
+    const { columns, selectedRows = [], onSelectRow, minDisplayRows = constants_2.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, massActions, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, renderRow, renderLink, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_2.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_2.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const Wrapper = isDataGridDisabled
@@ -101,13 +107,15 @@ const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, renderLink: renderLink, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, cn_1.cn)(dataGridClassName, dataGridCva({
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, renderLink: renderLink, selectedRows: selectedRows, onSelectRow: onSelectRow, isMassActionsOpen: isMassActionsOpen, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, cn_1.cn)(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,
                 hasGroupedColumns,
                 mobileDisplayVariant,
                 isSelfContained,
-            })), children: [renderTableContent(), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
+                hasMassActions,
+                isMassActionsOpen,
+            })), children: [renderTableContent(), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), massActions && (0, jsx_runtime_1.jsx)(styles_1.MassActionsAnchor, { children: massActions }), footer && footer] }) }));
 };
 exports.DataGrid = DataGrid;

package/node/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.d.ts

@@ -1,7 +1,8 @@
 import { type ReactNode } from 'react';
+import { type DataGridSelectionContextProps } from '../../DataGridSelectionContext';
 import { type DataGridContextProps } from '../DataGridContext';
-type DataGridContextProviderProps = Pick<DataGridContextProps, 'isLoading' | 'isTabularNums' | 'gridColumns' | 'emptyCellValue' | 'activeRowId' | 'keyId' | 'columns' | 'onRowClick' | 'mobileDisplayVariant' | 'renderLink'> & {
+type DataGridContextProviderProps = Pick<DataGridContextProps, 'isLoading' | 'isTabularNums' | 'gridColumns' | 'emptyCellValue' | 'activeRowId' | 'keyId' | 'columns' | 'onRowClick' | 'mobileDisplayVariant' | 'renderLink'> & Partial<DataGridSelectionContextProps> & {
     children: ReactNode;
 };
-export declare const DataGridContextProvider: ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, renderLink, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridContextProvider: ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, renderLink, selectedRows, onSelectRow, isMassActionsOpen, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const DataGridSelectionContext_1 = require("../../DataGridSelectionContext");
 const DataGridStorageContext_1 = require("../../DataGridStorageContext");
 const DataGridContext_1 = require("../DataGridContext");
-const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, renderLink, }) => {
+const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, renderLink, selectedRows, onSelectRow, isMassActionsOpen, }) => {
     const contextValue = (0, react_1.useMemo)(() => ({
         isLoading,
         isTabularNums,
@@ -29,6 +30,6 @@ const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyC
         mobileDisplayVariant,
         renderLink,
     ]);
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(DataGridStorageContext_1.DataGridStorageProvider, { children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(DataGridSelectionContext_1.DataGridSelectionProvider, { selectedRows: selectedRows, onSelectRow: onSelectRow, isMassActionsOpen: isMassActionsOpen, children: (0, jsx_runtime_1.jsx)(DataGridStorageContext_1.DataGridStorageProvider, { children: children }) }) }));
 };
 exports.DataGridContextProvider = DataGridContextProvider;

package/node/components/DataGrid/DataGridSelectionContext/DataGridSelectionContext.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { type ContextOnChangeSelectedRows, type ContextSelectedRows } from '../types';
+export type DataGridSelectionContextProps = {
+    /**
+     * Выбранные строки таблицы
+     */
+    selectedRows: ContextSelectedRows;
+    /**
+     * Обработчик изменения выбора, переданный в таблицу.
+     */
+    onSelectRow?: ContextOnChangeSelectedRows;
+    /**
+     * Флаг отображения панели массовых действий
+     */
+    isMassActionsOpen: boolean;
+};
+/**
+ * Контекст выбранных строк таблицы для панели массовых действий.
+ *
+ * Вынесен из `DataGridContext`, чтобы изменение выбора не вызывало ре-рендер всех строк и ячеек:
+ * контекст читает только панель массовых действий.
+ *
+ * Провайдер подключается внутри `DataGridContextProvider`.
+ */
+export declare const DataGridSelectionContext: import("react").Context<DataGridSelectionContextProps>;

package/node/components/DataGrid/DataGridSelectionContext/DataGridSelectionContext.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridSelectionContext = void 0;
+const react_1 = require("react");
+/**
+ * Контекст выбранных строк таблицы для панели массовых действий.
+ *
+ * Вынесен из `DataGridContext`, чтобы изменение выбора не вызывало ре-рендер всех строк и ячеек:
+ * контекст читает только панель массовых действий.
+ *
+ * Провайдер подключается внутри `DataGridContextProvider`.
+ */
+exports.DataGridSelectionContext = (0, react_1.createContext)({
+    selectedRows: [],
+    isMassActionsOpen: false,
+});

package/node/components/DataGrid/DataGridSelectionContext/DataGridSelectionProvider/DataGridSelectionProvider.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type DataGridSelectionContextProps } from '../DataGridSelectionContext';
+type DataGridSelectionProviderProps = Partial<DataGridSelectionContextProps> & {
+    children: ReactNode;
+};
+export declare const DataGridSelectionProvider: ({ selectedRows, onSelectRow, isMassActionsOpen, children, }: DataGridSelectionProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/components/DataGrid/DataGridSelectionContext/DataGridSelectionProvider/DataGridSelectionProvider.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridSelectionProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DataGridSelectionContext_1 = require("../DataGridSelectionContext");
+const EMPTY_SELECTED_ROWS = [];
+const DataGridSelectionProvider = ({ selectedRows = EMPTY_SELECTED_ROWS, onSelectRow, isMassActionsOpen = false, children, }) => {
+    const contextValue = (0, react_1.useMemo)(() => ({ selectedRows, onSelectRow, isMassActionsOpen }), [selectedRows, onSelectRow, isMassActionsOpen]);
+    return ((0, jsx_runtime_1.jsx)(DataGridSelectionContext_1.DataGridSelectionContext.Provider, { value: contextValue, children: children }));
+};
+exports.DataGridSelectionProvider = DataGridSelectionProvider;

package/node/components/DataGrid/DataGridSelectionContext/DataGridSelectionProvider/index.d.ts

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

package/node/components/DataGrid/DataGridSelectionContext/DataGridSelectionProvider/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("./DataGridSelectionProvider"), exports);

package/node/components/DataGrid/DataGridSelectionContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGridSelectionContext';
+export * from './DataGridSelectionProvider';

package/node/components/DataGrid/DataGridSelectionContext/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("./DataGridSelectionContext"), exports);
+__exportStar(require("./DataGridSelectionProvider"), exports);

package/node/components/DataGrid/constants.d.ts

@@ -21,6 +21,8 @@ export declare const dataGridClassnames: {
     rightPinnedSection: string;
     overflowed: string;
     wrapper: string;
+    hasMassActions: string;
+    massActionsOpen: string;
     isAllowHorizontalScroll: string;
     hasGroupedColumns: string;
     gridViewFull: string;

package/node/components/DataGrid/constants.js

@@ -25,6 +25,8 @@ exports.dataGridClassnames = {
     rightPinnedSection: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__right-pinned-section'),
     overflowed: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_overflowed'),
     wrapper: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__wrapper'),
+    hasMassActions: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_has-mass-actions'),
+    massActionsOpen: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_mass-actions-open'),
     isAllowHorizontalScroll: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_is-allow-horizontal-scroll'),
     hasGroupedColumns: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_has-grouped-columns'),
     gridViewFull: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_grid-view-full'),

package/node/components/DataGrid/styles.d.ts

@@ -13,3 +13,7 @@ export declare const DisabledDataGridWrapper: import("@emotion/styled/dist/decla
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const MassActionsAnchor: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DataGrid/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DisabledDataGridWrapper = exports.DataGridWrapper = exports.Container = void 0;
+exports.MassActionsAnchor = exports.DisabledDataGridWrapper = exports.DataGridWrapper = exports.Container = void 0;
 const styled_1 = require("../styled");
 const constants_1 = require("./Body/constants");
 const constants_2 = require("./Cell/constants");
@@ -10,6 +10,9 @@ const constants_4 = require("./Row/constants");
 exports.Container = styled_1.styled.div `
   --max-height: initial;
 
+  /* Место под открытой панелью массовых действий: высота панели + отступ */
+  --mass-actions-reserved-space: 96px;
+
   position: relative;
 
   overflow: hidden;
@@ -155,6 +158,24 @@ exports.Container = styled_1.styled.div `
       }
     }
   }
+
+  &.${constants_3.dataGridClassnames.hasMassActions} {
+    /* Резерв места под панель массовых действий убирается одновременно с анимацией её скрытия, чтобы строки не прыгали */
+    & .${constants_3.dataGridClassnames.wrapper} .${constants_3.dataGridClassnames.body},
+    & .${constants_3.dataGridClassnames.pinnedSections} {
+      transition: padding-bottom
+        ${({ theme }) => theme.transitions.duration.leavingScreen}ms
+        ${({ theme }) => theme.transitions.easing.easeIn};
+    }
+
+    /* Пока панель массовых действий открыта, последние строки не должны перекрываться ею */
+    &.${constants_3.dataGridClassnames.massActionsOpen} {
+      & .${constants_3.dataGridClassnames.wrapper} .${constants_3.dataGridClassnames.body},
+      & .${constants_3.dataGridClassnames.pinnedSections} {
+        padding-bottom: var(--mass-actions-reserved-space);
+      }
+    }
+  }
 `;
 exports.DataGridWrapper = styled_1.styled.div `
   position: relative;
@@ -180,3 +201,8 @@ exports.DisabledDataGridWrapper = (0, styled_1.styled)(exports.DataGridWrapper)
     opacity: 0.7;
   }
 `;
+exports.MassActionsAnchor = styled_1.styled.div `
+  position: relative;
+
+  height: 0;
+`;

package/node/components/DataGrid/types.d.ts

@@ -46,6 +46,11 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
      * Компонент кастомного футера (например Pagination)
      */
     footer?: ReactNode;
+    /**
+     * Панель массовых действий над выбранными строками
+     * @example <DataGrid massActions={<DataGridMassActions />} />
+     */
+    massActions?: ReactNode;
     /**
      *  Используется для отображения placeholder при отсутствии данных в таблице
      */
@@ -367,4 +372,6 @@ export type DataGridRowWithOptions<TData extends DataGridRow> = TData & {
     children?: DataGridRowWithOptions<TData>[];
 };
 export type ContextOnRowClick = (row: Record<string, unknown>) => void;
+export type ContextSelectedRows = Record<string, unknown>[];
+export type ContextOnChangeSelectedRows = (rows: ContextSelectedRows) => void;
 export type RenderRow = (row: Record<string, unknown>, index: number) => ReactNode;

package/node/components/DataGrid/useLogic/useLogic.d.ts

@@ -1,7 +1,9 @@
 import { type ChangeEvent } from 'react';
 import type { CellValue, DataGridProps, DataGridRow } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, mobileDisplayVariant, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, mobileDisplayVariant, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp, massActions, }: UseLogicParams<TData, TSortField>) => {
+    hasMassActions: boolean;
+    isMassActionsOpen: boolean;
     dataGridClassName: string | undefined;
     containerCssVars: import("react").CSSProperties;
     isDataGridDisabled: boolean | undefined;

package/node/components/DataGrid/useLogic/useLogic.js

@@ -11,7 +11,7 @@ const enums_1 = require("../enums");
 const utils_1 = require("../utils");
 const hooks_1 = require("./hooks");
 const utils_2 = require("./utils");
-const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
+const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', massActions, }) => {
     const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
@@ -105,7 +105,15 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         };
     }, [isLoading, isError, isNoData, errorMsg, onRetry, imagesMap]);
     const containerCssVars = (0, utils_1.getDataGridCssVars)(maxHeight);
+    const hasMassActions = Boolean(massActions);
+    const isMassActionsOpen = (0, utils_1.checkIsMassActionsOpen)({
+        hasMassActions,
+        selectedRowsCount: selectedRows.length,
+        isMobile,
+    });
     return {
+        hasMassActions,
+        isMassActionsOpen,
         dataGridClassName: className,
         containerCssVars,
         isDataGridDisabled,

package/node/components/DataGrid/utils/checkIsMassActionsOpen/checkIsMassActionsOpen.d.ts

@@ -0,0 +1,10 @@
+type CheckIsMassActionsOpenParams = {
+    hasMassActions: boolean;
+    selectedRowsCount: number;
+    isMobile: boolean;
+};
+/**
+ * Панель массовых действий открыта, если она передана, выбрана хотя бы одна строка и это не мобильное разрешение
+ */
+export declare const checkIsMassActionsOpen: ({ hasMassActions, selectedRowsCount, isMobile, }: CheckIsMassActionsOpenParams) => boolean;
+export {};

package/node/components/DataGrid/utils/checkIsMassActionsOpen/checkIsMassActionsOpen.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsMassActionsOpen = void 0;
+/**
+ * Панель массовых действий открыта, если она передана, выбрана хотя бы одна строка и это не мобильное разрешение
+ */
+const checkIsMassActionsOpen = ({ hasMassActions, selectedRowsCount, isMobile, }) => hasMassActions && selectedRowsCount > 0 && !isMobile;
+exports.checkIsMassActionsOpen = checkIsMassActionsOpen;

package/node/components/DataGrid/utils/checkIsMassActionsOpen/index.d.ts

@@ -0,0 +1 @@
+export { checkIsMassActionsOpen } from './checkIsMassActionsOpen';

package/node/components/DataGrid/utils/checkIsMassActionsOpen/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsMassActionsOpen = void 0;
+var checkIsMassActionsOpen_1 = require("./checkIsMassActionsOpen");
+Object.defineProperty(exports, "checkIsMassActionsOpen", { enumerable: true, get: function () { return checkIsMassActionsOpen_1.checkIsMassActionsOpen; } });

package/node/components/DataGrid/utils/index.d.ts

@@ -2,3 +2,4 @@ export { getDataGridCssVars } from './getDataGridCssVars';
 export { getGridTemplateColumns } from './getGridTemplateColumns';
 export { isGroupColumns } from './isGroupColumns';
 export { getFlattenColumns } from './getFlattenColumns';
+export { checkIsMassActionsOpen } from './checkIsMassActionsOpen';

package/node/components/DataGrid/utils/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFlattenColumns = exports.isGroupColumns = exports.getGridTemplateColumns = exports.getDataGridCssVars = void 0;
+exports.checkIsMassActionsOpen = exports.getFlattenColumns = exports.isGroupColumns = exports.getGridTemplateColumns = exports.getDataGridCssVars = void 0;
 var getDataGridCssVars_1 = require("./getDataGridCssVars");
 Object.defineProperty(exports, "getDataGridCssVars", { enumerable: true, get: function () { return getDataGridCssVars_1.getDataGridCssVars; } });
 var getGridTemplateColumns_1 = require("./getGridTemplateColumns");
@@ -9,3 +9,5 @@ var isGroupColumns_1 = require("./isGroupColumns");
 Object.defineProperty(exports, "isGroupColumns", { enumerable: true, get: function () { return isGroupColumns_1.isGroupColumns; } });
 var getFlattenColumns_1 = require("./getFlattenColumns");
 Object.defineProperty(exports, "getFlattenColumns", { enumerable: true, get: function () { return getFlattenColumns_1.getFlattenColumns; } });
+var checkIsMassActionsOpen_1 = require("./checkIsMassActionsOpen");
+Object.defineProperty(exports, "checkIsMassActionsOpen", { enumerable: true, get: function () { return checkIsMassActionsOpen_1.checkIsMassActionsOpen; } });

package/node/components/DataGridInfinite/DataGridInfinite.js

@@ -12,21 +12,28 @@ const constants_2 = require("../DataGrid/constants");
 const DataGridContext_1 = require("../DataGrid/DataGridContext");
 const enums_1 = require("../DataGrid/enums");
 const Head_1 = require("../DataGrid/Head");
+const styles_1 = require("../DataGrid/styles");
 const Loader_1 = require("../Loader");
 const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const getInertProps_1 = require("../utils/getInertProps");
 const constants_3 = require("./constants");
 const DataGridInfiniteContext_1 = require("./DataGridInfiniteContext");
-const EndData_1 = require("./EndData");
 const ErrorMessage_1 = require("./ErrorMessage");
+const Footer_1 = require("./Footer");
 const List_1 = require("./List");
 const NoData_1 = require("./NoData");
 const Row_1 = require("./Row");
-const styles_1 = require("./styles");
+const styles_2 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const dataGridInfiniteCva = (0, cva_1.cva)(constants_2.dataGridClassnames.root, {
     variants: {
+        hasMassActions: {
+            true: constants_2.dataGridClassnames.hasMassActions,
+        },
+        isMassActionsOpen: {
+            true: constants_2.dataGridClassnames.massActionsOpen,
+        },
         hasGroupedColumns: {
             true: constants_2.dataGridClassnames.hasGroupedColumns,
         },
@@ -45,17 +52,19 @@ const dataGridInfiniteCva = (0, cva_1.cva)(constants_2.dataGridClassnames.root,
 });
 const DataGridInfinite = (props) => {
     const { imagesMap, emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, hasGroupedColumns, gridViewMode, gridColumns, handleSelectRow, mobileDisplayVariant, isSelfContained, isNotRenderHeader, initialTopMostItemIndex, } = (0, useLogic_1.useLogic)(props);
-    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = enums_1.Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, isTabularNums, renderRow, renderLink, } = props;
+    const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, hasGroupedColumns, gridViewMode, gridColumns, handleSelectRow, mobileDisplayVariant, isSelfContained, isNotRenderHeader, initialTopMostItemIndex, hasMassActions, isMassActionsOpen, footerContext, } = (0, useLogic_1.useLogic)(props);
+    const { columns, rows = [], selectedRows = [], onSelectRow, sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = enums_1.Variant.Tree, subrows, className, isError, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, isTabularNums, renderRow, renderLink, massActions, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_2.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_2.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const { isSelectable } = rowProps;
-    const TableContainer = isDisabled ? styles_1.DisabledDataGridWrapper : styles_1.DataGridWrapper;
-    return ((0, jsx_runtime_1.jsx)(DataGridInfiniteContext_1.DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: (0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, renderLink: renderLink, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledContainer, { style: containerCssVars, className: (0, cn_1.cn)(dataGridInfiniteCva({
+    const TableContainer = isDisabled ? styles_2.DisabledDataGridWrapper : styles_2.DataGridWrapper;
+    return ((0, jsx_runtime_1.jsx)(DataGridInfiniteContext_1.DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: (0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, renderLink: renderLink, selectedRows: selectedRows, onSelectRow: onSelectRow, isMassActionsOpen: isMassActionsOpen, children: (0, jsx_runtime_1.jsxs)(styles_2.StyledContainer, { style: containerCssVars, className: (0, cn_1.cn)(dataGridInfiniteCva({
                     hasGroupedColumns,
                     gridViewMode,
                     mobileDisplayVariant,
                     isSelfContained,
+                    hasMassActions,
+                    isMassActionsOpen,
                 }), className), children: [headPreAddon, (0, jsx_runtime_1.jsxs)(TableContainer, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [!isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, loadingContent: isMobile && (0, jsx_runtime_1.jsx)(DataGrid_1.MobileSkeleton, { ...mobileSkeletonProps }), errorState: {
                                     imgAlt: 'Что-то пошло не так',
                                     errorList: [errorMsg || ''],
@@ -63,24 +72,19 @@ const DataGridInfinite = (props) => {
                                     onRetry,
                                 }, children: (0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, ...(initialTopMostItemIndex && {
                                         initialTopMostItemIndex,
-                                    }), style: { height: '100%' }, overscan: constants_3.OVERSCAN_COUNT, data: rows, components: {
+                                    }), style: { height: '100%' }, overscan: constants_3.OVERSCAN_COUNT, data: rows, context: footerContext, components: {
                                         // biome-ignore lint/suspicious/noTsIgnore: Требует HTMLDivElement, а для элемента списка используем HTMLUListElement (https://github.com/petyosi/react-virtuoso/issues/864)
                                         // @ts-ignore
                                         List: List_1.List,
                                         Item: Row_1.Row,
                                         EmptyPlaceholder: () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: noDataPlaceholder || (0, jsx_runtime_1.jsx)(NoData_1.NoData, {}) })),
-                                        Footer: () => {
-                                            if (!isLoading && !isError && !isEndReached) {
-                                                return null;
-                                            }
-                                            return ((0, jsx_runtime_1.jsxs)(styles_1.FooterRow, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry }), isEndReached && ((0, jsx_runtime_1.jsx)(EndData_1.EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
-                                        },
+                                        Footer: Footer_1.Footer,
                                         Header: () => {
                                             if (isNotRenderHeader) {
                                                 return null;
                                             }
-                                            return ((0, jsx_runtime_1.jsxs)(styles_1.HeaderRow, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry })] }));
+                                            return ((0, jsx_runtime_1.jsxs)(styles_2.HeaderRow, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry })] }));
                                         },
-                                    } }) }), (0, jsx_runtime_1.jsx)(styles_1.StyledScrollToTopButton, { ...scrollToTopButtonProps, className: constants_3.dataGridInfiniteClassnames.scrollToTopButton }), isDisabled && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {})] })] }) }) }));
+                                    } }) }), massActions && ((0, jsx_runtime_1.jsx)(styles_1.MassActionsAnchor, { children: massActions })), (0, jsx_runtime_1.jsx)(styles_2.StyledScrollToTopButton, { ...scrollToTopButtonProps, className: constants_3.dataGridInfiniteClassnames.scrollToTopButton }), isDisabled && (0, jsx_runtime_1.jsx)(styles_2.Backdrop, {})] })] }) }) }));
 };
 exports.DataGridInfinite = DataGridInfinite;

package/node/components/DataGridInfinite/Footer/Footer.d.ts

@@ -0,0 +1,6 @@
+import type { ContextProp } from 'react-virtuoso';
+import type { FooterContext } from './types';
+/**
+ * Футер списка для Virtuoso.
+ */
+export declare const Footer: ({ context }: ContextProp<FooterContext>) => import("react/jsx-runtime").JSX.Element;

package/node/components/DataGridInfinite/Footer/Footer.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Loader_1 = require("../../Loader");
+const constants_1 = require("../constants");
+const EndData_1 = require("../EndData");
+const ErrorMessage_1 = require("../ErrorMessage");
+const styles_1 = require("../styles");
+/**
+ * Футер списка для Virtuoso.
+ */
+const Footer = ({ context }) => {
+    const { isLoading, isError, isEndReached, endOfScrollMsg, onRetry, hasMassActions, } = context;
+    const renderStatus = () => {
+        if (isLoading) {
+            return ((0, jsx_runtime_1.jsx)(styles_1.FooterRow, { children: (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}) }));
+        }
+        if (isError) {
+            return ((0, jsx_runtime_1.jsx)(styles_1.FooterRow, { children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry }) }));
+        }
+        if (isEndReached) {
+            return ((0, jsx_runtime_1.jsx)(styles_1.FooterRow, { children: (0, jsx_runtime_1.jsx)(EndData_1.EndData, { endOfScrollMsg: endOfScrollMsg }) }));
+        }
+        return null;
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderStatus(), hasMassActions && ((0, jsx_runtime_1.jsx)(styles_1.MassActionsSpacer, { className: constants_1.dataGridInfiniteClassnames.massActionsSpacer }))] }));
+};
+exports.Footer = Footer;

package/node/components/DataGridInfinite/Footer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Footer';
+export type { FooterContext } from './types';

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