@astral/ui 4.74.0 → 4.75.0

package/node/components/DataGridInfinite/DataGridInfinite.js

@@ -6,63 +6,73 @@ const react_1 = require("react");
 const react_virtuoso_1 = require("react-virtuoso");
 const ConfigProvider_1 = require("../ConfigProvider");
 const ContentState_1 = require("../ContentState");
+const constants_1 = require("../constants");
 const DataGrid_1 = require("../DataGrid");
-const constants_1 = require("../DataGrid/constants");
+const constants_2 = require("../DataGrid/constants");
 const DataGridContext_1 = require("../DataGrid/DataGridContext");
 const enums_1 = require("../DataGrid/enums");
 const Head_1 = require("../DataGrid/Head");
-const Row_1 = require("../DataGrid/Row");
-const styles_1 = require("../DataGrid/styles");
 const Loader_1 = require("../Loader");
 const classNames_1 = require("../utils/classNames");
 const cva_1 = require("../utils/cva");
 const getInertProps_1 = require("../utils/getInertProps");
-const constants_2 = require("./constants");
+const constants_3 = require("./constants");
+const DataGridInfiniteContext_1 = require("./DataGridInfiniteContext");
 const EndData_1 = require("./EndData");
 const ErrorMessage_1 = require("./ErrorMessage");
 const List_1 = require("./List");
 const NoData_1 = require("./NoData");
