@astral/ui 4.74.0 → 4.76.0

package/components/DataGrid/MobileSkeleton/MobileSkeleton.js

@@ -1,10 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton } from '../../Skeleton';
+import { cva } from '../../utils/cva';
+import { dataGridClassnames, dataGridSkeletonClassnames } from '../constants';
 import { Actions, Cell, Root, RowWrapper } from './styles';
-export const MobileSkeleton = ({ cellsCount, rowsCount, }) => {
-    return (_jsx(Root, { children: Array.from({ length: rowsCount }, (_, rowIndex) => (_jsxs(RowWrapper
+const rootCva = cva(dataGridSkeletonClassnames.list, {
+    variants: {
+        mobileDisplayVariant: {
+            cards: dataGridClassnames.mobileVariantCards,
+            list: dataGridClassnames.mobileVariantList,
+        },
+    },
+});
+const itemCva = cva(dataGridSkeletonClassnames.item, {
+    variants: {
+        mobileDisplayVariant: {
+            cards: dataGridClassnames.mobileVariantCards,
+            list: dataGridClassnames.mobileVariantList,
+        },
+    },
+});
+export const MobileSkeleton = ({ cellsCount, mobileDisplayVariant, rowsCount, }) => {
+    return (_jsx(Root, { className: rootCva({ mobileDisplayVariant }), children: Array.from({ length: rowsCount }, (_, rowIndex) => (_jsxs(RowWrapper
         // biome-ignore lint/suspicious/noArrayIndexKey: Статичный скелетон
-        , { children: [Array.from({ length: cellsCount - 1 }, (_cell, cellIndex) => (
+        , { className: itemCva({ mobileDisplayVariant }), children: [Array.from({ length: cellsCount - 1 }, (_cell, cellIndex) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Статичный скелетон
                 _jsxs(Cell, { children: [_jsx(Skeleton, { variant: "rounded", height: 20 }), _jsx(Skeleton, { variant: "rounded", height: 16, width: "50%" })] }, cellIndex))), _jsx(Actions, { children: _jsx(Skeleton, { variant: "rounded", width: "100%", height: 40 }) })] }, rowIndex))) }));
 };

package/components/DataGrid/MobileSkeleton/styles.js

@@ -1,9 +1,14 @@
 import { styled } from '../../styled';
+import { dataGridClassnames } from '../constants';
 export const Root = styled.div `
   display: flex;
   flex-direction: column;
 
   width: 100%;
+  
+  &.${dataGridClassnames.mobileVariantCards} {
+    gap: ${({ theme }) => theme.spacing(2)};
+  }
 `;
 export const RowWrapper = styled.div `
   display: flex;
@@ -24,6 +29,13 @@ export const RowWrapper = styled.div `
   &:last-of-type {
     padding-bottom: 0;
   }
+
+  &.${dataGridClassnames.mobileVariantCards} {
+    padding: ${({ theme }) => theme.spacing(5, 4, 4)};
+
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
 `;
 export const Cell = styled.div `
   display: flex;

package/components/DataGrid/Row/NestedChildren/NestedChildren.d.ts

@@ -16,10 +16,6 @@ export type NestedChildrenProps<TData extends Record<string, CellValue>> = {
      * Поле, которое будет использоваться в качестве ключа
      */
     keyId: keyof TData;
-    /**
-     * Идентификатор строки
-     */
-    rowId: string;
     /**
      * Вариант отображения вложенных элементов
      */
@@ -52,4 +48,4 @@ export type NestedChildrenProps<TData extends Record<string, CellValue>> = {
         className?: string;
     }) => ReactElement;
 };
-export declare const NestedChildren: import("react").MemoExoticComponent<(<TData extends Record<string, unknown>>(props: NestedChildrenProps<TData>) => import("react/jsx-runtime").JSX.Element | null)>;
+export declare const NestedChildren: <TData extends Record<string, unknown>>(props: NestedChildrenProps<TData>) => import("react/jsx-runtime").JSX.Element | null;

package/components/DataGrid/Row/NestedChildren/NestedChildren.js

@@ -1,16 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
 import { Collapse } from '../../../Collapse';
+import { cva } from '../../../utils/cva';
 import { dataGridRowClassnames } from '../constants';
+import { nestedChildrenClassnames } from './constants';
 import { MoreButton, MoreButtonRow, NestedRows } from './styles';
 import { useLogic } from './useLogic';
-export const NestedChildren = memo((props) => {
+const rootCva = cva(nestedChildrenClassnames.root, {
+    variants: {
+        variant: {
+            subrows: nestedChildrenClassnames.variantSubrows,
+            tree: nestedChildrenClassnames.variantTree,
+        },
+    },
+});
+export const NestedChildren = (props) => {
     const { isShowAllChildren, isShowMoreButton, isShowConnector, nextLevel, initialVisibleChildren, otherChildren, handleToggleShowAllChildren, } = useLogic(props);
-    const { isOpen, data, keyId, level, gridColumns, moreButtonColumnPosition, renderRow, } = props;
+    const { isOpen, data, keyId, level, gridColumns, moreButtonColumnPosition, renderRow, variant, } = props;
     if (!data || !data.length) {
         return null;
     }
-    return (_jsx(Collapse, { in: isOpen, unmountOnExit: true, children: _jsxs(NestedRows, { "$level": level, "$isShowConnector": isShowConnector, children: [initialVisibleChildren.map(({ children, options, ...nestedRow }) => {
+    return (_jsx(Collapse, { in: isOpen, unmountOnExit: true, children: _jsxs(NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: rootCva({ variant }), children: [initialVisibleChildren.map(({ children, options, ...nestedRow }) => {
                     const nestedRowId = nestedRow[keyId];
                     return renderRow({
                         key: nestedRowId,
@@ -18,8 +27,9 @@ export const NestedChildren = memo((props) => {
                         options,
                         nestedChildren: children,
                         level: nextLevel,
+                        className: dataGridRowClassnames.nestedChildren,
                     });
-                }), isOpen && (_jsxs(_Fragment, { children: [_jsx(Collapse, { in: isShowAllChildren, component: "li", unmountOnExit: true, children: _jsx(NestedRows, { "$level": level, "$isShowConnector": isShowConnector, children: otherChildren.map(({ children, options, ...nestedRow }) => {
+                }), isOpen && (_jsxs(_Fragment, { children: [_jsx(Collapse, { in: isShowAllChildren, component: "li", unmountOnExit: true, children: _jsx(NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: nestedChildrenClassnames.additionalRows, children: otherChildren.map(({ children, options, ...nestedRow }) => {
                                     const nestedRowId = nestedRow[keyId];
                                     return renderRow({
                                         key: nestedRowId,
@@ -27,7 +37,7 @@ export const NestedChildren = memo((props) => {
                                         options,
                                         nestedChildren: children,
                                         level: nextLevel,
-                                        className: dataGridRowClassnames.hidden,
+                                        className: `${dataGridRowClassnames.hidden} ${dataGridRowClassnames.nestedChildren}`,
                                     });
                                 }) }) }), isShowMoreButton && (_jsx(MoreButtonRow, { "$level": nextLevel, "$isShowConnector": isShowConnector, "$gridColumns": gridColumns, children: _jsx(MoreButton, { "$moreButtonColumnPosition": moreButtonColumnPosition, variant: "link", onClick: handleToggleShowAllChildren, children: isShowAllChildren ? 'Скрыть' : 'Показать все' }) }))] }))] }) }));
-});
+};

package/components/DataGrid/Row/NestedChildren/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const nestedChildrenClassnames: {
+    root: string;
+    additionalRows: string;
+    variantSubrows: string;
+    variantTree: string;
+};

package/components/DataGrid/Row/NestedChildren/constants.js

@@ -0,0 +1,7 @@
+import { createUIKitClassname } from '../../../utils/createUIKitClassname';
+export const nestedChildrenClassnames = {
+    root: createUIKitClassname('data-grid-nested-rows'),
+    additionalRows: createUIKitClassname('data-grid-nested-rows__additional-rows'),
+    variantSubrows: createUIKitClassname('data-grid-nested-rows_variant-subrows'),
+    variantTree: createUIKitClassname('data-grid-nested-rows_variant-tree'),
+};

package/components/DataGrid/Row/NestedChildren/styles.js

@@ -1,6 +1,9 @@
 import { Button } from '../../../Button';
 import { styled } from '../../../styled';
-import { ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH } from '../../constants';
+import { dataGridCellClassnames } from '../../Cell';
+import { MOBILE_TREE_LINE_WIDTH, ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH, } from '../../constants';
+import { dataGridRowClassnames } from '../constants';
+import { nestedChildrenClassnames } from './constants';
 export const NestedRows = styled('ul', {
     shouldForwardProp: (prop) => !['$level', '$isShowConnector'].includes(prop),
 }) `
@@ -27,9 +30,26 @@ export const NestedRows = styled('ul', {
     border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 
-  /* TODO: Убрать после реализации задачи по адаптации вложенных строк https://track.astral.ru/soft/browse/UIKIT-2188 */
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
+    &::before {
+      display: none;
+    }
+    &.${nestedChildrenClassnames.variantSubrows} .${dataGridCellClassnames.root}:first-of-type {
+      display: none;
+
+      & + .${dataGridCellClassnames.root} {
+        margin-top: 0;
+      }
+    }
+
+    & .${dataGridCellClassnames.actionColumn} {
+      display: none;
+    }
+
+    /* Высота последнего декоративного элемента полная тк у AdditionalRows есть кнопка "Показать все/Скрыть" */
+    &.${nestedChildrenClassnames.additionalRows} .${dataGridRowClassnames.nestedChildren}:last-of-type::before {
+      height: 100%;
+    }
   }
 `;
 export const MoreButtonRow = styled('li', {
@@ -59,6 +79,21 @@ export const MoreButtonRow = styled('li', {
     border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
+
+   ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* 20px колонка под декоративный элемент рядом с кнопкой "Показать все/Скрыть" */
+    grid-template-columns: 20px auto;
+
+    height: 40px;
+
+    &::before {
+      left: 0;
+
+      display: block;
+
+      width: ${MOBILE_TREE_LINE_WIDTH}px;
+    }
+  }
 `;
 export const MoreButton = styled(Button, {
     shouldForwardProp: (prop) => !['$moreButtonColumnPosition'].includes(prop),
@@ -67,4 +102,8 @@ export const MoreButton = styled(Button, {
   justify-self: start;
 
   margin: ${({ theme }) => theme.spacing(0, 2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: 0;
+  }
 `;

package/components/DataGrid/Row/NestedChildren/useLogic/useLogic.d.ts

@@ -2,7 +2,7 @@ import { type MouseEvent } from 'react';
 import type { CellValue } from '../../../types';
 import { type NestedChildrenProps } from '../NestedChildren';
 type UseLogicParams<TData extends Record<string, CellValue>> = NestedChildrenProps<TData>;
-export declare const useLogic: <TData extends Record<string, unknown>>({ rowId, data, level, variant, initialVisibleChildrenCount, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ data, level, variant, initialVisibleChildrenCount, }: UseLogicParams<TData>) => {
     isShowAllChildren: boolean;
     isShowMoreButton: boolean;
     isShowConnector: boolean;

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

@@ -1,17 +1,15 @@
-import { useContext } from 'react';
-import { DataGridContext } from '../../../DataGridContext';
+import { useState } from 'react';
 import { Variant } from '../../../enums';
-export const useLogic = ({ rowId, data, level, variant, initialVisibleChildrenCount, }) => {
-    const { checkIsMoreOpened, toggleOpenMoreItems } = useContext(DataGridContext);
+export const useLogic = ({ data, level, variant, initialVisibleChildrenCount, }) => {
     const isTreeVariant = Object.is(variant, Variant.Tree);
     const nextLevel = isTreeVariant ? level + 1 : 0;
     const initialVisibleChildren = data?.slice(0, initialVisibleChildrenCount);
     const otherChildren = data?.slice(initialVisibleChildrenCount);
-    const isShowAllChildren = checkIsMoreOpened(rowId);
+    const [isShowAllChildren, setIsShowAllChildren] = useState(false);
     const isShowMoreButton = Boolean(otherChildren?.length);
     const handleToggleShowAllChildren = (event) => {
         event.stopPropagation();
-        toggleOpenMoreItems(rowId);
+        setIsShowAllChildren((prev) => !prev);
     };
     return {
         isShowAllChildren,

package/components/DataGrid/Row/Row.js

@@ -3,13 +3,12 @@ import { Fragment, memo, useCallback } from 'react';
 import { BottomDrawer } from '../../BottomDrawer';
 import { Checkbox } from '../../Checkbox';
 import { Tooltip } from '../../Tooltip';
-import { checkIsDeepEqual } from '../../utils/checkIsDeepEqual';
 import { classNames } from '../../utils/classNames';
 import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
 import { dataGridCellClassnames } from '../Cell';
 import { isGroupColumns } from '../utils';
-import { DISABLE_ROW_ATTR, dataGridGroupedColumnLabelClassnames, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
+import { DISABLE_ROW_ATTR, dataGridGroupedColumnLabelClassnames, dataGridRowCellClassnames, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
 import { NestedChildren } from './NestedChildren';
 import { BottomDrawerContent, CellStyled, CheckboxCell, ChevronIcon, CollapseButton, CollapseCell, ContentWrapper, GroupedColumnLabel, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
@@ -19,6 +18,13 @@ const rootCva = cva(dataGridRowClassnames.root, {
         isShowConnector: {
             true: dataGridRowClassnames.showConnector,
         },
+        mobileDisplayVariant: {
+            cards: dataGridRowClassnames.mobileVariantCards,
+            list: dataGridRowClassnames.mobileVariantList,
+        },
+        hasNestedChildren: {
+            true: dataGridRowClassnames.hasNestedChildren,
+        },
     },
 });
 const rowContentCva = cva(dataGridRowContentClassnames.root, {
@@ -38,9 +44,21 @@ const groupedColumnLabelCva = cva(dataGridGroupedColumnLabelClassnames.root, {
         },
     },
 });
-const RowComponent = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, isActive, } = useLogic(props);
-    const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, 
+const singleCellCva = cva(dataGridRowCellClassnames.single, {
+    variants: {
+        isFirstCell: {
+            true: dataGridRowCellClassnames.firstCell,
+        },
+    },
+});
+/**
+ * @deprecated Компонент Row устарел и будет удалён в будущих версиях.
+ * DataGrid переходит на модель кастомизации строк через параметр `renderRow`,
+ * который позволяет полностью контролировать рендер каждой строки.
+ */
+const RowInner = (props) => {
+    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, isActive, isSelectable, mobileDisplayVariant, rootRowElement, rootRowRef, } = useLogic(props);
+    const { className, row, options, variant, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
     // Необходимы для DataGridInfinite
     ...selfProps } = props;
@@ -68,24 +86,25 @@ const RowComponent = (props) => {
                             }), children: label }), children.map((child, childIndex) => {
                             const childCellId = `${cellId}-${childIndex}`;
                             const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
-                            return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, className: dataGridCellClassnames.grouped }, childCellId));
+                            return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: classNames(dataGridCellClassnames.grouped), rootRowElement: rootRowElement }, childCellId));
                         })] }, cellId));
             }
-            return (_jsx(CellStyled, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
+            return (_jsx(CellStyled, { className: singleCellCva({ isFirstCell }), row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), rootRowElement: rootRowElement }, cellId));
         });
     }, [
+        row,
         isOpen,
         columns,
         disabled,
         checkboxProps.checked,
         totalColumnsCount,
         sectionOffset,
+        rootRowElement,
     ]);
-    const renderRow = useCallback(({ key, ...nestedRowProps }) => (_jsx(Row, { keyId: keyId, ...nestedRowProps, variant: variant, isSelectable: isSelectable, selectedRows: selectedRows, gridColumns: gridColumns, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, activeRowId: activeRowId, columns: childrenColumns, onSelectRow: onSelectRow, onRowClick: onRowClick, totalColumnsCount: totalColumnsCount, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, onRowEnter: onRowEnter, onRowLeave: onRowLeave, sectionOffset: sectionOffset }, key)), [
+    const renderRow = useCallback(({ key, ...nestedRowProps }) => (_jsx(RowInner, { keyId: keyId, ...nestedRowProps, variant: variant, isSelectable: isSelectable, gridColumns: gridColumns, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, activeRowId: activeRowId, columns: childrenColumns, onSelectRow: onSelectRow, onRowClick: onRowClick, totalColumnsCount: totalColumnsCount, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, onRowEnter: onRowEnter, onRowLeave: onRowLeave, sectionOffset: sectionOffset }, key)), [
         keyId,
         variant,
         isSelectable,
-        selectedRows,
         gridColumns,
         isInitialExpanded,
         expandedLevel,
@@ -102,32 +121,10 @@ const RowComponent = (props) => {
         onRowEnter,
         onRowLeave,
     ]);
-    return (_jsxs(Wrapper, { className: classNames(className, rootCva({ isShowConnector })), style: rowStyles, ...selfProps, children: [_jsx(Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: _jsx(ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered, isActive }), "$gridColumns": gridColumns, [DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), _jsx(NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, 
-                // biome-ignore lint/suspicious/noTsIgnore: <>
-                // @ts-ignore
-                renderRow: renderRow }), _jsx(BottomDrawer, { ...drawerProps, children: _jsx(BottomDrawerContent, { children: disabledReasonText }) })] }));
-};
-const arePropsEqual = (prevProps, nextProps) => {
-    const deepEqualityProps = new Set(['row']);
-    // Список пропсов, которые нужно игнорировать при сравнении
-    const skipProps = new Set([
-        'selectedRows',
-        'onSelectRow',
-        'columns',
-    ]);
-    const keys = Object.keys(prevProps);
-    return keys.every((key) => {
-        const typedKey = key;
-        // Не сравниваем свойства, которые нужно пропустить
-        if (skipProps.has(typedKey)) {
-            return true;
-        }
-        const prevValue = prevProps[typedKey];
-        const nextValue = nextProps[typedKey];
-        if (deepEqualityProps.has(typedKey)) {
-            return checkIsDeepEqual(prevValue, nextValue);
-        }
-        return prevValue === nextValue;
-    });
+    return (_jsxs(Wrapper, { className: classNames(className, rootCva({
+            isShowConnector,
+            mobileDisplayVariant,
+            hasNestedChildren: Boolean(nestedChildren?.length),
+        })), style: rowStyles, ...selfProps, ref: rootRowRef, children: [_jsx(Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: _jsx(ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered, isActive }), "$gridColumns": gridColumns, [DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), _jsx(NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, renderRow: renderRow }), _jsx(BottomDrawer, { ...drawerProps, children: _jsx(BottomDrawerContent, { children: disabledReasonText }) })] }, `row-${rowId}`));
 };
-export const Row = memo(RowComponent, arePropsEqual);
+export const Row = memo(RowInner);

package/components/DataGrid/Row/RowContext/RowContext.d.ts

@@ -1,8 +1,17 @@
-/// <reference types="react" />
+import { type ChangeEvent } from 'react';
 export type RowContextProps = {
     isDisabled: boolean;
+    isSelectable?: boolean;
     disabledReason?: string;
     addDisabledRow: (disabledReason?: string) => void;
     removeDisabledRow: () => void;
+    row: Record<string, unknown>;
+    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;
+    itemProps?: object;
+    isSelected?: boolean;
 };
 export declare const RowContext: import("react").Context<RowContextProps>;

package/components/DataGrid/Row/RowContext/RowContext.js

@@ -1,6 +1,15 @@
 import { createContext } from 'react';
 export const RowContext = createContext({
     isDisabled: false,
+    isSelectable: false,
     addDisabledRow: () => undefined,
     removeDisabledRow: () => undefined,
+    row: {},
+    onSelectRow: () => () => undefined,
+    onRowEnter: () => undefined,
+    onRowLeave: () => undefined,
+    registerRowElement: () => undefined,
+    unregisterRowElement: () => undefined,
+    itemProps: {},
+    isSelected: false,
 });

package/components/DataGrid/Row/RowContext/RowProvider/RowProvider.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
-type RowContextProviderProps = {
+import { type RowContextProps } from '../RowContext';
+type RowContextProviderProps = Pick<RowContextProps, 'row' | 'itemProps' | 'onSelectRow' | 'onRowEnter' | 'onRowLeave' | 'registerRowElement' | 'unregisterRowElement' | 'isSelectable' | 'isSelected'> & {
     children: ReactNode;
 };
-export declare const RowContextProvider: ({ children }: RowContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RowContextProvider: ({ row, itemProps, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, children, isSelectable, isSelected, }: RowContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/DataGrid/Row/RowContext/RowProvider/RowProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { RowContext } from '../RowContext';
-export const RowContextProvider = ({ children }) => {
+export const RowContextProvider = ({ row, itemProps, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, children, isSelectable, isSelected, }) => {
     const [isDisabled, setDisabled] = useState(false);
     const [disabledReason, setDisabledReason] = useState();
     const addDisabledRow = useCallback((reason) => {
@@ -14,9 +14,32 @@ export const RowContextProvider = ({ children }) => {
     }, []);
     const contextValue = useMemo(() => ({
         isDisabled,
+        isSelectable,
         disabledReason,
         addDisabledRow,
         removeDisabledRow,
-    }), [isDisabled, disabledReason, addDisabledRow, removeDisabledRow]);
+        row,
+        itemProps,
+        onSelectRow,
+        onRowEnter,
+        onRowLeave,
+        registerRowElement,
+        unregisterRowElement,
+        isSelected,
+    }), [
+        isDisabled,
+        isSelectable,
+        disabledReason,
+        addDisabledRow,
+        removeDisabledRow,
+        row,
+        itemProps,
+        onSelectRow,
+        onRowEnter,
+        onRowLeave,
+        registerRowElement,
+        unregisterRowElement,
+        isSelected,
+    ]);
     return (_jsx(RowContext.Provider, { value: contextValue, children: children }));
 };

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

@@ -7,6 +7,11 @@ export declare const dataGridRowClassnames: {
     hover: string;
     hasPinnedColumns: string;
     checkbox: string;
+    mobileVariantCards: string;
+    mobileVariantList: string;
+    nestedChildren: string;
+    hasOpenChildren: string;
+    hasNestedChildren: string;
 };
 export declare const dataGridRowContentClassnames: {
     root: string;
@@ -16,6 +21,7 @@ export declare const dataGridRowContentClassnames: {
 export declare const dataGridRowCellClassnames: {
     single: string;
     grouped: string;
+    firstCell: string;
 };
 export declare const dataGridGroupedColumnLabelClassnames: {
     root: string;

package/components/DataGrid/Row/constants.js

@@ -8,6 +8,11 @@ export const dataGridRowClassnames = {
     hover: createUIKitClassname('data-grid__row_hover'),
     hasPinnedColumns: createUIKitClassname('data-grid__row_has-pinned-columns'),
     checkbox: createUIKitClassname('data-grid__row-checkbox'),
+    mobileVariantCards: createUIKitClassname('data-grid__row_mobile-variant-cards'),
+    mobileVariantList: createUIKitClassname('data-grid__row_mobile-variant-list'),
+    nestedChildren: createUIKitClassname('data-grid__row-nested-children'),
+    hasOpenChildren: createUIKitClassname('data-grid__row_has-open-children'),
+    hasNestedChildren: createUIKitClassname('data-grid__row_has-nested-children'),
 };
 export const dataGridRowContentClassnames = {
     root: createUIKitClassname('data-grid__row-content'),
@@ -17,6 +22,7 @@ export const dataGridRowContentClassnames = {
 export const dataGridRowCellClassnames = {
     single: createUIKitClassname('data-grid__row-cell_single'),
     grouped: createUIKitClassname('data-grid__row-cell_grouped'),
+    firstCell: createUIKitClassname('data-grid__row-cell_first'),
 };
 export const dataGridGroupedColumnLabelClassnames = {
     root: createUIKitClassname('data-grid-grouped-column-label'),

package/components/DataGrid/Row/styles.js

@@ -2,9 +2,9 @@ import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
 import { IconButton } from '../../IconButton';
 import { styled } from '../../styled';
 import { Typography } from '../../Typography';
-import { Cell } from '../Cell';
-import { ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH } from '../constants';
-import { dataGridGroupedColumnLabelClassnames, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
+import { Cell, dataGridCellClassnames } from '../Cell';
+import { MOBILE_TREE_LINE_WIDTH, ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH, } from '../constants';
+import { dataGridGroupedColumnLabelClassnames, dataGridRowCellClassnames, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
 export const Wrapper = styled.li `
   --level: 0;
   position: relative;
@@ -45,6 +45,90 @@ export const Wrapper = styled.li `
     &:first-of-type {
       padding-top: ${({ theme }) => theme.spacing(1)};
     }
+
+    &.${dataGridRowClassnames.mobileVariantCards} {
+      border-bottom: none;
+
+      &:not(.${dataGridRowClassnames.nestedChildren}) {
+        padding: ${({ theme }) => theme.spacing(5, 4, 4)};
+
+        background-color: ${({ theme }) => theme.palette.background.default};
+        border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        border-radius: ${({ theme }) => theme.shape.medium};
+      }
+    }
+
+    &.${dataGridRowClassnames.hasNestedChildren} {
+      :not(.${dataGridRowClassnames.nestedChildren}) .${dataGridCellClassnames.root}:last-of-type {
+        padding-bottom: ${({ theme }) => theme.spacing(3)};
+      }
+
+      /* Ко всем ячейкам кроме первой применяем декоративный элемент слева и добавляем отступы для выравнивания с NestedChildren */
+      &:not(.${dataGridRowClassnames.nestedChildren}) > .${dataGridRowContentClassnames.root} .${dataGridCellClassnames.root}:not(.${dataGridRowCellClassnames.firstCell}) {
+        position: relative;
+
+        margin-top: 0;
+        padding-top: ${({ theme }) => theme.spacing(3)};
+        padding-left: ${({ theme }) => theme.spacing(5)};
+
+        &::before {
+          content: '';
+
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+
+          width: 0;
+
+          border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+        }
+      }
+
+      /* L-коннектор применяем ко 2 ячейки основной строки */
+      &:not(.${dataGridRowClassnames.nestedChildren})
+       > .${dataGridRowContentClassnames.root} .${dataGridCellClassnames.root}.${dataGridRowCellClassnames.firstCell} 
+        + .${dataGridCellClassnames.root} {
+        &::after {
+          content: '';
+
+          position: absolute;
+          top: ${({ theme }) => theme.spacing(3)};
+          left: 0;
+
+          width: ${MOBILE_TREE_LINE_WIDTH}px;
+          height: ${({ theme }) => theme.spacing(2)};
+
+          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+          border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+          border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
+        }
+      }  
+    }
+
+    &.${dataGridRowClassnames.nestedChildren} {
+      padding: ${({ theme }) => theme.spacing(3, 0, 3, 5)};
+
+      &::before {
+        content: '';
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: unset;
+
+        display: block;
+
+        width: 0;
+
+        border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+      }
+
+      &:last-of-type::before {
+        /* Высота последнего декоративного элемента закрывает отступ между компонентами Row */
+        height: ${({ theme }) => theme.spacing(3)};
+      }
+    }
   }
 `;
 export const ContentWrapper = styled.div `
@@ -74,6 +158,21 @@ export const ContentWrapper = styled.div `
     }
   }
 
+  /* L-коннектор для nestedChildren на мобильных устройствах */
+  .${dataGridRowClassnames.nestedChildren} &::before {
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      left: -20px;
+      transform: none;
+
+      display: block;
+
+      width: ${MOBILE_TREE_LINE_WIDTH}px;
+
+      /* Высота 8px для выравнивания с названием колонки первой ячейки */
+      height: ${({ theme }) => theme.spacing(2)};
+    }
+  }
+
   &.${dataGridRowContentClassnames.active} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }

package/components/DataGrid/Row/useLogic/hooks/useMobileLogic.d.ts

@@ -1,4 +1,5 @@
 export declare const useMobileLogic: () => {
+    isMobile: boolean;
     isDrawerOpen: boolean;
     handleOpenDrawer: () => void;
     handleCloseDrawer: () => void;

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

@@ -11,5 +11,5 @@ export const useMobileLogic = () => {
     const handleCloseDrawer = () => {
         setIsDrawerOpen(false);
     };
-    return { isDrawerOpen, handleOpenDrawer, handleCloseDrawer };
+    return { isMobile, isDrawerOpen, handleOpenDrawer, handleCloseDrawer };
 };