@astral/ui 4.74.0 → 4.75.0

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

@@ -2,7 +2,7 @@ import { type MouseEvent, type SyntheticEvent } from 'react';
 import type { CellValue } from '../../types';
 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, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, isSelected, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
     disabledReasonText: string | undefined;
     rowStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
@@ -870,10 +870,14 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     rowId: string;
     rowRef: (element: HTMLElement | null) => void;
     disabled: boolean | undefined;
+    isSelectable: boolean | undefined;
     isRenderCollapseButton: boolean;
     handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;
+    rootRowElement: HTMLLIElement | null;
+    rootRowRef: (element: HTMLLIElement | null) => void;
     isHovered: boolean;
     isActive: boolean;
+    mobileDisplayVariant: "list" | "cards" | undefined;
     rowProps: {
         onClick: () => void;
         onMouseMove: (event: MouseEvent<HTMLElement>) => void;
@@ -896,7 +900,6 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     };
     nestedChildrenProps: {
         isOpen: boolean;
-        rowId: string;
     };
 };
 export {};

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { useCallback, useContext, useMemo, useRef, useState, } from 'react';
 import { redirectToLink } from '../../../utils/redirectToLink';
 import { DataGridContext } from '../../DataGridContext';
 import { Variant } from '../../enums';
@@ -6,11 +6,18 @@ import { DISABLE_ROW_ATTR } from '../constants';
 import { RowContext } from '../RowContext';
 import { useMobileLogic } from './hooks';
 import { mergeColumnsOptions } from './utils';
-export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
+export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, isSelected, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
     const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = useMobileLogic();
-    const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
-    const { checkIsOpened, toggleOpenItems } = useContext(DataGridContext);
+    const [rootRowElement, setRootRowElement] = useState(null);
+    const rootRowRef = useCallback((element) => {
+        if (element) {
+            setRootRowElement(element);
+        }
+    }, []);
+    const isDefaultExpanded = Boolean(isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length);
+    const { mobileDisplayVariant } = useContext(DataGridContext);
     const { isDisabled, disabledReason } = useContext(RowContext);
+    const [isOpen, setIsOpen] = useState(isDefaultExpanded);
     const savedElementRef = useRef(null);
     const rowRef = (element) => {
         if (element) {
@@ -26,7 +33,6 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
     const rowId = row[keyId];
     const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, target, } = options || {};
     const disabled = isDisabled || isExternalDisabled;
-    const isOpen = checkIsOpened(rowId);
     const handleRowClick = () => {
         if (disabled) {
             handleOpenDrawer();
@@ -37,20 +43,12 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         }
         onRowClick?.(row);
     };
-    useEffect(() => {
-        // Проверка на isOpen необходима для infinite версии с виртуализацией, когда происходит размонтировании компонента
-        if (isDefaultExpanded && !isOpen) {
-            toggleOpenItems(rowId);
-        }
-    }, []);
-    const isChecked = isSelectable &&
-        Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
     const isShowConnector = Object.is(variant, Variant.Tree);
     const childrenColumns = useMemo(() => mergeColumnsOptions(columns, options?.childrenColumns), [columns, options]);
-    const handleToggle = (event) => {
+    const handleToggle = useCallback((event) => {
         event.stopPropagation();
-        toggleOpenItems(rowId);
-    };
+        setIsOpen((prev) => !prev);
+    }, []);
     const handleOpenTooltip = (event) => {
         const element = event.target;
         const isDisabledCell = element?.getAttribute(DISABLE_ROW_ATTR) === 'true';
@@ -77,6 +75,7 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
     const isHovered = Boolean(!disabled && (onRowClick || href));
     const isActive = activeRowId === rowId;
     const disabledReasonText = externalDisabledReason || disabledReason;
+    const handleCheckboxChange = useMemo(() => onSelectRow(row), [onSelectRow, row]);
     return {
         disabledReasonText,
         rowStyles,
@@ -86,10 +85,14 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         rowId,
         rowRef,
         disabled,
+        isSelectable,
         isRenderCollapseButton,
         handleToggle,
+        rootRowElement,
+        rootRowRef,
         isHovered,
         isActive,
+        mobileDisplayVariant,
         rowProps: {
             onClick: handleRowClick,
             onMouseMove: handleMouseMove,
@@ -106,13 +109,12 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
             onClose: handleCloseTooltip,
         },
         checkboxProps: {
-            checked: isChecked,
+            checked: isSelected,
             disabled,
-            onChange: onSelectRow(row),
+            onChange: handleCheckboxChange,
         },
         nestedChildrenProps: {
             isOpen,
-            rowId,
         },
     };
 };

package/components/DataGrid/RowBase/GroupCell/GroupCell.d.ts

@@ -0,0 +1,2 @@
+import { type GroupCellProps } from './types';
+export declare const GroupCell: ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, }: GroupCellProps) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/RowBase/GroupCell/GroupCell.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Cell, dataGridCellClassnames } from '../../Cell';
+import { dataGridGroupedColumnLabelClassnames } from './constants';
+import { GroupedColumnLabel } from './styles';
+const groupedColumnLabelCva = cva(dataGridGroupedColumnLabelClassnames.root, {
+    variants: {
+        hidden: {
+            true: dataGridGroupedColumnLabelClassnames.hidden,
+        },
+    },
+});
+export const GroupCell = ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, }) => {
+    const { label, children, hideTitleOnMobile, isHideOnMobile } = cell;
+    return (_jsxs(_Fragment, { children: [_jsx(GroupedColumnLabel, { variant: "caption", color: "grey", colorIntensity: "700", className: groupedColumnLabelCva({
+                    hidden: hideTitleOnMobile || isHideOnMobile,
+                }), children: label }), children.map((child, childIndex) => {
+                const childCellId = `${cellId}-${childIndex}`;
+                const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
+                return (_jsx(Cell, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabled, startAdornment: shouldRenderStartAdornment && startAdornment, isHidePersonalData: child.isHidePersonalData, className: dataGridCellClassnames.grouped }, childCellId));
+            })] }));
+};

