@astral/ui 4.74.0 → 4.76.0

package/node/components/DataGrid/MobileSkeleton/styles.js

@@ -2,11 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Actions = exports.Cell = exports.RowWrapper = exports.Root = void 0;
 const styled_1 = require("../../styled");
+const constants_1 = require("../constants");
 exports.Root = styled_1.styled.div `
   display: flex;
   flex-direction: column;
 
   width: 100%;
+  
+  &.${constants_1.dataGridClassnames.mobileVariantCards} {
+    gap: ${({ theme }) => theme.spacing(2)};
+  }
 `;
 exports.RowWrapper = styled_1.styled.div `
   display: flex;
@@ -27,6 +32,13 @@ exports.RowWrapper = styled_1.styled.div `
   &:last-of-type {
     padding-bottom: 0;
   }
+
+  &.${constants_1.dataGridClassnames.mobileVariantCards} {
+    padding: ${({ theme }) => theme.spacing(5, 4, 4)};
+
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
 `;
 exports.Cell = styled_1.styled.div `
   display: flex;

package/node/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/node/components/DataGrid/Row/NestedChildren/NestedChildren.js

@@ -2,18 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NestedChildren = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const Collapse_1 = require("../../../Collapse");
+const cva_1 = require("../../../utils/cva");
 const constants_1 = require("../constants");
+const constants_2 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-exports.NestedChildren = (0, react_1.memo)((props) => {
+const rootCva = (0, cva_1.cva)(constants_2.nestedChildrenClassnames.root, {
+    variants: {
+        variant: {
+            subrows: constants_2.nestedChildrenClassnames.variantSubrows,
+            tree: constants_2.nestedChildrenClassnames.variantTree,
+        },
+    },
+});
+const NestedChildren = (props) => {
     const { isShowAllChildren, isShowMoreButton, isShowConnector, nextLevel, initialVisibleChildren, otherChildren, handleToggleShowAllChildren, } = (0, useLogic_1.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 ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(styles_1.NestedRows, { "$level": level, "$isShowConnector": isShowConnector, children: [initialVisibleChildren.map(({ children, options, ...nestedRow }) => {
+    return ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(styles_1.NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: rootCva({ variant }), children: [initialVisibleChildren.map(({ children, options, ...nestedRow }) => {
                     const nestedRowId = nestedRow[keyId];
                     return renderRow({
                         key: nestedRowId,
@@ -21,8 +30,9 @@ exports.NestedChildren = (0, react_1.memo)((props) => {
                         options,
                         nestedChildren: children,
                         level: nextLevel,
+                        className: constants_1.dataGridRowClassnames.nestedChildren,
                     });
-                }), isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isShowAllChildren, component: "li", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.NestedRows, { "$level": level, "$isShowConnector": isShowConnector, children: otherChildren.map(({ children, options, ...nestedRow }) => {
+                }), isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isShowAllChildren, component: "li", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: constants_2.nestedChildrenClassnames.additionalRows, children: otherChildren.map(({ children, options, ...nestedRow }) => {
                                     const nestedRowId = nestedRow[keyId];
                                     return renderRow({
                                         key: nestedRowId,
@@ -30,7 +40,8 @@ exports.NestedChildren = (0, react_1.memo)((props) => {
                                         options,
                                         nestedChildren: children,
                                         level: nextLevel,
-                                        className: constants_1.dataGridRowClassnames.hidden,
+                                        className: `${constants_1.dataGridRowClassnames.hidden} ${constants_1.dataGridRowClassnames.nestedChildren}`,
                                     });
                                 }) }) }), isShowMoreButton && ((0, jsx_runtime_1.jsx)(styles_1.MoreButtonRow, { "$level": nextLevel, "$isShowConnector": isShowConnector, "$gridColumns": gridColumns, children: (0, jsx_runtime_1.jsx)(styles_1.MoreButton, { "$moreButtonColumnPosition": moreButtonColumnPosition, variant: "link", onClick: handleToggleShowAllChildren, children: isShowAllChildren ? 'Скрыть' : 'Показать все' }) }))] }))] }) }));
-});
+};
+exports.NestedChildren = NestedChildren;

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nestedChildrenClassnames = void 0;
+const createUIKitClassname_1 = require("../../../utils/createUIKitClassname");
+exports.nestedChildrenClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-nested-rows'),
+    additionalRows: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-nested-rows__additional-rows'),
+    variantSubrows: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-nested-rows_variant-subrows'),
+    variantTree: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-nested-rows_variant-tree'),
+};

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