-const styles_2 = require("./styles");
+const Row_1 = require("./Row");
+const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const INITIAL_LEVEL = 0;
-const dataGridInfiniteCva = (0, cva_1.cva)(constants_1.dataGridClassnames.root, {
+const dataGridInfiniteCva = (0, cva_1.cva)(constants_2.dataGridClassnames.root, {
     variants: {
         hasGroupedColumns: {
-            true: constants_1.dataGridClassnames.hasGroupedColumns,
+            true: constants_2.dataGridClassnames.hasGroupedColumns,
         },
         gridViewMode: {
-            full: constants_1.dataGridClassnames.gridViewFull,
-            standard: constants_1.dataGridClassnames.gridViewStandard,
+            full: constants_2.dataGridClassnames.gridViewFull,
+            standard: constants_2.dataGridClassnames.gridViewStandard,
+        },
+        mobileDisplayVariant: {
+            cards: constants_2.dataGridClassnames.mobileVariantCards,
+            list: constants_2.dataGridClassnames.mobileVariantList,
+        },
+        isSelfContained: {
+            true: constants_1.selfContainedClassname,
         },
     },
 });
 const DataGridInfinite = (props) => {
     const { imagesMap, emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, flattenColumns, hasGroupedColumns, gridViewMode, } = (0, useLogic_1.useLogic)(props);
-    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = enums_1.Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, } = props;
+    const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, hasGroupedColumns, gridViewMode, gridColumns, handleSelectRow, mobileDisplayVariant, isSelfContained, } = (0, useLogic_1.useLogic)(props);
+    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = enums_1.Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, 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 TableContainer = isDisabled ? styles_2.DisabledDataGridWrapper : styles_2.DataGridWrapper;
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { style: containerCssVars, className: (0, classNames_1.classNames)(dataGridInfiniteCva({ hasGroupedColumns, gridViewMode }), className), children: [headPreAddon, (0, jsx_runtime_1.jsxs)(TableContainer, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [!isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, loadingContent: isMobile && (0, jsx_runtime_1.jsx)(DataGrid_1.MobileSkeleton, { ...mobileSkeletonProps }), errorState: {
-                                imgAlt: 'Что-то пошло не так',
-                                errorList: [errorMsg || ''],
-                                imgSrc: imagesMap.defaultErrorImgSrc,
-                                onRetry,
-                            }, children: (0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, style: { height: '100%' }, overscan: constants_2.OVERSCAN_COUNT, data: rows, components: {
-                                    // biome-ignore lint/suspicious/noTsIgnore: Требует HTMLDivElement, а для элемента списка используем HTMLUListElement (https://github.com/petyosi/react-virtuoso/issues/864)
-                                    // @ts-ignore
-                                    List: List_1.List,
-                                    Item: ({ children, item, ...itemProps }) => {
-                                        const { children: nestedChildren, options, ...row } = item;
-                                        return ((0, jsx_runtime_1.jsx)(Row_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { ...rowProps, ...itemProps, row: row, columns: flattenColumns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
-                                    },
-                                    EmptyPlaceholder: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: noDataPlaceholder || (0, jsx_runtime_1.jsx)(NoData_1.NoData, {}) }),
-                                    Footer: () => {
-                                        if (!isLoading && !isError && !isEndReached) {
-                                            return null;
-                                        }
-                                        return ((0, jsx_runtime_1.jsxs)(styles_2.FooterRow, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry }), isEndReached && ((0, jsx_runtime_1.jsx)(EndData_1.EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
-                                    },
-                                } }) }), (0, jsx_runtime_1.jsx)(styles_2.StyledScrollToTopButton, { ...scrollToTopButtonProps, className: constants_2.dataGridInfiniteClassnames.scrollToTopButton }), isDisabled && (0, jsx_runtime_1.jsx)(styles_2.Backdrop, {})] })] }) }));
+    const { isInitialExpanded = false, expandedLevel = constants_2.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_2.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
+    const { isSelectable } = rowProps;
+    const TableContainer = isDisabled ? styles_1.DisabledDataGridWrapper : styles_1.DataGridWrapper;
+    return ((0, jsx_runtime_1.jsx)(DataGridInfiniteContext_1.DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: (0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledContainer, { style: containerCssVars, className: (0, classNames_1.classNames)(dataGridInfiniteCva({
+                    hasGroupedColumns,
+                    gridViewMode,
+                    mobileDisplayVariant,
+                    isSelfContained,
+                }), className), children: [headPreAddon, (0, jsx_runtime_1.jsxs)(TableContainer, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [!isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, loadingContent: isMobile && (0, jsx_runtime_1.jsx)(DataGrid_1.MobileSkeleton, { ...mobileSkeletonProps }), errorState: {
+                                    imgAlt: 'Что-то пошло не так',
+                                    errorList: [errorMsg || ''],
+                                    imgSrc: imagesMap.defaultErrorImgSrc,
+                                    onRetry,
+                                }, children: (0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, style: { height: '100%' }, overscan: constants_3.OVERSCAN_COUNT, data: rows, components: {
+                                        // biome-ignore lint/suspicious/noTsIgnore: Требует HTMLDivElement, а для элемента списка используем HTMLUListElement (https://github.com/petyosi/react-virtuoso/issues/864)
+                                        // @ts-ignore
+                                        List: List_1.List,
+                                        Item: Row_1.Row,
+                                        EmptyPlaceholder: () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: noDataPlaceholder || (0, jsx_runtime_1.jsx)(NoData_1.NoData, {}) })),
+                                        Footer: () => {
+                                            if (!isLoading && !isError && !isEndReached) {
+                                                return null;
+                                            }
+                                            return ((0, jsx_runtime_1.jsxs)(styles_1.FooterRow, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry }), isEndReached && ((0, jsx_runtime_1.jsx)(EndData_1.EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
+                                        },
+                                    } }) }), (0, jsx_runtime_1.jsx)(styles_1.StyledScrollToTopButton, { ...scrollToTopButtonProps, className: constants_3.dataGridInfiniteClassnames.scrollToTopButton }), isDisabled && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {})] })] }) }) }));
 };
 exports.DataGridInfinite = DataGridInfinite;

package/node/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContext.d.ts

@@ -0,0 +1,23 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+export type DataGridInfiniteContextProps = {
+    renderRow: (row: Record<string, unknown>, index: number) => ReactNode;
+    onSelectRow: (row: Record<string, unknown>) => (event: ChangeEvent<HTMLInputElement>) => void;
+    variant: 'tree' | 'subrows';
+    isInitialExpanded?: boolean;
+    expandedLevel?: number;
+    initialVisibleChildrenCount?: number;
+    moreButtonColumnPosition?: number;
+    isVisibleCollapseButton?: boolean;
+    isSelectable?: boolean;
+    selectedRows?: Record<string, unknown>[];
+};
+/**
+ * Контекст общих параметров для компонента `Item` внутри `DataGridInfinite`.
+ *
+ * `Item` передаётся в `Virtuoso` напрямую, без inline-обёртки: замыкание на
+ * каждом ре-рендере `DataGridInfinite` давало бы новую ссылку на компонент и
+ * лишние перерисовки виртуализированного списка.
+ *
+ * Поскольку `Virtuoso` сам управляет параметрами `Item`, общие настройки передаются через контекст.
+ */
+export declare const DataGridInfiniteContext: import("react").Context<DataGridInfiniteContextProps>;

