@astral/ui 4.74.0 → 4.76.0

package/node/components/ConfirmAction/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.confirmActionClassnames = exports.DEFAULT_TRANSFORM_ORIGIN = exports.DEFAULT_ANCHOR_ORIGIN = void 0;
+exports.confirmActionClassnames = exports.DEFAULT_MOBILE_TITLE = exports.DEFAULT_TRANSFORM_ORIGIN = exports.DEFAULT_ANCHOR_ORIGIN = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.DEFAULT_ANCHOR_ORIGIN = {
     vertical: 'bottom',
@@ -10,6 +10,7 @@ exports.DEFAULT_TRANSFORM_ORIGIN = {
     vertical: 'top',
     horizontal: 'right',
 };
+exports.DEFAULT_MOBILE_TITLE = 'Подтверждение действия';
 exports.confirmActionClassnames = {
     actionComponent: (0, createUIKitClassname_1.createUIKitClassname)('confirm-action__action-component'),
 };

package/node/components/ConfirmAction/styles.js

@@ -9,13 +9,26 @@ exports.Wrapper = styled_1.styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     max-width: unset;
+    padding: 0;
   }
 `;
 exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
   margin-bottom: ${({ theme }) => theme.spacing(3)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: 0;
+    padding: ${({ theme }) => theme.spacing(5, 4)};
+  }
 `;
 exports.Actions = styled_1.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/node/components/ConfirmAction/types.d.ts

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

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

@@ -4,6 +4,7 @@ exports.Body = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../utils/classNames");
 const cva_1 = require("../../utils/cva");
+const CustomRowWrapper_1 = require("../CustomRowWrapper");
 const Row_1 = require("../Row");
 const RowContext_1 = require("../Row/RowContext");
 const constants_1 = require("./constants");
@@ -17,12 +18,13 @@ const bodyCva = (0, cva_1.cva)(constants_1.bodyClassnames.root, {
         },
     },
 });
-const Body = ({ rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps }) => {
+const Body = ({ rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, renderRow, columns, isSelectable, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, ...rowProps }) => {
     const { disableMinHeight, bodyCssVars } = (0, useLogic_1.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 ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
+        const { children, options } = row;
+        return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: row, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: index, renderRow: renderRow, row: row })) : ((0, jsx_runtime_1.jsx)(Row_1.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 ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, bodyCva({ disableMinHeight })), style: bodyCssVars, children: rows.length ? renderedRows : noDataPlaceholder }));
 };

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

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
 const OverflowTypography_1 = require("../../OverflowTypography");
 const personalDataSecurity_1 = require("../../personalDataSecurity");
+const useViewportType_1 = require("../../useViewportType");
 const classNames_1 = require("../../utils/classNames");
 const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
@@ -26,6 +28,9 @@ const cellCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.root, {
             center: constants_1.dataGridCellClassnames.alignCenter,
             right: constants_1.dataGridCellClassnames.alignRight,
         },
+        isActionColumn: {
+            true: constants_1.dataGridCellClassnames.actionColumn,
+        },
     },
 });
 const cellContentCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.cellContent, {
@@ -47,18 +52,27 @@ const columnLabelCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.columnL
 });
 const Cell = (props) => {
     const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, } = (0, useLogic_1.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 } = (0, useViewportType_1.useViewportType)();
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData === true,
     });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, hidePersonalDataClassname, cellCva({
+    const cellNode = ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, hidePersonalDataClassname, cellCva({
             isHideOnMobile: cell.isHideOnMobile || isHideOnMobile,
             isDisabled,
             withStartAdornment: hasStartAdornment,
             align,
+            isActionColumn,
         })), ...(0, getInertProps_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsxs)(styles_1.CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [(0, jsx_runtime_1.jsx)(styles_1.ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
                             hidden: hideTitleOnMobile || isActionColumn,
                         }), children: label }), renderCell?.(row), !renderCell && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] })] }));
+    if (isActionColumn && isMobile && hasNestedChildren) {
+        if (!rootRowElement) {
+            return null;
+        }
+        return (0, react_dom_1.createPortal)(cellNode, rootRowElement);
+    }
+    return cellNode;
 };
 exports.Cell = Cell;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomRowWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * Обёртка с `memo` для изоляции пользовательского `renderRow`.
+ *
+ * При re-render родителя (`Body`, Virtuoso `Item`) без обёртки `renderRow(row, index)`
+ * вызывается заново на каждой строке и каждый раз создаёт новые React-elements, из‑за чего `memo` у дочерних компонентов
+ * (например, `DataGridCollapsibleRow`) не срабатывает.
+ *
+ * `CustomRowWrapper` повторно вызывает `renderRow` только когда изменились
+ * `index`, `row` или ссылка на `renderRow`.
+ */
+exports.CustomRowWrapper = (0, react_1.memo)(({ index, renderRow, row }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderRow(row, index) });
+});

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

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

