@astral/ui 4.74.0 → 4.76.0

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 };
 };

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

@@ -1,7 +1,7 @@
 import { type ChangeEvent } from 'react';
 import type { CellValue, DataGridProps, DataGridRow } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, mobileDisplayVariant, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp, }: UseLogicParams<TData, TSortField>) => {
     dataGridClassName: string | undefined;
     containerCssVars: import("react").CSSProperties;
     isDataGridDisabled: boolean | undefined;
@@ -43,6 +43,7 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
+        mobileDisplayVariant: "list" | "cards";
     };
     hasGroupedColumns: boolean;
     headProps: {
@@ -58,7 +59,9 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
         isSelectable: boolean;
         onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
     };
+    mobileDisplayVariant: "list" | "cards";
     sections: import("../PinnedSections/types").PinnedSection<TData>[];
+    isSelfContained: boolean;
     loaderProps: {
         isLoading: boolean | undefined;
         isVisibleDivider: boolean;

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

@@ -11,7 +11,7 @@ const enums_1 = require("../enums");
 const utils_1 = require("../utils");
 const hooks_1 = require("./hooks");
 const utils_2 = require("./utils");
-const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
+const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
     const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
@@ -45,10 +45,21 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         columns: (0, utils_1.getFlattenColumns)(processedColumns()),
         rows,
         isNoScrollToTop: isLoading && isNoData,
+        mobileDisplayVariant,
     });
-    const treeRenderConfig = Object.is(variant, enums_1.Variant.Subrows)
-        ? { ...subrows, isInitialExpanded: true }
-        : tree;
+    const treeRenderConfig = (0, react_1.useMemo)(() => {
+        const config = Object.is(variant, enums_1.Variant.Subrows)
+            ? { ...subrows, isInitialExpanded: true }
+            : tree;
+        if (isMobile) {
+            return {
+                ...config,
+                expandedLevel: constants_1.EXPANDED_LEVEL_BY_DEFAULT,
+                initialVisibleChildrenCount: constants_1.INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT,
+            };
+        }
+        return config;
+    }, [variant, subrows, tree, isMobile]);
     const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
     const gridColumns = (0, react_1.useMemo)(() => (0, utils_1.getGridTemplateColumns)((0, utils_1.getFlattenColumns)(columns)), [columns]);
     const isAllowHorizontalScroll = (0, utils_2.getIsAllowHorizontalScroll)((0, utils_1.getFlattenColumns)(columns));
@@ -66,7 +77,7 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
         onSelectRow(filteredRows);
     };
-    const handleSelectRow = (row) => (event) => {
+    const handleSelectRow = (0, react_1.useCallback)((row) => (event) => {
         if (!onSelectRow) {
             return;
         }
@@ -74,7 +85,7 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
             return onSelectRow([...selectedRowsRef.current, row]);
         }
         onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
-    };
+    }, []);
     const hasGroupedColumns = columns.some(utils_1.isGroupColumns);
     const gridViewMode = hasGroupedColumns ? 'full' : gridViewModeProp;
     const isHideHead = (isHideHeaderIfNoData && isNoData) || (hasGroupedColumns && isNoData);
@@ -127,7 +138,9 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
             isSelectable,
             onSelectRow: handleSelectRow,
         },
+        mobileDisplayVariant,
         sections,
+        isSelfContained: mobileDisplayVariant === 'cards',
         loaderProps: {
             isLoading: !isFirstRender && isLoading,
             isVisibleDivider: Boolean(rows.length),

package/node/components/DataGridActionCell/DataGridMainActions/Action/MainIconButton/MainIconButton.js

@@ -18,9 +18,11 @@ const iconButtonCva = (0, cva_1.cva)(constants_1.mainIconButtonClassnames.root,
 const MainIconButton = (props) => {
     const { tooltipProps } = (0, useLogic_1.useLogic)(props);
     const { action, onActionClick, isDisabled, tooltipPlacement } = props;
-    const { name, icon, needConfirm, confirmText, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, ...actions } = action;
+    const { name, icon, needConfirm, confirmText, confirmMobileTitle, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, mobileProps, ...actions } = action;
     const renderButton = (renderProps) => ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { withoutContainer: !disabled, placement: tooltipPlacement, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { disabled: isDisabled || disabled, loading: loading, ...actions, variant: "text", ...renderProps, className: iconButtonCva({ isMobilePrimary }), children: icon }) }, name));
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: needConfirm ? ((0, jsx_runtime_1.jsx)(ConfirmAction_1.ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: needConfirm ? ((0, jsx_runtime_1.jsx)(ConfirmAction_1.ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, popoverProps: {
+                title: confirmMobileTitle,
+            }, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
             onClick: onActionClick(onClick),
         })) }));
 };

package/node/components/DataGridActionCell/DataGridMainActions/Action/MobileMainButton/MobileMainButton.js

@@ -5,10 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ConfirmAction_1 = require("../../../../ConfirmAction");
 const styles_1 = require("./styles");
 const MobileMainButton = ({ action, isDisabled, onActionClick, }) => {
-    const { mobileProps, name, icon, needConfirm, confirmText, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, ...actions } = action;
+    const { mobileProps, name, icon, needConfirm, confirmText, confirmMobileTitle, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, ...actions } = action;
     const { text, color } = mobileProps ?? { text: name, color: 'primary' };
     const renderButton = (renderProps) => ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, { disabled: isDisabled || disabled, loading: loading, color: color, ...actions, variant: "contained", ...renderProps, children: text }));
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: needConfirm ? ((0, jsx_runtime_1.jsx)(ConfirmAction_1.ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: needConfirm ? ((0, jsx_runtime_1.jsx)(ConfirmAction_1.ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, popoverProps: {
+                title: confirmMobileTitle,
+            }, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
             onClick: onActionClick(onClick),
         })) }));
 };

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

@@ -34,6 +34,10 @@ export type SingleAction<TAction> = {
      * Поясняющий текст для подтверждения действия
      */
     confirmText?: ConfirmActionProps['text'];
+    /**
+     * Заголовок для подтверждения действия на мобильных устройствах
+     */
+    confirmMobileTitle?: string;
     /**
      * Параметры кнопки подтверждения действия
      */