@astral/ui 4.73.1 → 4.75.0

package/hook-form/FormFilters/FormQuickFiltersSkeleton/FormQuickFiltersSkeleton.d.ts

@@ -0,0 +1 @@
+export declare const FormQuickFiltersSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/hook-form/FormFilters/FormQuickFiltersSkeleton/FormQuickFiltersSkeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FormFiltersLayoutContext } from '../../../components/PageHeader';
+import { Skeleton } from '../../../components/Skeleton';
+import { FormQuickFiltersSkeletonWrapper } from './styles';
+export const FormQuickFiltersSkeleton = () => {
+    const { quickFiltersClassName } = useContext(FormFiltersLayoutContext) ?? {};
+    return (_jsxs(FormQuickFiltersSkeletonWrapper, { className: quickFiltersClassName, children: [_jsx(Skeleton, { variant: "rounded", width: 42, height: 24 }), _jsx(Skeleton, { variant: "rounded", width: 92, height: 24 }), _jsx(Skeleton, { variant: "rounded", width: 124, height: 24 })] }));
+};

package/hook-form/FormFilters/FormQuickFiltersSkeleton/index.d.ts

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

package/hook-form/FormFilters/FormQuickFiltersSkeleton/index.js

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

package/hook-form/FormFilters/FormQuickFiltersSkeleton/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FormQuickFiltersSkeletonWrapper: import("../../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/hook-form/FormFilters/FormQuickFiltersSkeleton/styles.js

@@ -0,0 +1,5 @@
+import { styled } from '../../../components/styled';
+export const FormQuickFiltersSkeletonWrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;

package/node/components/CardGridInfinite/CardGridInfinite.js

@@ -5,8 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_virtuoso_1 = require("react-virtuoso");
 const ContentState_1 = require("../ContentState");
+const constants_1 = require("../constants");
+const cva_1 = require("../utils/cva");
 const Card_1 = require("./Card");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const Footer_1 = require("./Footer");
 const List_1 = require("./List");
 const NoDataPlaceholder_1 = require("./NoDataPlaceholder");
@@ -14,8 +16,15 @@ const OnTopButton_1 = require("./OnTopButton");
 const SkeletonGrid_1 = require("./SkeletonGrid");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const rootCva = (0, cva_1.cva)([constants_2.cardGridClassnames.root, constants_1.selfContainedClassname], {
+    variants: {
+        isLoading: {
+            true: constants_2.cardGridClassnames.loading,
+        },
+    },
+});
 const CardGridInfinite = (props) => {
-    const { contentStateProps, desktopCardWidth, virtuosoProps, scrollParent, skeleton, footerProps, onTopButtonProps, list, noDataImgSrc, defineCard, classnames, isMobile, } = (0, useLogic_1.useLogic)(props);
+    const { contentStateProps, desktopCardWidth, virtuosoProps, scrollParent, skeleton, footerProps, onTopButtonProps, list, noDataImgSrc, defineCard, isLoading, isMobile, } = (0, useLogic_1.useLogic)(props);
     const VirtuosoList = (0, react_1.useMemo)(() => (0, react_1.forwardRef)((listProps, ref) => ((0, jsx_runtime_1.jsx)(List_1.List, { ...listProps, ref: ref, desktopCardWidth: desktopCardWidth }))), [desktopCardWidth]);
     const renderVirtuoso = () => {
         if (!scrollParent) {
@@ -28,11 +37,11 @@ const CardGridInfinite = (props) => {
                     Footer: () => (0, jsx_runtime_1.jsx)(Footer_1.Footer, { ...footerProps }),
                 }, itemContent: (_, item) => (0, jsx_runtime_1.jsx)(Card_1.Card, { item: item, ...defineCard(item) }) }));
         }
