@astral/ui 4.113.3 → 4.115.0

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

package/node/components/DataGrid/tests/performance/testDataGridPerformance.js

@@ -10,6 +10,22 @@ const TEST_ROWS = [
     { id: '2', name: 'Petya' },
     { id: '3', name: 'Ivan' },
 ];
+const TEST_ROWS_WITH_CHILDREN = [
+    ...TEST_ROWS,
+    {
+        id: '4',
+        name: 'Package',
+        children: [{ id: '4-1', name: 'Nested' }],
+    },
+];
+const SELECTION_DISABLED = {
+    mode: 'selection',
+    reason: 'Документ отправляется',
+};
+const ROW_DISABLED = {
+    mode: 'row',
+    reason: 'Документ отправляется',
+};
 const testDataGridPerformance = ({ render, renderGrid, }) => {
     const getRenderCountFor = (spy, id) => spy.mock.calls.filter(([row]) => row.id === id).length;
     (0, vitest_1.it)('При клике на чекбокс перерендеривается только выбранная строка', async () => {
@@ -102,5 +118,221 @@ const testDataGridPerformance = ({ render, renderGrid, }) => {
         (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '2')).toBe(0);
         (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '3')).toBe(1);
     });
+    (0, vitest_1.describe)('getRowDisabled', () => {
+        const createColumns = (renderCell) => [
+            { field: 'name', label: 'Наименование', renderCell },
+        ];
+        const getRenderCounts = (spy, ids) => Object.fromEntries(ids.map((id) => [id, getRenderCountFor(spy, id)]));
+        const setupSelectableGrid = () => {
+            const renderCellSpy = vitest_1.vi.fn((row) => row.name);
+            const getRowDisabledSpy = vitest_1.vi.fn(() => undefined);
+            const TestComponent = () => {
+                const [selectedRows, setSelectedRows] = (0, react_1.useState)([]);
+                const columns = (0, react_1.useMemo)(() => createColumns(renderCellSpy), []);
+                return renderGrid({
+                    rows: TEST_ROWS,
+                    columns,
+                    selectedRows,
+                    onSelectRow: setSelectedRows,
+                    getRowDisabled: getRowDisabledSpy,
+                    onRetry: () => { },
+                });
+            };
+            render((0, jsx_runtime_1.jsx)(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupParentRerender = () => {
+            const renderCellSpy = vitest_1.vi.fn((row) => row.name);
+            const getRowDisabledSpy = vitest_1.vi.fn(() => undefined);
+            const TestComponent = () => {
+                const [, setCounter] = (0, react_1.useState)(0);
+                const columns = (0, react_1.useMemo)(() => createColumns(renderCellSpy), []);
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setCounter((value) => value + 1), children: "Rerender" }), renderGrid({
+                            rows: TEST_ROWS,
+                            columns,
+                            selectedRows: [],
+                            onSelectRow: () => { },
+                            getRowDisabled: getRowDisabledSpy,
+                            onRetry: () => { },
+                        })] }));
+            };
+            render((0, jsx_runtime_1.jsx)(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupChangedResult = () => {
+            const renderCellSpy = vitest_1.vi.fn((row) => row.name);
+            const getRowDisabledSpy = vitest_1.vi.fn();
+            const TestComponent = () => {
+                const [lockedId, setLockedId] = (0, react_1.useState)();
+                const columns = (0, react_1.useMemo)(() => createColumns(renderCellSpy), []);
+                const getRowDisabled = (0, react_1.useCallback)((row) => {
+                    getRowDisabledSpy(row);
+                    return row.id === lockedId ? SELECTION_DISABLED : undefined;
+                }, [lockedId]);
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setLockedId('2'), children: "Lock row 2" }), renderGrid({
+                            rows: TEST_ROWS,
+                            columns,
+                            selectedRows: [],
+                            onSelectRow: () => { },
+                            getRowDisabled,
+                            onRetry: () => { },
+                        })] }));
+            };
+            render((0, jsx_runtime_1.jsx)(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupSameResult = () => {
+            const renderCellSpy = vitest_1.vi.fn((row) => row.name);
+            const getRowDisabledSpy = vitest_1.vi.fn();
+            const TestComponent = () => {
+                const [counter, setCounter] = (0, react_1.useState)(0);
+                const columns = (0, react_1.useMemo)(() => createColumns(renderCellSpy), []);
+                const getRowDisabled = (0, react_1.useCallback)((row) => {
+                    getRowDisabledSpy(row);
+                    return undefined;
+                }, [counter]);
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setCounter((value) => value + 1), children: "New function" }), renderGrid({
+                            rows: TEST_ROWS_WITH_CHILDREN,
+                            columns,
+                            selectedRows: [],
+                            onSelectRow: () => { },
+                            getRowDisabled,
+                            tree: { isInitialExpanded: true },
+                            onRetry: () => { },
+                        })] }));
+            };
+            render((0, jsx_runtime_1.jsx)(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        (0, vitest_1.describe)('Клик на чекбокс', () => {
+            (0, vitest_1.it)('Перерендеривается только выбранная строка', async () => {
+                const { renderCellSpy } = setupSelectableGrid();
+                // 0 - "Выбрать все", 1 - первая строка
+                await tests_1.userEvents.click(tests_1.screen.getAllByRole('checkbox')[2]);
+                (0, vitest_1.expect)(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            (0, vitest_1.it)('getRowDisabled не вызывается', async () => {
+                const { getRowDisabledSpy } = setupSelectableGrid();
+                await tests_1.userEvents.click(tests_1.screen.getAllByRole('checkbox')[2]);
+                (0, vitest_1.expect)(getRowDisabledSpy).not.toHaveBeenCalled();
+            });
+        });
+        (0, vitest_1.it)('getRowDisabled не вызывается при «Выбрать все»', async () => {
+            const { getRowDisabledSpy } = setupSelectableGrid();
+            await tests_1.userEvents.click(tests_1.screen.getAllByRole('checkbox')[0]);
+            (0, vitest_1.expect)(getRowDisabledSpy).not.toHaveBeenCalled();
+        });
+        (0, vitest_1.describe)('Перерисовка родителя со стабильной функцией', () => {
+            (0, vitest_1.it)('Строки не перерисовываются', async () => {
+                const { renderCellSpy } = setupParentRerender();
+                await tests_1.userEvents.click(tests_1.screen.getByText('Rerender'));
+                (0, vitest_1.expect)(renderCellSpy).not.toHaveBeenCalled();
+            });
+            (0, vitest_1.it)('getRowDisabled не вызывается', async () => {
+                const { getRowDisabledSpy } = setupParentRerender();
+                await tests_1.userEvents.click(tests_1.screen.getByText('Rerender'));
+                (0, vitest_1.expect)(getRowDisabledSpy).not.toHaveBeenCalled();
+            });
+        });
+        (0, vitest_1.describe)('Новая функция с изменившимся результатом', () => {
+            (0, vitest_1.it)('Перерендеривается только строка с изменившимся результатом', async () => {
+                const { renderCellSpy } = setupChangedResult();
+                await tests_1.userEvents.click(tests_1.screen.getByText('Lock row 2'));
+                (0, vitest_1.expect)(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            (0, vitest_1.it)('getRowDisabled вызывается один раз на строку', async () => {
+                const { getRowDisabledSpy } = setupChangedResult();
+                await tests_1.userEvents.click(tests_1.screen.getByText('Lock row 2'));
+                (0, vitest_1.expect)(getRowDisabledSpy).toHaveBeenCalledTimes(TEST_ROWS.length);
+            });
+        });
+        (0, vitest_1.describe)('Новая функция с тем же результатом', () => {
+            (0, vitest_1.it)('Перерисовываются только строки с дочерними элементами', async () => {
+                const { renderCellSpy } = setupSameResult();
+                await tests_1.userEvents.click(tests_1.screen.getByText('New function'));
+                (0, vitest_1.expect)(getRenderCounts(renderCellSpy, ['1', '2', '3', '4', '4-1'])).toEqual({ '1': 0, '2': 0, '3': 0, '4': 1, '4-1': 1 });
+            });
+            (0, vitest_1.it)('getRowDisabled вызывается один раз на строку, включая вложенную', async () => {
+                const { getRowDisabledSpy } = setupSameResult();
+                await tests_1.userEvents.click(tests_1.screen.getByText('New function'));
+                // 4 строки и 1 вложенная
+                (0, vitest_1.expect)(getRowDisabledSpy).toHaveBeenCalledTimes(5);
+            });
+        });
+        // Virtuoso отдаёт строкам новые данные на рендер позже родителя: состояние строки
+        // не должно приходить раньше данных и перерисовывать строку дважды
+        (0, vitest_1.describe)('Новые rows вместе с изменением состояния строки', () => {
+            const createVersionRows = (version) => TEST_ROWS.map((row) => ({ ...row, name: `${row.name} v${version}` }));
+            const setupRowsUpdate = () => {
+                const renderCellSpy = vitest_1.vi.fn((row) => row.name);
+                const TestComponent = () => {
+                    const [version, setVersion] = (0, react_1.useState)(0);
+                    const [isOptionsLocked, setOptionsLocked] = (0, react_1.useState)(false);
+                    const [lockedId, setLockedId] = (0, react_1.useState)();
+                    const [selectedRows, setSelectedRows] = (0, react_1.useState)([]);
+                    const columns = (0, react_1.useMemo)(() => createColumns(renderCellSpy), []);
+                    const versionRows = (0, react_1.useMemo)(() => createVersionRows(version), [version]);
+                    // Заново создаётся только заблокированная строка, остальные сохраняют ссылки
+                    const rows = (0, react_1.useMemo)(() => versionRows.map((row) => isOptionsLocked && row.id === '2'
+                        ? { ...row, options: { isDisabled: true } }
+                        : row), [versionRows, isOptionsLocked]);
+                    const getRowDisabled = (0, react_1.useCallback)((row) => (row.id === lockedId ? ROW_DISABLED : undefined), [lockedId]);
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setOptionsLocked(true), children: "Lock via options" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                    setVersion(1);
+                                    setSelectedRows([TEST_ROWS[1]]);
+                                }, children: "Refetch and select" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                    setVersion(1);
+                                    setLockedId('2');
+                                }, children: "Refetch and lock" }), renderGrid({
+                                rows,
+                                columns,
+                                selectedRows,
+                                onSelectRow: setSelectedRows,
+                                getRowDisabled,
+                                onRetry: () => { },
+                            })] }));
+                };
+                render((0, jsx_runtime_1.jsx)(TestComponent, {}));
+                renderCellSpy.mockClear();
+                return { renderCellSpy };
+            };
+            (0, vitest_1.it)('Строка перерисовывается один раз при блокировке через options', async () => {
+                const { renderCellSpy } = setupRowsUpdate();
+                await tests_1.userEvents.click(tests_1.screen.getByText('Lock via options'));
+                (0, vitest_1.expect)(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            vitest_1.it.each([
+                { condition: 'изменении выбора', action: 'Refetch and select' },
+                {
+                    condition: 'блокировке через getRowDisabled',
+                    action: 'Refetch and lock',
+                },
+            ])('Строки перерисовываются один раз и сразу с новыми данными при $condition', async ({ action }) => {
+                const { renderCellSpy } = setupRowsUpdate();
+                await tests_1.userEvents.click(tests_1.screen.getByText(action));
+                (0, vitest_1.expect)(renderCellSpy.mock.calls.map(([row]) => row.name)).toEqual(['Vasya v1', 'Petya v1', 'Ivan v1']);
+            });
+        });
+    });
 };
 exports.testDataGridPerformance = testDataGridPerformance;

package/node/components/DataGrid/tests/selection/testDataGridSelection.d.ts

@@ -0,0 +1,14 @@
+import { type RenderResult } from '@ui/dev/tests';
+import { type ReactElement } from 'react';
+import { type DataGridProps } from '../../types';
+type DataItem = {
+    id: string | number;
+    name: string;
+};
+type GridRenderProps = Pick<DataGridProps<DataItem>, 'rows' | 'columns' | 'selectedRows' | 'onSelectRow' | 'getRowDisabled' | 'onRowClick' | 'variant' | 'tree' | 'onRetry'>;
+type TestDataGridSelectionParams = {
+    render: (ui: ReactElement) => Pick<RenderResult, 'rerender'>;
+    renderGrid: (props: GridRenderProps) => ReactElement;
+};
+export declare const testDataGridSelection: ({ render, renderGrid, }: TestDataGridSelectionParams) => void;
+export {};