@astral/ui 4.73.1 → 4.75.0

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

@@ -0,0 +1,92 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+import type { DataGridColumns, DataGridRowWithOptions } from '../types';
+export type RowBaseProps = {
+    /**
+     * Массив колонок
+     */
+    columns: DataGridColumns<Record<string, unknown>>[];
+    /**
+     * Данные строки для отображения
+     */
+    row: DataGridRowWithOptions<Record<string, unknown>>;
+    /**
+     * Функция для рендера стартового элемента
+     */
+    renderStartAdornment?: (isFirstCell: boolean) => ReactNode;
+    /**
+     * Смещение секции для правильного расчета глобального индекса
+     */
+    sectionOffset?: number;
+    /**
+     * Уникальный идентификатор строки
+     */
+    rowId: string;
+    /**
+     * Кастомный контент после ячеек
+     */
+    customContent?: ReactNode;
+    /**
+     * Является ли строка выбираемой
+     */
+    isSelectable?: boolean;
+    /**
+     * Уникальный идентификатор строки
+     */
+    keyId: unknown;
+    /**
+     * Обработчик клика строки таблицы
+     */
+    onRowClick?: (row: Record<string, unknown>) => void;
+    /**
+     * Является ли строка выбранной
+     */
+    isSelected?: boolean;
+    /**
+     * Заблокирована ли строка
+     */
+    isDisabled?: boolean;
+    /**
+     * Причина блокировки строки
+     */
+    disabledReason?: string;
+    /**
+     * Обработчик выбора строки
+     */
+    onSelectRow: (row: Record<string, unknown>) => (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик наведения на строку
+     */
+    onRowEnter?: (rowId: string) => void;
+    /**
+     * Обработчик ухода со строки
+     */
+    onRowLeave?: (rowId: string, event: PointerEvent) => void;
+    /**
+     * Регистрация элемента строки
+     */
+    registerRowElement?: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Удаление регистрации элемента строки
+     */
+    unregisterRowElement?: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Шаблон колонок (CSS grid-template-columns)
+     */
+    gridColumns?: string;
+    /**
+     * ID активной строки
+     */
+    activeRowId?: string;
+    /**
+     * Значение для пустой ячейки
+     */
+    emptyCellValue?: ReactNode;
+    /**
+     * Вариант отображения на мобильных устройствах
+     */
+    mobileDisplayVariant?: 'cards' | 'list';
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
+};

package/node/components/DataGrid/RowBase/types.js

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

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

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

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

@@ -0,0 +1,46 @@
+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) => {
+    handleRowClick: () => void;
+    tooltipProps: {
+        open: boolean;
+        title: string | undefined;
+        onOpen: (event: SyntheticEvent<Element, Event>) => void;
+        onClose: () => void;
+        followCursor: boolean;
+        arrow: boolean;
+    };
+    checkboxProps: {
+        checked: boolean | undefined;
+        disabled: boolean | undefined;
+        onChange: (event: import("react").ChangeEvent<HTMLInputElement, Element>) => void;
+    };
+    drawerProps: {
+        open: boolean;
+        onClose: () => void;
+        title: string;
+    };
+    drawerContent: string | undefined;
+    rowBaseVars: CSSProperties;
+    isHovered: boolean;
+    isActive: boolean;
+    columns: import("../..").DataGridColumns<Record<string, unknown>>[];
+    emptyCellValue: import("react").ReactNode;
+    rowRef: (element: HTMLElement | null) => void;
+    onRowEnter: ((rowId: string) => void) | undefined;
+    onRowLeave: ((rowId: string, event: PointerEvent) => void) | undefined;
+    rowId: string;
+    row: import("../..").DataGridRowWithOptions<Record<string, unknown>>;
+    isDisabled: boolean | undefined;
+    sectionOffset: number | undefined;
+    customContent: import("react").ReactNode;
+    isDisabledLastCell: boolean | undefined;
+    renderStartAdornment: ((isFirstCell: boolean) => import("react").ReactNode) | undefined;
+    isSelectable: boolean | undefined;
+    isNotSelectable: boolean | undefined;
+    dataGridInfiniteItemProps: {};
+    mobileDisplayVariant: "list" | "cards" | undefined;
+    className: string | undefined;
+};
+export {};

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

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const redirectToLink_1 = require("../../../utils/redirectToLink");
+const hooks_1 = require("../../Row/useLogic/hooks");
+const constants_1 = require("../constants");
+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 }) => {
+    const [isVisibleTooltip, setVisibleTooltip] = (0, react_1.useState)(false);
+    const savedElementRef = (0, react_1.useRef)(null);
+    const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = (0, hooks_1.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 handleOpenTooltip = (event) => {
+        const element = event.target;
+        const isDisabledCell = element?.getAttribute(constants_1.DISABLE_ROW_ATTR) === 'true';
+        if (isDisabledCell) {
+            setVisibleTooltip(true);
+        }
+    };
+    const handleCloseTooltip = () => setVisibleTooltip(false);
+    const rowBaseVars = {
+        '--row-base-grid-columns': gridColumns,
+        ...(dataGridInfiniteItemStyle || {}),
+    };
+    const isHovered = Boolean(!disabled && (onRowClick || href));
+    const isActive = activeRowId === rowId;
+    const rowRef = (element) => {
+        if (element) {
+            savedElementRef.current = element;
+            registerRowElement?.(rowId, element);
+        }
+        else if (savedElementRef.current) {
+            unregisterRowElement?.(rowId, savedElementRef.current);
+            savedElementRef.current = null;
+        }
+    };
+    const handleRowClick = () => {
+        if (disabled) {
+            handleOpenDrawer();
+            return undefined;
+        }
+        if (href) {
+            return (0, redirectToLink_1.redirectToLink)(href, target);
+        }
+        onRowClick?.(row);
+    };
+    return {
+        handleRowClick,
+        tooltipProps: {
+            open: isVisibleTooltip,
+            title: disabled ? disabledReasonText : undefined,
+            onOpen: handleOpenTooltip,
+            onClose: handleCloseTooltip,
+            followCursor: true,
+            arrow: false,
+        },
+        checkboxProps: {
+            checked: isSelected,
+            disabled,
+            onChange: onSelectRow(row),
+        },
+        drawerProps: {
+            open: isDrawerOpen,
+            onClose: handleCloseDrawer,
+            title: 'Заблокировано',
+        },
+        drawerContent: disabledReasonText,
+        rowBaseVars,
+        isHovered,
+        isActive,
+        columns,
+        emptyCellValue,
+        rowRef,
+        onRowEnter,
+        onRowLeave,
+        rowId,
+        row,
+        isDisabled: disabled,
+        sectionOffset,
+        customContent,
+        isDisabledLastCell,
+        renderStartAdornment,
+        isSelectable,
+        isNotSelectable,
+        dataGridInfiniteItemProps: restDataGridInfiniteItemProps,
+        mobileDisplayVariant,
+        className,
+    };
+};
+exports.useLogic = useLogic;

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

@@ -2,9 +2,11 @@ export declare const MIN_ROW_HEIGHT = 44;
 export declare const ROOT_ACTION_CELL_WIDTH = 32;
 export declare const TREE_LINE_WIDTH: number;
 export declare const MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
+export declare const MOBILE_TREE_LINE_WIDTH = 12;
 export declare const DEFAULT_MOBILE_SKELETON_ROWS_COUNT = 5;
 export declare const EXPANDED_LEVEL_BY_DEFAULT = 1;
 export declare const INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;
+export declare const INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT = 1;
 export declare const dataGridClassnames: {
     loadingPlaceholder: string;
     header: string;
@@ -23,4 +25,10 @@ export declare const dataGridClassnames: {
     hasGroupedColumns: string;
     gridViewFull: string;
     gridViewStandard: string;
+    mobileVariantCards: string;
+    mobileVariantList: string;
+};
+export declare const dataGridSkeletonClassnames: {
+    list: string;
+    item: string;
 };

package/node/components/DataGrid/constants.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataGridClassnames = exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = exports.EXPANDED_LEVEL_BY_DEFAULT = exports.DEFAULT_MOBILE_SKELETON_ROWS_COUNT = exports.MIN_DISPLAY_ROWS_BY_DEFAULT = exports.TREE_LINE_WIDTH = exports.ROOT_ACTION_CELL_WIDTH = exports.MIN_ROW_HEIGHT = void 0;
+exports.dataGridSkeletonClassnames = exports.dataGridClassnames = exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT = exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = exports.EXPANDED_LEVEL_BY_DEFAULT = exports.DEFAULT_MOBILE_SKELETON_ROWS_COUNT = exports.MOBILE_TREE_LINE_WIDTH = exports.MIN_DISPLAY_ROWS_BY_DEFAULT = exports.TREE_LINE_WIDTH = exports.ROOT_ACTION_CELL_WIDTH = exports.MIN_ROW_HEIGHT = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.MIN_ROW_HEIGHT = 44;
 exports.ROOT_ACTION_CELL_WIDTH = 32;
 exports.TREE_LINE_WIDTH = exports.ROOT_ACTION_CELL_WIDTH / 2;
 exports.MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
+exports.MOBILE_TREE_LINE_WIDTH = 12;
 exports.DEFAULT_MOBILE_SKELETON_ROWS_COUNT = 5;
 exports.EXPANDED_LEVEL_BY_DEFAULT = 1;
 exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;
+exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT = 1;
 exports.dataGridClassnames = {
     loadingPlaceholder: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__loading-placeholder'),
     header: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__header'),
@@ -27,4 +29,10 @@ exports.dataGridClassnames = {
     hasGroupedColumns: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_has-grouped-columns'),
     gridViewFull: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_grid-view-full'),
     gridViewStandard: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_grid-view-standard'),
+    mobileVariantCards: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_mobile-variant-cards'),
+    mobileVariantList: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_mobile-variant-list'),
+};
+exports.dataGridSkeletonClassnames = {
+    list: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__skeleton-list'),
+    item: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__skeleton-item'),
 };

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

@@ -2,3 +2,6 @@ export { DataGrid } from './DataGrid';
 export type { DataGridProps, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
 export { dataGridClassnames } from './constants';
 export { MobileSkeleton } from './MobileSkeleton';
+export { RowBase, type RowBaseProps } from './RowBase';
+export { DataGridContext } from './DataGridContext';
+export { DataGridStorageContext } from './DataGridStorageContext';

package/node/components/DataGrid/index.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileSkeleton = exports.dataGridClassnames = exports.DataGrid = void 0;
+exports.DataGridStorageContext = exports.DataGridContext = exports.RowBase = exports.MobileSkeleton = exports.dataGridClassnames = exports.DataGrid = void 0;
 var DataGrid_1 = require("./DataGrid");
 Object.defineProperty(exports, "DataGrid", { enumerable: true, get: function () { return DataGrid_1.DataGrid; } });
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "dataGridClassnames", { enumerable: true, get: function () { return constants_1.dataGridClassnames; } });
 var MobileSkeleton_1 = require("./MobileSkeleton");
 Object.defineProperty(exports, "MobileSkeleton", { enumerable: true, get: function () { return MobileSkeleton_1.MobileSkeleton; } });
+var RowBase_1 = require("./RowBase");
+Object.defineProperty(exports, "RowBase", { enumerable: true, get: function () { return RowBase_1.RowBase; } });
+var DataGridContext_1 = require("./DataGridContext");
+Object.defineProperty(exports, "DataGridContext", { enumerable: true, get: function () { return DataGridContext_1.DataGridContext; } });
+var DataGridStorageContext_1 = require("./DataGridStorageContext");
+Object.defineProperty(exports, "DataGridStorageContext", { enumerable: true, get: function () { return DataGridStorageContext_1.DataGridStorageContext; } });

package/node/components/DataGrid/styles.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisabledDataGridWrapper = exports.DataGridWrapper = exports.Container = void 0;
 const styled_1 = require("../styled");
-const constants_1 = require("./Cell/constants");
-const constants_2 = require("./constants");
+const constants_1 = require("./Body/constants");
+const constants_2 = require("./Cell/constants");
+const constants_3 = require("./constants");
 const HeadCell_1 = require("./HeadCell");
-const constants_3 = require("./Row/constants");
+const constants_4 = require("./Row/constants");
 exports.Container = styled_1.styled.div `
   --max-height: initial;
 
@@ -19,20 +20,20 @@ exports.Container = styled_1.styled.div `
   height: 100%;
   max-height: var(--max-height);
 
-  &.${constants_2.dataGridClassnames.isAllowHorizontalScroll} {
+  &.${constants_3.dataGridClassnames.isAllowHorizontalScroll} {
     overflow: auto hidden;
 
-    & .${constants_2.dataGridClassnames.wrapper} {
+    & .${constants_3.dataGridClassnames.wrapper} {
       overflow: auto hidden;
     }
   }
 
-  &.${constants_2.dataGridClassnames.hasPinnedSections} {
+  &.${constants_3.dataGridClassnames.hasPinnedSections} {
     overflow: hidden;
   }
 
-  &.${constants_2.dataGridClassnames.hasGroupedColumns} {
-    & .${constants_2.dataGridClassnames.header} {
+  &.${constants_3.dataGridClassnames.hasGroupedColumns} {
+    & .${constants_3.dataGridClassnames.header} {
       grid-template-rows: repeat(2, auto);
 
       & .${HeadCell_1.headCellClassnames.groupParent} {
@@ -55,25 +56,25 @@ exports.Container = styled_1.styled.div `
   }
 
   @supports not (container-type: scroll-state) {
-    &.${constants_2.dataGridClassnames.overflowed} {
-      & .${constants_2.dataGridClassnames.rightPinnedSection} {
+    &.${constants_3.dataGridClassnames.overflowed} {
+      & .${constants_3.dataGridClassnames.rightPinnedSection} {
          box-shadow: -3px 0 4px 0 #63636326;
       }
 
-      & .${constants_2.dataGridClassnames.leftPinnedSection} {
+      & .${constants_3.dataGridClassnames.leftPinnedSection} {
          box-shadow: 3px 0 4px 0 #63636326;
       }
     }
   }
 
-  &.${constants_2.dataGridClassnames.gridViewFull} {
-    & .${constants_2.dataGridClassnames.header} {
+  &.${constants_3.dataGridClassnames.gridViewFull} {
+    & .${constants_3.dataGridClassnames.header} {
       background-color: ${({ theme }) => theme.palette.grey[100]};
       border-top-left-radius: ${({ theme }) => theme.shape.medium};
       border-top-right-radius: ${({ theme }) => theme.shape.medium};
     }
 
-    & .${constants_1.dataGridCellClassnames.root},
+    & .${constants_2.dataGridCellClassnames.root},
     & .${HeadCell_1.headCellClassnames.root} {
       border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
       border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
@@ -89,12 +90,12 @@ exports.Container = styled_1.styled.div `
       border-top: none;
     }
 
-    & .${constants_3.dataGridRowClassnames.root}:last-of-type .${constants_1.dataGridCellClassnames.root} {
+    & .${constants_4.dataGridRowClassnames.root}:last-of-type .${constants_2.dataGridCellClassnames.root} {
       border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
-    &:not(.${constants_2.dataGridClassnames.hasPinnedSections}) .${constants_2.dataGridClassnames.body},
-    & .${constants_2.dataGridClassnames.pinnedSections} {
+    &:not(.${constants_3.dataGridClassnames.hasPinnedSections}) .${constants_3.dataGridClassnames.body},
+    & .${constants_3.dataGridClassnames.pinnedSections} {
       container-name: data-grid-scroll-container;
       container-type: scroll-state;
     }
@@ -102,12 +103,12 @@ exports.Container = styled_1.styled.div `
     /* Прогрессивное улучшение. Убираем нижнюю границу последней строки когда scrollbar находится в нижней точке. Для того что бы избежать двойного разделителя снизу */
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     @container data-grid-scroll-container scroll-state((scrollable: y) and (not (scrollable: bottom))) {
-      & .${constants_3.dataGridRowClassnames.root}:last-of-type .${constants_1.dataGridCellClassnames.root} {
+      & .${constants_4.dataGridRowClassnames.root}:last-of-type .${constants_2.dataGridCellClassnames.root} {
         border-bottom: none;
       }
     }
 
-    & .${constants_3.dataGridRowClassnames.root}:first-of-type .${constants_1.dataGridCellClassnames.root} {
+    & .${constants_4.dataGridRowClassnames.root}:first-of-type .${constants_2.dataGridCellClassnames.root} {
       border-top: none;
     }
   }
@@ -115,31 +116,44 @@ exports.Container = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     overflow: initial;
 
-    & .${constants_2.dataGridClassnames.loadingPlaceholder} {
+    & .${constants_3.dataGridClassnames.loadingPlaceholder} {
       justify-content: flex-start;
     }
 
-    &.${constants_2.dataGridClassnames.hasPinnedSections} {
+    &.${constants_3.dataGridClassnames.hasPinnedSections} {
       overflow: initial;
     }
 
-    &.${constants_2.dataGridClassnames.isAllowHorizontalScroll} {
+    &.${constants_3.dataGridClassnames.isAllowHorizontalScroll} {
       overflow: initial;
 
-      & .${constants_2.dataGridClassnames.wrapper} {
+      & .${constants_3.dataGridClassnames.wrapper} {
         overflow: initial;
       }
     }
 
-    &.${constants_2.dataGridClassnames.gridViewFull} {
-      & .${constants_1.dataGridCellClassnames.root}, & .${HeadCell_1.headCellClassnames.root} {
+    &.${constants_3.dataGridClassnames.gridViewFull} {
+      & .${constants_2.dataGridCellClassnames.root}, & .${HeadCell_1.headCellClassnames.root} {
         border: none;
       }
 
-      & .${constants_3.dataGridRowClassnames.root}:last-of-type .${constants_1.dataGridCellClassnames.root} {
+      & .${constants_4.dataGridRowClassnames.root}:last-of-type .${constants_2.dataGridCellClassnames.root} {
         border-bottom: none;
       }
     }
+
+    &.${constants_3.dataGridClassnames.mobileVariantCards} {
+    
+      & .${constants_3.dataGridClassnames.wrapper} {
+        margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+      }
+
+      & .${constants_1.bodyClassnames.root} {
+        display: flex;
+        flex-direction: column;
+        gap: ${({ theme }) => theme.spacing(2)};
+      }
+    }
   }
 `;
 exports.DataGridWrapper = styled_1.styled.div `

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

@@ -0,0 +1,21 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type DataGridColumns, 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;
+    renderRow?: RenderRow;
+    onRetry: () => void;
+};
+type TestDataGridPerformanceParams = {
+    render: (ui: ReactElement) => void;
+    renderGrid: (props: GridRenderProps) => ReactNode;
+};
+type DataItem = {
+    id: string;
+    name: string;
+};
+export declare const testDataGridPerformance: ({ render, renderGrid, }: TestDataGridPerformanceParams) => void;
+export {};

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

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testDataGridPerformance = 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 TEST_ROWS = [
+    { id: '1', name: 'Vasya' },
+    { id: '2', name: 'Petya' },
+    { id: '3', name: 'Ivan' },
+];
+const testDataGridPerformance = ({ render, renderGrid, }) => {
+    const getRenderCountFor = (spy, id) => spy.mock.calls.filter(([row]) => row.id === id).length;
+    (0, vitest_1.it)('При клике на чекбокс перерендеривается только выбранная строка', async () => {
+        const renderCellSpy = vitest_1.vi.fn((row) => row.name);
+        const TestComponent = () => {
+            const [selectedRows, setSelectedRows] = (0, react_1.useState)([]);
+            const columns = (0, react_1.useMemo)(() => [
+                {
+                    field: 'name',
+                    label: 'Наименование',
+                    renderCell: renderCellSpy,
+                },
+            ], []);
+            return renderGrid({
+                rows: TEST_ROWS,
+                columns,
+                selectedRows,
+                onSelectRow: setSelectedRows,
+                onRetry: () => { },
+            });
+        };
+        render((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        renderCellSpy.mockClear();
+        const checkboxes = tests_1.screen.getAllByRole('checkbox');
+        const secondRowCheckbox = checkboxes[2];
+        await tests_1.userEvents.click(secondRowCheckbox);
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '1')).toBe(0);
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '2')).toBe(1);
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '3')).toBe(0);
+    });
+    (0, vitest_1.it)('При изменении значений одного row перерендеривается только этот row', async () => {
+        const renderCellSpy = vitest_1.vi.fn((row) => row.name);
+        const TestComponent = () => {
+            const [rows, setRows] = (0, react_1.useState)(TEST_ROWS);
+            const columns = (0, react_1.useMemo)(() => [
+                {
+                    field: 'name',
+                    label: 'Наименование',
+                    renderCell: renderCellSpy,
+                },
+            ], []);
+            const updateSecondRow = () => {
+                setRows((prevRows) => prevRows.map((row) => row.id === '2' ? { ...row, name: 'Petya Updated' } : row));
+            };
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: updateSecondRow, children: "Update row 2" }), renderGrid({
+                        rows,
+                        columns,
+                        onRetry: () => { },
+                        selectedRows: [],
+                        onSelectRow: () => { },
+                    })] }));
+        };
+        render((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        renderCellSpy.mockClear();
+        await tests_1.userEvents.click(tests_1.screen.getByText('Update row 2'));
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '1')).toBe(0);
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '2')).toBe(1);
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '3')).toBe(0);
+        (0, vitest_1.expect)(tests_1.screen.getByText('Petya Updated')).toBeVisible();
+    });
+    (0, vitest_1.it)('При изменении параметра selectedRows изменяется только выбранные строки', async () => {
+        const renderCellSpy = vitest_1.vi.fn((row) => row.name);
+        const TestComponent = () => {
+            const [selectedRows, setSelectedRows] = (0, react_1.useState)([]);
+            const columns = (0, react_1.useMemo)(() => [
+                {
+                    field: 'name',
+                    label: 'Наименование',
+                    renderCell: renderCellSpy,
+                },
+            ], []);
+            const selectRowsDirectly = () => {
+                setSelectedRows([
+                    { id: '1', name: 'Vasya' },
+                    { id: '3', name: 'Ivan' },
+                ]);
+            };
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: selectRowsDirectly, children: "Select 1 and 3" }), renderGrid({
+                        rows: TEST_ROWS,
+                        columns,
+                        selectedRows,
+                        onSelectRow: setSelectedRows,
+                        onRetry: () => { },
+                    })] }));
+        };
+        render((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        renderCellSpy.mockClear();
+        await tests_1.userEvents.click(tests_1.screen.getByText('Select 1 and 3'));
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '1')).toBe(1);
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '2')).toBe(0);
+        (0, vitest_1.expect)(getRenderCountFor(renderCellSpy, '3')).toBe(1);
+    });
+};
+exports.testDataGridPerformance = testDataGridPerformance;

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

@@ -181,6 +181,15 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
      * Включает моноширинный шрифт для чисел в таблице
      */
     isTabularNums?: boolean;
+    /**
+     * Кастомный компонент для отображения строк таблицы
+     * @example <DataGrid renderRow={(row) => <DataGridCollapsibleRow><CustomContent row={row} /></DataGridCollapsibleRow>} />
+     */
+    renderRow?: (row: TData, index: number) => ReactNode;
+    /**
+     * Вариант отображения таблицы на мобильных устройствах
+     */
+    mobileDisplayVariant?: 'cards' | 'list';
 };
 export type DataGridSort<TSortField> = {
     /**
@@ -336,3 +345,5 @@ export type DataGridRowWithOptions<TData extends DataGridRow> = TData & {
     options?: DataGridRowOptions<TData>;
     children?: DataGridRowWithOptions<TData>[];
 };
+export type ContextOnRowClick = (row: Record<string, unknown>) => void;
+export type RenderRow = (row: Record<string, unknown>, index: number) => ReactNode;

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

@@ -6,12 +6,14 @@ type UseDataGridMobileLogicParams<TData extends Record<string, CellValue> = Data
     columns?: DataGridSingleColumn<TData>[];
     rows?: TData[];
     isNoScrollToTop?: boolean;
+    mobileDisplayVariant: 'cards' | 'list';
 };
-export declare const useDataGridMobileLogic: <TData extends Record<string, unknown> = DataGridRow>({ containerRef, isLoading, columns, rows, isNoScrollToTop, }: UseDataGridMobileLogicParams<TData>) => {
+export declare const useDataGridMobileLogic: <TData extends Record<string, unknown> = DataGridRow>({ containerRef, isLoading, columns, rows, isNoScrollToTop, mobileDisplayVariant, }: UseDataGridMobileLogicParams<TData>) => {
     isMobile: boolean;
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
+        mobileDisplayVariant: "list" | "cards";
     };
 };
 export {};

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

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const constants_1 = require("../../../../PageLayoutContainer/constants");
 const useViewportType_1 = require("../../../../useViewportType");
 const constants_2 = require("../../../constants");
-const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows, isNoScrollToTop = false, }) => {
+const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows, isNoScrollToTop = false, mobileDisplayVariant, }) => {
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const firstLoadedRowsCountRef = (0, react_1.useRef)(null);
     const mobileSkeletonCellsCount = (0, react_1.useMemo)(() => columns?.filter((column) => !column.isHideOnMobile).length ?? 0, [columns]);
@@ -34,6 +34,7 @@ const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows, isNoSc
     const mobileSkeletonProps = {
         cellsCount: mobileSkeletonCellsCount,
         rowsCount: firstLoadedRowsCountRef.current ?? constants_2.DEFAULT_MOBILE_SKELETON_ROWS_COUNT,
+        mobileDisplayVariant,
     };
     return { isMobile, mobileSkeletonProps };
 };