@astral/ui 4.73.1 → 4.75.0

package/components/CardGridInfinite/CardGridInfinite.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useMemo } from 'react';
 import { Virtuoso, VirtuosoGrid, } from 'react-virtuoso';
 import { ContentState } from '../ContentState';
+import { selfContainedClassname } from '../constants';
+import { cva } from '../utils/cva';
 import { Card } from './Card';
 import { cardGridClassnames } from './constants';
 import { Footer } from './Footer';
@@ -11,8 +13,15 @@ import { OnTopButton } from './OnTopButton';
 import { SkeletonGrid } from './SkeletonGrid';
 import { ContentStateWrapper } from './styles';
 import { useLogic } from './useLogic';
+const rootCva = cva([cardGridClassnames.root, selfContainedClassname], {
+    variants: {
+        isLoading: {
+            true: cardGridClassnames.loading,
+        },
+    },
+});
 export const CardGridInfinite = (props) => {
-    const { contentStateProps, desktopCardWidth, virtuosoProps, scrollParent, skeleton, footerProps, onTopButtonProps, list, noDataImgSrc, defineCard, classnames, isMobile, } = useLogic(props);
+    const { contentStateProps, desktopCardWidth, virtuosoProps, scrollParent, skeleton, footerProps, onTopButtonProps, list, noDataImgSrc, defineCard, isLoading, isMobile, } = useLogic(props);
     const VirtuosoList = useMemo(() => forwardRef((listProps, ref) => (_jsx(List, { ...listProps, ref: ref, desktopCardWidth: desktopCardWidth }))), [desktopCardWidth]);
     const renderVirtuoso = () => {
         if (!scrollParent) {
@@ -30,5 +39,5 @@ export const CardGridInfinite = (props) => {
                 Footer: () => _jsx(Footer, { ...footerProps }),
             }, itemContent: (_, item) => _jsx(Card, { item: item, ...defineCard(item) }) }));
     };