-        return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.VirtuosoGrid, { ...virtuosoProps, data: list, customScrollParent: scrollParent, listClassName: constants_1.cardGridClassnames.list, components: {
+        return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.VirtuosoGrid, { ...virtuosoProps, data: list, customScrollParent: scrollParent, listClassName: constants_2.cardGridClassnames.list, components: {
                 List: VirtuosoList,
                 Footer: () => (0, jsx_runtime_1.jsx)(Footer_1.Footer, { ...footerProps }),
             }, itemContent: (_, item) => (0, jsx_runtime_1.jsx)(Card_1.Card, { item: item, ...defineCard(item) }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.ContentStateWrapper, { className: classnames, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, loadingContent: (0, jsx_runtime_1.jsx)(SkeletonGrid_1.SkeletonGrid, { skeleton: skeleton, desktopCardWidth: desktopCardWidth }), children: list?.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderVirtuoso(), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ContentStateWrapper, { className: rootCva({ isLoading }), children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, loadingContent: (0, jsx_runtime_1.jsx)(SkeletonGrid_1.SkeletonGrid, { skeleton: skeleton, desktopCardWidth: desktopCardWidth }), children: list?.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderVirtuoso(), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
 };
 exports.CardGridInfinite = CardGridInfinite;

package/node/components/CardGridInfinite/styles.js

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

package/node/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/node/components/CardGridInfinite/useLogic/useLogic.js

@@ -6,17 +6,10 @@ const ConfigProvider_1 = require("../../ConfigProvider");
 const useScrollManagement_1 = require("../../useScrollManagement");
 const useStickyButton_1 = require("../../useStickyButton");
 const useViewportType_1 = require("../../useViewportType");
-const classNames_1 = require("../../utils/classNames");
 const constants_1 = require("../constants");
 const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef, skeleton, onRetry, endOfScrollMsg, isEndReached, onLoadMore, noDataImgSrc, defineCard, desktopCardWidth, }) => {
     const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
-    (0, react_1.useEffect)(() => {
-        if (isMobile && scrollRef?.current) {
-            scrollRef.current.style.backgroundColor = 'unset';
-            scrollRef.current.style.padding = 'unset';
-        }
-    }, [isMobile]);
     const contentStateProps = (0, react_1.useMemo)(() => {
         const isNoData = !list?.length;
         return {
@@ -42,9 +35,6 @@ const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef,
         recalculateVerticalScroll();
         propsHandleRangeChanged(range);
     };
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.cardGridClassnames.root, {
-        [constants_1.cardGridClassnames.loading]: isLoading,
-    }), [isLoading]);
     return {
         contentStateProps,
         desktopCardWidth,
@@ -74,7 +64,7 @@ const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef,
         list,
         noDataImgSrc,
         defineCard,
-        classnames,
+        isLoading,
     };
 };
 exports.useLogic = useLogic;

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

@@ -11,7 +11,7 @@ const ConfirmAction = (props) => {
     const { actionComponentProps, popoverProps, cancelButtonProps, confirmButtonProps, } = (0, useLogic_1.useLogic)(props);
     const { text, confirmButtonProps: externalConfirmButtonProps, popoverProps: externalPopoverProps, actionComponent, } = props;
     const { text: confirmButtonText = 'Подтвердить' } = externalConfirmButtonProps || {};
-    const { anchorOrigin = constants_1.DEFAULT_ANCHOR_ORIGIN, transformOrigin = constants_1.DEFAULT_TRANSFORM_ORIGIN, } = externalPopoverProps || {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [actionComponent(actionComponentProps), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ...popoverProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [text && (0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { children: text }), (0, jsx_runtime_1.jsxs)(styles_1.Actions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: confirmButtonText })] })] }) })] }));
+    const { anchorOrigin = constants_1.DEFAULT_ANCHOR_ORIGIN, transformOrigin = constants_1.DEFAULT_TRANSFORM_ORIGIN, title = constants_1.DEFAULT_MOBILE_TITLE, } = externalPopoverProps || {};
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [actionComponent(actionComponentProps), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, title: title, ...popoverProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [text && (0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { children: text }), (0, jsx_runtime_1.jsxs)(styles_1.Actions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: confirmButtonText })] })] }) })] }));
 };
 exports.ConfirmAction = ConfirmAction;

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