@astral/ui 4.45.0 → 4.47.0

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

@@ -41,11 +41,13 @@ exports.StyledDivider = (0, styled_1.styled)(Divider_1.Divider) `
   border-width: 1px;
 `;
 exports.LoaderWrapper = styled_1.styled.div `
-  height: 2px;
+  position: sticky;
+  z-index: ${({ theme }) => theme.zIndex.fab};
+  left: 0;
 `;
 exports.StyledLinearProgress = (0, styled_1.styled)(LinearProgress_1.default) `
   height: 2px;
-  
+
   .${LinearProgress_1.linearProgressClasses.barColorPrimary} {
     background-color: ${({ theme }) => theme.palette.primary[800]};
   }

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

@@ -0,0 +1,35 @@
+import { type BodyProps } from '../Body';
+import { type HeadProps } from '../Head';
+import { type CellValue, type DataGridRow } from '../types';
+import type { PinnedSection } from './types';
+export type PinnedSectionsProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    /**
+     * Конфигурация закрепленных секций
+     */
+    sections: PinnedSection<TData>[];
+    /**
+     * Конфигурация ширины колонок
+     */
+    gridColumns: string;
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
+    /**
+     * Если true, таблица будет заблокирована для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Параметры предназначены для конфигурации таблицы
+     */
+    bodyProps: Omit<BodyProps<TData>, 'gridColumns' | 'columns'>;
+    /**
+     * Параметры предназначены для конфигурации шапки таблицы
+     */
+    headProps: Omit<HeadProps<TData, TSortField>, 'columns' | 'gridColumns'>;
+    /**
+     * Флаг для отображения placeholder при отсутствии данных
+     */
+    isNoData?: boolean;
+};
+export declare const PinnedSections: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ gridColumns, className, isDisabled, headProps, bodyProps, sections, isNoData, }: PinnedSectionsProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;

package/node/components/DataGrid/PinnedSections/PinnedSections.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PinnedSections = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const getInertProps_1 = require("../../utils/getInertProps");
+const Section_1 = require("./Section");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const PinnedSections = ({ gridColumns, className, isDisabled, headProps, bodyProps, sections, isNoData, }) => {
+    const { pinnedContainerStyles, sectionOffsets } = (0, useLogic_1.useLogic)({ sections });
+    return ((0, jsx_runtime_1.jsx)(styles_1.PinnedColumnsContainer, { "$gridColumns": gridColumns, className: className, ...(0, getInertProps_1.getInertProps)(isDisabled), style: pinnedContainerStyles, children: sections.map(({ columns, position }) => {
+            return ((0, jsx_runtime_1.jsx)(Section_1.Section, { columns: columns, position: position, sectionOffset: sectionOffsets[position], bodyProps: bodyProps, headProps: headProps, isNoData: isNoData }, position));
+        }) }));
+};
+exports.PinnedSections = PinnedSections;

package/node/components/DataGrid/PinnedSections/Section/Section.d.ts

@@ -0,0 +1,3 @@
+import type { DataGridRow } from '../../types';
+import type { SectionProps } from './types';
+export declare const Section: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ columns, position, isNoData, headProps, bodyProps, sectionOffset, }: SectionProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element | null;

package/node/components/DataGrid/PinnedSections/Section/Section.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Body_1 = require("../../Body");
+const constants_1 = require("../../constants");
+const Head_1 = require("../../Head");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const Section = ({ columns, position, isNoData, headProps, bodyProps, sectionOffset, }) => {
+    const { classnames, gridColumns, shouldNotRenderSection } = (0, useLogic_1.useLogic)({
+        position,
+        isNoData,
+        columns,
+    });
+    if (shouldNotRenderSection) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(styles_1.DataGridSection, { className: classnames, children: [!isNoData && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, columns: columns, gridColumns: gridColumns, sectionOffset: sectionOffset })), (0, jsx_runtime_1.jsx)(Body_1.Body, { ...bodyProps, columns: columns, gridColumns: gridColumns, sectionOffset: sectionOffset, className: constants_1.dataGridClassnames.body })] }));
+};
+exports.Section = Section;

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

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

package/node/components/DataGrid/PinnedSections/Section/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("./Section"), exports);

package/node/components/DataGrid/PinnedSections/Section/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DataGridSection: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DataGrid/PinnedSections/Section/styles.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridSection = void 0;
+const styled_1 = require("../../../styled");
+const constants_1 = require("../../constants");
+exports.DataGridSection = styled_1.styled.div `
+  display: flex;
+  grid-column: calc(var(--left-columns-count) + 1) / calc(var(--right-columns-count) * -1 - 1);
+  flex-direction: column;
+
+  min-width: 0;
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+
+  & .${constants_1.dataGridClassnames.header} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab - 1};
+    top: 0;
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+  }
+
+  &.${constants_1.dataGridClassnames.pinnedSectionNoData} {
+    grid-column: 1 / -1;
+  }
+
+  &.${constants_1.dataGridClassnames.leftPinnedSection} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab};
+    left: 0;
+
+    container-name: data-grid-left-pinned-section;
+    container-type: scroll-state;
+    grid-column: 1 / calc(var(--left-columns-count) + 1);
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      z-index: ${({ theme }) => theme.zIndex.fab};
+      top: 0;
+      right: 0;
+
+      height: 100%;
+
+      border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    }
+
+    & .${constants_1.dataGridClassnames.header} {
+      left: 0;
+    }
+      
+
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    @container data-grid-left-pinned-section scroll-state(stuck: left) {
+      &::after {
+        /* Ширина видимой части тени */
+        width: 4px;
+
+        box-shadow: 3px 0 4px 0 #63636326;
+      }
+    }
+  }
+
+  &.${constants_1.dataGridClassnames.rightPinnedSection} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab};
+    right: 0;
+
+    container-name: data-grid-right-pinned-section;
+    container-type: scroll-state;
+    grid-column: calc(var(--right-columns-count) * -1 - 1) / -1;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      z-index: ${({ theme }) => theme.zIndex.fab};
+      top: 0;
+      left: 0;
+
+      height: 100%;
+
+      border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    }
+
+    & .${constants_1.dataGridClassnames.header} {
+      right: 0;
+    }
+
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    @container data-grid-right-pinned-section scroll-state(stuck: right) {
+      &::after {
+        /* Ширина видимой части тени */
+        width: 4px;
+
+        box-shadow: -3px 0 4px 0 #63636326;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,26 @@
+import { type BodyProps } from '../../Body';
+import { type HeadProps } from '../../Head';
+import { type CellValue, type DataGridColumns, type DataGridRow } from '../../types';
+export type SectionProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    /**
+     * Параметры предназначены для конфигурации таблицы
+     */
+    bodyProps: Omit<BodyProps<TData>, 'gridColumns' | 'columns'>;
+    /**
+     * Параметры предназначены для конфигурации шапки таблицы
+     */
+    headProps: Omit<HeadProps<TData, TSortField>, 'columns' | 'gridColumns'>;
+    /**
+     * Флаг для отображения placeholder при отсутствии данных
+     */
+    isNoData?: boolean;
+    /**
+     * Конфигурация колонок для секции
+     */
+    columns: DataGridColumns<TData>[];
+    /**
+     * Позиция секции
+     */
+    position: 'left' | 'center' | 'right';
+    sectionOffset: number;
+};

package/node/components/DataGrid/PinnedSections/Section/types.js

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

package/node/components/DataGrid/PinnedSections/Section/useLogic/index.d.ts

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

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

@@ -0,0 +1,9 @@
+import type { CellValue, DataGridRow } from '../../..//types';
+import { type SectionProps } from '../types';
+type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow> = Pick<SectionProps<TData>, 'isNoData' | 'position' | 'columns'>;
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow>({ position, isNoData, columns, }: UseLogicParams<TData>) => {
+    classnames: string;
+    gridColumns: string;
+    shouldNotRenderSection: boolean;
+};
+export {};

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const classNames_1 = require("../../../../utils/classNames");
+const constants_1 = require("../../../constants");
+const utils_1 = require("../../../utils");
+const useLogic = ({ position, isNoData, columns, }) => {
+    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
+        [constants_1.dataGridClassnames.leftPinnedSection]: position === 'left',
+        [constants_1.dataGridClassnames.rightPinnedSection]: position === 'right',
+        [constants_1.dataGridClassnames.pinnedSectionNoData]: isNoData && position === 'center',
+    }), []);
+    const shouldNotRenderSection = (isNoData && position !== 'center') || !columns || columns.length === 0;
+    const gridColumns = shouldNotRenderSection
+        ? ''
+        : (0, utils_1.getGridTemplateColumns)(columns);
+    return { classnames, gridColumns, shouldNotRenderSection };
+};
+exports.useLogic = useLogic;

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

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

