@astral/ui 4.113.3 → 4.115.0

package/node/components/DataGridInfinite/Row/Row.js

@@ -8,7 +8,7 @@ const RowContext_1 = require("../../DataGrid/Row/RowContext");
 const useLogic_1 = require("./useLogic");
 const INITIAL_LEVEL = 0;
 const Row = ({ children, ...props }) => {
-    const { item, memoizedItemProps, onSelectRow, renderRow, flattenColumns, gridColumns, options, keyId, variant, isSelectable, isSelected, nestedChildren, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, emptyCellValue, activeRowId, onRowClick, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: item, itemProps: memoizedItemProps, onSelectRow: onSelectRow, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: memoizedItemProps['data-index'], renderRow: renderRow, row: item })) : ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...memoizedItemProps, row: item, columns: flattenColumns, gridColumns: gridColumns, options: options, keyId: keyId, variant: variant, isSelectable: isSelectable, isSelected: isSelected, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded || false, expandedLevel: expandedLevel || 1, initialVisibleChildrenCount: initialVisibleChildrenCount || 2, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition || 1, isVisibleCollapseButton: isVisibleCollapseButton || true, emptyCellValue: emptyCellValue, onRowClick: onRowClick, onSelectRow: onSelectRow })) }));
+    const { item, memoizedItemProps, onSelectRow, renderRow, flattenColumns, gridColumns, options, keyId, variant, isSelectable, isSelected, disabledMode, disabledReason, getRowDisabled, nestedChildren, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, emptyCellValue, activeRowId, onRowClick, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: item, itemProps: memoizedItemProps, onSelectRow: onSelectRow, isSelectable: isSelectable, isSelected: isSelected, disabledMode: disabledMode, disabledReason: disabledReason, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: memoizedItemProps['data-index'], renderRow: renderRow, row: item })) : ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...memoizedItemProps, row: item, columns: flattenColumns, gridColumns: gridColumns, options: options, keyId: keyId, variant: variant, isSelectable: isSelectable, isSelected: isSelected, getRowDisabled: getRowDisabled, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded || false, expandedLevel: expandedLevel || 1, initialVisibleChildrenCount: initialVisibleChildrenCount || 2, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition || 1, isVisibleCollapseButton: isVisibleCollapseButton || true, emptyCellValue: emptyCellValue, onRowClick: onRowClick, onSelectRow: onSelectRow })) }));
 };
 exports.Row = Row;

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

@@ -1 +1,2 @@
 export * from './Row';
+export type { DataGridInfiniteItemContext } from './types';

package/node/components/DataGridInfinite/Row/types.d.ts

@@ -1,2 +1,17 @@
-import type { ItemProps as VirtuosoItemProps } from 'react-virtuoso';
-export type RowProps = VirtuosoItemProps<Record<string, unknown>>;
+import type { ContextProp, ItemProps as VirtuosoItemProps } from 'react-virtuoso';
+import { type DataGridProps, type DataGridRowDisabled } from '../../DataGrid/types';
+type ContextGetRowDisabled = DataGridProps<Record<string, unknown>>['getRowDisabled'];
+/**
+ * Состояние строк.
+ *
+ * Передаётся через `context` `Virtuoso`, а не через React-контекст: `Virtuoso` отдаёт `Item` новые данные
+ * на рендер позже родителя. Состояние из React-контекста приходило бы раньше данных, и строка
+ * перерисовывалась бы дважды — сначала со старыми данными и новым состоянием, затем с новыми данными.
+ */
+export type DataGridInfiniteItemContext = {
+    selectedIds: Set<unknown>;
+    rowsDisabled: Map<unknown, DataGridRowDisabled | undefined>;
+    getRowDisabled?: ContextGetRowDisabled;
+};
+export type RowProps = VirtuosoItemProps<Record<string, unknown>> & ContextProp<DataGridInfiniteItemContext>;
+export {};

package/node/components/DataGridInfinite/Row/useLogic/useLogic.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type RowProps } from '../types';
 type UseLogicParams = Omit<RowProps, 'children'>;
