@astral/ui 4.45.0 → 4.47.0

package/components/DataGrid/useLogic/utils/syncRowsHeight/syncRowsHeight.js

@@ -0,0 +1,21 @@
+/**
+ * Синхронизирует высоту строк DataGrid на основе высоты их содержимого.
+ * Каждая строка устанавливает высоту равной максимальной высоте всех своих ячеек.
+ */
+export const syncRowsHeight = (rowsMap) => {
+    rowsMap.forEach((elements) => {
+        let maxHeight = 0;
+        elements.forEach((el) => {
+            el.style.height = '';
+        });
+        elements.forEach((el) => {
+            const height = el.offsetHeight;
+            if (height > maxHeight) {
+                maxHeight = height;
+            }
+        });
+        elements.forEach((el) => {
+            el.style.height = `${maxHeight}px`;
+        });
+    });
+};

package/components/DataGrid/utils/index.d.ts

@@ -1 +1,2 @@
 export { alignToJustifyContent } from './alignToJustifyContent';
+export { getGridTemplateColumns } from './getGridTemplateColumns';

package/components/DataGrid/utils/index.js

@@ -1 +1,2 @@
 export { alignToJustifyContent } from './alignToJustifyContent';
+export { getGridTemplateColumns } from './getGridTemplateColumns';

package/components/DataGridInfinite/useLogic/useLogic.js

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef, useState, } from 'react';
 import { Variant } from '../../DataGrid/enums';
-import { getGridTemplateColumns } from '../../DataGrid/useLogic/utils';
+import { getGridTemplateColumns } from '../../DataGrid/utils';
 import { useToggle } from '../../useToggle';
 import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';

package/node/components/ComplianceStatus/ComplianceStatus.d.ts

@@ -1,44 +1,2 @@
-import { type ReactNode } from 'react';
-type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
-type BackgroundColor = 'grey' | 'primary';
-type Variant = 'plain' | 'contained';
-export type ComplianceStatusItem = {
-    /**
-     * Текст для отображения в элементе списка
-     */
-    text: ReactNode;
-    /**
-     * Статус элемента
-     */
-    status: ItemStatus;
-};
-export type ComplianceStatusProps = {
-    /**
-     * Основной заголовок элемента
-     */
-    title?: string | null;
-    /**
-     * Пропс для добавления контента между заголовком и списком
-     */
-    subtitle?: ReactNode;
-    /**
-     * Пропс для добавления контента после списка
-     */
-    children?: ReactNode;
-    /**
-     * Элементы списка
-     */
-    itemsList: ComplianceStatusItem[];
-    /**
-     * Фоновый цвет
-     * @default grey
-     */
-    backgroundColor?: BackgroundColor;
-    /**
-     * Вариант отображения блока статусов
-     * @default contained
-     */
-    variant?: Variant;
-};
+import type { ComplianceStatusProps } from './types';
 export declare const ComplianceStatus: ({ title, itemsList, children, subtitle, backgroundColor, variant, }: ComplianceStatusProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/node/components/ComplianceStatus/ComplianceStatus.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComplianceStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
 const OverflowTypography_1 = require("../OverflowTypography");
 const Typography_1 = require("../Typography");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const ICON_BY_STATUS = {
     default: (0, jsx_runtime_1.jsx)(styles_1.EmptyIcon, {}),
@@ -11,9 +13,22 @@ const ICON_BY_STATUS = {
     reject: (0, jsx_runtime_1.jsx)(styles_1.RejectIcon, {}),
     loading: (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}),
 };
+const complianceStatus = (0, class_variance_authority_1.cva)(constants_1.complianceStatusClassnames.root, {
+    variants: {
+        backgroundColor: {
+            grey: constants_1.complianceStatusColorClassnames.grey,
+            primary: constants_1.complianceStatusColorClassnames.primary,
+        },
+        variant: {
+            contained: constants_1.complianceStatusVariantClassnames.contained,
+            outlined: constants_1.complianceStatusVariantClassnames.outlined,
+            plain: constants_1.complianceStatusVariantClassnames.plain,
+        },
+    },
+});
 const ComplianceStatus = ({ title, itemsList, children, subtitle, backgroundColor = 'grey', variant = 'contained', }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$background": backgroundColor, "$variant": variant, children: [title && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "h4", children: title })), subtitle, (0, jsx_runtime_1.jsx)(styles_1.Inner, { children: itemsList.map(({ text, status }, index) => (
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: complianceStatus({ backgroundColor, variant }), children: [title && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { className: constants_1.complianceStatusClassnames.title, variant: "h6", component: "h4", children: title })), subtitle, (0, jsx_runtime_1.jsx)(styles_1.Inner, { className: constants_1.complianceStatusClassnames.list, children: itemsList.map(({ text, status }, index) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Элементы статичны
-                (0, jsx_runtime_1.jsxs)(styles_1.Item, { children: [ICON_BY_STATUS[status], (0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: text })] }, index))) }), children] }));
+                (0, jsx_runtime_1.jsxs)(styles_1.Item, { className: constants_1.complianceStatusClassnames.item, children: [ICON_BY_STATUS[status], (0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: text })] }, index))) }), children] }));
 };
 exports.ComplianceStatus = ComplianceStatus;