-    return (_jsx(ContentStateWrapper, { className: classnames, children: _jsx(ContentState, { ...contentStateProps, loadingContent: _jsx(SkeletonGrid, { skeleton: skeleton, desktopCardWidth: desktopCardWidth }), children: list?.length ? (_jsxs(_Fragment, { children: [renderVirtuoso(), _jsx(OnTopButton, { ...onTopButtonProps })] })) : (_jsx(NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
+    return (_jsx(ContentStateWrapper, { className: rootCva({ isLoading }), children: _jsx(ContentState, { ...contentStateProps, loadingContent: _jsx(SkeletonGrid, { skeleton: skeleton, desktopCardWidth: desktopCardWidth }), children: list?.length ? (_jsxs(_Fragment, { children: [renderVirtuoso(), _jsx(OnTopButton, { ...onTopButtonProps })] })) : (_jsx(NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
 };

package/components/CardGridInfinite/styles.js

@@ -23,4 +23,8 @@ export const ContentStateWrapper = styled.div `
   & .${loadingPlaceholderClassnames.root} {
     justify-content: flex-start
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+  }
 `;

package/components/CardGridInfinite/useLogic/useLogic.d.ts

@@ -37,6 +37,6 @@ export declare const useLogic: <TDataItem extends Record<string, unknown>>({ lis
     list: TDataItem[] | undefined;
     noDataImgSrc: string | undefined;
     defineCard: (itemData: TDataItem) => Omit<import("..").CardProps<TDataItem>, "item">;
-    classnames: string;
+    isLoading: boolean | undefined;
 };
 export {};

package/components/CardGridInfinite/useLogic/useLogic.js

@@ -1,19 +1,12 @@
-import { useContext, useEffect, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
 import { useScrollManagement } from '../../useScrollManagement';
 import { useStickyButton } from '../../useStickyButton';
 import { useViewportType } from '../../useViewportType';
-import { classNames } from '../../utils/classNames';
-import { cardGridClassnames, OVERSCAN, VIRTUOSO_CONTAINER_ID, } from '../constants';
+import { OVERSCAN, VIRTUOSO_CONTAINER_ID } from '../constants';
 export const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef, skeleton, onRetry, endOfScrollMsg, isEndReached, onLoadMore, noDataImgSrc, defineCard, desktopCardWidth, }) => {
     const { imagesMap } = useContext(ConfigContext);
     const { isMobile } = useViewportType();
-    useEffect(() => {
-        if (isMobile && scrollRef?.current) {
-            scrollRef.current.style.backgroundColor = 'unset';
-            scrollRef.current.style.padding = 'unset';
-        }
-    }, [isMobile]);
     const contentStateProps = useMemo(() => {
         const isNoData = !list?.length;
         return {
@@ -39,9 +32,6 @@ export const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scro
         recalculateVerticalScroll();
         propsHandleRangeChanged(range);
     };
-    const classnames = useMemo(() => classNames(cardGridClassnames.root, {
-        [cardGridClassnames.loading]: isLoading,
-    }), [isLoading]);
     return {
         contentStateProps,
         desktopCardWidth,
@@ -71,6 +61,6 @@ export const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scro
         list,
         noDataImgSrc,
         defineCard,
-        classnames,
+        isLoading,
     };
 };

package/components/Chevron/Chevron.d.ts

@@ -1,5 +1,5 @@
-import { type SvgIconProps } from '@mui/material/SvgIcon';
 import type { ReactElement } from 'react';
+import { type SvgIconProps } from '../SvgIcon';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type ChevronProps = {
     isActive?: boolean;

package/components/ConfirmAction/ConfirmAction.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../Button';
 import { Popover } from '../Popover';
-import { DEFAULT_ANCHOR_ORIGIN, DEFAULT_TRANSFORM_ORIGIN } from './constants';
+import { DEFAULT_ANCHOR_ORIGIN, DEFAULT_MOBILE_TITLE, DEFAULT_TRANSFORM_ORIGIN, } from './constants';
 import { Actions, StyledTypography, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const ConfirmAction = (props) => {
     const { actionComponentProps, popoverProps, cancelButtonProps, confirmButtonProps, } = useLogic(props);
     const { text, confirmButtonProps: externalConfirmButtonProps, popoverProps: externalPopoverProps, actionComponent, } = props;
     const { text: confirmButtonText = 'Подтвердить' } = externalConfirmButtonProps || {};
-    const { anchorOrigin = DEFAULT_ANCHOR_ORIGIN, transformOrigin = DEFAULT_TRANSFORM_ORIGIN, } = externalPopoverProps || {};
-    return (_jsxs(_Fragment, { children: [actionComponent(actionComponentProps), _jsx(Popover, { anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ...popoverProps, children: _jsxs(Wrapper, { children: [text && _jsx(StyledTypography, { children: text }), _jsxs(Actions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: confirmButtonText })] })] }) })] }));
+    const { anchorOrigin = DEFAULT_ANCHOR_ORIGIN, transformOrigin = DEFAULT_TRANSFORM_ORIGIN, title = DEFAULT_MOBILE_TITLE, } = externalPopoverProps || {};
+    return (_jsxs(_Fragment, { children: [actionComponent(actionComponentProps), _jsx(Popover, { anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, title: title, ...popoverProps, children: _jsxs(Wrapper, { children: [text && _jsx(StyledTypography, { children: text }), _jsxs(Actions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: confirmButtonText })] })] }) })] }));
 };

package/components/ConfirmAction/constants.d.ts

@@ -6,6 +6,7 @@ export declare const DEFAULT_TRANSFORM_ORIGIN: {
     vertical: string;
     horizontal: string;
 };
+export declare const DEFAULT_MOBILE_TITLE = "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F";
 export declare const confirmActionClassnames: {
     actionComponent: string;
 };

package/components/ConfirmAction/constants.js

@@ -7,6 +7,7 @@ export const DEFAULT_TRANSFORM_ORIGIN = {
     vertical: 'top',
     horizontal: 'right',
 };
+export const DEFAULT_MOBILE_TITLE = 'Подтверждение действия';
 export const confirmActionClassnames = {
     actionComponent: createUIKitClassname('confirm-action__action-component'),
 };

package/components/ConfirmAction/styles.js

@@ -6,13 +6,26 @@ export const Wrapper = styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     max-width: unset;
+    padding: 0;
   }
 `;
 export const StyledTypography = styled(Typography) `
   margin-bottom: ${({ theme }) => theme.spacing(3)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: 0;
+    padding: ${({ theme }) => theme.spacing(5, 4)};
+  }
 `;
 export const Actions = styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(3)};
   justify-content: end;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-direction: column-reverse;
+    gap: ${({ theme }) => theme.spacing(2)};
+
+    padding: ${({ theme }) => theme.spacing(4)};
+  }
 `;

package/components/ConfirmAction/types.d.ts

@@ -25,7 +25,7 @@ export type ConfirmActionProps = {
     /**
      * Параметры всплывающего окна
      */
-    popoverProps?: Pick<PopoverProps, 'anchorOrigin' | 'transformOrigin'>;
+    popoverProps?: Pick<PopoverProps, 'anchorOrigin' | 'transformOrigin' | 'title'>;
     /**
      * Кнопка, действие которой необходимо подтвердить
      */

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

@@ -1,2 +1,2 @@
 import type { BodyProps } from './types';
-export declare const Body: <TData extends Record<string, unknown>>({ rows, selectedRows, minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps }: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: <TData extends Record<string, unknown>>({ rows, selectedRows, minDisplayRows, keyId, noDataPlaceholder, className, renderRow, columns, isSelectable, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, ...rowProps }: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/Body/Body.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from '../../utils/classNames';
 import { cva } from '../../utils/cva';
+import { CustomRowWrapper } from '../CustomRowWrapper';
 import { Row } from '../Row';
 import { RowContextProvider } from '../Row/RowContext';
 import { bodyClassnames } from './constants';
@@ -14,12 +15,13 @@ const bodyCva = cva(bodyClassnames.root, {
         },
     },
 });
-export const Body = ({ rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps }) => {
+export const Body = ({ rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, renderRow, columns, isSelectable, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, ...rowProps }) => {
     const { disableMinHeight, bodyCssVars } = useLogic({ minDisplayRows });
-    const renderedRows = rows.map(({ children, options, ...row }) => {
+    const renderedRows = rows.map((row, index) => {
         const rowId = row[keyId];
         const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
-        return (_jsx(RowContextProvider, { children: _jsx(Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
+        const { children, options } = row;
+        return (_jsx(RowContextProvider, { row: row, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? (_jsx(CustomRowWrapper, { index: index, renderRow: renderRow, row: row })) : (_jsx(Row, { row: row, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, columns: columns, isSelectable: isSelectable, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, ...rowProps }, rowId)) }, rowId));
     });
     return (_jsx(Wrapper, { className: classNames(className, bodyCva({ disableMinHeight })), style: bodyCssVars, children: rows.length ? renderedRows : noDataPlaceholder }));
 };

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

@@ -107,4 +107,9 @@ export type BodyProps<TData extends Record<string, CellValue>> = {
      * Класс применяемый для корневого элемента
      */
     className?: string;
+    /**
+     * Кастомный компонент для отображения строк таблицы
+     */
+    renderRow?: (row: TData, index: number) => ReactNode;
 };
+export type ContextOnSelectRow = (row: Record<string, unknown>) => (event: ChangeEvent<HTMLInputElement>) => void;

package/components/DataGrid/Cell/Cell.d.ts

@@ -30,5 +30,13 @@ export type CellProps<TData extends Record<string, CellValue>> = {
      * Скрытие ячейки на мобильных устройствах
      */
     isHideOnMobile?: boolean;
+    /**
+     * Флаг наличия вложенных элементов в строке
+     */
+    hasNestedChildren?: boolean;
+    /**
+     * Ссылка на корневой элемент строки
+     */
+    rootRowElement?: HTMLLIElement | null;
 };
-export declare const Cell: <TData extends Record<string, unknown>>(props: CellProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const Cell: <TData extends Record<string, unknown>>(props: CellProps<TData>) => import("react/jsx-runtime").JSX.Element | null;

package/components/DataGrid/Cell/Cell.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
 import { OverflowTypography } from '../../OverflowTypography';
 import { useHidePersonalData } from '../../personalDataSecurity';
+import { useViewportType } from '../../useViewportType';
 import { classNames } from '../../utils/classNames';
 import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
@@ -23,6 +25,9 @@ const cellCva = cva(dataGridCellClassnames.root, {
             center: dataGridCellClassnames.alignCenter,
             right: dataGridCellClassnames.alignRight,
         },
+        isActionColumn: {
+            true: dataGridCellClassnames.actionColumn,
+        },
     },
 });
 const cellContentCva = cva(dataGridCellClassnames.cellContent, {
@@ -44,17 +49,26 @@ const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
 });
 export const Cell = (props) => {
     const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, } = useLogic(props);
-    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, } = props;
+    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, hasNestedChildren, rootRowElement, } = props;
     const { renderCell, align = 'left' } = cell;
+    const { isMobile } = useViewportType();
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData === true,
     });
-    return (_jsxs(Wrapper, { className: classNames(className, hidePersonalDataClassname, cellCva({
+    const cellNode = (_jsxs(Wrapper, { className: classNames(className, hidePersonalDataClassname, cellCva({
             isHideOnMobile: cell.isHideOnMobile || isHideOnMobile,
             isDisabled,
             withStartAdornment: hasStartAdornment,
             align,
+            isActionColumn,
         })), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
                             hidden: hideTitleOnMobile || isActionColumn,
                         }), children: label }), renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] })] }));
+    if (isActionColumn && isMobile && hasNestedChildren) {
+        if (!rootRowElement) {
+            return null;
+        }
+        return createPortal(cellNode, rootRowElement);
+    }
+    return cellNode;
 };

package/components/DataGrid/CustomRowWrapper/CustomRowWrapper.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type RenderRow } from '../types';
+type CustomRowWrapperProps = {
+    index: number;
+    renderRow: RenderRow;
+    row: Record<string, unknown>;
+};
+/**
+ * Обёртка с `memo` для изоляции пользовательского `renderRow`.
+ *
+ * При re-render родителя (`Body`, Virtuoso `Item`) без обёртки `renderRow(row, index)`
+ * вызывается заново на каждой строке и каждый раз создаёт новые React-elements, из‑за чего `memo` у дочерних компонентов
+ * (например, `DataGridCollapsibleRow`) не срабатывает.
+ *
+ * `CustomRowWrapper` повторно вызывает `renderRow` только когда изменились
+ * `index`, `row` или ссылка на `renderRow`.
+ */
+export declare const CustomRowWrapper: import("react").MemoExoticComponent<({ index, renderRow, row }: CustomRowWrapperProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/components/DataGrid/CustomRowWrapper/CustomRowWrapper.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+/**
+ * Обёртка с `memo` для изоляции пользовательского `renderRow`.
+ *
+ * При re-render родителя (`Body`, Virtuoso `Item`) без обёртки `renderRow(row, index)`
+ * вызывается заново на каждой строке и каждый раз создаёт новые React-elements, из‑за чего `memo` у дочерних компонентов
+ * (например, `DataGridCollapsibleRow`) не срабатывает.
+ *
+ * `CustomRowWrapper` повторно вызывает `renderRow` только когда изменились
+ * `index`, `row` или ссылка на `renderRow`.
+ */
+export const CustomRowWrapper = memo(({ index, renderRow, row }) => {
+    return _jsx(_Fragment, { children: renderRow(row, index) });
+});

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

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

package/components/DataGrid/CustomRowWrapper/index.js

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

package/components/DataGrid/DataGrid.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext } from 'react';
 import { ConfigContext } from '../ConfigProvider';
 import { ContentState } from '../ContentState';
+import { selfContainedClassname } from '../constants';
 import { classNames } from '../utils/classNames';
 import { cva } from '../utils/cva';
 import { getInertProps } from '../utils/getInertProps';
@@ -38,6 +39,13 @@ const dataGridCva = cva(dataGridClassnames.root, {
         hasGroupedColumns: {
             true: dataGridClassnames.hasGroupedColumns,
         },
+        mobileDisplayVariant: {
+            cards: dataGridClassnames.mobileVariantCards,
+            list: dataGridClassnames.mobileVariantList,
+        },
+        isSelfContained: {
+            true: selfContainedClassname,
+        },
     },
 });
 const bodyCva = cva(dataGridClassnames.body, {
@@ -48,9 +56,9 @@ const bodyCva = cva(dataGridClassnames.body, {
     },
 });
 export const DataGrid = (props) => {
-    const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, hasGroupedColumns, gridViewMode, } = useLogic(props);
+    const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, hasGroupedColumns, gridViewMode, mobileDisplayVariant, isSelfContained, } = useLogic(props);
     const { emptySymbol } = useContext(ConfigContext);
-    const { columns, selectedRows = [], minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, } = props;
+    const { columns, selectedRows = [], minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, renderRow, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const Wrapper = isDataGridDisabled
@@ -78,6 +86,7 @@ export const DataGrid = (props) => {
         noDataPlaceholder: renderedPlaceholder(),
         onRowClick,
         ...rowHoverProps,
+        renderRow,
     };
     const renderTableContent = () => {
         if (!hasPinnedColumns || isMobile) {
@@ -89,10 +98,12 @@ export const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return (_jsx(DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: classNames(dataGridClassName, dataGridCva({
+    return (_jsx(DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: classNames(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,
                 hasGroupedColumns,
+                mobileDisplayVariant,
+                isSelfContained,
             })), children: [renderTableContent(), _jsx(Loader, { ...loaderProps }), footer && footer] }) }));
 };

package/components/DataGrid/DataGridContext/DataGridContext.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" />
+import { type ReactNode } from 'react';
+import { type DataGridColumns } from '../types';
 export type DataGridContextProps = {
-    checkIsOpened: (key: string) => boolean;
-    checkIsMoreOpened: (key: string) => boolean;
-    toggleOpenItems: (key: string) => void;
-    toggleOpenMoreItems: (key: string) => void;
     isLoading?: boolean;
     isTabularNums?: boolean;
+    gridColumns: string;
+    emptyCellValue: ReactNode;
+    activeRowId?: string;
+    keyId: unknown;
+    columns: DataGridColumns<Record<string, unknown>>[];
+    onRowClick?: (row: Record<string, unknown>) => void;
+    mobileDisplayVariant?: 'list' | 'cards';
 };
 export declare const DataGridContext: import("react").Context<DataGridContextProps>;

package/components/DataGrid/DataGridContext/DataGridContext.js

@@ -1,9 +1,12 @@
 import { createContext } from 'react';
 export const DataGridContext = createContext({
-    checkIsOpened: () => false,
-    checkIsMoreOpened: () => false,
-    toggleOpenItems: () => undefined,
-    toggleOpenMoreItems: () => undefined,
     isLoading: false,
     isTabularNums: false,
+    gridColumns: '',
+    emptyCellValue: '',
+    activeRowId: '',
+    keyId: '',
+    columns: [],
+    onRowClick: () => undefined,
+    mobileDisplayVariant: 'list',
 });

package/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.d.ts

@@ -1,8 +1,7 @@
 import { type ReactNode } from 'react';
-type DataGridContextProviderProps = {
-    isLoading?: boolean;
-    isTabularNums?: boolean;
+import { type DataGridContextProps } from '../DataGridContext';
+type DataGridContextProviderProps = Pick<DataGridContextProps, 'isLoading' | 'isTabularNums' | 'gridColumns' | 'emptyCellValue' | 'activeRowId' | 'keyId' | 'columns' | 'onRowClick' | 'mobileDisplayVariant'> & {
     children: ReactNode;
 };
-export declare const DataGridContextProvider: ({ isLoading, isTabularNums, children, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridContextProvider: ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js

@@ -1,58 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import { DataGridStorageProvider } from '../../DataGridStorageContext';
 import { DataGridContext } from '../DataGridContext';
-const ROW_FLAGS_BY_DEFAULT = {
-    isOpenedItems: true,
-    iOpenedMoreItems: false,
-};
-export const DataGridContextProvider = ({ isLoading, isTabularNums, children, }) => {
-    const [openedItems, setOpenedItems] = useState({});
-    const checkIsOpened = useCallback((key) => {
-        if (openedItems[key]) {
-            return true;
-        }
-        return false;
-    }, [openedItems]);
-    const checkIsMoreOpened = useCallback((key) => {
-        if (openedItems[key]) {
-            return openedItems[key].iOpenedMoreItems;
-        }
-        return false;
-    }, [openedItems]);
-    const toggleOpenItems = useCallback((key) => setOpenedItems((currentOpenedItems) => {
-        if (checkIsOpened(key)) {
-            const newOpenedItems = { ...currentOpenedItems };
-            delete newOpenedItems[key];
-            return newOpenedItems;
-        }
-        return { ...currentOpenedItems, [key]: ROW_FLAGS_BY_DEFAULT };
-    }), [openedItems]);
-    const toggleOpenMoreItems = useCallback((key) => setOpenedItems((currentOpenedItems) => {
-        if (checkIsMoreOpened(key)) {
-            const newOpenedItems = { ...currentOpenedItems };
-            newOpenedItems[key] = ROW_FLAGS_BY_DEFAULT;
-            return newOpenedItems;
-        }
-        return {
-            ...currentOpenedItems,
-            [key]: { ...ROW_FLAGS_BY_DEFAULT, iOpenedMoreItems: true },
-        };
-    }), [openedItems]);
+export const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, }) => {
     const contextValue = useMemo(() => ({
-        checkIsOpened,
-        checkIsMoreOpened,
-        toggleOpenItems,
-        toggleOpenMoreItems,
         isLoading,
         isTabularNums,
+        gridColumns,
+        emptyCellValue,
+        activeRowId,
+        keyId,
+        columns,
+        onRowClick,
+        mobileDisplayVariant,
     }), [
-        checkIsOpened,
-        checkIsMoreOpened,
-        toggleOpenItems,
-        toggleOpenMoreItems,
         isLoading,
-        openedItems,
         isTabularNums,
+        gridColumns,
+        emptyCellValue,
+        activeRowId,
+        keyId,
+        columns,
+        onRowClick,
+        mobileDisplayVariant,
     ]);
-    return (_jsx(DataGridContext.Provider, { value: contextValue, children: children }));
+    return (_jsx(DataGridContext.Provider, { value: contextValue, children: _jsx(DataGridStorageProvider, { children: children }) }));
 };

package/components/DataGrid/DataGridStorageContext/DataGridStorageContext.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export type DataGridStorageContextProps = {
+    getItem: (key: string) => unknown;
+    setItem: (key: string, value: unknown) => void;
+};
+/**
+ * Контекст хранилища для сохранения и чтения локального UI-состояния внутри компонента DataGrid.
+ *
+ * Это обычный объект, а не React-состояние и не `localStorage`.
+ * `setItem` не вызывает ре-рендер; данные живут, пока смонтирован `DataGrid`, и теряются при размонтировании.
+ *
+ * Провайдер подключается внутри `DataGridProvider`.
+ *
+ * @example
+ * // Сохранить значение между размонтированием и повторным монтированием дочернего компонента
+ * const { getItem, setItem } = useContext(DataGridStorageContext);
+ * const key = `row-expanded:${rowId}`;
+ *
+ * const [isOpen, setIsOpen] = useState(
+ *   getItem(key) !== undefined ? (getItem(key) as boolean) : initialOpen,
+ * );
+ *
+ * const handleToggle = () => {
+ *   const next = !isOpen;
+ *   setIsOpen(next);
+ *   setItem(key, next);
+ * };
+ */
+export declare const DataGridStorageContext: import("react").Context<DataGridStorageContextProps>;

package/components/DataGrid/DataGridStorageContext/DataGridStorageContext.js

@@ -0,0 +1,28 @@
+import { createContext } from 'react';
+/**
+ * Контекст хранилища для сохранения и чтения локального UI-состояния внутри компонента DataGrid.
+ *
+ * Это обычный объект, а не React-состояние и не `localStorage`.
+ * `setItem` не вызывает ре-рендер; данные живут, пока смонтирован `DataGrid`, и теряются при размонтировании.
+ *
+ * Провайдер подключается внутри `DataGridProvider`.
+ *
+ * @example
+ * // Сохранить значение между размонтированием и повторным монтированием дочернего компонента
+ * const { getItem, setItem } = useContext(DataGridStorageContext);
+ * const key = `row-expanded:${rowId}`;
+ *
+ * const [isOpen, setIsOpen] = useState(
+ *   getItem(key) !== undefined ? (getItem(key) as boolean) : initialOpen,
+ * );
+ *
+ * const handleToggle = () => {
+ *   const next = !isOpen;
+ *   setIsOpen(next);
+ *   setItem(key, next);
+ * };
+ */
+export const DataGridStorageContext = createContext({
+    getItem: () => undefined,
+    setItem: () => undefined,
+});

package/components/DataGrid/DataGridStorageContext/DataGridStorageProvider/DataGridStorageProvider.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type DataGridStorageProviderProps = {
+    children: ReactNode;
+};
+export declare const DataGridStorageProvider: ({ children, }: DataGridStorageProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/DataGrid/DataGridStorageContext/DataGridStorageProvider/DataGridStorageProvider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from 'react';
+import { DataGridStorageContext } from '../DataGridStorageContext';
+export const DataGridStorageProvider = ({ children, }) => {
+    const storageRef = useRef({});
+    const getItem = useCallback((key) => storageRef.current[key], []);
+    const setItem = useCallback((key, value) => {
+        storageRef.current[key] = value;
+    }, []);
+    const contextValue = useMemo(() => ({ getItem, setItem }), [getItem, setItem]);
+    return (_jsx(DataGridStorageContext.Provider, { value: contextValue, children: children }));
+};

package/components/DataGrid/DataGridStorageContext/DataGridStorageProvider/index.d.ts

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

package/components/DataGrid/DataGridStorageContext/DataGridStorageProvider/index.js

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

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

@@ -0,0 +1,2 @@
+export * from './DataGridStorageContext';
+export * from './DataGridStorageProvider';

package/components/DataGrid/DataGridStorageContext/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridStorageContext';
+export * from './DataGridStorageProvider';

package/components/DataGrid/MobileSkeleton/MobileSkeleton.d.ts

@@ -1,6 +1,7 @@
 type MobileSkeletonProps = {
     cellsCount: number;
     rowsCount: number;
+    mobileDisplayVariant: 'cards' | 'list';
 };
-export declare const MobileSkeleton: ({ cellsCount, rowsCount, }: MobileSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MobileSkeleton: ({ cellsCount, mobileDisplayVariant, rowsCount, }: MobileSkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};