package/components/DataGrid/RowBase/GroupCell/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const dataGridGroupedColumnLabelClassnames: {
+    root: string;
+    hidden: string;
+};

package/components/DataGrid/RowBase/GroupCell/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../../../utils/createUIKitClassname';
+export const dataGridGroupedColumnLabelClassnames = {
+    root: createUIKitClassname('data-grid-grouped-column-label'),
+    hidden: createUIKitClassname('data-grid-grouped-column-label_hidden'),
+};

package/components/DataGrid/RowBase/GroupCell/index.d.ts

@@ -0,0 +1 @@
+export { GroupCell } from './GroupCell';

package/components/DataGrid/RowBase/GroupCell/index.js

@@ -0,0 +1 @@
+export { GroupCell } from './GroupCell';

package/components/DataGrid/RowBase/GroupCell/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const GroupedColumnLabel: import("../../../styled").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
+    color?: import("../../../Typography").TypographyColor | undefined;
+    variant?: import("../../../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../../../Typography").Intensity | undefined;
+    component?: import("../../../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/DataGrid/RowBase/GroupCell/styles.js

@@ -0,0 +1,16 @@
+import { styled } from '../../../styled';
+import { Typography } from '../../../Typography';
+import { dataGridGroupedColumnLabelClassnames } from './constants';
+export const GroupedColumnLabel = styled(Typography) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+
+    margin-top: ${({ theme }) => theme.spacing(3)};
+
+    &.${dataGridGroupedColumnLabelClassnames.hidden} {
+      display: none;
+    }
+  }
+`;

package/components/DataGrid/RowBase/GroupCell/types.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import { type DataGridGroupColumn, type DataGridRowWithOptions } from '../../types';
+export type GroupCellProps = {
+    cell: DataGridGroupColumn<Record<string, unknown>>;
+    cellId: string;
+    isFirstCell?: boolean;
+    row: DataGridRowWithOptions<Record<string, unknown>>;
+    emptyCellValue?: ReactNode;
+    isDisabled?: boolean;
+    startAdornment?: ReactNode;
+};

package/components/DataGrid/RowBase/GroupCell/types.js

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

package/components/DataGrid/RowBase/RowBase.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RowBaseProps } from './types';
+export declare const RowBase: import("react").MemoExoticComponent<(props: RowBaseProps) => import("react/jsx-runtime").JSX.Element>;

package/components/DataGrid/RowBase/RowBase.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { BottomDrawer } from '../../BottomDrawer';
+import { Checkbox } from '../../Checkbox';
+import { Tooltip } from '../../Tooltip';
+import { classNames } from '../../utils/classNames';
+import { cva } from '../../utils/cva';
+import { getInertProps } from '../../utils/getInertProps';
+import { Cell } from '../Cell';
+import { DISABLE_ROW_ATTR, dataGridRowClassnames } from '../Row/constants';
+import { checkIsDisabled } from '../Row/utils';
+import { isGroupColumns } from '../utils';
+import { dataGridRowBaseClassnames } from './constants';
+import { GroupCell } from './GroupCell';
+import { BottomDrawerContent, CheckboxCell, ContentWrapper, Wrapper, } from './styles';
+import { useLogic } from './useLogic';
+const contentWrapperCva = cva(dataGridRowBaseClassnames.contentWrapper, {
+    variants: {
+        isHovered: {
+            true: dataGridRowBaseClassnames.hovered,
+        },
+        isActive: {
+            true: dataGridRowBaseClassnames.active,
+        },
+    },
+});
+const rootCva = cva(dataGridRowBaseClassnames.root, {
+    variants: {
+        mobileDisplayVariant: {
+            cards: dataGridRowBaseClassnames.mobileVariantCards,
+            list: dataGridRowBaseClassnames.mobileVariantList,
+        },
+    },
+});
+export const RowBase = memo((props) => {
+    const { className, tooltipProps, rowBaseVars, isHovered, isActive, drawerProps, emptyCellValue, rowRef, onRowEnter, onRowLeave, rowId, row, isDisabled, sectionOffset, customContent, isDisabledLastCell, renderStartAdornment, checkboxProps, isNotSelectable, isSelectable, columns, dataGridInfiniteItemProps, handleRowClick, drawerContent, mobileDisplayVariant, } = useLogic(props);
+    const renderStartAdornmentBase = () => {
+        const adornment = renderStartAdornment?.(true);
+        const shouldRenderCheckbox = isSelectable && !isNotSelectable;
+        if (!adornment && !shouldRenderCheckbox) {
+            return null;
+        }
+        return (_jsxs(_Fragment, { children: [adornment, shouldRenderCheckbox && (_jsx(CheckboxCell, { ...getInertProps(isDisabled), onClick: (event) => event.stopPropagation(), className: dataGridRowClassnames.checkbox, children: _jsx(Checkbox, { ...checkboxProps }) }))] }));
+    };
+    const renderCells = useCallback(() => {
+        const lastCellGlobalIndex = columns.length - 1;
+        const availableCellsByIndex = !isDisabledLastCell
+            ? [lastCellGlobalIndex]
+            : undefined;
+        return columns?.map((cell, index) => {
+            const cellId = `row-base-${index}`;
+            const globalIndex = (sectionOffset ?? 0) + index;
+            const isFirstCell = globalIndex === 0;
+            const isDisabledCell = checkIsDisabled(isDisabled, availableCellsByIndex, globalIndex);
+            if (isGroupColumns(cell)) {
+                return (_jsx(GroupCell, { cell: cell, cellId: cellId, isFirstCell: isFirstCell, row: row, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: isFirstCell && renderStartAdornmentBase() }, cellId));
+            }
+            return (_jsx(Cell, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornmentBase(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
+        });
+    }, [
+        row,
+        columns,
+        isDisabled,
+        sectionOffset,
+        renderStartAdornment,
+        checkboxProps.checked,
+    ]);
+    return (_jsxs(Wrapper, { className: classNames(className, rootCva({ mobileDisplayVariant })), style: rowBaseVars, ...dataGridInfiniteItemProps, children: [_jsx(Tooltip, { ...tooltipProps, children: _jsx(ContentWrapper, { ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: contentWrapperCva({ isHovered, isActive }), [DISABLE_ROW_ATTR]: isDisabled, onClick: handleRowClick, children: renderCells() }) }), customContent, _jsx(BottomDrawer, { ...drawerProps, children: _jsx(BottomDrawerContent, { children: drawerContent }) })] }, `row-base-${rowId}`));
+});

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

@@ -0,0 +1,9 @@
+export declare const DISABLE_ROW_ATTR = "data-row-disable";
+export declare const dataGridRowBaseClassnames: {
+    root: string;
+    contentWrapper: string;
+    hovered: string;
+    active: string;
+    mobileVariantCards: string;
+    mobileVariantList: string;
+};

package/components/DataGrid/RowBase/constants.js

@@ -0,0 +1,10 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const DISABLE_ROW_ATTR = 'data-row-disable';
+export const dataGridRowBaseClassnames = {
+    root: createUIKitClassname('data-grid-row-base'),
+    contentWrapper: createUIKitClassname('data-grid-row-base__content-wrapper'),
+    hovered: createUIKitClassname('data-grid-row-base_hovered'),
+    active: createUIKitClassname('data-grid-row-base_active'),
+    mobileVariantCards: createUIKitClassname('data-grid-row-base_mobile-variant-cards'),
+    mobileVariantList: createUIKitClassname('data-grid-row-base_mobile-variant-list'),
+};

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

@@ -0,0 +1,3 @@
+export { RowBase } from './RowBase';
+export { dataGridRowBaseClassnames } from './constants';
+export type { RowBaseProps } from './types';

package/components/DataGrid/RowBase/index.js

@@ -0,0 +1,2 @@
+export { RowBase } from './RowBase';
+export { dataGridRowBaseClassnames } from './constants';

package/components/DataGrid/RowBase/styles.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const CheckboxCell: import("../../styled").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>, {}>;
+export declare const Wrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const ContentWrapper: import("../../styled").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>, {}>;
+export declare const BottomDrawerContent: import("../../styled").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/components/DataGrid/RowBase/styles.js

@@ -0,0 +1,87 @@
+import { styled } from '../../styled';
+import { ROOT_ACTION_CELL_WIDTH } from '../constants';
+import { dataGridRowBaseClassnames } from './constants';
+export const CheckboxCell = styled.div `
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+
+  width: ${ROOT_ACTION_CELL_WIDTH}px;
+`;
+export const Wrapper = styled.li `
+  --row-base-grid-columns: 1fr;
+
+  position: relative;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding-bottom: ${({ theme }) => theme.spacing(3)};
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+    &:not(:first-of-type) {
+      padding-top: ${({ theme }) => theme.spacing(5)};
+    }
+
+    &:first-of-type {
+      padding-top: ${({ theme }) => theme.spacing(1)};
+    }
+
+    &.${dataGridRowBaseClassnames.mobileVariantCards} {
+      padding: ${({ theme }) => theme.spacing(5, 4, 4)};
+
+      background-color: ${({ theme }) => theme.palette.background.default};
+      border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: none;
+      border-radius: ${({ theme }) => theme.shape.medium};
+  
+    }
+  }
+`;
+export const ContentWrapper = styled.div `
+  position: relative;
+
+  display: grid;
+  grid-template-columns: var(--row-base-grid-columns);
+
+  background-color: transparent;
+
+  &.${dataGridRowBaseClassnames.active} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+
+    &.${dataGridRowBaseClassnames.active} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${dataGridRowBaseClassnames.hovered} {
+      cursor: pointer;
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
+
+    &.${dataGridRowBaseClassnames.active} {
+      background-color: transparent;
+    }
+
+    &:hover, &.${dataGridRowBaseClassnames.hovered} {
+      cursor: initial;
+
+      background-color: transparent;
+
+      &.${dataGridRowBaseClassnames.active} {
+        background-color: transparent;
+      }
+    }
+  }
+`;
+export const BottomDrawerContent = styled.div `
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      padding: ${({ theme }) => theme.spacing(5, 4)};
+    }
+`;

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

@@ -0,0 +1,92 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+import type { DataGridColumns, DataGridRowWithOptions } from '../types';
+export type RowBaseProps = {
+    /**
+     * Массив колонок
+     */
+    columns: DataGridColumns<Record<string, unknown>>[];
+    /**
+     * Данные строки для отображения
+     */
+    row: DataGridRowWithOptions<Record<string, unknown>>;
+    /**
+     * Функция для рендера стартового элемента
+     */
+    renderStartAdornment?: (isFirstCell: boolean) => ReactNode;
+    /**
+     * Смещение секции для правильного расчета глобального индекса
+     */
+    sectionOffset?: number;
+    /**
+     * Уникальный идентификатор строки
+     */
+    rowId: string;
+    /**
+     * Кастомный контент после ячеек
+     */
+    customContent?: ReactNode;
+    /**
+     * Является ли строка выбираемой
+     */
+    isSelectable?: boolean;
+    /**
+     * Уникальный идентификатор строки
+     */
+    keyId: unknown;
+    /**
+     * Обработчик клика строки таблицы
+     */
+    onRowClick?: (row: Record<string, unknown>) => void;
+    /**
+     * Является ли строка выбранной
+     */
+    isSelected?: boolean;
+    /**
+     * Заблокирована ли строка
+     */
+    isDisabled?: boolean;
+    /**
+     * Причина блокировки строки
+     */
+    disabledReason?: string;
+    /**
+     * Обработчик выбора строки
+     */
+    onSelectRow: (row: Record<string, unknown>) => (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик наведения на строку
+     */
+    onRowEnter?: (rowId: string) => void;
+    /**
+     * Обработчик ухода со строки
+     */
+    onRowLeave?: (rowId: string, event: PointerEvent) => void;
+    /**
+     * Регистрация элемента строки
+     */
+    registerRowElement?: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Удаление регистрации элемента строки
+     */
+    unregisterRowElement?: (rowId: string, el: HTMLElement) => void;
+    /**
+     * Шаблон колонок (CSS grid-template-columns)
+     */
+    gridColumns?: string;
+    /**
+     * ID активной строки
+     */
+    activeRowId?: string;
+    /**
+     * Значение для пустой ячейки
+     */
+    emptyCellValue?: ReactNode;
+    /**
+     * Вариант отображения на мобильных устройствах
+     */
+    mobileDisplayVariant?: 'cards' | 'list';
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
+};

package/components/DataGrid/RowBase/types.js

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

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

@@ -0,0 +1,46 @@
+import { type CSSProperties, type SyntheticEvent } from 'react';
+import type { RowBaseProps } from '../types';
+type UseLogicParams = RowBaseProps;
+export declare const useLogic: ({ className, row, keyId, onRowClick, columns, sectionOffset, customContent, renderStartAdornment, isSelected, isDisabled, disabledReason, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, gridColumns, activeRowId, emptyCellValue, isSelectable, rowId, mobileDisplayVariant, ...dataGridInfiniteItemProps }: UseLogicParams) => {
+    handleRowClick: () => void;
+    tooltipProps: {
+        open: boolean;
+        title: string | undefined;
+        onOpen: (event: SyntheticEvent<Element, Event>) => void;
+        onClose: () => void;
+        followCursor: boolean;
+        arrow: boolean;
+    };
+    checkboxProps: {
+        checked: boolean | undefined;
+        disabled: boolean | undefined;
+        onChange: (event: import("react").ChangeEvent<HTMLInputElement, Element>) => void;
+    };
+    drawerProps: {
+        open: boolean;
+        onClose: () => void;
+        title: string;
+    };
+    drawerContent: string | undefined;
+    rowBaseVars: CSSProperties;
+    isHovered: boolean;
+    isActive: boolean;
+    columns: import("../..").DataGridColumns<Record<string, unknown>>[];
+    emptyCellValue: import("react").ReactNode;
+    rowRef: (element: HTMLElement | null) => void;
+    onRowEnter: ((rowId: string) => void) | undefined;
+    onRowLeave: ((rowId: string, event: PointerEvent) => void) | undefined;
+    rowId: string;
+    row: import("../..").DataGridRowWithOptions<Record<string, unknown>>;
+    isDisabled: boolean | undefined;
+    sectionOffset: number | undefined;
+    customContent: import("react").ReactNode;
+    isDisabledLastCell: boolean | undefined;
+    renderStartAdornment: ((isFirstCell: boolean) => import("react").ReactNode) | undefined;
+    isSelectable: boolean | undefined;
+    isNotSelectable: boolean | undefined;
+    dataGridInfiniteItemProps: {};
+    mobileDisplayVariant: "list" | "cards" | undefined;
+    className: string | undefined;
+};
+export {};