package/node/components/ComplianceStatus/constants.d.ts

@@ -0,0 +1,14 @@
+import type { BackgroundColor, Variant } from './types';
+export declare const complianceStatusColorClassnames: Record<BackgroundColor, string>;
+export declare const complianceStatusVariantClassnames: Record<Variant, string>;
+export declare const complianceStatusClassnames: {
+    contained: string;
+    outlined: string;
+    plain: string;
+    primary: string;
+    grey: string;
+    root: string;
+    title: string;
+    list: string;
+    item: string;
+};

package/node/components/ComplianceStatus/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.complianceStatusClassnames = exports.complianceStatusVariantClassnames = exports.complianceStatusColorClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.complianceStatusColorClassnames = {
+    grey: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_color-grey'),
+    primary: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_color-primary'),
+};
+exports.complianceStatusVariantClassnames = {
+    plain: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-plain'),
+    contained: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-contained'),
+    outlined: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-outlined'),
+};
+exports.complianceStatusClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status'),
+    title: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__title'),
+    list: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__list'),
+    item: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__item'),
+    ...exports.complianceStatusColorClassnames,
+    ...exports.complianceStatusVariantClassnames,
+};

package/node/components/ComplianceStatus/index.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/node/components/ComplianceStatus/public.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/node/components/ComplianceStatus/styles.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-type Variant = 'plain' | 'contained';
 export declare const Wrapper: 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;
