@astral/ui 4.113.3 → 4.115.0

package/components/DataGrid/Row/useLogic/useLogic.js

@@ -1,11 +1,12 @@
 import { useCallback, useContext, useMemo, useRef, useState, } from 'react';
 import { DataGridContext } from '../../DataGridContext';
 import { Variant } from '../../enums';
+import { getRowDisabledState, resolveRowDisabled } from '../../utils';
 import { DISABLE_ROW_ATTR } from '../constants';
 import { RowContext } from '../RowContext';
 import { useMobileLogic } from './hooks';
 import { mergeColumnsOptions } from './utils';
-export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, isSelected, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
+export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, isSelected, getRowDisabled, isNested = false, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
     const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = useMobileLogic();
     const [rootRowElement, setRootRowElement] = useState(null);
     const rootRowRef = useCallback((element) => {
@@ -15,7 +16,7 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
     }, []);
     const isDefaultExpanded = Boolean(isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length);
     const { mobileDisplayVariant } = useContext(DataGridContext);
-    const { isDisabled, disabledReason } = useContext(RowContext);
+    const { hasBlockingAction, blockingActionReason, rowDisabled: contextRowDisabled, } = useContext(RowContext);
     const [isOpen, setIsOpen] = useState(isDefaultExpanded);
     const savedElementRef = useRef(null);
     const rowRef = (element) => {
@@ -30,10 +31,17 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
     };
     const [isVisibleTooltip, setVisibleTooltip] = useState(false);
     const rowId = row[keyId];
-    const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, } = options || {};
-    const disabled = isDisabled || isExternalDisabled;
+    const { href } = options || {};
+    // Блокировку строки из rows таблица передаёт через контекст, вложенная строка считает её сама и не наследует блокировку родителя
+    const rowDisabled = useMemo(() => isNested ? resolveRowDisabled(row, getRowDisabled) : contextRowDisabled, [isNested, row, getRowDisabled, contextRowDisabled]);
+    const { isDisabled, isDisabledLastCell, disabledReason, isCheckboxDisabled, checkboxDisabledReason, } = getRowDisabledState({
+        rowDisabled,
+        hasBlockingAction,
+        blockingActionReason,
+        isDisabledLastCellOption: options?.isDisabledLastCell,
+    });
     const handleRowClick = () => {
-        if (disabled) {
+        if (isDisabled) {
             handleOpenDrawer();
             return undefined;
         }
@@ -54,7 +62,7 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
     };
     const handleCloseTooltip = () => setVisibleTooltip(false);
     const handleMouseMove = (event) => {
-        if (!disabled) {
+        if (!isDisabled) {
             return;
         }
         const element = event.target;
@@ -68,19 +76,19 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         '--level': level,
         ...style,
     }), [level, style]);
-    const isHovered = Boolean(!disabled && (onRowClick || href));
+    const isHovered = Boolean(!isDisabled && (onRowClick || href));
     const isActive = activeRowId === rowId;
-    const disabledReasonText = externalDisabledReason || disabledReason;
     const handleCheckboxChange = useMemo(() => onSelectRow(row), [onSelectRow, row]);
     return {
-        disabledReasonText,
+        disabledReason,
         rowStyles,
         isOpen,
         isShowConnector,
         childrenColumns,
         rowId,
         rowRef,
-        disabled,
+        isDisabled,
+        isDisabledLastCell,
         isSelectable,
         isRenderCollapseButton,
         handleToggle,
@@ -100,13 +108,14 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         },
         tooltipProps: {
             open: isVisibleTooltip,
-            title: disabled ? disabledReasonText : undefined,
+            title: isDisabled ? disabledReason : undefined,
             onOpen: handleOpenTooltip,
             onClose: handleCloseTooltip,
         },
         checkboxProps: {
             checked: isSelected,
-            disabled,
+            disabled: isCheckboxDisabled,
+            disabledReason: checkboxDisabledReason,
             onChange: handleCheckboxChange,
         },
         nestedChildrenProps: {

package/components/DataGrid/RowBase/RowBase.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback } from 'react';
 import { BottomDrawer } from '../../BottomDrawer';
-import { Checkbox } from '../../Checkbox';
 import { Tooltip } from '../../Tooltip';
 import { cn } from '../../utils/cn';
 import { cva } from '../../utils/cva';