-export declare const useLogic: ({ item, ...itemProps }: UseLogicParams) => {
+export declare const useLogic: ({ item, context, ...itemProps }: UseLogicParams) => {
     item: Record<string, unknown>;
     renderRow: (row: Record<string, unknown>, index: number) => import("react").ReactNode;
     isSelected: boolean;
@@ -21,7 +21,9 @@ export declare const useLogic: ({ item, ...itemProps }: UseLogicParams) => {
     moreButtonColumnPosition: number | undefined;
     isVisibleCollapseButton: boolean | undefined;
     isSelectable: boolean | undefined;
-    selectedRows: Record<string, unknown>[] | undefined;
+    disabledMode: "row" | "selection" | "row-except-last-cell" | undefined;
+    disabledReason: string | undefined;
+    getRowDisabled: ((row: Record<string, unknown>) => import("../../..").DataGridRowDisabled | undefined) | undefined;
     memoizedItemProps: {
         style?: import("react").CSSProperties | undefined;
         'data-index': number;

package/node/components/DataGridInfinite/Row/useLogic/useLogic.js

@@ -5,13 +5,18 @@ const react_1 = require("react");
 const DataGridContext_1 = require("../../../DataGrid/DataGridContext");
 const utils_1 = require("../../../DataGrid/utils");
 const DataGridInfiniteContext_1 = require("../../DataGridInfiniteContext");
-const useLogic = ({ item, ...itemProps }) => {
-    const { renderRow, onSelectRow, variant, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, isSelectable, selectedRows, } = (0, react_1.useContext)(DataGridInfiniteContext_1.DataGridInfiniteContext);
+const useLogic = ({ item, context, ...itemProps }) => {
+    const { renderRow, onSelectRow, variant, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, isSelectable, } = (0, react_1.useContext)(DataGridInfiniteContext_1.DataGridInfiniteContext);
+    // Состояние строки приходит от Virtuoso вместе с item, см. DataGridInfiniteItemContext
+    const { selectedIds, rowsDisabled, getRowDisabled } = context;
     const { activeRowId, columns, emptyCellValue, onRowClick, keyId, gridColumns, } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
     const memoizedItemProps = (0, react_1.useMemo)(() => itemProps, [itemProps.style]);
     const flattenColumns = (0, react_1.useMemo)(() => (0, utils_1.getFlattenColumns)(columns), [columns]);
     const { children: nestedChildren, options } = item;
-    const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === item[keyId]));
+    const rowId = item[keyId];
+    const isSelected = selectedIds.has(rowId);
+    const rowDisabled = rowsDisabled.get(rowId);
+    const hasNestedChildren = Array.isArray(nestedChildren) && nestedChildren.length > 0;
     return {
         item,
         renderRow,
@@ -32,7 +37,10 @@ const useLogic = ({ item, ...itemProps }) => {
         moreButtonColumnPosition,
         isVisibleCollapseButton,
         isSelectable,
-        selectedRows,
+        disabledMode: rowDisabled?.mode,
+        disabledReason: rowDisabled?.reason,
+        // Функция нужна только для расчёта блокировки вложенных строк, остальным не передаём, чтобы не сбрасывать memo
+        getRowDisabled: hasNestedChildren ? getRowDisabled : undefined,
         memoizedItemProps,
     };
 };

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

@@ -5,4 +5,7 @@ export declare const VIRTUOSO_LIST_ID = "virtuoso-list";
 export declare const dataGridInfiniteClassnames: {
     scrollToTopButton: string;
     visibleScrollToTopButton: string;
+    massActionsSpacer: string;
+    header: string;
+    footer: string;
 };

package/node/components/DataGridInfinite/constants.js

@@ -9,4 +9,7 @@ exports.VIRTUOSO_LIST_ID = 'virtuoso-list';
 exports.dataGridInfiniteClassnames = {
     scrollToTopButton: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-infinite__scroll-to-top-button'),
     visibleScrollToTopButton: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-infinite__scroll-to-top-button_visible'),
+    massActionsSpacer: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-infinite__mass-actions-spacer'),
+    header: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-infinite__header'),
+    footer: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-infinite__footer'),
 };

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

@@ -7,11 +7,7 @@ type DataType = {
     actions?: object;
 };
 export declare const makeRandomDate: () => string;
-export declare const makeDataList: (length?: number, options?: {
-    isDisabled?: boolean;
-    isDisabledLastCell?: boolean;
-    disabledReason?: string;
-}) => DataType[];
+export declare const makeDataList: (length?: number) => DataType[];
 export declare const makeDataListWithTree: (length?: number, options?: {
     isNotSelectable?: boolean;
     childrenCount?: number;

package/node/components/DataGridInfinite/faker.js

@@ -15,13 +15,12 @@ const makeRandomDate = () => {
     return randomDate.toISOString();
 };
 exports.makeRandomDate = makeRandomDate;
-const makeDataList = (length = 10, options) => {
+const makeDataList = (length = 10) => {
     return Array.from({ length }).map((_, i) => ({
         id: i.toString(),
         documentName: `Договор №${i + 1}`,
         recipient: RECIPIENTS[faker_1.faker.number.int({ min: 0, max: RECIPIENTS.length })],
         createDate: (0, exports.makeRandomDate)(),
-        options: Math.random() < 0.4 ? options : {},
     }));
 };
 exports.makeDataList = makeDataList;

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

@@ -30,3 +30,7 @@ export declare const StyledContainer: import("@emotion/styled/dist/declarations/
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const MassActionsSpacer: 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/DataGridInfinite/styles.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledContainer = exports.StyledScrollToTopButton = exports.Backdrop = exports.HeaderRow = exports.FooterRow = exports.DisabledDataGridWrapper = exports.DataGridWrapper = void 0;
+exports.MassActionsSpacer = exports.StyledContainer = exports.StyledScrollToTopButton = exports.Backdrop = exports.HeaderRow = exports.FooterRow = exports.DisabledDataGridWrapper = exports.DataGridWrapper = void 0;
+const constants_1 = require("../DataGrid/constants");
 const styles_1 = require("../DataGrid/styles");
 const ScrollToTopButton_1 = require("../ScrollToTopButton");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const List_1 = require("./List");
 exports.DataGridWrapper = styled_1.styled.div `
   position: relative;
@@ -50,11 +51,31 @@ exports.Backdrop = styled_1.styled.div `
 exports.StyledScrollToTopButton = (0, styled_1.styled)(ScrollToTopButton_1.ScrollToTopButton) `
   display: none;
 
-  &.${constants_1.dataGridInfiniteClassnames.visibleScrollToTopButton} {
+  &.${constants_2.dataGridInfiniteClassnames.visibleScrollToTopButton} {
     display: inline-flex;
   }
 `;
 exports.StyledContainer = (0, styled_1.styled)(styles_1.Container) `
+  &.${constants_1.dataGridClassnames.hasMassActions} {
+    /* Резерв места под панель массовых действий убирается одновременно с анимацией её скрытия, чтобы строки не прыгали */
+    & .${constants_2.dataGridInfiniteClassnames.massActionsSpacer} {
+      transition: height
+        ${({ theme }) => theme.transitions.duration.leavingScreen}ms
+        ${({ theme }) => theme.transitions.easing.easeIn};
+    }
+
+    &.${constants_1.dataGridClassnames.massActionsOpen} {
+      & .${constants_2.dataGridInfiniteClassnames.massActionsSpacer} {
+        height: var(--mass-actions-reserved-space);
+      }
+
+      /* Кнопка «Наверх» скрыта при открытой панели, чтобы не перегружать интерфейс */
+      & .${constants_2.dataGridInfiniteClassnames.scrollToTopButton} {
+        display: none;
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     & .${List_1.dataGridInfiniteListClassnames.root} {
       display: flex;
@@ -63,3 +84,6 @@ exports.StyledContainer = (0, styled_1.styled)(styles_1.Container) `
     }
   }
 `;
+exports.MassActionsSpacer = styled_1.styled.div `
+  height: 0;
+`;

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

@@ -2,9 +2,14 @@ import { type ChangeEvent } from 'react';
 import type { ListRange } from 'react-virtuoso';
 import { type DataGridRow } from '../../DataGrid';
 import { type CellValue } from '../../DataGrid/types';
+import { type FooterContext } from '../Footer';
+import { type DataGridInfiniteItemContext } from '../Row';
 import { type DataGridInfiniteProps, type DataGridInfiniteVirtuosoHandle } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridInfiniteProps<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, maxHeight, isLoading, isError, isDisabled, isEndReached, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, mobileDisplayVariant, virtuosoRef, }: 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, maxHeight, isLoading, isError, isDisabled, getRowDisabled, isEndReached, endOfScrollMsg, onRetry, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, massActions, mobileDisplayVariant, virtuosoRef, }: UseLogicParams<TData, TSortField>) => {
+    virtuosoContext: DataGridInfiniteItemContext & FooterContext;
+    hasMassActions: boolean;
+    isMassActionsOpen: boolean;
     containerCssVars: import("react").CSSProperties;
     mobileSkeletonProps: {
         cellsCount: number;
@@ -19,7 +24,6 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
         expandedLevel?: number | undefined;
         initialVisibleChildrenCount?: number | undefined;
     } | undefined;
-    isEndReached: boolean | undefined;
     isHideHead: boolean;
     hasGroupedColumns: boolean;
     gridViewMode: "standard" | "full";
@@ -32,7 +36,7 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
         ref: (node: DataGridInfiniteVirtuosoHandle | null) => void;
         endReached: () => void;
         rangeChanged: (range: ListRange) => void;
-        totalListHeightChanged: () => void;
+        totalListHeightChanged: (listHeight: number) => void;
         startReached: () => void;
         firstItemIndex: number;
     };

package/node/components/DataGridInfinite/useLogic/useLogic.js

@@ -4,13 +4,13 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const constants_1 = require("../../DataGrid/constants");
 const enums_1 = require("../../DataGrid/enums");
-const hooks_1 = require("../../DataGrid/useLogic/hooks");
+const hooks_1 = require("../../DataGrid/hooks");
+const hooks_2 = require("../../DataGrid/useLogic/hooks");
 const utils_1 = require("../../DataGrid/utils");
 const useViewportType_1 = require("../../useViewportType");
-const prop_1 = require("../../utils/prop");
 const uniqueBy_1 = require("../../utils/uniqueBy");
 const constants_2 = require("../constants");
-const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isError, isDisabled, isEndReached, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', virtuosoRef, }) => {
+const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isError, isDisabled, getRowDisabled, isEndReached, endOfScrollMsg, onRetry, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', massActions, mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', virtuosoRef, }) => {
     const virtuoso = (0, react_1.useRef)(null);
     const handleVirtuosoRef = (0, react_1.useCallback)((node) => {
         virtuoso.current = node;
@@ -69,7 +69,16 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
         }
         return config;
     }, [variant, subrows, tree, isMobile]);
-    const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
+    // Блокировки строк: getRowDisabled вызывается один раз на строку
+    const { rowsDisabled, idsWithoutReason } = (0, react_1.useMemo)(() => (0, utils_1.resolveRowsDisabled)(rows, keyId, getRowDisabled), [rows, keyId, getRowDisabled]);
+    (0, hooks_1.useWarnRowsWithoutDisabledReason)(idsWithoutReason);
+    const selectedIds = (0, react_1.useMemo)(() => new Set(selectedRows.map((row) => row[keyId])), [selectedRows, keyId]);
+    const itemContext = (0, react_1.useMemo)(() => ({
+        selectedIds,
+        rowsDisabled,
+        getRowDisabled: getRowDisabled,
+    }), [selectedIds, rowsDisabled, getRowDisabled]);
+    const availableRows = (0, react_1.useMemo)(() => rows.filter((row) => !row.options?.isNotSelectable && !rowsDisabled.get(row[keyId])), [rows, rowsDisabled, keyId]);
     const flattenColumns = (0, react_1.useMemo)(() => (0, utils_1.getFlattenColumns)(columns), [columns]);
     const hasGroupedColumns = columns.some(utils_1.isGroupColumns);
     const gridViewMode = hasGroupedColumns ? 'full' : gridViewModeProp;
@@ -84,9 +93,7 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
             onStartReached();
         }
     }, [isStartReached, onStartReached]);
-    const uncheckedRowsCount = (0, react_1.useMemo)(() => {
-        return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
-    }, [availableRows, selectedRows, keyId]);
+    const uncheckedRowsCount = (0, react_1.useMemo)(() => availableRows.filter((row) => !selectedIds.has(row[keyId])).length, [availableRows, selectedIds, keyId]);
     const handleRangeChanged = (0, react_1.useCallback)((range) => {
         if (scrollToTopButtonRef.current) {
             scrollToTopButtonRef.current.classList.toggle(constants_2.dataGridInfiniteClassnames.visibleScrollToTopButton, range.startIndex > baseIndex.current + 2);
@@ -97,11 +104,11 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
             return;
         }
         if (event.target.checked) {
-            const mergedSelectedRows = (0, uniqueBy_1.uniqueBy)([...selectedRows, ...availableRows], (0, prop_1.prop)(keyId));
+            const mergedSelectedRows = (0, uniqueBy_1.uniqueBy)([...selectedRowsRef.current, ...availableRows], (row) => row[keyId]);
             return onSelectRow(mergedSelectedRows);
         }
-        const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
-        onSelectRow(filteredRows);
+        const rowsIds = new Set(rows.map((row) => row[keyId]));
+        onSelectRow(selectedRowsRef.current.filter((selectedRow) => !rowsIds.has(selectedRow[keyId])));
     };
     const handleSelectRow = (0, react_1.useCallback)((row) => (event) => {
         if (!onSelectRow) {
@@ -115,15 +122,19 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
     const handleScrollToTop = () => {
         virtuoso.current?.scrollIntoView({ index: 0, behavior: 'smooth' });
     };
-    const recalculateVerticalScroll = () => {
+    const recalculateVerticalScroll = (listHeight) => {
         const container = document.getElementById(constants_2.VIRTUOSO_CONTAINER_ID);
-        const list = document.getElementById(constants_2.VIRTUOSO_LIST_ID);
-        if (container && list) {
-            setHasVerticalScroll(list?.clientHeight > container?.clientHeight);
+        if (container) {
+            // listHeight включает header и footer
+            const getHeight = (className) => container.querySelector(`.${className}`)?.clientHeight ?? 0;
+            const rowsHeight = listHeight -
+                getHeight(constants_2.dataGridInfiniteClassnames.header) -
+                getHeight(constants_2.dataGridInfiniteClassnames.footer);
+            setHasVerticalScroll(rowsHeight > container.clientHeight);
         }
     };
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
-    const { mobileSkeletonProps } = (0, hooks_1.useDataGridMobileLogic)({
+    const { mobileSkeletonProps } = (0, hooks_2.useDataGridMobileLogic)({
         columns: flattenColumns,
         mobileDisplayVariant,
     });
@@ -133,14 +144,39 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
     const isNotRenderHeader = (!isLoading && !isError && !isStartReached) ||
         !onStartReached ||
         isStartReached;
+    const hasMassActions = Boolean(massActions);
+    const isMassActionsOpen = (0, utils_1.checkIsMassActionsOpen)({
+        hasMassActions,
+        selectedRowsCount: selectedRows.length,
+        isMobile,
+    });
+    const footerContext = (0, react_1.useMemo)(() => ({
+        isLoading,
+        isError,
+        isEndReached: isEndReached && hasVerticalScroll,
+        endOfScrollMsg,
+        onRetry,
+        hasMassActions,
+    }), [
+        isLoading,
+        isError,
+        isEndReached,
+        hasVerticalScroll,
+        endOfScrollMsg,
+        onRetry,
+        hasMassActions,
+    ]);
+    const virtuosoContext = (0, react_1.useMemo)(() => ({ ...itemContext, ...footerContext }), [itemContext, footerContext]);
     return {
+        virtuosoContext,
+        hasMassActions,
+        isMassActionsOpen,
         containerCssVars,
         mobileSkeletonProps,
         isNoData,
         isMobile,
         isDataGridDisabled,
         treeRenderConfig,
-        isEndReached: isEndReached && hasVerticalScroll,
         isHideHead,
         hasGroupedColumns,
         gridViewMode,

package/node/components/DataGridMassActions/DataGridMassActions.d.ts

@@ -0,0 +1,15 @@
+import { type DataGridMassActionsProps } from './types';
+/**
+ * Панель массовых действий над выбранными строками `DataGrid` и `DataGridInfinite`.
+ *
+ * @example
+ * <DataGrid
+ *   massActions={
+ *     <DataGridMassActions
+ *       entityDeclension={['документ', 'документа', 'документов']}
+ *       main={[{ text: 'Отправить', onClick: handleSend }]}
+ *     />
+ *   }
+ * />
+ */
+export declare const DataGridMassActions: ({ className, ...props }: DataGridMassActionsProps) => import("react/jsx-runtime").JSX.Element | null;

package/node/components/DataGridMassActions/DataGridMassActions.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridMassActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const rootCva = (0, cva_1.cva)(constants_1.dataGridMassActionsClassnames.root, {
+    variants: {
+        isOpen: {
+            true: constants_1.dataGridMassActionsClassnames.open,
+        },
+    },
+});
+/**
+ * Панель массовых действий над выбранными строками `DataGrid` и `DataGridInfinite`.
+ *
+ * @example
+ * <DataGrid
+ *   massActions={
+ *     <DataGridMassActions
+ *       entityDeclension={['документ', 'документа', 'документов']}
+ *       main={[{ text: 'Отправить', onClick: handleSend }]}
+ *     />
+ *   }
+ * />
+ */
+const DataGridMassActions = ({ className, ...props }) => {
+    const { isOpen, isMounted, selectedCount, handleClose } = (0, useLogic_1.useLogic)();
+    if (!isOpen && !isMounted) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledMassActions, { ...props, className: rootCva({ isOpen, className }), selectedCount: selectedCount, onClose: handleClose }));
+};
+exports.DataGridMassActions = DataGridMassActions;

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

@@ -0,0 +1,4 @@
+export declare const dataGridMassActionsClassnames: {
+    root: string;
+    open: string;
+};

package/node/components/DataGridMassActions/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridMassActionsClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.dataGridMassActionsClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-mass-actions'),
+    open: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-mass-actions_open'),
+};

package/node/components/DataGridMassActions/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGridMassActions } from './DataGridMassActions';
+export type { DataGridMassActionsProps } from './types';

package/node/components/DataGridMassActions/index.js

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

package/node/components/DataGridMassActions/public.d.ts

@@ -0,0 +1,2 @@
+export { DataGridMassActions } from './DataGridMassActions';
+export type { DataGridMassActionsProps } from './types';

package/node/components/DataGridMassActions/public.js

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

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

@@ -0,0 +1,8 @@
+export declare const StyledMassActions: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Pick<import("..").ActionGroupProps, "main" | "secondary"> & {
+    selectedCount: number;
+    entityDeclension: [string, string, string];
+    onClose: () => void;
+    className?: string | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/DataGridMassActions/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledMassActions = void 0;
+const MassActions_1 = require("../MassActions");
+const styled_1 = require("../styled");
+const constants_1 = require("./constants");
+const slideIn = (0, styled_1.keyframes) `
+  from {
+    transform: translateY(100%);
+
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+`;
+const slideOut = (0, styled_1.keyframes) `
+  from {
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(100%);
+
+    opacity: 0;
+  }
+`;
+exports.StyledMassActions = (0, styled_1.styled)(MassActions_1.MassActions) `
+  position: absolute;
+  z-index: ${({ theme }) => theme.zIndex.appBar};
+  right: 0;
+  bottom: ${({ theme }) => theme.spacing(3)};
+  left: 0;
+  
+  max-width: calc(100% - ${({ theme }) => theme.spacing(8)});
+  margin-inline: auto;
+
+  animation: ${slideOut}
+    ${({ theme }) => theme.transitions.duration.leavingScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeIn} forwards;
+
+  &.${constants_1.dataGridMassActionsClassnames.open} {
+    animation: ${slideIn}
+      ${({ theme }) => theme.transitions.duration.standard}ms
+      ${({ theme }) => theme.transitions.easing.easeOut} forwards;
+  }
+`;

package/node/components/DataGridMassActions/tests/testDataGridMassActions.d.ts

@@ -0,0 +1,23 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type DataGridColumns } from '../../DataGrid/types';
+type DataItem = {
+    id: string;
+    name: string;
+};
+type GridRenderProps = {
+    rows: DataItem[];
+    columns: DataGridColumns<DataItem>[];
+    selectedRows: DataItem[];
+    onSelectRow: (rows: DataItem[]) => void;
+    massActions: ReactNode;
+    onRetry: () => void;
+};
+type TestDataGridMassActionsParams = {
+    render: (ui: ReactElement) => void;
+    renderGrid: (props: GridRenderProps) => ReactNode;
+};
+/**
+ * Общие тесты связки таблицы и DataGridMassActions для DataGrid и DataGridInfinite
+ */
+export declare const testDataGridMassActions: ({ render, renderGrid, }: TestDataGridMassActionsParams) => void;
+export {};

package/node/components/DataGridMassActions/tests/testDataGridMassActions.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testDataGridMassActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tests_1 = require("@ui/dev/tests");
+const react_1 = require("react");
+const vitest_1 = require("vitest");
+const DataGridMassActions_1 = require("../DataGridMassActions");
+const TEST_ROWS = [
+    { id: '1', name: 'Договор поставки' },
+    { id: '2', name: 'Счёт-фактура' },
+];
+const TEST_COLUMNS = [
+    {
+        field: 'name',
+        label: 'Наименование',
+    },
+];
+/**
+ * Общие тесты связки таблицы и DataGridMassActions для DataGrid и DataGridInfinite
+ */
+const testDataGridMassActions = ({ render, renderGrid, }) => {
+    const TestComponent = ({ initialSelectedRows, }) => {
+        const [selectedRows, setSelectedRows] = (0, react_1.useState)(initialSelectedRows);
+        return renderGrid({
+            rows: TEST_ROWS,
+            columns: TEST_COLUMNS,
+            selectedRows,
+            onSelectRow: setSelectedRows,
+            massActions: ((0, jsx_runtime_1.jsx)(DataGridMassActions_1.DataGridMassActions, { entityDeclension: ['документ', 'документа', 'документов'], main: [{ text: 'Отправить' }] })),
+            onRetry: () => { },
+        });
+    };
+    const setup = ({ initialSelectedRows = [], } = {}) => {
+        render((0, jsx_runtime_1.jsx)(TestComponent, { initialSelectedRows: initialSelectedRows }));
+    };
+    (0, vitest_1.beforeEach)(() => {
+        (0, tests_1.setWindowWidth)(tests_1.viewportSize.desktop.default.width);
+    });
+    (0, vitest_1.it)('Панель не отображается при пустом выборе', () => {
+        setup();
+        const closeButton = tests_1.screen.queryByRole('button', {
+            name: 'Снять выделение',
+        });
+        (0, vitest_1.expect)(closeButton).toBeNull();
+    });
+    (0, vitest_1.it)('Панель отображается при выборе строки', async () => {
+        setup();
+        // 0 - "Выбрать все", 1 - первая строка
+        await tests_1.userEvents.click(tests_1.screen.getAllByRole('checkbox')[1]);
+        (0, vitest_1.expect)(tests_1.screen.getByText('Выбрано: 1 документ')).toBeVisible();
+    });
+    (0, vitest_1.it)('Панель остаётся открытой после нажатия на действие, если выбор не очищен', async () => {
+        setup({ initialSelectedRows: TEST_ROWS });
+        await tests_1.userEvents.click(tests_1.screen.getByRole('button', { name: 'Отправить' }));
+        (0, vitest_1.expect)(tests_1.screen.getByText('Выбрано: 2 документа')).toBeVisible();
+    });
+    (0, vitest_1.it)('Выбор строк снимается при закрытии панели', async () => {
+        setup({ initialSelectedRows: TEST_ROWS });
+        await tests_1.userEvents.click(tests_1.screen.getByRole('button', { name: 'Снять выделение' }));
+        const checkedCheckboxes = tests_1.screen.queryAllByRole('checkbox', {
+            checked: true,
+        });
+        (0, vitest_1.expect)(checkedCheckboxes).toHaveLength(0);
+    });
+    (0, vitest_1.it)('Панель скрывается при закрытии', async () => {
+        setup({ initialSelectedRows: TEST_ROWS });
+        await tests_1.userEvents.click(tests_1.screen.getByRole('button', { name: 'Снять выделение' }));
+        // Панель размонтируется после анимации скрытия
+        await (0, vitest_1.expect)((0, tests_1.waitForElementToBeRemoved)(() => tests_1.screen.queryByRole('button', { name: 'Снять выделение' }))).resolves.toBeUndefined();
+    });
+    (0, vitest_1.it)('Панель не отображается на мобильных разрешениях', () => {
+        (0, tests_1.setWindowWidth)(tests_1.viewportSize.mobile.default.width);
+        setup({ initialSelectedRows: TEST_ROWS });
+        const closeButton = tests_1.screen.queryByRole('button', {
+            name: 'Снять выделение',
+        });
+        (0, vitest_1.expect)(closeButton).toBeNull();
+    });
+};
+exports.testDataGridMassActions = testDataGridMassActions;

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

@@ -0,0 +1,2 @@
+import { type MassActionsProps } from '../MassActions';
+export type DataGridMassActionsProps = Omit<MassActionsProps, 'selectedCount' | 'onClose'>;

package/node/components/DataGridMassActions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });