@astral/ui 4.74.0 → 4.75.0

package/components/DataGrid/RowBase/useLogic/useLogic.js

@@ -0,0 +1,90 @@
+import { useRef, useState, } from 'react';
+import { redirectToLink } from '../../../utils/redirectToLink';
+import { useMobileLogic } from '../../Row/useLogic/hooks';
+import { DISABLE_ROW_ATTR } from '../constants';
+export 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 }) => {
+    const [isVisibleTooltip, setVisibleTooltip] = useState(false);
+    const savedElementRef = useRef(null);
+    const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = useMobileLogic();
+    const { options } = row;
+    const { style: dataGridInfiniteItemStyle, ...restDataGridInfiniteItemProps } = dataGridInfiniteItemProps || {};
+    const { disabledReason: propsDisabledReason, isDisabled: propsIsDisabled, isDisabledLastCell, href, isNotSelectable, target, } = options || {};
+    const disabled = isDisabled || propsIsDisabled;
+    const disabledReasonText = propsDisabledReason || disabledReason;
+    const handleOpenTooltip = (event) => {
+        const element = event.target;
+        const isDisabledCell = element?.getAttribute(DISABLE_ROW_ATTR) === 'true';
+        if (isDisabledCell) {
+            setVisibleTooltip(true);
+        }
+    };
+    const handleCloseTooltip = () => setVisibleTooltip(false);
+    const rowBaseVars = {
+        '--row-base-grid-columns': gridColumns,
+        ...(dataGridInfiniteItemStyle || {}),
+    };
+    const isHovered = Boolean(!disabled && (onRowClick || href));
+    const isActive = activeRowId === rowId;
+    const rowRef = (element) => {
+        if (element) {
+            savedElementRef.current = element;
+            registerRowElement?.(rowId, element);
+        }
+        else if (savedElementRef.current) {
+            unregisterRowElement?.(rowId, savedElementRef.current);
+            savedElementRef.current = null;
+        }
+    };
+    const handleRowClick = () => {
+        if (disabled) {
+            handleOpenDrawer();
+            return undefined;
+        }
+        if (href) {
+            return redirectToLink(href, target);
+        }
+        onRowClick?.(row);
+    };
+    return {
+        handleRowClick,
+        tooltipProps: {
+            open: isVisibleTooltip,
+            title: disabled ? disabledReasonText : undefined,
+            onOpen: handleOpenTooltip,
+            onClose: handleCloseTooltip,
+            followCursor: true,
+            arrow: false,
+        },
+        checkboxProps: {
+            checked: isSelected,
+            disabled,
+            onChange: onSelectRow(row),
+        },
+        drawerProps: {
+            open: isDrawerOpen,
+            onClose: handleCloseDrawer,
+            title: 'Заблокировано',
+        },
+        drawerContent: disabledReasonText,
+        rowBaseVars,
+        isHovered,
+        isActive,
+        columns,
+        emptyCellValue,
+        rowRef,
+        onRowEnter,
+        onRowLeave,
+        rowId,
+        row,
+        isDisabled: disabled,
+        sectionOffset,
+        customContent,
+        isDisabledLastCell,
+        renderStartAdornment,
+        isSelectable,
+        isNotSelectable,
+        dataGridInfiniteItemProps: restDataGridInfiniteItemProps,
+        mobileDisplayVariant,
+        className,
+    };
+};

package/components/DataGrid/constants.d.ts

@@ -2,9 +2,11 @@ export declare const MIN_ROW_HEIGHT = 44;
 export declare const ROOT_ACTION_CELL_WIDTH = 32;
 export declare const TREE_LINE_WIDTH: number;
 export declare const MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
+export declare const MOBILE_TREE_LINE_WIDTH = 12;
 export declare const DEFAULT_MOBILE_SKELETON_ROWS_COUNT = 5;
 export declare const EXPANDED_LEVEL_BY_DEFAULT = 1;
 export declare const INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;