@@ -9,6 +8,7 @@ import { getInertProps } from '../../utils/getInertProps';
 import { Cell } from '../Cell';
 import { DISABLE_ROW_ATTR, dataGridRowClassnames } from '../Row/constants';
 import { checkIsDisabled } from '../Row/utils';
+import { RowCheckbox } from '../RowCheckbox';
 import { isGroupColumns } from '../utils';
 import { dataGridRowBaseClassnames } from './constants';
 import { GroupCell } from './GroupCell';
@@ -40,7 +40,7 @@ export const RowBase = memo((props) => {
         if (!adornment && !shouldRenderCheckbox) {
             return null;
         }
-        return (_jsxs(_Fragment, { children: [adornment, shouldRenderCheckbox && (_jsx(CheckboxCell, { ...getInertProps(isDisabled), onClick: (event) => event.stopPropagation(), className: dataGridRowClassnames.checkbox, children: _jsx(Checkbox, { ...checkboxProps }) }))] }));
+        return (_jsxs(_Fragment, { children: [adornment, shouldRenderCheckbox && (_jsx(CheckboxCell, { ...getInertProps(isDisabled), onClick: (event) => event.stopPropagation(), className: dataGridRowClassnames.checkbox, children: _jsx(RowCheckbox, { ...checkboxProps }) }))] }));
     };
     const renderCells = useCallback(() => {
         const lastCellGlobalIndex = columns.length - 1;
@@ -61,9 +61,12 @@ export const RowBase = memo((props) => {
         row,
         columns,
         isDisabled,
+        isDisabledLastCell,
         sectionOffset,
         renderStartAdornment,
         checkboxProps.checked,
+        checkboxProps.disabled,
+        checkboxProps.disabledReason,
     ]);
     return (_jsxs(Wrapper, { className: cn(className, rootCva({ mobileDisplayVariant })), style: rowBaseVars, ...dataGridInfiniteItemProps, children: [_jsx(Tooltip, { ...tooltipProps, children: _jsx(ContentWrapper, { ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: contentWrapperCva({ isHovered, isActive }), [DISABLE_ROW_ATTR]: isDisabled, onClick: handleRowClick, children: renderCells() }) }), customContent, _jsx(BottomDrawer, { ...drawerProps, children: _jsx(BottomDrawerContent, { children: drawerContent }) })] }, `row-base-${rowId}`));
 });

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

@@ -1,5 +1,5 @@
 import { type ChangeEvent, type ReactNode } from 'react';
-import type { DataGridColumns, DataGridRowWithOptions } from '../types';
+import type { DataGridColumns, DataGridRowDisabled, DataGridRowWithOptions } from '../types';
 export type RowBaseProps = {
     /**
      * Массив колонок
@@ -42,13 +42,17 @@ export type RowBaseProps = {
      */
     isSelected?: boolean;
     /**
-     * Заблокирована ли строка
+     * Если true, в строке выполняется блокирующее действие DataGridActionCell
      */
-    isDisabled?: boolean;
+    hasBlockingAction?: boolean;
     /**
-     * Причина блокировки строки
+     * Причина блокировки от блокирующего действия
      */
-    disabledReason?: string;
+    blockingActionReason?: string;
+    /**
+     * Итоговая блокировка строки, рассчитанная resolveRowDisabled
+     */
+    rowDisabled?: DataGridRowDisabled;
     /**
      * Обработчик выбора строки
      */

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

@@ -1,7 +1,7 @@
 import { type CSSProperties, type SyntheticEvent } from 'react';
 import type { RowBaseProps } from '../types';
 type UseLogicParams = RowBaseProps;
-export declare const useLogic: ({ className, row, keyId, onRowClick, columns, sectionOffset, customContent, renderStartAdornment, isSelected, isDisabled, disabledReason, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, gridColumns, activeRowId, emptyCellValue, isSelectable, rowId, mobileDisplayVariant, ...dataGridInfiniteItemProps }: UseLogicParams) => {
+export declare const useLogic: ({ className, row, keyId, onRowClick, columns, sectionOffset, customContent, renderStartAdornment, isSelected, hasBlockingAction, blockingActionReason, rowDisabled, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, gridColumns, activeRowId, emptyCellValue, isSelectable, rowId, mobileDisplayVariant, ...dataGridInfiniteItemProps }: UseLogicParams) => {
     handleRowClick: () => void;
     tooltipProps: {
         open: boolean;
@@ -13,7 +13,8 @@ export declare const useLogic: ({ className, row, keyId, onRowClick, columns, se
     };
     checkboxProps: {
         checked: boolean | undefined;
-        disabled: boolean | undefined;
+        disabled: boolean;
+        disabledReason: string | undefined;
         onChange: (event: import("react").ChangeEvent<HTMLInputElement, Element>) => void;
     };
     drawerProps: {
@@ -34,10 +35,10 @@ export declare const useLogic: ({ className, row, keyId, onRowClick, columns, se
     onRowLeave: ((rowId: string, event: PointerEvent) => void) | undefined;
     rowId: string;
     row: import("../..").DataGridRowWithOptions<Record<string, unknown>>;
-    isDisabled: boolean | undefined;
+    isDisabled: boolean;
     sectionOffset: number | undefined;
     customContent: import("react").ReactNode;
-    isDisabledLastCell: boolean | undefined;
+    isDisabledLastCell: boolean;
     renderStartAdornment: ((isFirstCell: boolean) => import("react").ReactNode) | undefined;
     isSelectable: boolean | undefined;
     isNotSelectable: boolean | undefined;

package/components/DataGrid/RowBase/useLogic/useLogic.js

@@ -1,16 +1,21 @@
 import { useRef, useState, } from 'react';
 import { redirectToLink } from '../../../utils/redirectToLink';
 import { useMobileLogic } from '../../Row/useLogic/hooks';
+import { getRowDisabledState } from '../../utils';
 import { DISABLE_ROW_ATTR } from '../constants';
-export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOffset, customContent, renderStartAdornment, isSelected, isDisabled, disabledReason, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, gridColumns, activeRowId, emptyCellValue, isSelectable, rowId, mobileDisplayVariant, ...dataGridInfiniteItemProps }) => {
+export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOffset, customContent, renderStartAdornment, isSelected, hasBlockingAction, blockingActionReason, rowDisabled, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, gridColumns, activeRowId, emptyCellValue, isSelectable, rowId, mobileDisplayVariant, ...dataGridInfiniteItemProps }) => {
     const [isVisibleTooltip, setVisibleTooltip] = useState(false);
     const savedElementRef = useRef(null);
     const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = useMobileLogic();
     const { options } = row;
     const { style: dataGridInfiniteItemStyle, ...restDataGridInfiniteItemProps } = dataGridInfiniteItemProps || {};
-    const { disabledReason: propsDisabledReason, isDisabled: propsIsDisabled, isDisabledLastCell, href, isNotSelectable, target, } = options || {};
-    const disabled = isDisabled || propsIsDisabled;
-    const disabledReasonText = propsDisabledReason || disabledReason;
+    const { href, isNotSelectable, target } = options || {};
+    const { isDisabled, isDisabledLastCell, disabledReason, isCheckboxDisabled, checkboxDisabledReason, } = getRowDisabledState({
+        rowDisabled,
+        hasBlockingAction,
+        blockingActionReason,
+        isDisabledLastCellOption: options?.isDisabledLastCell,
+    });
     const handleOpenTooltip = (event) => {
         const element = event.target;
         const isDisabledCell = element?.getAttribute(DISABLE_ROW_ATTR) === 'true';
@@ -23,7 +28,7 @@ export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOf
         '--row-base-grid-columns': gridColumns,
         ...(dataGridInfiniteItemStyle || {}),
     };
-    const isHovered = Boolean(!disabled && (onRowClick || href));
+    const isHovered = Boolean(!isDisabled && (onRowClick || href));
     const isActive = activeRowId === rowId;
     const rowRef = (element) => {
         if (element) {
@@ -36,7 +41,7 @@ export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOf
         }
     };
     const handleRowClick = () => {
-        if (disabled) {
+        if (isDisabled) {
             handleOpenDrawer();
             return undefined;
         }
@@ -49,7 +54,7 @@ export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOf
         handleRowClick,
         tooltipProps: {
             open: isVisibleTooltip,
-            title: disabled ? disabledReasonText : undefined,
+            title: isDisabled ? disabledReason : undefined,
             onOpen: handleOpenTooltip,
             onClose: handleCloseTooltip,
             followCursor: true,
@@ -57,7 +62,8 @@ export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOf
         },
         checkboxProps: {
             checked: isSelected,
-            disabled,
+            disabled: isCheckboxDisabled,
+            disabledReason: checkboxDisabledReason,
             onChange: onSelectRow(row),
         },
         drawerProps: {
@@ -65,7 +71,7 @@ export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOf
             onClose: handleCloseDrawer,
             title: 'Заблокировано',
         },
-        drawerContent: disabledReasonText,
+        drawerContent: disabledReason,
         rowBaseVars,
         isHovered,
         isActive,
@@ -78,7 +84,7 @@ export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOf
         onRowLeave,
         rowId,
         row,
-        isDisabled: disabled,
+        isDisabled,
         sectionOffset,
         customContent,
         isDisabledLastCell,

package/components/DataGrid/RowCheckbox/RowCheckbox.d.ts

@@ -0,0 +1,5 @@
+import { type RowCheckboxProps } from './types';
+/**
+ * Checkbox строки. Для заблокированного выбора показывает причину в tooltip
+ */
+export declare const RowCheckbox: ({ disabledReason, ...checkboxProps }: RowCheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/RowCheckbox/RowCheckbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from '../../Checkbox';
+import { Tooltip } from '../../Tooltip';
+import { DISABLED_REASON_TOOLTIP_DELAY } from './constants';
+/**
+ * Checkbox строки. Для заблокированного выбора показывает причину в tooltip
+ */
+export const RowCheckbox = ({ disabledReason, ...checkboxProps }) => {
+    if (!disabledReason) {
+        return _jsx(Checkbox, { ...checkboxProps });
+    }
+    return (_jsx(Tooltip, { title: disabledReason, enterDelay: DISABLED_REASON_TOOLTIP_DELAY, enterNextDelay: DISABLED_REASON_TOOLTIP_DELAY, withoutContainer: false, children: _jsx(Checkbox, { ...checkboxProps }) }));
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Задержка открытия tooltip с причиной блокировки выбора, мс
+ */
+export declare const DISABLED_REASON_TOOLTIP_DELAY = 300;

package/components/DataGrid/RowCheckbox/constants.js

@@ -0,0 +1,4 @@
+/**
+ * Задержка открытия tooltip с причиной блокировки выбора, мс
+ */
+export const DISABLED_REASON_TOOLTIP_DELAY = 300;

package/components/DataGrid/RowCheckbox/index.d.ts

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

package/components/DataGrid/RowCheckbox/index.js

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

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

@@ -0,0 +1,7 @@
+import { type CheckboxProps } from '../../Checkbox';
+export type RowCheckboxProps = CheckboxProps & {
+    /**
+     * Причина блокировки выбора
+     */
+    disabledReason?: string;
+};

package/components/DataGrid/RowCheckbox/types.js

@@ -0,0 +1 @@
+export {};

package/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/components/DataGrid/constants.js

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

package/components/DataGrid/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useRowHover';
+export * from './useWarnRowsWithoutDisabledReason';

package/components/DataGrid/hooks/index.js

@@ -1 +1,2 @@
 export * from './useRowHover';
+export * from './useWarnRowsWithoutDisabledReason';

package/components/DataGrid/hooks/useWarnRowsWithoutDisabledReason/index.d.ts

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

package/components/DataGrid/hooks/useWarnRowsWithoutDisabledReason/index.js

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

package/components/DataGrid/hooks/useWarnRowsWithoutDisabledReason/useWarnRowsWithoutDisabledReason.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Выводит одно агрегированное предупреждение о строках с блокировкой без причины.
+ * Строки, о которых уже предупреждали, повторно не попадают в предупреждение
+ */
+export declare const useWarnRowsWithoutDisabledReason: (idsWithoutReason: unknown[]) => void;

package/components/DataGrid/hooks/useWarnRowsWithoutDisabledReason/useWarnRowsWithoutDisabledReason.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Выводит одно агрегированное предупреждение о строках с блокировкой без причины.
+ * Строки, о которых уже предупреждали, повторно не попадают в предупреждение
+ */
+export const useWarnRowsWithoutDisabledReason = (idsWithoutReason) => {
+    const warnedIdsRef = useRef(new Set());
+    useEffect(() => {
+        const newIds = idsWithoutReason.filter((id) => !warnedIdsRef.current.has(id));
+        if (!newIds.length) {
+            return;
+        }
+        newIds.forEach((id) => warnedIdsRef.current.add(id));
+        // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
+        console.warn(`UIKIT. DataGrid: getRowDisabled вернул блокировку без reason для строк: ${newIds.join(', ')}`);
+    }, [idsWithoutReason]);
+};

package/components/DataGrid/index.d.ts

@@ -1,5 +1,5 @@
 export { DataGrid } from './DataGrid';
-export type { DataGridProps, DataGridRenderLink, DataGridRenderLinkParams, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
+export type { DataGridProps, DataGridRenderLink, DataGridRenderLinkParams, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridRowDisabled, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
 export { dataGridClassnames } from './constants';
 export { MobileSkeleton } from './MobileSkeleton';
 export { RowBase, type RowBaseProps } from './RowBase';

package/components/DataGrid/public.d.ts

@@ -1,3 +1,3 @@
 export { dataGridClassnames } from './constants';
 export { DataGrid } from './DataGrid';
-export type { DataGridColumns, DataGridProps, DataGridRenderLink, DataGridRenderLinkParams, DataGridRow, DataGridRowOptionColumns, DataGridRowOptions, DataGridRowWithOptions, DataGridSort, } from './types';
+export type { DataGridColumns, DataGridProps, DataGridRenderLink, DataGridRenderLinkParams, DataGridRow, DataGridRowDisabled, DataGridRowOptionColumns, DataGridRowOptions, DataGridRowWithOptions, DataGridSort, } from './types';

package/components/DataGrid/styles.d.ts

@@ -13,3 +13,7 @@ export declare const DisabledDataGridWrapper: import("../styled").StyledComponen
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const MassActionsAnchor: import("../styled").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/components/DataGrid/styles.js

@@ -7,6 +7,9 @@ import { dataGridRowClassnames } from './Row/constants';
 export const Container = styled.div `
   --max-height: initial;
 
+  /* Место под открытой панелью массовых действий: высота панели + отступ */
+  --mass-actions-reserved-space: 96px;
+
   position: relative;
 
   overflow: hidden;
@@ -152,6 +155,24 @@ export const Container = styled.div `
       }
     }
   }
+
+  &.${dataGridClassnames.hasMassActions} {
+    /* Резерв места под панель массовых действий убирается одновременно с анимацией её скрытия, чтобы строки не прыгали */
+    & .${dataGridClassnames.wrapper} .${dataGridClassnames.body},
+    & .${dataGridClassnames.pinnedSections} {
+      transition: padding-bottom
+        ${({ theme }) => theme.transitions.duration.leavingScreen}ms
+        ${({ theme }) => theme.transitions.easing.easeIn};
+    }
+
+    /* Пока панель массовых действий открыта, последние строки не должны перекрываться ею */
+    &.${dataGridClassnames.massActionsOpen} {
+      & .${dataGridClassnames.wrapper} .${dataGridClassnames.body},
+      & .${dataGridClassnames.pinnedSections} {
+        padding-bottom: var(--mass-actions-reserved-space);
+      }
+    }
+  }
 `;
 export const DataGridWrapper = styled.div `
   position: relative;
@@ -177,3 +198,8 @@ export const DisabledDataGridWrapper = styled(DataGridWrapper) `
     opacity: 0.7;
   }
 `;
+export const MassActionsAnchor = styled.div `
+  position: relative;
+
+  height: 0;
+`;

package/components/DataGrid/tests/performance/testDataGridPerformance.d.ts

@@ -1,11 +1,13 @@
 import { type ReactElement, type ReactNode } from 'react';
-import { type DataGridColumns, type DataGridRowWithOptions } from '../../types';
+import { type DataGridColumns, type DataGridProps, type DataGridRowDisabled, type DataGridRowWithOptions } from '../../types';
 type RenderRow = (row: Record<string, unknown>, index: number) => ReactNode;
 type GridRenderProps = {
     rows: DataGridRowWithOptions<DataItem>[];
     columns: DataGridColumns<DataItem>[];
     selectedRows?: DataItem[];
     onSelectRow?: (rows: DataItem[]) => void;
+    getRowDisabled?: (row: DataItem) => DataGridRowDisabled | undefined;
+    tree?: DataGridProps<DataItem>['tree'];
     renderRow?: RenderRow;
     onRetry: () => void;
 };