package/node/components/DataGrid/PinnedSections/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("./PinnedSections"), exports);

package/node/components/DataGrid/PinnedSections/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const PinnedColumnsContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    $gridColumns: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PinnedColumnsContainer = void 0;
+const styled_1 = require("../../styled");
+const constants_1 = require("../constants");
+exports.PinnedColumnsContainer = styled_1.styled.div `
+  overflow: auto;
+  display: grid;
+  grid-template-columns: ${({ $gridColumns }) => $gridColumns};
+
+  width: 100%;
+  height: 100%;
+
+  &.${constants_1.dataGridClassnames.disabled} {
+   pointer-events: none;
+
+  background: ${({ theme }) => theme.palette.background.element};
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  mix-blend-mode: luminosity;
+  }
+`;

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

@@ -0,0 +1,5 @@
+import type { CellValue, DataGridColumns, DataGridRow } from '../types';
+export type PinnedSection<TData extends Record<string, CellValue> = DataGridRow> = {
+    columns: DataGridColumns<TData>[];
+    position: 'left' | 'center' | 'right';
+};

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

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

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

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

package/node/components/DataGrid/PinnedSections/useLogic/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("./useLogic"), exports);

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

@@ -0,0 +1,9 @@
+import { type CSSProperties } from 'react';
+import { type CellValue, type DataGridRow } from '../../types';
+import { type PinnedSectionsProps } from '../PinnedSections';
+type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow> = Pick<PinnedSectionsProps<TData>, 'sections'>;
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow>({ sections, }: UseLogicParams<TData>) => {
+    pinnedContainerStyles: CSSProperties;
+    sectionOffsets: Record<string, number>;
+};
+export {};

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const useLogic = ({ sections, }) => {
+    const pinnedContainerStyles = {
+        '--left-columns-count': sections.find((section) => section.position === 'left')?.columns
+            ?.length ?? 0,
+        '--right-columns-count': sections.find((section) => section.position === 'right')?.columns
+            ?.length ?? 0,
+    };
+    const sectionOffsets = (0, react_1.useMemo)(() => {
+        const offsets = {};
+        let currentOffset = 0;
+        sections.forEach((section) => {
+            offsets[section.position] = currentOffset;
+            currentOffset += section.columns?.length ?? 0;
+        });
+        return offsets;
+    }, [sections]);
+    return { pinnedContainerStyles, sectionOffsets };
+};
+exports.useLogic = useLogic;

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

