@astral/ui 4.45.0 → 4.46.0

package/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/components/DataGrid/PinnedSections/types.js

@@ -0,0 +1 @@
+export {};

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

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

package/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/components/DataGrid/PinnedSections/useLogic/useLogic.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+export 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 = useMemo(() => {
+        const offsets = {};
+        let currentOffset = 0;
+        sections.forEach((section) => {
+            offsets[section.position] = currentOffset;
+            currentOffset += section.columns?.length ?? 0;
+        });
+        return offsets;
+    }, [sections]);
+    return { pinnedContainerStyles, sectionOffsets };
+};

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
 import { Collapse } from '../../../Collapse';
-import { dataGridClassnames } from '../constants';
+import { dataGridRowClassnames } from '../constants';
 import { MoreButton, MoreButtonRow, NestedRows } from './styles';
 import { useLogic } from './useLogic';
 export const NestedChildren = memo((props) => {
@@ -27,7 +27,7 @@ export const NestedChildren = memo((props) => {
                                         options,
                                         nestedChildren: children,
                                         level: nextLevel,
-                                        className: dataGridClassnames.hidden,
+                                        className: dataGridRowClassnames.hidden,
                                     });
                                 }) }) }), isShowMoreButton && (_jsx(MoreButtonRow, { "$level": nextLevel, "$isShowConnector": isShowConnector, "$gridColumns": gridColumns, children: _jsx(MoreButton, { "$moreButtonColumnPosition": moreButtonColumnPosition, variant: "link", onClick: handleToggleShowAllChildren, children: isShowAllChildren ? 'Скрыть' : 'Показать все' }) }))] }))] }) }));
 });

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

@@ -10,8 +10,8 @@ import { CellStyled, CheckboxCell, ChevronIcon, CollapseButton, CollapseCell, Co
 import { useLogic } from './useLogic';
 import { checkIsDisabled } from './utils';
 const RowComponent = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, } = 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, } = 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;