+export declare const INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT = 1;
 export declare const dataGridClassnames: {
     loadingPlaceholder: string;
     header: string;
@@ -23,4 +25,10 @@ export declare const dataGridClassnames: {
     hasGroupedColumns: string;
     gridViewFull: string;
     gridViewStandard: string;
+    mobileVariantCards: string;
+    mobileVariantList: string;
+};
+export declare const dataGridSkeletonClassnames: {
+    list: string;
+    item: string;
 };

package/components/DataGrid/constants.js

@@ -3,9 +3,11 @@ export const MIN_ROW_HEIGHT = 44;
 export const ROOT_ACTION_CELL_WIDTH = 32;
 export const TREE_LINE_WIDTH = ROOT_ACTION_CELL_WIDTH / 2;
 export const MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
+export const MOBILE_TREE_LINE_WIDTH = 12;
 export const DEFAULT_MOBILE_SKELETON_ROWS_COUNT = 5;
 export const EXPANDED_LEVEL_BY_DEFAULT = 1;
 export const INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;
+export const INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT = 1;
 export const dataGridClassnames = {
     loadingPlaceholder: createUIKitClassname('data-grid__loading-placeholder'),
     header: createUIKitClassname('data-grid__header'),
@@ -24,4 +26,10 @@ export const dataGridClassnames = {
     hasGroupedColumns: createUIKitClassname('data-grid_has-grouped-columns'),
     gridViewFull: createUIKitClassname('data-grid_grid-view-full'),
     gridViewStandard: createUIKitClassname('data-grid_grid-view-standard'),
+    mobileVariantCards: createUIKitClassname('data-grid_mobile-variant-cards'),
+    mobileVariantList: createUIKitClassname('data-grid_mobile-variant-list'),
+};
+export const dataGridSkeletonClassnames = {
+    list: createUIKitClassname('data-grid__skeleton-list'),
+    item: createUIKitClassname('data-grid__skeleton-item'),
 };

package/components/DataGrid/index.d.ts

@@ -2,3 +2,6 @@ export { DataGrid } from './DataGrid';
 export type { DataGridProps, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
 export { dataGridClassnames } from './constants';
 export { MobileSkeleton } from './MobileSkeleton';
+export { RowBase, type RowBaseProps } from './RowBase';
+export { DataGridContext } from './DataGridContext';
+export { DataGridStorageContext } from './DataGridStorageContext';

package/components/DataGrid/index.js

@@ -1,3 +1,6 @@
 export { DataGrid } from './DataGrid';
 export { dataGridClassnames } from './constants';
 export { MobileSkeleton } from './MobileSkeleton';
+export { RowBase } from './RowBase';
+export { DataGridContext } from './DataGridContext';
+export { DataGridStorageContext } from './DataGridStorageContext';

package/components/DataGrid/styles.js

@@ -1,4 +1,5 @@
 import { styled } from '../styled';
+import { bodyClassnames } from './Body/constants';
 import { dataGridCellClassnames } from './Cell/constants';
 import { dataGridClassnames } from './constants';
 import { headCellClassnames } from './HeadCell';
@@ -137,6 +138,19 @@ export const Container = styled.div `
         border-bottom: none;
       }
     }
+
+    &.${dataGridClassnames.mobileVariantCards} {
+    
+      & .${dataGridClassnames.wrapper} {
+        margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+      }
+
+      & .${bodyClassnames.root} {
+        display: flex;
+        flex-direction: column;
+        gap: ${({ theme }) => theme.spacing(2)};
+      }
+    }
   }
 `;
 export const DataGridWrapper = styled.div `

package/components/DataGrid/tests/performance/testDataGridPerformance.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type DataGridColumns, type DataGridRowWithOptions } from '../../types';
+type RenderRow = (row: Record<string, unknown>, index: number) => ReactNode;
+type GridRenderProps = {
+    rows: DataGridRowWithOptions<DataItem>[];
+    columns: DataGridColumns<DataItem>[];
+    selectedRows?: DataItem[];
+    onSelectRow?: (rows: DataItem[]) => void;
+    renderRow?: RenderRow;
+    onRetry: () => void;
+};
+type TestDataGridPerformanceParams = {
+    render: (ui: ReactElement) => void;
+    renderGrid: (props: GridRenderProps) => ReactNode;
+};
+type DataItem = {
+    id: string;
+    name: string;
+};
+export declare const testDataGridPerformance: ({ render, renderGrid, }: TestDataGridPerformanceParams) => void;
+export {};

package/components/DataGrid/tests/performance/testDataGridPerformance.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { screen, userEvents } from '@ui/dev/tests';
+import { useMemo, useState } from 'react';
+import { expect, it, vi } from 'vitest';
+const TEST_ROWS = [
+    { id: '1', name: 'Vasya' },
+    { id: '2', name: 'Petya' },
+    { id: '3', name: 'Ivan' },
+];
+export const testDataGridPerformance = ({ render, renderGrid, }) => {
+    const getRenderCountFor = (spy, id) => spy.mock.calls.filter(([row]) => row.id === id).length;
+    it('При клике на чекбокс перерендеривается только выбранная строка', async () => {
+        const renderCellSpy = vi.fn((row) => row.name);
+        const TestComponent = () => {
+            const [selectedRows, setSelectedRows] = useState([]);
+            const columns = useMemo(() => [
+                {
+                    field: 'name',
+                    label: 'Наименование',
+                    renderCell: renderCellSpy,
+                },
+            ], []);
+            return renderGrid({
+                rows: TEST_ROWS,
+                columns,
+                selectedRows,
+                onSelectRow: setSelectedRows,
+                onRetry: () => { },
+            });
+        };
+        render(_jsx(TestComponent, {}));
+        renderCellSpy.mockClear();
+        const checkboxes = screen.getAllByRole('checkbox');
+        const secondRowCheckbox = checkboxes[2];
+        await userEvents.click(secondRowCheckbox);
+        expect(getRenderCountFor(renderCellSpy, '1')).toBe(0);
+        expect(getRenderCountFor(renderCellSpy, '2')).toBe(1);
+        expect(getRenderCountFor(renderCellSpy, '3')).toBe(0);
+    });
+    it('При изменении значений одного row перерендеривается только этот row', async () => {
+        const renderCellSpy = vi.fn((row) => row.name);
+        const TestComponent = () => {
+            const [rows, setRows] = useState(TEST_ROWS);
+            const columns = useMemo(() => [
+                {
+                    field: 'name',
+                    label: 'Наименование',
+                    renderCell: renderCellSpy,
+                },
+            ], []);
+            const updateSecondRow = () => {
+                setRows((prevRows) => prevRows.map((row) => row.id === '2' ? { ...row, name: 'Petya Updated' } : row));
+            };
+            return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: updateSecondRow, children: "Update row 2" }), renderGrid({
+                        rows,
+                        columns,
+                        onRetry: () => { },
+                        selectedRows: [],
+                        onSelectRow: () => { },
+                    })] }));
+        };
+        render(_jsx(TestComponent, {}));
+        renderCellSpy.mockClear();
+        await userEvents.click(screen.getByText('Update row 2'));
+        expect(getRenderCountFor(renderCellSpy, '1')).toBe(0);
+        expect(getRenderCountFor(renderCellSpy, '2')).toBe(1);
+        expect(getRenderCountFor(renderCellSpy, '3')).toBe(0);
+        expect(screen.getByText('Petya Updated')).toBeVisible();
+    });
+    it('При изменении параметра selectedRows изменяется только выбранные строки', async () => {
+        const renderCellSpy = vi.fn((row) => row.name);
+        const TestComponent = () => {
+            const [selectedRows, setSelectedRows] = useState([]);
+            const columns = useMemo(() => [
+                {
+                    field: 'name',
+                    label: 'Наименование',
+                    renderCell: renderCellSpy,
+                },
+            ], []);
+            const selectRowsDirectly = () => {
+                setSelectedRows([
+                    { id: '1', name: 'Vasya' },
+                    { id: '3', name: 'Ivan' },
+                ]);
+            };
+            return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: selectRowsDirectly, children: "Select 1 and 3" }), renderGrid({
+                        rows: TEST_ROWS,
+                        columns,
+                        selectedRows,
+                        onSelectRow: setSelectedRows,
+                        onRetry: () => { },
+                    })] }));
+        };
+        render(_jsx(TestComponent, {}));
+        renderCellSpy.mockClear();
+        await userEvents.click(screen.getByText('Select 1 and 3'));
+        expect(getRenderCountFor(renderCellSpy, '1')).toBe(1);
+        expect(getRenderCountFor(renderCellSpy, '2')).toBe(0);
+        expect(getRenderCountFor(renderCellSpy, '3')).toBe(1);
+    });
+};

package/components/DataGrid/types.d.ts

@@ -181,6 +181,15 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
      * Включает моноширинный шрифт для чисел в таблице
      */
     isTabularNums?: boolean;
+    /**
+     * Кастомный компонент для отображения строк таблицы
+     * @example <DataGrid renderRow={(row) => <DataGridCollapsibleRow><CustomContent row={row} /></DataGridCollapsibleRow>} />
+     */
+    renderRow?: (row: TData, index: number) => ReactNode;
+    /**
+     * Вариант отображения таблицы на мобильных устройствах
+     */
+    mobileDisplayVariant?: 'cards' | 'list';
 };
 export type DataGridSort<TSortField> = {
     /**
@@ -336,3 +345,5 @@ export type DataGridRowWithOptions<TData extends DataGridRow> = TData & {
     options?: DataGridRowOptions<TData>;
     children?: DataGridRowWithOptions<TData>[];
 };
+export type ContextOnRowClick = (row: Record<string, unknown>) => void;
+export type RenderRow = (row: Record<string, unknown>, index: number) => ReactNode;

package/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/useDataGridMobileLogic.d.ts

@@ -6,12 +6,14 @@ type UseDataGridMobileLogicParams<TData extends Record<string, CellValue> = Data
     columns?: DataGridSingleColumn<TData>[];
     rows?: TData[];
     isNoScrollToTop?: boolean;
+    mobileDisplayVariant: 'cards' | 'list';
 };
-export declare const useDataGridMobileLogic: <TData extends Record<string, unknown> = DataGridRow>({ containerRef, isLoading, columns, rows, isNoScrollToTop, }: UseDataGridMobileLogicParams<TData>) => {
+export declare const useDataGridMobileLogic: <TData extends Record<string, unknown> = DataGridRow>({ containerRef, isLoading, columns, rows, isNoScrollToTop, mobileDisplayVariant, }: UseDataGridMobileLogicParams<TData>) => {
     isMobile: boolean;
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
+        mobileDisplayVariant: "list" | "cards";
     };
 };
 export {};

package/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/useDataGridMobileLogic.js

@@ -2,7 +2,7 @@ import { useEffect, useLayoutEffect, useMemo, useRef, } from 'react';
 import { pageLayoutClassnames } from '../../../../PageLayoutContainer/constants';
 import { useViewportType } from '../../../../useViewportType';
 import { DEFAULT_MOBILE_SKELETON_ROWS_COUNT } from '../../../constants';
-export const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows, isNoScrollToTop = false, }) => {
+export const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows, isNoScrollToTop = false, mobileDisplayVariant, }) => {
     const { isMobile } = useViewportType();
     const firstLoadedRowsCountRef = useRef(null);
     const mobileSkeletonCellsCount = useMemo(() => columns?.filter((column) => !column.isHideOnMobile).length ?? 0, [columns]);
@@ -31,6 +31,7 @@ export const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows,
     const mobileSkeletonProps = {
         cellsCount: mobileSkeletonCellsCount,
         rowsCount: firstLoadedRowsCountRef.current ?? DEFAULT_MOBILE_SKELETON_ROWS_COUNT,
+        mobileDisplayVariant,
     };
     return { isMobile, mobileSkeletonProps };
 };

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

@@ -1,7 +1,7 @@
 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, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp, }: 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, mobileDisplayVariant, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp, }: UseLogicParams<TData, TSortField>) => {
     dataGridClassName: string | undefined;
     containerCssVars: import("react").CSSProperties;
     isDataGridDisabled: boolean | undefined;
@@ -43,6 +43,7 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
+        mobileDisplayVariant: "list" | "cards";
     };
     hasGroupedColumns: boolean;
     headProps: {
@@ -58,7 +59,9 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
         isSelectable: boolean;
         onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
     };
+    mobileDisplayVariant: "list" | "cards";
     sections: import("../PinnedSections/types").PinnedSection<TData>[];
+    isSelfContained: boolean;
     loaderProps: {
         isLoading: boolean | undefined;
         isVisibleDivider: boolean;

package/components/DataGrid/useLogic/useLogic.js

@@ -3,12 +3,12 @@ import { ConfigContext } from '../../ConfigProvider';
 import { useFirstMountState } from '../../useFirstMountState';
 import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';
-import { dataGridClassnames } from '../constants';
+import { dataGridClassnames, EXPANDED_LEVEL_BY_DEFAULT, INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT, } from '../constants';
 import { Variant } from '../enums';
 import { getDataGridCssVars, getFlattenColumns, getGridTemplateColumns, isGroupColumns, } from '../utils';
 import { useDataGridMobileLogic, usePinnedColumns } from './hooks';
 import { getIsAllowHorizontalScroll } from './utils';
-export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
+export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
     const isFirstRender = useFirstMountState();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
@@ -42,10 +42,21 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         columns: getFlattenColumns(processedColumns()),
         rows,
         isNoScrollToTop: isLoading && isNoData,
+        mobileDisplayVariant,
     });
-    const treeRenderConfig = Object.is(variant, Variant.Subrows)
-        ? { ...subrows, isInitialExpanded: true }
-        : tree;
+    const treeRenderConfig = useMemo(() => {
+        const config = Object.is(variant, Variant.Subrows)
+            ? { ...subrows, isInitialExpanded: true }
+            : tree;
+        if (isMobile) {
+            return {
+                ...config,
+                expandedLevel: EXPANDED_LEVEL_BY_DEFAULT,
+                initialVisibleChildrenCount: INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT,
+            };
+        }
+        return config;
+    }, [variant, subrows, tree, isMobile]);
     const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
     const gridColumns = useMemo(() => getGridTemplateColumns(getFlattenColumns(columns)), [columns]);
     const isAllowHorizontalScroll = getIsAllowHorizontalScroll(getFlattenColumns(columns));
@@ -63,7 +74,7 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
         onSelectRow(filteredRows);
     };
-    const handleSelectRow = (row) => (event) => {
+    const handleSelectRow = useCallback((row) => (event) => {
         if (!onSelectRow) {
             return;
         }
@@ -71,7 +82,7 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
             return onSelectRow([...selectedRowsRef.current, row]);
         }
         onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
-    };
+    }, []);
     const hasGroupedColumns = columns.some(isGroupColumns);
     const gridViewMode = hasGroupedColumns ? 'full' : gridViewModeProp;
     const isHideHead = (isHideHeaderIfNoData && isNoData) || (hasGroupedColumns && isNoData);
@@ -124,7 +135,9 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
             isSelectable,
             onSelectRow: handleSelectRow,
         },
+        mobileDisplayVariant,
         sections,
+        isSelfContained: mobileDisplayVariant === 'cards',
         loaderProps: {
             isLoading: !isFirstRender && isLoading,
             isVisibleDivider: Boolean(rows.length),

package/components/DataGridActionCell/DataGridMainActions/Action/MainIconButton/MainIconButton.js

@@ -15,9 +15,11 @@ const iconButtonCva = cva(mainIconButtonClassnames.root, {
 export const MainIconButton = (props) => {
     const { tooltipProps } = useLogic(props);
     const { action, onActionClick, isDisabled, tooltipPlacement } = props;
-    const { name, icon, needConfirm, confirmText, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, ...actions } = action;
+    const { name, icon, needConfirm, confirmText, confirmMobileTitle, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, mobileProps, ...actions } = action;
     const renderButton = (renderProps) => (_jsx(Tooltip, { withoutContainer: !disabled, placement: tooltipPlacement, ...tooltipProps, children: _jsx(StyledIconButton, { disabled: isDisabled || disabled, loading: loading, ...actions, variant: "text", ...renderProps, className: iconButtonCva({ isMobilePrimary }), children: icon }) }, name));
-    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
+    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, popoverProps: {
+                title: confirmMobileTitle,
+            }, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
             onClick: onActionClick(onClick),
         })) }));
 };

package/components/DataGridActionCell/DataGridMainActions/Action/MobileMainButton/MobileMainButton.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { ConfirmAction, } from '../../../../ConfirmAction';
 import { StyledButton } from './styles';
 export const MobileMainButton = ({ action, isDisabled, onActionClick, }) => {
-    const { mobileProps, name, icon, needConfirm, confirmText, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, ...actions } = action;
+    const { mobileProps, name, icon, needConfirm, confirmText, confirmMobileTitle, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, ...actions } = action;
     const { text, color } = mobileProps ?? { text: name, color: 'primary' };
     const renderButton = (renderProps) => (_jsx(StyledButton, { disabled: isDisabled || disabled, loading: loading, color: color, ...actions, variant: "contained", ...renderProps, children: text }));
-    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
+    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, popoverProps: {
+                title: confirmMobileTitle,
+            }, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
             onClick: onActionClick(onClick),
         })) }));
 };

package/components/DataGridActionCell/types.d.ts

@@ -34,6 +34,10 @@ export type SingleAction<TAction> = {
      * Поясняющий текст для подтверждения действия
      */
     confirmText?: ConfirmActionProps['text'];
+    /**
+     * Заголовок для подтверждения действия на мобильных устройствах
+     */
+    confirmMobileTitle?: string;
     /**
      * Параметры кнопки подтверждения действия
      */

package/components/DataGridCollapsibleRow/DataGridCollapsibleRow.d.ts

@@ -0,0 +1,2 @@
+import type { DataGridCollapsibleRowProps } from './types';
+export declare const DataGridCollapsibleRow: ({ children, initialOpen, onOpen, onClose, }: DataGridCollapsibleRowProps) => import("react/jsx-runtime").JSX.Element;

package/components/DataGridCollapsibleRow/DataGridCollapsibleRow.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Button } from '../Button';
+import { Collapse } from '../Collapse';
+import { cva } from '../utils/cva';
+import { collapsibleRowClassnames } from './constants';
+import { ChevronIcon, ChildrenWrapper, CollapseButton, CollapseCell, CollapseContainer, CollapseContent, MobileExpandButtonWrapper, StyledRowBase, } from './styles';
+import { useLogic } from './useLogic';
+const chevronIconCva = cva(collapsibleRowClassnames.chevronIcon, {
+    variants: {
+        isActive: {
+            true: collapsibleRowClassnames.chevronIconActive,
+        },
+    },
+});
+export const DataGridCollapsibleRow = ({ children, initialOpen, onOpen, onClose, }) => {
+    const { handleToggle, isOpen, rowBaseProps, itemProps, handleRowClick } = useLogic({
+        initialOpen,
+        onOpen,
+        onClose,
+    });
+    const renderStartAdornment = useCallback((isFirstCell) => {
+        if (!isFirstCell) {
+            return null;
+        }
+        return (_jsx(CollapseCell, { children: _jsx(CollapseButton, { variant: "text", onClick: handleToggle, title: isOpen ? 'Свернуть' : 'Развернуть', children: _jsx(ChevronIcon, { className: chevronIconCva({ isActive: isOpen }) }) }) }));
+    }, [isOpen, handleToggle]);
+    return (_jsx(StyledRowBase, { ...rowBaseProps, renderStartAdornment: renderStartAdornment, onRowClick: handleRowClick, customContent: _jsxs(_Fragment, { children: [_jsx(MobileExpandButtonWrapper, { children: _jsxs(Button, { variant: "link", onClick: handleToggle, className: collapsibleRowClassnames.collapseButton, children: [_jsx(ChevronIcon, { className: chevronIconCva({ isActive: isOpen }) }), isOpen ? 'Свернуть' : 'Развернуть'] }) }), _jsx(Collapse, { in: isOpen, unmountOnExit: true, children: _jsx(CollapseContainer, { className: collapsibleRowClassnames.collapseContainer, children: _jsx(CollapseContent, { children: _jsx(ChildrenWrapper, { className: collapsibleRowClassnames.collapsibleContent, children: children }) }) }) })] }), ...itemProps }));
+};

package/components/DataGridCollapsibleRow/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const STORAGE_KEY_PREFIX = "collapsible-row";
+export declare const collapsibleRowClassnames: {
+    root: string;
+    cellsWrapper: string;
+    active: string;
+    collapseContainer: string;
+    chevronIcon: string;
+    chevronIconActive: string;
+    collapseButton: string;
+    collapsibleContent: string;
+};

package/components/DataGridCollapsibleRow/constants.js

@@ -0,0 +1,12 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const STORAGE_KEY_PREFIX = 'collapsible-row';
+export const collapsibleRowClassnames = {
+    root: createUIKitClassname('data-grid__collapsible-row'),
+    cellsWrapper: createUIKitClassname('data-grid__collapsible-row_cells-wrapper'),
+    active: createUIKitClassname('data-grid__collapsible-row_active'),
+    collapseContainer: createUIKitClassname('data-grid__collapsible-row_collapse-container'),
+    chevronIcon: createUIKitClassname('data-grid__collapsible-row_chevron-icon'),
+    chevronIconActive: createUIKitClassname('data-grid__collapsible-row__chevron-icon_active'),
+    collapseButton: createUIKitClassname('data-grid__collapsible-row__collapse-button'),
+    collapsibleContent: createUIKitClassname('data-grid__collapsible-row__collapsible-content'),
+};

package/components/DataGridCollapsibleRow/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGridCollapsibleRow } from './DataGridCollapsibleRow';
+export type { DataGridCollapsibleRowProps } from './types';

package/components/DataGridCollapsibleRow/index.js

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

package/components/DataGridCollapsibleRow/public.d.ts

@@ -0,0 +1,2 @@
+export { DataGridCollapsibleRow } from './DataGridCollapsibleRow';
+export type { DataGridCollapsibleRowProps } from './types';

package/components/DataGridCollapsibleRow/public.js

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

package/components/DataGridCollapsibleRow/styles.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+export declare const CollapseContainer: 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 CollapseContent: 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 ChildrenWrapper: 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 MobileExpandButtonWrapper: 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 CollapseButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CollapseCell: 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 ChevronIcon: import("../styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    color?: string | undefined;
+    titleAccess?: string | undefined;
+    size?: "sm" | "md" | undefined;
+} & import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledRowBase: import("../styled").StyledComponent<import("../DataGrid/RowBase").RowBaseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;