@@ -30,7 +30,7 @@ exports.NestedChildren = (0, react_1.memo)((props) => {
                                         options,
                                         nestedChildren: children,
                                         level: nextLevel,
-                                        className: constants_1.dataGridClassnames.hidden,
+                                        className: constants_1.dataGridRowClassnames.hidden,
                                     });
                                 }) }) }), 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 ? 'Скрыть' : 'Показать все' }) }))] }))] }) }));
 });

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

@@ -1,95 +1,2 @@
-import { type ChangeEvent, type ReactNode } from 'react';
-import { type Variant } from '../enums';
-import type { CellValue, DataGridColumns, DataGridRowOptions } from '../types';
-export type RowProps<TData extends Record<string, CellValue>> = {
-    /**
-     * Название класса, применяется к корневому компоненту
-     */
-    className?: string;
-    /**
-     * Поле, которое будет использоваться в качестве ключа
-     */
-    keyId: keyof TData;
-    /**
-     * Данные строки для отображения
-     */
-    row: TData;
-    /**
-     * Конфигурация колонок для таблицы
-     */
-    columns: DataGridColumns<TData>[];
-    /**
-     * Вариант отображения вложенных элементов
-     */
-    variant: `${Variant}`;
-    /**
-     * Конфигурация ширины колонок
-     */
-    gridColumns: string;
-    /**
-     * Уровень вложенности в дереве
-     */
-    level: number;
-    /**
-     * Вложенные элементы
-     */
-    nestedChildren: Array<TData & {
-        options?: DataGridRowOptions<TData>;
-    }>;
-    /**
-     * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
-     */
-    activeRowId?: string;
-    /**
-     * Если true, то дерево будет раскрыто по умолчанию
-     */
-    isInitialExpanded: boolean;
-    /**
-     * Уровень раскрытия дерева по умолчанию, при isInitialExpanded=true
-     */
-    expandedLevel: number;
-    /**
-     * Количество отображаемых по умолчанию дочерних элементов
-     */
-    initialVisibleChildrenCount: number;
-    /**
-     * Номер колонки, в которой будет расположена кнопка "Показать все"
-     * Работает только для `variant="subrows"`
-     */
-    moreButtonColumnPosition: number;
-    /**
-     * Если false, кнопка разворачивания элементов не показывается
-     * Работает только для `variant="subrows"`
-     */
-    isVisibleCollapseButton: boolean;
-    /**
-     * Если true, то будет отображаться чекбокс для выбора элемента
-     */
-    isSelectable?: boolean;
-    /**
-     * Флаг выбора текущей строки
-     */
-    isSelected?: boolean;
-    /**
-     * Массив выбранных строк
-     */
-    selectedRows?: TData[];
-    /**
-     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
-     * @default '-'
-     */
-    emptyCellValue?: ReactNode;
-    /**
-     * Дополнительные настройки строки
-     */
-    options?: DataGridRowOptions<TData>;
-    /**
-     * Обработчик выбора строки
-     */
-    onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Обработчик клика строки таблицы
-     */
-    onRowClick?: (row: TData) => void;
-};
+import type { RowProps } from './types';
 export declare const Row: <TData extends Record<string, unknown>>(props: RowProps<TData>) => import("react/jsx-runtime").JSX.Element;

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