package/node/components/DataGrid/CustomRowWrapper/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomRowWrapper = void 0;
+var CustomRowWrapper_1 = require("./CustomRowWrapper");
+Object.defineProperty(exports, "CustomRowWrapper", { enumerable: true, get: function () { return CustomRowWrapper_1.CustomRowWrapper; } });

package/node/components/DataGrid/DataGrid.js

@@ -5,11 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ConfigProvider_1 = require("../ConfigProvider");
 const ContentState_1 = require("../ContentState");
+const constants_1 = require("../constants");
 const classNames_1 = require("../utils/classNames");
 const cva_1 = require("../utils/cva");
 const getInertProps_1 = require("../utils/getInertProps");
 const Body_1 = require("./Body");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const DataGridContext_1 = require("./DataGridContext");
 const enums_1 = require("./enums");
 const Head_1 = require("./Head");
@@ -19,43 +20,50 @@ const NoData_1 = require("./NoData");
 const PinnedSections_1 = require("./PinnedSections");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const pinnedSectionsCva = (0, cva_1.cva)(constants_1.dataGridClassnames.pinnedSections, {
+const pinnedSectionsCva = (0, cva_1.cva)(constants_2.dataGridClassnames.pinnedSections, {
     variants: {
         isDisabled: {
-            true: constants_1.dataGridClassnames.disabled,
+            true: constants_2.dataGridClassnames.disabled,
         },
     },
 });
-const dataGridCva = (0, cva_1.cva)(constants_1.dataGridClassnames.root, {
+const dataGridCva = (0, cva_1.cva)(constants_2.dataGridClassnames.root, {
     variants: {
         hasPinnedColumns: {
-            true: constants_1.dataGridClassnames.hasPinnedSections,
+            true: constants_2.dataGridClassnames.hasPinnedSections,
         },
         isAllowHorizontalScroll: {
-            true: constants_1.dataGridClassnames.isAllowHorizontalScroll,
+            true: constants_2.dataGridClassnames.isAllowHorizontalScroll,
         },
         gridViewMode: {
-            full: constants_1.dataGridClassnames.gridViewFull,
-            standard: constants_1.dataGridClassnames.gridViewStandard,
+            full: constants_2.dataGridClassnames.gridViewFull,
+            standard: constants_2.dataGridClassnames.gridViewStandard,
         },
         hasGroupedColumns: {
-            true: constants_1.dataGridClassnames.hasGroupedColumns,
+            true: constants_2.dataGridClassnames.hasGroupedColumns,
+        },
+        mobileDisplayVariant: {
+            cards: constants_2.dataGridClassnames.mobileVariantCards,
+            list: constants_2.dataGridClassnames.mobileVariantList,
+        },
+        isSelfContained: {
+            true: constants_1.selfContainedClassname,
         },
     },
 });
-const bodyCva = (0, cva_1.cva)(constants_1.dataGridClassnames.body, {
+const bodyCva = (0, cva_1.cva)(constants_2.dataGridClassnames.body, {
     variants: {
         isNoData: {
-            true: constants_1.dataGridClassnames.bodyEmpty,
+            true: constants_2.dataGridClassnames.bodyEmpty,
         },
     },
 });
 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, } = (0, useLogic_1.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, } = (0, useLogic_1.useLogic)(props);
     const { emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { columns, selectedRows = [], minDisplayRows = constants_1.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, } = props;
+    const { columns, selectedRows = [], minDisplayRows = constants_2.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.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 = constants_1.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_1.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
+    const { isInitialExpanded = false, expandedLevel = constants_2.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_2.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const Wrapper = isDataGridDisabled
         ? styles_1.DisabledDataGridWrapper
         : styles_1.DataGridWrapper;
@@ -81,10 +89,11 @@ const DataGrid = (props) => {
         noDataPlaceholder: renderedPlaceholder(),
         onRowClick,
         ...rowHoverProps,
+        renderRow,
     };
     const renderTableContent = () => {
         if (!hasPinnedColumns || isMobile) {
-            return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), className: constants_1.dataGridClassnames.wrapper, children: [headPreAddon, !isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, loadingContent: isMobile && (0, jsx_runtime_1.jsx)(MobileSkeleton_1.MobileSkeleton, { ...mobileSkeletonProps }), children: (0, jsx_runtime_1.jsx)(Body_1.Body, { ...commonBodyProps, activeRowId: activeRowId, columns: columns, gridColumns: gridColumns, className: bodyCva({
+            return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), className: constants_2.dataGridClassnames.wrapper, children: [headPreAddon, !isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, loadingContent: isMobile && (0, jsx_runtime_1.jsx)(MobileSkeleton_1.MobileSkeleton, { ...mobileSkeletonProps }), children: (0, jsx_runtime_1.jsx)(Body_1.Body, { ...commonBodyProps, activeRowId: activeRowId, columns: columns, gridColumns: gridColumns, className: bodyCva({
                                 isNoData,
                             }) }) })] }));
         }
@@ -92,11 +101,13 @@ const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, classNames_1.classNames)(dataGridClassName, dataGridCva({
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, classNames_1.classNames)(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,
                 hasGroupedColumns,
+                mobileDisplayVariant,
+                isSelfContained,
             })), children: [renderTableContent(), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
 };
 exports.DataGrid = DataGrid;

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

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridContext = void 0;
 const react_1 = require("react");
 exports.DataGridContext = (0, react_1.createContext)({
-    checkIsOpened: () => false,
-    checkIsMoreOpened: () => false,
-    toggleOpenItems: () => undefined,
-    toggleOpenMoreItems: () => undefined,
     isLoading: false,
     isTabularNums: false,
+    gridColumns: '',
+    emptyCellValue: '',
+    activeRowId: '',
+    keyId: '',
+    columns: [],
+    onRowClick: () => undefined,
+    mobileDisplayVariant: 'list',
 });

package/node/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/node/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js

@@ -3,60 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const DataGridStorageContext_1 = require("../../DataGridStorageContext");
 const DataGridContext_1 = require("../DataGridContext");
-const ROW_FLAGS_BY_DEFAULT = {
-    isOpenedItems: true,
-    iOpenedMoreItems: false,
-};
-const DataGridContextProvider = ({ isLoading, isTabularNums, children, }) => {
-    const [openedItems, setOpenedItems] = (0, react_1.useState)({});
-    const checkIsOpened = (0, react_1.useCallback)((key) => {
-        if (openedItems[key]) {
-            return true;
-        }
-        return false;
-    }, [openedItems]);
-    const checkIsMoreOpened = (0, react_1.useCallback)((key) => {
-        if (openedItems[key]) {
-            return openedItems[key].iOpenedMoreItems;
-        }
-        return false;
-    }, [openedItems]);
-    const toggleOpenItems = (0, react_1.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 = (0, react_1.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]);
+const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, }) => {
     const contextValue = (0, react_1.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 ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: contextValue, children: children }));
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(DataGridStorageContext_1.DataGridStorageProvider, { children: children }) }));
 };
 exports.DataGridContextProvider = DataGridContextProvider;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridStorageContext = void 0;
