@astral/ui 4.74.0 → 4.75.0

package/node/components/DataGrid/DataGridStorageContext/DataGridStorageProvider/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DataGridStorageProvider"), exports);

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

@@ -0,0 +1,2 @@
+export * from './DataGridStorageContext';
+export * from './DataGridStorageProvider';

package/node/components/DataGrid/DataGridStorageContext/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DataGridStorageContext"), exports);
+__exportStar(require("./DataGridStorageProvider"), exports);

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

@@ -1,6 +1,7 @@
 type MobileSkeletonProps = {
     cellsCount: number;
     rowsCount: number;
+    mobileDisplayVariant: 'cards' | 'list';
 };
-export declare const MobileSkeleton: ({ cellsCount, rowsCount, }: MobileSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MobileSkeleton: ({ cellsCount, mobileDisplayVariant, rowsCount, }: MobileSkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,11 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../../Skeleton");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("../constants");
 const styles_1 = require("./styles");
-const MobileSkeleton = ({ cellsCount, rowsCount, }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.Root, { children: Array.from({ length: rowsCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsxs)(styles_1.RowWrapper
+const rootCva = (0, cva_1.cva)(constants_1.dataGridSkeletonClassnames.list, {
+    variants: {
+        mobileDisplayVariant: {
+            cards: constants_1.dataGridClassnames.mobileVariantCards,
+            list: constants_1.dataGridClassnames.mobileVariantList,
+        },
+    },
+});
+const itemCva = (0, cva_1.cva)(constants_1.dataGridSkeletonClassnames.item, {
+    variants: {
+        mobileDisplayVariant: {
+            cards: constants_1.dataGridClassnames.mobileVariantCards,
+            list: constants_1.dataGridClassnames.mobileVariantList,
+        },
+    },
+});
+const MobileSkeleton = ({ cellsCount, mobileDisplayVariant, rowsCount, }) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.Root, { className: rootCva({ mobileDisplayVariant }), children: Array.from({ length: rowsCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsxs)(styles_1.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: Статичный скелетон
                 (0, jsx_runtime_1.jsxs)(styles_1.Cell, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 20 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 16, width: "50%" })] }, cellIndex))), (0, jsx_runtime_1.jsx)(styles_1.Actions, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: "100%", height: 40 }) })] }, rowIndex))) }));
 };

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'),