-} & {
-    $background: 'grey' | 'primary';
-    $variant: Variant;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const Inner: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -51,4 +47,3 @@ export declare const SuccessIcon: import("@emotion/styled/dist/declarations/src/
 export declare const StyledLoader: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export {};

package/node/components/ComplianceStatus/styles.js

@@ -7,6 +7,7 @@ const SuccessFillSm_1 = require("../../icons/SuccessFillSm");
 const Loader_1 = require("../Loader");
 const styled_1 = require("../styled");
 const mixins_1 = require("../styled/mixins");
+const constants_1 = require("./constants");
 const iconAppearAnimation = (0, styled_1.keyframes) `
   from {
     transform: scale(0);
@@ -17,14 +18,31 @@ const iconAppearAnimation = (0, styled_1.keyframes) `
     opacity: 1;
   }
 `;
-exports.Wrapper = (0, styled_1.styled)('article') `
+exports.Wrapper = styled_1.styled.article `
   display: grid;
   grid-gap: ${({ theme }) => theme.spacing(2)};
 
-  padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(3) : 0};
+  background-color: inherit;
 
-  background-color: ${({ theme, $background, $variant }) => $variant === 'contained' ? theme.palette[$background][100] : 'inherit'};
   border-radius: ${({ theme }) => theme.shape.medium};
+
+  &.${constants_1.complianceStatusClassnames.contained} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    &.${constants_1.complianceStatusClassnames.primary} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${constants_1.complianceStatusClassnames.grey} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+    }
+  }
+
+  &.${constants_1.complianceStatusClassnames.outlined} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
 `;
 exports.Inner = (0, styled_1.styled)('ul') `
   display: grid;

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

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
+export type BackgroundColor = 'grey' | 'primary';
+export type Variant = 'plain' | 'contained' | 'outlined';
+export type ComplianceStatusItem = {
+    /**
+     * Текст для отображения в элементе списка
+     */
+    text: ReactNode;
+    /**
+     * Статус элемента
+     */
+    status: ItemStatus;
+};
+export type ComplianceStatusProps = {
+    /**
+     * Основной заголовок элемента
+     */
+    title?: string | null;
+    /**
+     * Пропс для добавления контента между заголовком и списком
+     */
+    subtitle?: ReactNode;
+    /**
+     * Пропс для добавления контента после списка
+     */
+    children?: ReactNode;
+    /**
+     * Элементы списка
+     */
+    itemsList: ComplianceStatusItem[];
+    /**
+     * Фоновый цвет
+     * @default grey
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Вариант отображения блока статусов
+     * @default contained
+     */
+    variant?: Variant;
+};

package/node/components/ComplianceStatus/types.js

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

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

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

package/node/components/DataGrid/Body/Body.js

@@ -4,31 +4,19 @@ exports.Body = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ConfigProvider_1 = require("../../ConfigProvider");
-const ContentState_1 = require("../../ContentState");
-const classNames_1 = require("../../utils/classNames");
-const constants_1 = require("../constants");
 const Row_1 = require("../Row");
 const RowContext_1 = require("../Row/RowContext");
 const styles_1 = require("./styles");
-const useLogic_1 = require("./useLogic");
 const INITIAL_LEVEL = 0;
 const Body = (props) => {
-    const { imagesMap, components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { isNoData, contentStateProps } = (0, useLogic_1.useLogic)(props);
+    const { components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
-    const { rows, selectedRows = [], isLoading, isError, errorMsg, minDisplayRows, keyId, noDataPlaceholder, onRetry, ...rowProps } = props;
+    const { rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps } = props;
     const renderedRows = rows.map(({ children, options, ...row }) => {
         const rowId = row[keyId];
         const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
         return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
     });
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(constants_1.dataGridClassnames.body, {
-            [constants_1.dataGridClassnames.bodyEmpty]: isNoData,
-        }), "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, errorState: {
-                imgAlt: 'Что-то пошло не так',
-                errorList: [errorMsg || ''],
-                imgSrc: imagesMap.defaultErrorImgSrc,
-                onRetry,
-            }, isSmoothLoading: false, children: rows.length ? renderedRows : noDataPlaceholder }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: rows.length ? renderedRows : noDataPlaceholder }));
 };
 exports.Body = Body;

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

@@ -1 +1,2 @@
 export * from './Body';
+export * from './types';

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

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Body"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,110 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+import { type Variant } from '../enums';
+import { type CellValue, type DataGridColumns, type DataGridRowOptions } from '../types';
+export type BodyProps<TData extends Record<string, CellValue>> = {
+    /**
+     * Конфигурация колонок для таблицы
+     */
+    columns: DataGridColumns<TData>[];
+    /**
+     * Поле, которое будет использоваться в качестве ключа
+     */
+    keyId: keyof TData;
+    /**
+     * Конфигурация ширины колонок
+     */
+    gridColumns: string;
+    /**
+     * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
+     */
+    activeRowId?: string;
+    /**
+     * Если true, то дерево будет раскрыто по умолчанию
+     * @default 'false'
+     */
+    isInitialExpanded: boolean;
+    /**
+     * Уровень раскрытия дерева по умолчанию, при isInitialExpanded=true
+     */
+    expandedLevel: number;
+    /**
+     * Количество отображаемых по умолчанию дочерних элементов
+     */
+    initialVisibleChildrenCount: number;
+    /**
+     * Номер колонки, в которой будет расположена кнопка "Показать все"
+     * Работает только для `variant="subrows"`
+     */
+    moreButtonColumnPosition: number;
+    /**
+     * Если false, кнопка разворачивания элементов не показывается
+     * Работает только для `variant="subrows"`
+     */
+    isVisibleCollapseButton: boolean;
+    /**
+     * Если true, то будет отображаться чекбокс для выбора элемента
+     */
+    isSelectable?: boolean;
+    /**
+     * Массив выбранных строк
+     */
+    selectedRows?: TData[];
+    /**
+     * Массив данных для отображения
+     */
+    rows: Array<TData & {
+        options?: DataGridRowOptions<TData>;
+    }>;
+    /**
+     * Вариант отображения вложенных элементов
+     */
+    variant: `${Variant}`;
+    /**
+     * Используется для отображения переданного кол-ва строк при отсутствии данных
+     */
+    minDisplayRows: number;
+    /**
+     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+     */
+    emptyCellValue?: ReactNode;
+    /**
+     *  Используется для отображения placeholder при отсутствии данных в таблице
+     */
+    noDataPlaceholder?: ReactNode;
+    /**
+     * Обработчик выбора строки
+     */
+    onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик клика строки таблицы
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * Смещение секции
+     */
+    sectionOffset?: number;
+    /**
+     * Общее количество колонок (для правильного определения последней ячейки)
+     */
+    totalColumnsCount?: number;
+    /**
+     * Регистрация элемента строки
+     */
+    registerRowElement: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Отмена регистрации элемента строки
+     */
+    unregisterRowElement: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Обработчик наведения на строку
+     */
+    onRowEnter: (rowId: string) => void;
+    /**
+     * Обработчик выхода из строки
+     */
+    onRowLeave: (rowId: string, e: PointerEvent) => void;
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
+};

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

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

package/node/components/DataGrid/DataGrid.js

@@ -4,7 +4,7 @@ exports.DataGrid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ConfigProvider_1 = require("../ConfigProvider");
-const classNames_1 = require("../utils/classNames");
+const ContentState_1 = require("../ContentState");
 const getInertProps_1 = require("../utils/getInertProps");
 const Body_1 = require("./Body");
 const constants_1 = require("./constants");
@@ -13,12 +13,13 @@ const enums_1 = require("./enums");
 const Head_1 = require("./Head");
 const Loader_1 = require("./Loader");
 const NoData_1 = require("./NoData");
+const PinnedSections_1 = require("./PinnedSections");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const DataGrid = (props) => {
-    const { isDataGridDisabled, treeRenderConfig, headProps, bodyProps, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, } = (0, useLogic_1.useLogic)(props);
+    const { isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, pinnedSectionsClassname, dataGridClassname, contentStateProps, rowHoverProps, containerRef, sections, isNoData, bodyClassName, } = (0, useLogic_1.useLogic)(props);
     const { emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { columns, selectedRows = [], sorting, maxHeight, minDisplayRows = constants_1.MIN_DISPLAY_ROWS_BY_DEFAULT, errorMsg, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, isLoading, isError, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, className, onRowClick, onSort, noDataOptions, onRetry, headPreAddon, } = props;
+    const { columns, selectedRows = [], maxHeight, minDisplayRows = constants_1.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, isLoading, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_1.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_1.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const TableContainer = isDataGridDisabled
@@ -30,6 +31,30 @@ const DataGrid = (props) => {
         }
         return null;
     }, [noDataPlaceholder, noDataOptions, isLoading]);
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { "$maxHeight": maxHeight, "$isAllowHorizontalScroll": isAllowHorizontalScroll, className: (0, classNames_1.classNames)(constants_1.dataGridClassnames.root, className), children: [(0, jsx_runtime_1.jsxs)(TableContainer, { "$isAllowHorizontalScroll": isAllowHorizontalScroll, ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [headPreAddon, !isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, sorting: sorting, onSort: onSort })), (0, jsx_runtime_1.jsx)(Body_1.Body, { ...bodyProps, activeRowId: activeRowId, keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, rows: renderRows, columns: columns, variant: variant, emptyCellValue: emptyCellValue, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, isLoading: isLoading, isError: isError, errorMsg: errorMsg, noDataPlaceholder: renderedPlaceholder(), onRowClick: onRowClick, onRetry: onRetry })] }), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
+    const commonBodyProps = {
+        ...bodyProps,
+        activeRowId,
+        keyId,
+        selectedRows,
+        minDisplayRows,
+        rows: renderRows,
+        variant,
+        emptyCellValue,
+        isInitialExpanded,
+        expandedLevel,
+        initialVisibleChildrenCount,
+        moreButtonColumnPosition,
+        isVisibleCollapseButton,
+        noDataPlaceholder: renderedPlaceholder(),
+        onRowClick,
+        ...rowHoverProps,
+    };
+    const renderTableContent = () => {
+        if (!hasPinnedColumns) {
+            return ((0, jsx_runtime_1.jsxs)(TableContainer, { "$isAllowHorizontalScroll": isAllowHorizontalScroll, ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [headPreAddon, !isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: (0, jsx_runtime_1.jsx)(Body_1.Body, { ...commonBodyProps, columns: columns, gridColumns: gridColumns, className: bodyClassName }) })] }));
+        }
+        return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: (0, jsx_runtime_1.jsx)(PinnedSections_1.PinnedSections, { sections: sections, className: pinnedSectionsClassname, isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
+    };
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, "$maxHeight": maxHeight, "$isAllowHorizontalScroll": isAllowHorizontalScroll, className: dataGridClassname, children: [renderTableContent(), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
 };
 exports.DataGrid = DataGrid;

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

@@ -37,5 +37,9 @@ export type HeadProps<TData extends Record<string, CellValue> = DataGridRow, TSo
      * Используется для скрытия чекбокса "Выбрать все"
      */
     isHideSelectAll?: boolean;
+    /**
+     * Смещение секции
+     */
+    sectionOffset?: number;
 };
 export declare const Head: <TData extends Record<string, unknown>, TSortField extends keyof TData>(props: HeadProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;

package/node/components/DataGrid/Head/Head.js

@@ -10,10 +10,11 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Head = (props) => {
     const { checkboxProps, handleSort } = (0, useLogic_1.useLogic)(props);
-    const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, } = props;
+    const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, sectionOffset, } = props;
     const renderColumns = (0, react_1.useMemo)(() => {
         return columns.map(({ field, label, sortable, align, columnHint }, index) => {
-            const isFirstCell = !index;
+            const globalIndex = (sectionOffset ?? 0) + index;
+            const isFirstCell = globalIndex === 0;
             const startAdornmentRender = () => {
                 const showCheckbox = isFirstCell && isSelectable && !isHideSelectAll;
                 if (!showCheckbox && !columnHint) {

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

@@ -4,6 +4,6 @@ exports.Loader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("./styles");
 const Loader = ({ isLoading = false, isDisabled = false, isVisibleDivider = true, }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.LoaderWrapper, { children: [(isLoading || isDisabled) && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {}), isLoading && (0, jsx_runtime_1.jsx)(styles_1.StyledLinearProgress, {}), !isLoading && isVisibleDivider && (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(isLoading || isDisabled) && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {}), (0, jsx_runtime_1.jsxs)(styles_1.LoaderWrapper, { children: [isLoading && (0, jsx_runtime_1.jsx)(styles_1.StyledLinearProgress, {}), !isLoading && isVisibleDivider && (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })] }));
 };
 exports.Loader = Loader;