package/node/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContext.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridInfiniteContext = void 0;
+const react_1 = require("react");
+/**
+ * Контекст общих параметров для компонента `Item` внутри `DataGridInfinite`.
+ *
+ * `Item` передаётся в `Virtuoso` напрямую, без inline-обёртки: замыкание на
+ * каждом ре-рендере `DataGridInfinite` давало бы новую ссылку на компонент и
+ * лишние перерисовки виртуализированного списка.
+ *
+ * Поскольку `Virtuoso` сам управляет параметрами `Item`, общие настройки передаются через контекст.
+ */
+exports.DataGridInfiniteContext = (0, react_1.createContext)({
+    renderRow: () => null,
+    onSelectRow: () => () => { },
+    variant: 'tree',
+    isInitialExpanded: false,
+    expandedLevel: 0,
+    initialVisibleChildrenCount: 0,
+    moreButtonColumnPosition: 0,
+    isVisibleCollapseButton: true,
+    selectedRows: [],
+});

package/node/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContextProvider/DataGridInfiniteContextProvider.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type DataGridInfiniteContextProps } from '../DataGridInfiniteContext';
+type DataGridInfiniteContextProviderProps = DataGridInfiniteContextProps & {
+    children: ReactNode;
+};
+export declare const DataGridInfiniteContextProvider: ({ children, ...props }: DataGridInfiniteContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContextProvider/DataGridInfiniteContextProvider.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridInfiniteContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DataGridInfiniteContext_1 = require("../DataGridInfiniteContext");
+const DataGridInfiniteContextProvider = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(DataGridInfiniteContext_1.DataGridInfiniteContext.Provider, { value: props, children: children }));
+};
+exports.DataGridInfiniteContextProvider = DataGridInfiniteContextProvider;

package/node/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContextProvider/index.d.ts

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

package/node/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContextProvider/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("./DataGridInfiniteContextProvider"), exports);

package/node/components/DataGridInfinite/DataGridInfiniteContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGridInfiniteContext';
+export * from './DataGridInfiniteContextProvider';

package/node/components/DataGridInfinite/DataGridInfiniteContext/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("./DataGridInfiniteContext"), exports);
+__exportStar(require("./DataGridInfiniteContextProvider"), exports);

package/node/components/DataGridInfinite/List/List.js

@@ -4,5 +4,6 @@ exports.List = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const constants_1 = require("../constants");
+const constants_2 = require("./constants");
 const styles_1 = require("./styles");
-exports.List = (0, react_1.forwardRef)(({ children, ...listProps }, ref) => ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { id: constants_1.VIRTUOSO_LIST_ID, ref: ref, ...listProps, children: children })));
+exports.List = (0, react_1.forwardRef)(({ children, ...listProps }, ref) => ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { id: constants_1.VIRTUOSO_LIST_ID, ref: ref, ...listProps, className: constants_2.dataGridInfiniteListClassnames.root, children: children })));

package/node/components/DataGridInfinite/List/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const dataGridInfiniteListClassnames: {
+    root: string;
+};

package/node/components/DataGridInfinite/List/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridInfiniteListClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.dataGridInfiniteListClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-infinite-body'),
+};

package/node/components/DataGridInfinite/List/index.d.ts

@@ -1 +1,2 @@
 export * from './List';
+export { dataGridInfiniteListClassnames } from './constants';

package/node/components/DataGridInfinite/List/index.js

