@astral/ui 4.45.0 → 4.47.0

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

@@ -11,7 +11,7 @@ exports.Wrapper = styled_1.styled.li `
   position: relative;
 
   &:not(:last-of-type)::before,
-  &.${constants_2.dataGridClassnames.hidden}::before {
+  &.${constants_2.dataGridRowClassnames.hidden}::before {
     content: '';
 
     position: absolute;
@@ -35,12 +35,6 @@ exports.ContentWrapper = styled_1.styled.div `
 
   background-color: ${({ theme, $isSelected }) => $isSelected ? theme.palette.primary[100] : 'transparent'};
 
-  transition: ${({ theme }) => {
-    return theme.transitions.create(['background-color'], {
-        duration: theme.transitions.duration.short,
-    });
-}};
-
   &::before {
     content: '';
 
@@ -61,6 +55,13 @@ exports.ContentWrapper = styled_1.styled.div `
   &:hover {
     cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
 
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  }
+
+
+  &.${constants_2.dataGridRowClassnames.hover} {
+    cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
+
     background-color: ${({ theme, $isSelected }) => $isSelected
     ? theme.palette.primary[100]
     : theme.palette.background.elementHover};

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

@@ -0,0 +1,118 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+import { type Variant } from '../enums';
+import { type CellValue, type DataGridColumns, type 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;
+    /**
+     * Смещение секции
+     */
+    sectionOffset?: number;
+    /**
+     * Общее количество колонок (для правильного определения последней ячейки)
+     */
+    totalColumnsCount?: number;
+    /**
+     * Регистрация элемента строки
+     */
+    registerRowElement?: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Отмена регистрации элемента строки
+     */
+    unregisterRowElement?: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Обработчик наведения на строку
+     */
+    onRowEnter?: (rowId: string) => void;
+    /**
+     * Обработчик выхода из строки
+     */
+    onRowLeave?: (rowId: string, event: PointerEvent) => void;
+};

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

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

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

@@ -1,12 +1,13 @@
 import { type MouseEvent, type SyntheticEvent } from 'react';
 import type { CellValue } from '../../types';
-import { type RowProps } from '../Row';
+import type { RowProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue>> = RowProps<TData>;
-export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, }: UseLogicParams<TData>) => {
     isOpen: boolean;
     isShowConnector: boolean;
     childrenColumns: any[];
     rowId: string;
+    rowRef: (element: HTMLElement | null) => void;
     disabled: boolean | undefined;
     isRenderCollapseButton: boolean;
     handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;

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

@@ -8,10 +8,21 @@ const enums_1 = require("../../enums");
 const constants_1 = require("../constants");
 const RowContext_1 = require("../RowContext");
 const utils_1 = require("./utils");
-const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, }) => {
+const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, }) => {
     const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
     const { checkIsOpened, toggleOpenItems } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
     const { isDisabled, disabledReason } = (0, react_1.useContext)(RowContext_1.RowContext);
+    const savedElementRef = (0, react_1.useRef)(null);
+    const rowRef = (element) => {
+        if (element) {
+            savedElementRef.current = element;
+            registerRowElement?.(rowId, element);
+        }
+        else if (savedElementRef.current) {
+            unregisterRowElement?.(rowId, savedElementRef.current);
+            savedElementRef.current = null;
+        }
+    };
     const [isVisibleTooltip, setVisibleTooltip] = (0, react_1.useState)(false);
     const rowId = row[keyId];
     const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, target, } = options || {};
@@ -64,6 +75,7 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeR
         isShowConnector,
         childrenColumns,
         rowId,
+        rowRef,
         disabled,
         isRenderCollapseButton,
         handleToggle,

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

@@ -9,4 +9,11 @@ export declare const dataGridClassnames: {
     root: string;
     body: string;
     bodyEmpty: string;
+    disabled: string;
+    pinnedSectionNoData: string;
+    dataGridHasPinnedSections: string;
+    pinnedSections: string;
+    leftPinnedSection: string;
+    rightPinnedSection: string;
+    overflowed: string;
 };

package/node/components/DataGrid/constants.js

@@ -13,4 +13,11 @@ exports.dataGridClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid'),
     body: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__body'),
     bodyEmpty: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__body_empty'),
+    disabled: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_disabled'),
+    pinnedSectionNoData: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__pinned-section_no-data'),
+    dataGridHasPinnedSections: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_has-pinned-sections'),
+    pinnedSections: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__pinned-sections'),
+    leftPinnedSection: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__left-pinned-section'),
+    rightPinnedSection: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__right-pinned-section'),
+    overflowed: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_overflowed'),
 };

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

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

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

package/node/components/DataGrid/hooks/useRowHover/index.d.ts

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

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

package/node/components/DataGrid/hooks/useRowHover/useRowHover.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+type UseRowHoverParams = {
+    hasPinnedColumns?: boolean;
+};
+/**
+ * Хук для синхронизации hover-состояния строк DataGrid через прямую работу с DOM.
+ */
+export declare const useRowHover: ({ hasPinnedColumns, }: UseRowHoverParams) => {
+    rowsMapRef: import("react").RefObject<Map<string, Set<HTMLElement>>>;
+    registerRowElement: (rowId: string, el: HTMLElement) => void;
+    unregisterRowElement: (rowId: string, el: HTMLElement) => void;
+    onRowEnter: (rowId: string) => void;
+    onRowLeave: (rowId: string, e: PointerEvent) => void;
+};
+export {};

package/node/components/DataGrid/hooks/useRowHover/useRowHover.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowHover = void 0;
+const react_1 = require("react");
+const constants_1 = require("../../Row/constants");
+/**
+ * Хук для синхронизации hover-состояния строк DataGrid через прямую работу с DOM.
+ */
+const useRowHover = ({ hasPinnedColumns = false, }) => {
+    const rowsMapRef = (0, react_1.useRef)(new Map());
+    const hoveredRowIdRef = (0, react_1.useRef)(null);
+    const highlight = (0, react_1.useCallback)((rowId) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const elements = rowsMapRef.current.get(rowId);
+        if (!elements) {
+            return;
+        }
+        elements.forEach((el) => {
+            if (!el.classList.contains(constants_1.dataGridRowClassnames.hover)) {
+                el.classList.add(constants_1.dataGridRowClassnames.hover);
+            }
+        });
+    }, [hasPinnedColumns]);
+    const unhighlight = (0, react_1.useCallback)((rowId) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const elements = rowsMapRef.current.get(rowId);
+        if (!elements) {
+            return;
+        }
+        elements.forEach((el) => el.classList.remove(constants_1.dataGridRowClassnames.hover));
+        return;
+    }, [hasPinnedColumns]);
+    const registerRowElement = (0, react_1.useCallback)((rowId, el) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const map = rowsMapRef.current;
+        if (!map.has(rowId)) {
+            map.set(rowId, new Set());
+        }
+        map.get(rowId).add(el);
+    }, [hasPinnedColumns]);
+    const unregisterRowElement = (0, react_1.useCallback)((rowId, el) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const map = rowsMapRef.current;
+        const set = map.get(rowId);
+        if (!set) {
+            return;
+        }
+        set.delete(el);
+        if (set.size === 0) {
+            map.delete(rowId);
+        }
+    }, [hasPinnedColumns]);
+    const onRowEnter = (0, react_1.useCallback)((rowId) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        if (hoveredRowIdRef.current === rowId) {
+            return;
+        }
+        if (hoveredRowIdRef.current) {
+            unhighlight(hoveredRowIdRef.current);
+        }
+        highlight(rowId);
+        hoveredRowIdRef.current = rowId;
+    }, [hasPinnedColumns, highlight, unhighlight]);
+    /**
+     * Обрабатывает уход курсора со строки.
+     * Убирает hover, если курсор действительно покинул строку.
+     */
+    const onRowLeave = (0, react_1.useCallback)((rowId, e) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const next = e.relatedTarget;
+        if (next?.closest(`[data-row-id="${rowId}"]`)) {
+            return;
+        }
+        unhighlight(rowId);
+        hoveredRowIdRef.current = null;
+    }, [hasPinnedColumns, unhighlight]);
+    return {
+        rowsMapRef,
+        registerRowElement,
+        unregisterRowElement,
+        onRowEnter,
+        onRowLeave,
+    };
+};
+exports.useRowHover = useRowHover;

package/node/components/DataGrid/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisabledDataGridWrapper = exports.DataGridWrapper = exports.Container = void 0;
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.Container = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$maxHeight', '$isAllowHorizontalScroll'].includes(prop),
 }) `
@@ -14,6 +15,22 @@ exports.Container = (0, styled_1.styled)('div', {
   width: 100%;
   height: 100%;
   max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : 'initial'};
+
+  &.${constants_1.dataGridClassnames.dataGridHasPinnedSections} {
+    overflow: hidden;
+  }
+
+  @supports not (container-type: scroll-state) {
+    &.${constants_1.dataGridClassnames.overflowed} {
+      & .${constants_1.dataGridClassnames.rightPinnedSection} {
+         box-shadow: -3px 0 4px 0 #63636326;
+      }
+
+      & .${constants_1.dataGridClassnames.leftPinnedSection} {
+         box-shadow: 3px 0 4px 0 #63636326;
+      }
+    }
+  }
 `;
 exports.DataGridWrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),

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

@@ -232,6 +232,10 @@ export type DataGridColumns<TData extends Record<string, CellValue>> = {
      * Принимает компонент DataGridColumnHintIcon - подсказка в шапке колонки
      */
     columnHint?: ReactNode;
+    /**
+     * Закрепление колонки в таблице
+     */
+    pinned?: 'left' | 'right';
 };
 export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> = {
     /**

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

@@ -0,0 +1,2 @@
+export * from './usePinnedColumns';
+export * from './useClassnames';

package/node/components/DataGrid/useLogic/hooks/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("./usePinnedColumns"), exports);
+__exportStar(require("./useClassnames"), exports);

package/node/components/DataGrid/useLogic/hooks/useClassnames/index.d.ts

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

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

package/node/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.d.ts

@@ -0,0 +1,12 @@
+type UseClassnamesParams = {
+    isDataGridDisabled?: boolean;
+    dataGridClassName?: string;
+    hasPinnedColumns?: boolean;
+    isNoData?: boolean;
+};
+export declare const useClassnames: ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }: UseClassnamesParams) => {
+    pinnedSectionsClassname: string;
+    dataGridClassname: string;
+    bodyClassName: string;
+};
+export {};

package/node/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClassnames = void 0;
+const classNames_1 = require("../../../../utils/classNames");
+const constants_1 = require("../../../constants");
+const useClassnames = ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }) => {
+    const pinnedSectionsClassname = (0, classNames_1.classNames)(constants_1.dataGridClassnames.pinnedSections, {
+        [constants_1.dataGridClassnames.disabled]: isDataGridDisabled,
+    });
+    const dataGridClassname = (0, classNames_1.classNames)(constants_1.dataGridClassnames.root, dataGridClassName, {
+        [constants_1.dataGridClassnames.dataGridHasPinnedSections]: hasPinnedColumns,
+    });
+    const bodyClassName = (0, classNames_1.classNames)(constants_1.dataGridClassnames.body, {
+        [constants_1.dataGridClassnames.bodyEmpty]: isNoData,
+    });
+    return { pinnedSectionsClassname, dataGridClassname, bodyClassName };
+};
+exports.useClassnames = useClassnames;

package/node/components/DataGrid/useLogic/hooks/usePinnedColumns/index.d.ts

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

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

package/node/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type CellValue, type DataGridColumns, type DataGridRow } from '../../../types';
+type UsePinnedColumnsParams<TData extends Record<string, CellValue> = DataGridRow> = {
+    isLoading?: boolean;
+    columns: DataGridColumns<TData>[];
+};
+export declare const usePinnedColumns: <TData extends Record<string, unknown> = DataGridRow>({ isLoading, columns, }: UsePinnedColumnsParams<TData>) => {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    rowHoverProps: {
+        registerRowElement: (rowId: string, el: HTMLElement) => void;
+        unregisterRowElement: (rowId: string, el: HTMLElement) => void;
+        onRowEnter: (rowId: string) => void;
+        onRowLeave: (rowId: string, e: PointerEvent) => void;
+    };
+    sections: import("../../../PinnedSections/types").PinnedSection<TData>[];
+    hasPinnedColumns: boolean;
+};
+export {};

package/node/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePinnedColumns = void 0;
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const useRowHover_1 = require("../../../hooks/useRowHover");
+const getColumnSections_1 = require("../../utils/getColumnSections");
+const syncRowsHeight_1 = require("../../utils/syncRowsHeight");
+const usePinnedColumns = ({ isLoading, columns, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const hasPinnedColumns = (0, react_1.useMemo)(() => columns.some((column) => column.pinned), [columns]);
+    const { rowsMapRef, ...rowHoverProps } = (0, useRowHover_1.useRowHover)({ hasPinnedColumns });
+    const isScrollStateSupported = CSS.supports('container-type', 'scroll-state');
+    const checkOverflow = (0, react_1.useCallback)((element) => {
+        if (element) {
+            return element.scrollWidth > element.clientWidth;
+        }
+        return false;
+    }, []);
+    const { sections } = (0, react_1.useMemo)(() => (0, getColumnSections_1.getColumnSections)(columns), [columns]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (isLoading || !hasPinnedColumns || typeof window === 'undefined') {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            (0, syncRowsHeight_1.syncRowsHeight)(rowsMapRef.current);
+            if (isScrollStateSupported) {
+                return;
+            }
+            if (checkOverflow(containerRef.current)) {
+                containerRef.current?.classList.add(constants_1.dataGridClassnames.overflowed);
+            }
+            else {
+                containerRef.current?.classList.remove(constants_1.dataGridClassnames.overflowed);
+            }
+        });
+        if (!containerRef.current) {
+            return;
+        }
+        resizeObserver.observe(containerRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [hasPinnedColumns, isLoading]);
+    return { containerRef, rowHoverProps, sections, hasPinnedColumns };
+};
+exports.usePinnedColumns = usePinnedColumns;

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

@@ -1,7 +1,9 @@
 import { type ChangeEvent } from 'react';
 import type { CellValue, DataGridProps, DataGridRow } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, }: UseLogicParams<TData, TSortField>) => {
+    pinnedSectionsClassname: string;
+    dataGridClassname: string;
     isDataGridDisabled: boolean | undefined;
     treeRenderConfig: {
         isInitialExpanded?: boolean | undefined;
@@ -11,20 +13,44 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     renderRows: TData[];
     isAllowHorizontalScroll: boolean;
     isHideHead: boolean;
+    hasPinnedColumns: boolean;
+    contentStateProps: {
+        isLoading: boolean | undefined;
+        isError: boolean | undefined;
+        loadingTitle: string;
+        errorState: {
+            imgAlt: string;
+            errorList: string[];
+            imgSrc: string;
+            onRetry: () => void;
+        };
+        isSmoothLoading: boolean;
+    };
+    rowHoverProps: {
+        registerRowElement: (rowId: string, el: HTMLElement) => void;
+        unregisterRowElement: (rowId: string, el: HTMLElement) => void;
+        onRowEnter: (rowId: string) => void;
+        onRowLeave: (rowId: string, e: PointerEvent) => void;
+    };
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    gridColumns: string;
+    isNoData: boolean;
+    headColumns: import("../types").DataGridColumns<TData>[];
     headProps: {
         rowsCount: number;
         uncheckedRowsCount: number;
-        gridColumns: string;
         isSelectable: boolean;
-        columns: import("../types").DataGridColumns<TData>[];
         onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
         isHideSelectAll: boolean | undefined;
+        sorting: import("../types").DataGridSort<TSortField> | undefined;
+        onSort: ((sorting: import("../types").DataGridSort<TSortField> | undefined) => void) | undefined;
     };
     bodyProps: {
-        gridColumns: string;
         isSelectable: boolean;
         onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
     };
+    bodyClassName: string;
+    sections: import("../PinnedSections/types").PinnedSection<TData>[];
     loaderProps: {
         isLoading: boolean | undefined;
         isVisibleDivider: boolean;