@@ -3,7 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MoreButton = exports.MoreButtonRow = exports.NestedRows = void 0;
 const Button_1 = require("../../../Button");
 const styled_1 = require("../../../styled");
+const Cell_1 = require("../../Cell");
 const constants_1 = require("../../constants");
+const constants_2 = require("../constants");
+const constants_3 = require("./constants");
 exports.NestedRows = (0, styled_1.styled)('ul', {
     shouldForwardProp: (prop) => !['$level', '$isShowConnector'].includes(prop),
 }) `
@@ -30,9 +33,26 @@ exports.NestedRows = (0, styled_1.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;
+    }
+    &.${constants_3.nestedChildrenClassnames.variantSubrows} .${Cell_1.dataGridCellClassnames.root}:first-of-type {
+      display: none;
+
+      & + .${Cell_1.dataGridCellClassnames.root} {
+        margin-top: 0;
+      }
+    }
+
+    & .${Cell_1.dataGridCellClassnames.actionColumn} {
+      display: none;
+    }
+
+    /* Высота последнего декоративного элемента полная тк у AdditionalRows есть кнопка "Показать все/Скрыть" */
+    &.${constants_3.nestedChildrenClassnames.additionalRows} .${constants_2.dataGridRowClassnames.nestedChildren}:last-of-type::before {
+      height: 100%;
+    }
   }
 `;
 exports.MoreButtonRow = (0, styled_1.styled)('li', {
@@ -62,6 +82,21 @@ exports.MoreButtonRow = (0, styled_1.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: ${constants_1.MOBILE_TREE_LINE_WIDTH}px;
+    }
+  }
 `;
 exports.MoreButton = (0, styled_1.styled)(Button_1.Button, {
     shouldForwardProp: (prop) => !['$moreButtonColumnPosition'].includes(prop),
@@ -70,4 +105,8 @@ exports.MoreButton = (0, styled_1.styled)(Button_1.Button, {
   justify-self: start;
 
   margin: ${({ theme }) => theme.spacing(0, 2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: 0;
+  }
 `;

package/node/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/node/components/DataGrid/Row/NestedChildren/useLogic/useLogic.js

@@ -2,19 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const DataGridContext_1 = require("../../../DataGridContext");
 const enums_1 = require("../../../enums");
-const useLogic = ({ rowId, data, level, variant, initialVisibleChildrenCount, }) => {
-    const { checkIsMoreOpened, toggleOpenMoreItems } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
+const useLogic = ({ data, level, variant, initialVisibleChildrenCount, }) => {
     const isTreeVariant = Object.is(variant, enums_1.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] = (0, react_1.useState)(false);
     const isShowMoreButton = Boolean(otherChildren?.length);
     const handleToggleShowAllChildren = (event) => {
         event.stopPropagation();
-        toggleOpenMoreItems(rowId);
+        setIsShowAllChildren((prev) => !prev);
     };
     return {
         isShowAllChildren,

package/node/components/DataGrid/Row/Row.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const BottomDrawer_1 = require("../../BottomDrawer");
 const Checkbox_1 = require("../../Checkbox");
 const Tooltip_1 = require("../../Tooltip");
-const checkIsDeepEqual_1 = require("../../utils/checkIsDeepEqual");
 const classNames_1 = require("../../utils/classNames");
 const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
@@ -22,6 +21,13 @@ const rootCva = (0, cva_1.cva)(constants_1.dataGridRowClassnames.root, {
         isShowConnector: {
             true: constants_1.dataGridRowClassnames.showConnector,
         },
+        mobileDisplayVariant: {
+            cards: constants_1.dataGridRowClassnames.mobileVariantCards,
+            list: constants_1.dataGridRowClassnames.mobileVariantList,
+        },
+        hasNestedChildren: {
+            true: constants_1.dataGridRowClassnames.hasNestedChildren,
+        },
     },
 });
 const rowContentCva = (0, cva_1.cva)(constants_1.dataGridRowContentClassnames.root, {
@@ -41,9 +47,21 @@ const groupedColumnLabelCva = (0, cva_1.cva)(constants_1.dataGridGroupedColumnLa
         },
     },
 });
-const RowComponent = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, isActive, } = (0, useLogic_1.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 = (0, cva_1.cva)(constants_1.dataGridRowCellClassnames.single, {
+    variants: {
+        isFirstCell: {
+            true: constants_1.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, } = (0, useLogic_1.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;
@@ -71,24 +89,25 @@ const RowComponent = (props) => {
                             }), children: label }), children.map((child, childIndex) => {
                             const childCellId = `${cellId}-${childIndex}`;
                             const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
-                            return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, className: Cell_1.dataGridCellClassnames.grouped }, childCellId));
+                            return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: (0, classNames_1.classNames)(Cell_1.dataGridCellClassnames.grouped), rootRowElement: rootRowElement }, childCellId));
                         })] }, cellId));
             }