@@ -14,4 +14,7 @@ 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 });
+exports.dataGridInfiniteListClassnames = void 0;
 __exportStar(require("./List"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "dataGridInfiniteListClassnames", { enumerable: true, get: function () { return constants_1.dataGridInfiniteListClassnames; } });

package/node/components/DataGridInfinite/Row/Row.d.ts

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

package/node/components/DataGridInfinite/Row/Row.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomRowWrapper_1 = require("../../DataGrid/CustomRowWrapper");
+const Row_1 = require("../../DataGrid/Row");
+const RowContext_1 = require("../../DataGrid/Row/RowContext");
+const useLogic_1 = require("./useLogic");
+const INITIAL_LEVEL = 0;
+const Row = ({ children, ...props }) => {
+    const { item, memoizedItemProps, onSelectRow, renderRow, flattenColumns, gridColumns, options, keyId, variant, isSelectable, isSelected, nestedChildren, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, emptyCellValue, activeRowId, onRowClick, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: item, itemProps: memoizedItemProps, onSelectRow: onSelectRow, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: memoizedItemProps['data-item-index'], renderRow: renderRow, row: item })) : ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...memoizedItemProps, row: item, columns: flattenColumns, gridColumns: gridColumns, options: options, keyId: keyId, variant: variant, isSelectable: isSelectable, isSelected: isSelected, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded || false, expandedLevel: expandedLevel || 1, initialVisibleChildrenCount: initialVisibleChildrenCount || 2, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition || 1, isVisibleCollapseButton: isVisibleCollapseButton || true, emptyCellValue: emptyCellValue, onRowClick: onRowClick, onSelectRow: onSelectRow })) }));
+};
+exports.Row = Row;

package/node/components/DataGridInfinite/Row/index.d.ts

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

package/node/components/DataGridInfinite/Row/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("./Row"), exports);

package/node/components/DataGridInfinite/Row/types.d.ts

@@ -0,0 +1,2 @@
+import type { ItemProps as VirtuosoItemProps } from 'react-virtuoso';
+export type RowProps = VirtuosoItemProps<Record<string, unknown>>;

package/node/components/DataGridInfinite/Row/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/DataGridInfinite/Row/useLogic/index.d.ts

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

package/node/components/DataGridInfinite/Row/useLogic/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("./useLogic"), exports);

package/node/components/DataGridInfinite/Row/useLogic/useLogic.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { type RowProps } from '../types';
+type UseLogicParams = Omit<RowProps, 'children'>;
+export declare const useLogic: ({ item, ...itemProps }: UseLogicParams) => {
+    item: Record<string, unknown>;
+    renderRow: (row: Record<string, unknown>, index: number) => import("react").ReactNode;
+    isSelected: boolean;
+    nestedChildren: unknown;
+    options: unknown;
+    flattenColumns: import("../../../DataGrid").DataGridSingleColumn<Record<string, unknown>>[];
+    gridColumns: string;
+    activeRowId: string | undefined;
+    emptyCellValue: import("react").ReactNode;
+    keyId: unknown;
+    onRowClick: ((row: Record<string, unknown>) => void) | undefined;
+    onSelectRow: (row: Record<string, unknown>) => (event: import("react").ChangeEvent<HTMLInputElement, Element>) => void;
+    variant: "tree" | "subrows";
+    isInitialExpanded: boolean | undefined;
+    expandedLevel: number | undefined;
+    initialVisibleChildrenCount: number | undefined;
+    moreButtonColumnPosition: number | undefined;
+    isVisibleCollapseButton: boolean | undefined;
+    isSelectable: boolean | undefined;
+    selectedRows: Record<string, unknown>[] | undefined;
+    memoizedItemProps: {
+        style?: import("react").CSSProperties | undefined;
+        'data-index': number;
+        'data-item-group-index'?: number | undefined;
+        'data-item-index': number;
+        'data-known-size': number;
+    };
+};
+export {};