@@ -13,8 +13,8 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const utils_1 = require("./utils");
 const RowComponent = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, } = (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, 
+    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, } = (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, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
     // Необходимы для DataGridInfinite
     ...selfProps } = props;
@@ -26,17 +26,26 @@ const RowComponent = (props) => {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRenderCollapseButton && ((0, jsx_runtime_1.jsx)(styles_1.CollapseCell, { children: (0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(disabled), onClick: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps }) }))] }));
     };
     const renderCells = (0, react_1.useCallback)(() => {
+        const lastCellGlobalIndex = (totalColumnsCount ?? columns.length) - 1;
         const availableCellsByIndex = !isDisabledLastCell
-            ? [columns.length - 1]
+            ? [lastCellGlobalIndex]
             : undefined;
         return columns?.map((cell, index) => {
             const cellId = `${rowId}-${index}`;
-            const isDisabledCell = (0, utils_1.checkIsDisabled)(disabled, availableCellsByIndex, index);
-            const isFirstCell = !index;
+            const globalIndex = (sectionOffset ?? 0) + index;
+            const isDisabledCell = (0, utils_1.checkIsDisabled)(disabled, availableCellsByIndex, globalIndex);
+            const isFirstCell = globalIndex === 0;
             return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { "$level": isFirstCell ? level : 0, row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
         });
-    }, [isOpen, columns, disabled, checkboxProps.checked]);
-    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 }, key)), [
+    }, [
+        isOpen,
+        columns,
+        disabled,
+        checkboxProps.checked,
+        totalColumnsCount,
+        sectionOffset,
+    ]);
+    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)), [
         keyId,
         variant,
         isSelectable,
@@ -46,12 +55,18 @@ const RowComponent = (props) => {
         expandedLevel,
         initialVisibleChildrenCount,
         moreButtonColumnPosition,
+        sectionOffset,
+        totalColumnsCount,
         activeRowId,
         childrenColumns,
         onSelectRow,
         onRowClick,
+        registerRowElement,
+        unregisterRowElement,
+        onRowEnter,
+        onRowLeave,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$level": level, "$isShowConnector": isShowConnector, className: className, ...selfProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "$level": level, "$isShowConnector": isShowConnector, "$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, 
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$level": level, "$isShowConnector": isShowConnector, className: className, ...selfProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "$level": level, "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), "$isShowConnector": isShowConnector, "$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 })] }));

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

@@ -1,4 +1,6 @@
 export declare const DISABLE_ROW_ATTR = "data-row-disable";
-export declare const dataGridClassnames: {
+export declare const dataGridRowClassnames: {
     hidden: string;
+    hover: string;
+    hasPinnedColumns: string;
 };

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

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataGridClassnames = exports.DISABLE_ROW_ATTR = void 0;
+exports.dataGridRowClassnames = exports.DISABLE_ROW_ATTR = void 0;
 const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.DISABLE_ROW_ATTR = 'data-row-disable';
-exports.dataGridClassnames = {
+exports.dataGridRowClassnames = {
     hidden: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_hidden'),
+    hover: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_hover'),
+    hasPinnedColumns: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_has-pinned-columns'),
 };