-            return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
+            return ((0, jsx_runtime_1.jsx)(styles_1.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 = (0, react_1.useCallback)(({ key, ...nestedRowProps }) => ((0, jsx_runtime_1.jsx)(exports.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 = (0, react_1.useCallback)(({ key, ...nestedRowProps }) => ((0, jsx_runtime_1.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,
@@ -105,32 +124,10 @@ const RowComponent = (props) => {
         onRowEnter,
         onRowLeave,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, rootCva({ isShowConnector })), style: rowStyles, ...selfProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered, isActive }), "$gridColumns": gridColumns, [constants_1.DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), (0, jsx_runtime_1.jsx)(NestedChildren_1.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 }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.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 (0, checkIsDeepEqual_1.checkIsDeepEqual)(prevValue, nextValue);
-        }
-        return prevValue === nextValue;
-    });
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, rootCva({
+            isShowConnector,
+            mobileDisplayVariant,
+            hasNestedChildren: Boolean(nestedChildren?.length),
+        })), style: rowStyles, ...selfProps, ref: rootRowRef, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered, isActive }), "$gridColumns": gridColumns, [constants_1.DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), (0, jsx_runtime_1.jsx)(NestedChildren_1.NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, renderRow: renderRow }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: disabledReasonText }) })] }, `row-${rowId}`));
 };
-exports.Row = (0, react_1.memo)(RowComponent, arePropsEqual);
+exports.Row = (0, react_1.memo)(RowInner);

package/node/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/node/components/DataGrid/Row/RowContext/RowContext.js

@@ -4,6 +4,15 @@ exports.RowContext = void 0;
 const react_1 = require("react");
 exports.RowContext = (0, react_1.createContext)({
     isDisabled: false,
+    isSelectable: false,
     addDisabledRow: () => undefined,
     removeDisabledRow: () => undefined,
+    row: {},
+    onSelectRow: () => () => undefined,
+    onRowEnter: () => undefined,
+    onRowLeave: () => undefined,
+    registerRowElement: () => undefined,
+    unregisterRowElement: () => undefined,
+    itemProps: {},
+    isSelected: false,
 });

package/node/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/node/components/DataGrid/Row/RowContext/RowProvider/RowProvider.js