@@ -23,17 +23,26 @@ const RowComponent = (props) => {
         return (_jsxs(_Fragment, { children: [isRenderCollapseButton && (_jsx(CollapseCell, { children: _jsx(CollapseButton, { variant: "text", onClick: handleToggle, children: _jsx(ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && (_jsx(CheckboxCell, { ...getInertProps(disabled), onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { ...checkboxProps }) }))] }));
     };
     const renderCells = 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 = checkIsDisabled(disabled, availableCellsByIndex, index);
-            const isFirstCell = !index;
+            const globalIndex = (sectionOffset ?? 0) + index;
+            const isDisabledCell = checkIsDisabled(disabled, availableCellsByIndex, globalIndex);
+            const isFirstCell = globalIndex === 0;
             return (_jsx(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 = useCallback(({ key, ...nestedRowProps }) => (_jsx(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 = useCallback(({ key, ...nestedRowProps }) => (_jsx(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,
@@ -43,12 +52,18 @@ const RowComponent = (props) => {
         expandedLevel,
         initialVisibleChildrenCount,
         moreButtonColumnPosition,
+        sectionOffset,
+        totalColumnsCount,
         activeRowId,
         childrenColumns,
         onSelectRow,
         onRowClick,
+        registerRowElement,
+        unregisterRowElement,
+        onRowEnter,
+        onRowLeave,
     ]);
-    return (_jsxs(Wrapper, { "$level": level, "$isShowConnector": isShowConnector, className: className, ...selfProps, children: [_jsx(Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: _jsx(ContentWrapper, { "$level": level, "$isShowConnector": isShowConnector, "$gridColumns": gridColumns, [DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), _jsx(NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, 
+    return (_jsxs(Wrapper, { "$level": level, "$isShowConnector": isShowConnector, className: className, ...selfProps, children: [_jsx(Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: _jsx(ContentWrapper, { "$level": level, "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), "$isShowConnector": isShowConnector, "$gridColumns": gridColumns, [DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), _jsx(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/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/components/DataGrid/Row/constants.js

@@ -1,5 +1,7 @@
 import { createUIKitClassname } from '../../utils/createUIKitClassname';
 export const DISABLE_ROW_ATTR = 'data-row-disable';
-export const dataGridClassnames = {
+export const dataGridRowClassnames = {
     hidden: createUIKitClassname('data-grid__row_hidden'),
+    hover: createUIKitClassname('data-grid__row_hover'),
+    hasPinnedColumns: createUIKitClassname('data-grid__row_has-pinned-columns'),
 };

package/components/DataGrid/Row/styles.js

@@ -3,12 +3,12 @@ import { IconButton } from '../../IconButton';
 import { styled } from '../../styled';
 import { Cell } from '../Cell';
 import { ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH } from '../constants';
-import { dataGridClassnames } from './constants';
+import { dataGridRowClassnames } from './constants';
 export const Wrapper = styled.li `
   position: relative;
 
   &:not(:last-of-type)::before,
-  &.${dataGridClassnames.hidden}::before {
+  &.${dataGridRowClassnames.hidden}::before {
     content: '';
 
     position: absolute;
@@ -32,12 +32,6 @@ export const ContentWrapper = 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: '';
 
@@ -58,6 +52,13 @@ export const ContentWrapper = styled.div `
   &:hover {
     cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
 
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  }
+
+
+  &.${dataGridRowClassnames.hover} {
+    cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
+
     background-color: ${({ theme, $isSelected }) => $isSelected
     ? theme.palette.primary[100]
     : theme.palette.background.elementHover};

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,14 +1,25 @@
-import { useContext, useEffect, useMemo, useState, } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { redirectToLink } from '../../../utils/redirectToLink';
 import { DataGridContext } from '../../DataGridContext';
 import { Variant } from '../../enums';
 import { DISABLE_ROW_ATTR } from '../constants';
 import { RowContext } from '../RowContext';
 import { mergeColumnsOptions } from './utils';
-export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, }) => {
+export 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 } = useContext(DataGridContext);
     const { isDisabled, disabledReason } = useContext(RowContext);
+    const savedElementRef = 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] = useState(false);
     const rowId = row[keyId];
     const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, target, } = options || {};
@@ -61,6 +72,7 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         isShowConnector,
         childrenColumns,
         rowId,
+        rowRef,
         disabled,
         isRenderCollapseButton,
         handleToggle,

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

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

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

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

package/components/DataGrid/hooks/index.js

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

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

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

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

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

package/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/components/DataGrid/hooks/useRowHover/useRowHover.js

@@ -0,0 +1,93 @@
+import { useCallback, useRef } from 'react';
+import { dataGridRowClassnames } from '../../Row/constants';
+/**
+ * Хук для синхронизации hover-состояния строк DataGrid через прямую работу с DOM.
+ */
+export const useRowHover = ({ hasPinnedColumns = false, }) => {
+    const rowsMapRef = useRef(new Map());
+    const hoveredRowIdRef = useRef(null);
+    const highlight = useCallback((rowId) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const elements = rowsMapRef.current.get(rowId);
+        if (!elements) {
+            return;
+        }
+        elements.forEach((el) => {
+            if (!el.classList.contains(dataGridRowClassnames.hover)) {
+                el.classList.add(dataGridRowClassnames.hover);
+            }
+        });
+    }, [hasPinnedColumns]);
+    const unhighlight = useCallback((rowId) => {
+        if (!hasPinnedColumns) {
+            return;
+        }
+        const elements = rowsMapRef.current.get(rowId);
+        if (!elements) {
+            return;
+        }
+        elements.forEach((el) => el.classList.remove(dataGridRowClassnames.hover));
+        return;
+    }, [hasPinnedColumns]);
+    const registerRowElement = 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 = 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 = 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 = 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,
+    };
+};

package/components/DataGrid/styles.js

@@ -1,4 +1,5 @@
 import { styled } from '../styled';
+import { dataGridClassnames } from './constants';
 export const Container = styled('div', {
     shouldForwardProp: (prop) => !['$maxHeight', '$isAllowHorizontalScroll'].includes(prop),
 }) `
@@ -11,6 +12,22 @@ export const Container = styled('div', {
   width: 100%;
   height: 100%;
   max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : 'initial'};
+
+  &.${dataGridClassnames.dataGridHasPinnedSections} {
+    overflow: hidden;
+  }
+
+  @supports not (container-type: scroll-state) {
+    &.${dataGridClassnames.overflowed} {
+      & .${dataGridClassnames.rightPinnedSection} {
+         box-shadow: -3px 0 4px 0 #63636326;
+      }
+
+      & .${dataGridClassnames.leftPinnedSection} {
+         box-shadow: 3px 0 4px 0 #63636326;
+      }
+    }
+  }
 `;
 export const DataGridWrapper = styled('div', {
     shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),

package/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/components/DataGrid/useLogic/hooks/index.d.ts

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