+const react_1 = require("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);
+ * };
+ */
+exports.DataGridStorageContext = (0, react_1.createContext)({
+    getItem: () => undefined,
+    setItem: () => undefined,
+});

package/node/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/node/components/DataGrid/DataGridStorageContext/DataGridStorageProvider/DataGridStorageProvider.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridStorageProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DataGridStorageContext_1 = require("../DataGridStorageContext");
+const DataGridStorageProvider = ({ children, }) => {
+    const storageRef = (0, react_1.useRef)({});
+    const getItem = (0, react_1.useCallback)((key) => storageRef.current[key], []);
+    const setItem = (0, react_1.useCallback)((key, value) => {
+        storageRef.current[key] = value;
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({ getItem, setItem }), [getItem, setItem]);
+    return ((0, jsx_runtime_1.jsx)(DataGridStorageContext_1.DataGridStorageContext.Provider, { value: contextValue, children: children }));
+};
+exports.DataGridStorageProvider = DataGridStorageProvider;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DataGridStorageProvider"), exports);

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DataGridStorageContext"), exports);
+__exportStar(require("./DataGridStorageProvider"), exports);

package/node/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 {};

package/node/components/DataGrid/MobileSkeleton/MobileSkeleton.js

@@ -3,11 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../../Skeleton");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("../constants");
 const styles_1 = require("./styles");
-const MobileSkeleton = ({ cellsCount, rowsCount, }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.Root, { children: Array.from({ length: rowsCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsxs)(styles_1.RowWrapper
+const rootCva = (0, cva_1.cva)(constants_1.dataGridSkeletonClassnames.list, {
+    variants: {
+        mobileDisplayVariant: {
+            cards: constants_1.dataGridClassnames.mobileVariantCards,
+            list: constants_1.dataGridClassnames.mobileVariantList,
+        },
+    },
+});
+const itemCva = (0, cva_1.cva)(constants_1.dataGridSkeletonClassnames.item, {
+    variants: {
+        mobileDisplayVariant: {
+            cards: constants_1.dataGridClassnames.mobileVariantCards,
+            list: constants_1.dataGridClassnames.mobileVariantList,
+        },
+    },
+});
+const MobileSkeleton = ({ cellsCount, mobileDisplayVariant, rowsCount, }) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.Root, { className: rootCva({ mobileDisplayVariant }), children: Array.from({ length: rowsCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsxs)(styles_1.RowWrapper
         // biome-ignore lint/suspicious/noArrayIndexKey: Статичный скелетон
-        , { children: [Array.from({ length: cellsCount - 1 }, (_cell, cellIndex) => (
+        , { className: itemCva({ mobileDisplayVariant }), children: [Array.from({ length: cellsCount - 1 }, (_cell, cellIndex) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Статичный скелетон
                 (0, jsx_runtime_1.jsxs)(styles_1.Cell, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 20 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 16, width: "50%" })] }, cellIndex))), (0, jsx_runtime_1.jsx)(styles_1.Actions, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: "100%", height: 40 }) })] }, rowIndex))) }));
 };