@@ -4,7 +4,7 @@ exports.RowContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const RowContext_1 = require("../RowContext");
-const RowContextProvider = ({ children }) => {
+const RowContextProvider = ({ row, itemProps, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, children, isSelectable, isSelected, }) => {
     const [isDisabled, setDisabled] = (0, react_1.useState)(false);
     const [disabledReason, setDisabledReason] = (0, react_1.useState)();
     const addDisabledRow = (0, react_1.useCallback)((reason) => {
@@ -17,10 +17,33 @@ const RowContextProvider = ({ children }) => {
     }, []);
     const contextValue = (0, react_1.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 ((0, jsx_runtime_1.jsx)(RowContext_1.RowContext.Provider, { value: contextValue, children: children }));
 };
 exports.RowContextProvider = RowContextProvider;

package/node/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/node/components/DataGrid/Row/constants.js

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

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

@@ -48,6 +48,90 @@ exports.Wrapper = styled_1.styled.li `
     &:first-of-type {
       padding-top: ${({ theme }) => theme.spacing(1)};
     }
+
+    &.${constants_2.dataGridRowClassnames.mobileVariantCards} {
+      border-bottom: none;
+
+      &:not(.${constants_2.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};
+      }
+    }
+
+    &.${constants_2.dataGridRowClassnames.hasNestedChildren} {
+      :not(.${constants_2.dataGridRowClassnames.nestedChildren}) .${Cell_1.dataGridCellClassnames.root}:last-of-type {
+        padding-bottom: ${({ theme }) => theme.spacing(3)};
+      }
+
+      /* Ко всем ячейкам кроме первой применяем декоративный элемент слева и добавляем отступы для выравнивания с NestedChildren */
+      &:not(.${constants_2.dataGridRowClassnames.nestedChildren}) > .${constants_2.dataGridRowContentClassnames.root} .${Cell_1.dataGridCellClassnames.root}:not(.${constants_2.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(.${constants_2.dataGridRowClassnames.nestedChildren})
+       > .${constants_2.dataGridRowContentClassnames.root} .${Cell_1.dataGridCellClassnames.root}.${constants_2.dataGridRowCellClassnames.firstCell} 
+        + .${Cell_1.dataGridCellClassnames.root} {
+        &::after {
+          content: '';
+
+          position: absolute;
+          top: ${({ theme }) => theme.spacing(3)};
+          left: 0;
+
+          width: ${constants_1.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};
+        }
+      }  
+    }
+
+    &.${constants_2.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)};
+      }
+    }
   }
 `;
 exports.ContentWrapper = styled_1.styled.div `
@@ -77,6 +161,21 @@ exports.ContentWrapper = styled_1.styled.div `
     }
   }
 
+  /* L-коннектор для nestedChildren на мобильных устройствах */
+  .${constants_2.dataGridRowClassnames.nestedChildren} &::before {
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      left: -20px;
+      transform: none;
+
+      display: block;
+
+      width: ${constants_1.MOBILE_TREE_LINE_WIDTH}px;
+
+      /* Высота 8px для выравнивания с названием колонки первой ячейки */
+      height: ${({ theme }) => theme.spacing(2)};
+    }
+  }
+
   &.${constants_2.dataGridRowContentClassnames.active} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }

package/node/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/node/components/DataGrid/Row/useLogic/hooks/useMobileLogic.js

@@ -14,6 +14,6 @@ const useMobileLogic = () => {
     const handleCloseDrawer = () => {
         setIsDrawerOpen(false);
     };
-    return { isDrawerOpen, handleOpenDrawer, handleCloseDrawer };
+    return { isMobile, isDrawerOpen, handleOpenDrawer, handleCloseDrawer };
 };
 exports.useMobileLogic = useMobileLogic;

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

@@ -2,7 +2,7 @@ import { type MouseEvent, type SyntheticEvent } from 'react';
 import type { CellValue } from '../../types';
 import type { RowProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue>> = RowProps<TData>;
-export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, isSelected, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
     disabledReasonText: string | undefined;
     rowStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
@@ -870,10 +870,14 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     rowId: string;
     rowRef: (element: HTMLElement | null) => void;
     disabled: boolean | undefined;
+    isSelectable: boolean | undefined;
     isRenderCollapseButton: boolean;
     handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;
+    rootRowElement: HTMLLIElement | null;
+    rootRowRef: (element: HTMLLIElement | null) => void;
     isHovered: boolean;
     isActive: boolean;
+    mobileDisplayVariant: "list" | "cards" | undefined;
     rowProps: {
         onClick: () => void;
         onMouseMove: (event: MouseEvent<HTMLElement>) => void;
@@ -896,7 +900,6 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     };
     nestedChildrenProps: {
         isOpen: boolean;
-        rowId: string;
     };
 };
 export {};