package/node/components/DataGridInfinite/Row/useLogic/useLogic.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DataGridContext_1 = require("../../../DataGrid/DataGridContext");
+const utils_1 = require("../../../DataGrid/utils");
+const DataGridInfiniteContext_1 = require("../../DataGridInfiniteContext");
+const useLogic = ({ item, ...itemProps }) => {
+    const { renderRow, onSelectRow, variant, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, isSelectable, selectedRows, } = (0, react_1.useContext)(DataGridInfiniteContext_1.DataGridInfiniteContext);
+    const { activeRowId, columns, emptyCellValue, onRowClick, keyId, gridColumns, } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
+    const memoizedItemProps = (0, react_1.useMemo)(() => itemProps, [itemProps.style]);
+    const flattenColumns = (0, react_1.useMemo)(() => (0, utils_1.getFlattenColumns)(columns), [columns]);
+    const { children: nestedChildren, options } = item;
+    const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === item[keyId]));
+    return {
+        item,
+        renderRow,
+        isSelected,
+        nestedChildren,
+        options,
+        flattenColumns,
+        gridColumns,
+        activeRowId,
+        emptyCellValue,
+        keyId,
+        onRowClick,
+        onSelectRow,
+        variant,
+        isInitialExpanded,
+        expandedLevel,
+        initialVisibleChildrenCount,
+        moreButtonColumnPosition,
+        isVisibleCollapseButton,
+        isSelectable,
+        selectedRows,
+        memoizedItemProps,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/DataGridInfinite/faker.js

@@ -17,7 +17,7 @@ const makeRandomDate = () => {
 exports.makeRandomDate = makeRandomDate;
 const makeDataList = (length = 10, options) => {
     return Array.from({ length }).map((_, i) => ({
-        id: faker_1.faker.string.uuid(),
+        id: i.toString(),
         documentName: `Договор №${i + 1}`,
         recipient: RECIPIENTS[faker_1.faker.number.int({ min: 0, max: RECIPIENTS.length })],
         createDate: (0, exports.makeRandomDate)(),

package/node/components/DataGridInfinite/styles.d.ts

@@ -20,3 +20,9 @@ export declare const Backdrop: import("@emotion/styled/dist/declarations/src/typ
 export declare const StyledScrollToTopButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../ScrollToTopButton").ScrollToTopButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const StyledContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/DataGridInfinite/styles.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledScrollToTopButton = exports.Backdrop = exports.FooterRow = exports.DisabledDataGridWrapper = exports.DataGridWrapper = void 0;
+exports.StyledContainer = exports.StyledScrollToTopButton = exports.Backdrop = exports.FooterRow = exports.DisabledDataGridWrapper = exports.DataGridWrapper = void 0;
+const styles_1 = require("../DataGrid/styles");
 const ScrollToTopButton_1 = require("../ScrollToTopButton");
 const styled_1 = require("../styled");
 const constants_1 = require("./constants");
+const List_1 = require("./List");
 exports.DataGridWrapper = styled_1.styled.div `
   position: relative;
 
@@ -44,3 +46,12 @@ exports.StyledScrollToTopButton = (0, styled_1.styled)(ScrollToTopButton_1.Scrol
     display: inline-flex;
   }
 `;
+exports.StyledContainer = (0, styled_1.styled)(styles_1.Container) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${List_1.dataGridInfiniteListClassnames.root} {
+      display: flex;
+      flex-direction: column;
+      gap: ${({ theme }) => theme.spacing(2)};
+    }
+  }
+`;

package/node/components/DataGridInfinite/useLogic/useLogic.d.ts

@@ -4,13 +4,13 @@ import { type DataGridRow } from '../../DataGrid';
 import { type CellValue } from '../../DataGrid/types';
 import { type DataGridInfiniteProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridInfiniteProps<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, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, 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, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, mobileDisplayVariant, }: UseLogicParams<TData, TSortField>) => {
     containerCssVars: import("react").CSSProperties;
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
+        mobileDisplayVariant: "list" | "cards";
     };
-    flattenColumns: import("../../DataGrid").DataGridSingleColumn<TData>[];
     isNoData: boolean;
     isMobile: boolean;
     isDataGridDisabled: boolean | undefined;
@@ -23,6 +23,7 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     isHideHead: boolean;
     hasGroupedColumns: boolean;
     gridViewMode: "standard" | "full";
+    gridColumns: string;
     virtuosoProps: {
         id: string;
         ref: import("react").RefObject<VirtuosoHandle | null>;
@@ -41,11 +42,13 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     rowProps: {
         isSelectable: boolean;
         gridColumns: string;
-        onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
     };
     scrollToTopButtonProps: {
         onClick: () => void;
         ref: import("react").RefObject<HTMLButtonElement | null>;
     };
+    handleSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
+    mobileDisplayVariant: "list" | "cards";
+    isSelfContained: boolean;
 };
 export {};

package/node/components/DataGridInfinite/useLogic/useLogic.js

@@ -2,24 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const constants_1 = require("../../DataGrid/constants");
 const enums_1 = require("../../DataGrid/enums");
 const hooks_1 = require("../../DataGrid/useLogic/hooks");
 const utils_1 = require("../../DataGrid/utils");
 const useViewportType_1 = require("../../useViewportType");
 const prop_1 = require("../../utils/prop");
 const uniqueBy_1 = require("../../utils/uniqueBy");
-const constants_1 = require("../constants");
-const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', }) => {
+const constants_2 = require("../constants");
+const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', }) => {
     const virtuoso = (0, react_1.useRef)(null);
     const scrollToTopButtonRef = (0, react_1.useRef)(null);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
+    // Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
+    const selectedRowsRef = (0, react_1.useRef)(selectedRows);
+    (0, react_1.useEffect)(() => {
+        selectedRowsRef.current = selectedRows;
+    }, [selectedRows]);
     const [hasVerticalScroll, setHasVerticalScroll] = (0, react_1.useState)(false);
     const isNoData = Boolean(rows?.length);
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isDisabled || (!isNoData && isLoading);
-    const treeRenderConfig = Object.is(variant, enums_1.Variant.Subrows)
-        ? { ...subrows, isInitialExpanded: true }
-        : tree;
+    const treeRenderConfig = (0, react_1.useMemo)(() => {
+        const config = Object.is(variant, enums_1.Variant.Subrows)
+            ? { ...subrows, isInitialExpanded: true }
+            : tree;
+        if (isMobile) {
+            return {
+                ...config,
+                expandedLevel: constants_1.EXPANDED_LEVEL_BY_DEFAULT,
+                initialVisibleChildrenCount: constants_1.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 flattenColumns = (0, react_1.useMemo)(() => (0, utils_1.getFlattenColumns)(columns), [columns]);
     const hasGroupedColumns = columns.some(utils_1.isGroupColumns);
@@ -35,7 +51,7 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
     }, [availableRows, selectedRows, keyId]);
     const handleRangeChanged = (0, react_1.useCallback)((range) => {
         if (scrollToTopButtonRef.current) {
-            scrollToTopButtonRef.current.classList.toggle(constants_1.dataGridInfiniteClassnames.visibleScrollToTopButton, range.startIndex > 2);
+            scrollToTopButtonRef.current.classList.toggle(constants_2.dataGridInfiniteClassnames.visibleScrollToTopButton, range.startIndex > 2);
         }
     }, []);
     const handleSelectAllRows = (event) => {
@@ -54,16 +70,16 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
             return;
         }
         if (event.target.checked) {
-            return onSelectRow([...selectedRows, row]);
+            return onSelectRow([...selectedRowsRef.current, row]);
         }
-        onSelectRow(selectedRows.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
-    }, [selectedRows, onSelectRow, keyId]);
+        onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
+    }, []);
     const handleScrollToTop = () => {
         virtuoso.current?.scrollIntoView({ index: 0, behavior: 'smooth' });
     };
     const recalculateVerticalScroll = () => {
-        const container = document.getElementById(constants_1.VIRTUOSO_CONTAINER_ID);
-        const list = document.getElementById(constants_1.VIRTUOSO_LIST_ID);
+        const container = document.getElementById(constants_2.VIRTUOSO_CONTAINER_ID);
+        const list = document.getElementById(constants_2.VIRTUOSO_LIST_ID);
         if (container && list) {
             setHasVerticalScroll(list?.clientHeight > container?.clientHeight);
         }
@@ -71,12 +87,12 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
     const { mobileSkeletonProps } = (0, hooks_1.useDataGridMobileLogic)({
         columns: flattenColumns,
+        mobileDisplayVariant,
     });
     const containerCssVars = (0, utils_1.getDataGridCssVars)(maxHeight);
     return {
         containerCssVars,
         mobileSkeletonProps,
-        flattenColumns,
         isNoData,
         isMobile,
         isDataGridDisabled,
@@ -85,8 +101,9 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
         isHideHead,
         hasGroupedColumns,
         gridViewMode,
+        gridColumns,
         virtuosoProps: {
-            id: constants_1.VIRTUOSO_CONTAINER_ID,
+            id: constants_2.VIRTUOSO_CONTAINER_ID,
             ref: virtuoso,
             endReached: handleEndReach,
             rangeChanged: handleRangeChanged,
@@ -103,12 +120,14 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
         rowProps: {
             isSelectable,
             gridColumns,
-            onSelectRow: handleSelectRow,
         },
         scrollToTopButtonProps: {
             onClick: handleScrollToTop,
             ref: scrollToTopButtonRef,
         },
+        handleSelectRow,
+        mobileDisplayVariant,
+        isSelfContained: mobileDisplayVariant === 'cards',
     };
 };
 exports.useLogic = useLogic;