@astral/ui 4.114.0 → 4.115.0

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/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/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/components/DataGrid/tests/performance/testDataGridPerformance.js

@@ -1,12 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { screen, userEvents } from '@ui/dev/tests';
-import { useMemo, useState } from 'react';
-import { expect, it, vi } from 'vitest';
+import { useCallback, useMemo, useState, } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 const TEST_ROWS = [
     { id: '1', name: 'Vasya' },
     { 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: 'Документ отправляется',
+};
 export const testDataGridPerformance = ({ render, renderGrid, }) => {
     const getRenderCountFor = (spy, id) => spy.mock.calls.filter(([row]) => row.id === id).length;
     it('При клике на чекбокс перерендеривается только выбранная строка', async () => {
@@ -99,4 +115,220 @@ export const testDataGridPerformance = ({ render, renderGrid, }) => {
         expect(getRenderCountFor(renderCellSpy, '2')).toBe(0);
         expect(getRenderCountFor(renderCellSpy, '3')).toBe(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 = vi.fn((row) => row.name);
+            const getRowDisabledSpy = vi.fn(() => undefined);
+            const TestComponent = () => {
+                const [selectedRows, setSelectedRows] = useState([]);
+                const columns = useMemo(() => createColumns(renderCellSpy), []);
+                return renderGrid({
+                    rows: TEST_ROWS,
+                    columns,
+                    selectedRows,
+                    onSelectRow: setSelectedRows,
+                    getRowDisabled: getRowDisabledSpy,
+                    onRetry: () => { },
+                });
+            };
+            render(_jsx(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupParentRerender = () => {
+            const renderCellSpy = vi.fn((row) => row.name);
+            const getRowDisabledSpy = vi.fn(() => undefined);
+            const TestComponent = () => {
+                const [, setCounter] = useState(0);
+                const columns = useMemo(() => createColumns(renderCellSpy), []);
+                return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setCounter((value) => value + 1), children: "Rerender" }), renderGrid({
+                            rows: TEST_ROWS,
+                            columns,
+                            selectedRows: [],
+                            onSelectRow: () => { },
+                            getRowDisabled: getRowDisabledSpy,
+                            onRetry: () => { },
+                        })] }));
+            };
+            render(_jsx(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupChangedResult = () => {
+            const renderCellSpy = vi.fn((row) => row.name);
+            const getRowDisabledSpy = vi.fn();
+            const TestComponent = () => {
+                const [lockedId, setLockedId] = useState();
+                const columns = useMemo(() => createColumns(renderCellSpy), []);
+                const getRowDisabled = useCallback((row) => {
+                    getRowDisabledSpy(row);
+                    return row.id === lockedId ? SELECTION_DISABLED : undefined;
+                }, [lockedId]);
+                return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setLockedId('2'), children: "Lock row 2" }), renderGrid({
+                            rows: TEST_ROWS,
+                            columns,
+                            selectedRows: [],
+                            onSelectRow: () => { },
+                            getRowDisabled,
+                            onRetry: () => { },
+                        })] }));
+            };
+            render(_jsx(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupSameResult = () => {
+            const renderCellSpy = vi.fn((row) => row.name);
+            const getRowDisabledSpy = vi.fn();
+            const TestComponent = () => {
+                const [counter, setCounter] = useState(0);
+                const columns = useMemo(() => createColumns(renderCellSpy), []);
+                const getRowDisabled = useCallback((row) => {
+                    getRowDisabledSpy(row);
+                    return undefined;
+                }, [counter]);
+                return (_jsxs(_Fragment, { children: [_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(_jsx(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        describe('Клик на чекбокс', () => {
+            it('Перерендеривается только выбранная строка', async () => {
+                const { renderCellSpy } = setupSelectableGrid();
+                // 0 - "Выбрать все", 1 - первая строка
+                await userEvents.click(screen.getAllByRole('checkbox')[2]);
+                expect(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            it('getRowDisabled не вызывается', async () => {
+                const { getRowDisabledSpy } = setupSelectableGrid();
+                await userEvents.click(screen.getAllByRole('checkbox')[2]);
+                expect(getRowDisabledSpy).not.toHaveBeenCalled();
+            });
+        });
+        it('getRowDisabled не вызывается при «Выбрать все»', async () => {
+            const { getRowDisabledSpy } = setupSelectableGrid();
+            await userEvents.click(screen.getAllByRole('checkbox')[0]);
+            expect(getRowDisabledSpy).not.toHaveBeenCalled();
+        });
+        describe('Перерисовка родителя со стабильной функцией', () => {
+            it('Строки не перерисовываются', async () => {
+                const { renderCellSpy } = setupParentRerender();
+                await userEvents.click(screen.getByText('Rerender'));
+                expect(renderCellSpy).not.toHaveBeenCalled();
+            });
+            it('getRowDisabled не вызывается', async () => {
+                const { getRowDisabledSpy } = setupParentRerender();
+                await userEvents.click(screen.getByText('Rerender'));
+                expect(getRowDisabledSpy).not.toHaveBeenCalled();
+            });
+        });
+        describe('Новая функция с изменившимся результатом', () => {
+            it('Перерендеривается только строка с изменившимся результатом', async () => {
+                const { renderCellSpy } = setupChangedResult();
+                await userEvents.click(screen.getByText('Lock row 2'));
+                expect(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            it('getRowDisabled вызывается один раз на строку', async () => {
+                const { getRowDisabledSpy } = setupChangedResult();
+                await userEvents.click(screen.getByText('Lock row 2'));
+                expect(getRowDisabledSpy).toHaveBeenCalledTimes(TEST_ROWS.length);
+            });
+        });
+        describe('Новая функция с тем же результатом', () => {
+            it('Перерисовываются только строки с дочерними элементами', async () => {
+                const { renderCellSpy } = setupSameResult();
+                await userEvents.click(screen.getByText('New function'));
+                expect(getRenderCounts(renderCellSpy, ['1', '2', '3', '4', '4-1'])).toEqual({ '1': 0, '2': 0, '3': 0, '4': 1, '4-1': 1 });
+            });
+            it('getRowDisabled вызывается один раз на строку, включая вложенную', async () => {
+                const { getRowDisabledSpy } = setupSameResult();
+                await userEvents.click(screen.getByText('New function'));
+                // 4 строки и 1 вложенная
+                expect(getRowDisabledSpy).toHaveBeenCalledTimes(5);
+            });
+        });
+        // Virtuoso отдаёт строкам новые данные на рендер позже родителя: состояние строки
+        // не должно приходить раньше данных и перерисовывать строку дважды
+        describe('Новые rows вместе с изменением состояния строки', () => {
+            const createVersionRows = (version) => TEST_ROWS.map((row) => ({ ...row, name: `${row.name} v${version}` }));
+            const setupRowsUpdate = () => {
+                const renderCellSpy = vi.fn((row) => row.name);
+                const TestComponent = () => {
+                    const [version, setVersion] = useState(0);
+                    const [isOptionsLocked, setOptionsLocked] = useState(false);
+                    const [lockedId, setLockedId] = useState();
+                    const [selectedRows, setSelectedRows] = useState([]);
+                    const columns = useMemo(() => createColumns(renderCellSpy), []);
+                    const versionRows = useMemo(() => createVersionRows(version), [version]);
+                    // Заново создаётся только заблокированная строка, остальные сохраняют ссылки
+                    const rows = useMemo(() => versionRows.map((row) => isOptionsLocked && row.id === '2'
+                        ? { ...row, options: { isDisabled: true } }
+                        : row), [versionRows, isOptionsLocked]);
+                    const getRowDisabled = useCallback((row) => (row.id === lockedId ? ROW_DISABLED : undefined), [lockedId]);
+                    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setOptionsLocked(true), children: "Lock via options" }), _jsx("button", { onClick: () => {
+                                    setVersion(1);
+                                    setSelectedRows([TEST_ROWS[1]]);
+                                }, children: "Refetch and select" }), _jsx("button", { onClick: () => {
+                                    setVersion(1);
+                                    setLockedId('2');
+                                }, children: "Refetch and lock" }), renderGrid({
+                                rows,
+                                columns,
+                                selectedRows,
+                                onSelectRow: setSelectedRows,
+                                getRowDisabled,
+                                onRetry: () => { },
+                            })] }));
+                };
+                render(_jsx(TestComponent, {}));
+                renderCellSpy.mockClear();
+                return { renderCellSpy };
+            };
+            it('Строка перерисовывается один раз при блокировке через options', async () => {
+                const { renderCellSpy } = setupRowsUpdate();
+                await userEvents.click(screen.getByText('Lock via options'));
+                expect(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            it.each([
+                { condition: 'изменении выбора', action: 'Refetch and select' },
+                {
+                    condition: 'блокировке через getRowDisabled',
+                    action: 'Refetch and lock',
+                },
+            ])('Строки перерисовываются один раз и сразу с новыми данными при $condition', async ({ action }) => {
+                const { renderCellSpy } = setupRowsUpdate();
+                await userEvents.click(screen.getByText(action));
+                expect(renderCellSpy.mock.calls.map(([row]) => row.name)).toEqual(['Vasya v1', 'Petya v1', 'Ivan v1']);
+            });
+        });
+    });
 };

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