@astral/ui 4.73.1 → 4.75.0

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

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

package/node/components/DataGrid/useLogic/useLogic.js

@@ -11,7 +11,7 @@ const enums_1 = require("../enums");
 const utils_1 = require("../utils");
 const hooks_1 = require("./hooks");
 const utils_2 = require("./utils");
-const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
+const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
     const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
@@ -45,10 +45,21 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         columns: (0, utils_1.getFlattenColumns)(processedColumns()),
         rows,
         isNoScrollToTop: isLoading && isNoData,
+        mobileDisplayVariant,
     });
-    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 gridColumns = (0, react_1.useMemo)(() => (0, utils_1.getGridTemplateColumns)((0, utils_1.getFlattenColumns)(columns)), [columns]);
     const isAllowHorizontalScroll = (0, utils_2.getIsAllowHorizontalScroll)((0, utils_1.getFlattenColumns)(columns));
@@ -66,7 +77,7 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
         onSelectRow(filteredRows);
     };
-    const handleSelectRow = (row) => (event) => {
+    const handleSelectRow = (0, react_1.useCallback)((row) => (event) => {
         if (!onSelectRow) {
             return;
         }
@@ -74,7 +85,7 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
             return onSelectRow([...selectedRowsRef.current, row]);
         }
         onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
-    };
+    }, []);
     const hasGroupedColumns = columns.some(utils_1.isGroupColumns);
     const gridViewMode = hasGroupedColumns ? 'full' : gridViewModeProp;
     const isHideHead = (isHideHeaderIfNoData && isNoData) || (hasGroupedColumns && isNoData);
@@ -127,7 +138,9 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
             isSelectable,
             onSelectRow: handleSelectRow,
         },
+        mobileDisplayVariant,
         sections,
+        isSelfContained: mobileDisplayVariant === 'cards',
         loaderProps: {
             isLoading: !isFirstRender && isLoading,
             isVisibleDivider: Boolean(rows.length),

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

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

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

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

package/node/components/DataGridActionCell/types.d.ts

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

package/node/components/DataGridCollapsibleRow/DataGridCollapsibleRow.d.ts

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

package/node/components/DataGridCollapsibleRow/DataGridCollapsibleRow.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridCollapsibleRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../Button");
+const Collapse_1 = require("../Collapse");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const chevronIconCva = (0, cva_1.cva)(constants_1.collapsibleRowClassnames.chevronIcon, {
+    variants: {
+        isActive: {
+            true: constants_1.collapsibleRowClassnames.chevronIconActive,
+        },
+    },
+});
+const DataGridCollapsibleRow = ({ children, initialOpen, onOpen, onClose, }) => {
+    const { handleToggle, isOpen, rowBaseProps, itemProps, handleRowClick } = (0, useLogic_1.useLogic)({
+        initialOpen,
+        onOpen,
+        onClose,
+    });
+    const renderStartAdornment = (0, react_1.useCallback)((isFirstCell) => {
+        if (!isFirstCell) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(styles_1.CollapseCell, { children: (0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { variant: "text", onClick: handleToggle, title: isOpen ? 'Свернуть' : 'Развернуть', children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { className: chevronIconCva({ isActive: isOpen }) }) }) }));
+    }, [isOpen, handleToggle]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledRowBase, { ...rowBaseProps, renderStartAdornment: renderStartAdornment, onRowClick: handleRowClick, customContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.MobileExpandButtonWrapper, { children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { variant: "link", onClick: handleToggle, className: constants_1.collapsibleRowClassnames.collapseButton, children: [(0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { className: chevronIconCva({ isActive: isOpen }) }), isOpen ? 'Свернуть' : 'Развернуть'] }) }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.CollapseContainer, { className: constants_1.collapsibleRowClassnames.collapseContainer, children: (0, jsx_runtime_1.jsx)(styles_1.CollapseContent, { children: (0, jsx_runtime_1.jsx)(styles_1.ChildrenWrapper, { className: constants_1.collapsibleRowClassnames.collapsibleContent, children: children }) }) }) })] }), ...itemProps }));
+};
+exports.DataGridCollapsibleRow = DataGridCollapsibleRow;

package/node/components/DataGridCollapsibleRow/constants.d.ts

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

package/node/components/DataGridCollapsibleRow/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapsibleRowClassnames = exports.STORAGE_KEY_PREFIX = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.STORAGE_KEY_PREFIX = 'collapsible-row';
+exports.collapsibleRowClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__collapsible-row'),
+    cellsWrapper: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__collapsible-row_cells-wrapper'),
+    active: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__collapsible-row_active'),
+    collapseContainer: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__collapsible-row_collapse-container'),
+    chevronIcon: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__collapsible-row_chevron-icon'),
+    chevronIconActive: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__collapsible-row__chevron-icon_active'),
+    collapseButton: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__collapsible-row__collapse-button'),
+    collapsibleContent: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__collapsible-row__collapsible-content'),
+};

package/node/components/DataGridCollapsibleRow/index.d.ts

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

package/node/components/DataGridCollapsibleRow/index.js

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

package/node/components/DataGridCollapsibleRow/public.d.ts

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

package/node/components/DataGridCollapsibleRow/public.js

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

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

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

package/node/components/DataGridCollapsibleRow/styles.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRowBase = exports.ChevronIcon = exports.CollapseCell = exports.CollapseButton = exports.MobileExpandButtonWrapper = exports.ChildrenWrapper = exports.CollapseContent = exports.CollapseContainer = void 0;
+const ChevronROutlineMd_1 = require("../../icons/ChevronROutlineMd");
+const Button_1 = require("../Button");
+const constants_1 = require("../DataGrid/constants");
+const RowBase_1 = require("../DataGrid/RowBase");
+const IconButton_1 = require("../IconButton");
+const styled_1 = require("../styled");
+const constants_2 = require("./constants");
+exports.CollapseContainer = styled_1.styled.div `
+  width: 100%;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+exports.CollapseContent = styled_1.styled.div `
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  border-radius: ${({ theme }) => theme.shape.large};
+`;
+exports.ChildrenWrapper = styled_1.styled.div `
+  padding: ${({ theme }) => theme.spacing(0, 3)};
+
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  border-radius: ${({ theme }) => theme.shape.medium};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+exports.MobileExpandButtonWrapper = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    & .${Button_1.buttonClassnames.root} {
+      justify-content: flex-start;
+
+      width: 100%;
+    }
+  }
+`;
+exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
+  width: 24px;
+  height: 24px;
+
+  color: inherit;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.grey[300]};
+  }
+`;
+exports.CollapseCell = styled_1.styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd) `
+  transform: rotateZ(0deg);
+
+  transition: ${({ theme }) => theme.transitions.create('transform', {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.short,
+})};
+
+  &.${constants_2.collapsibleRowClassnames.chevronIconActive} {
+    transform: rotateZ(90deg);
+  }
+`;
+exports.StyledRowBase = (0, styled_1.styled)(RowBase_1.RowBase) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &.${RowBase_1.dataGridRowBaseClassnames.mobileVariantCards} {
+      padding: 0;
+
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+      & .${RowBase_1.dataGridRowBaseClassnames.contentWrapper} {
+        padding: ${({ theme }) => theme.spacing(5, 4, 4)};
+
+        background-color: ${({ theme }) => theme.palette.background.default};
+        border-radius: ${({ theme }) => theme.shape.medium};
+        outline: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      }
+
+      & .${constants_2.collapsibleRowClassnames.collapseButton} {
+        padding-left: ${({ theme }) => theme.spacing(4)};
+      }
+
+      & .${constants_2.collapsibleRowClassnames.collapsibleContent} {
+        background-color: transparent;
+      }
+    }
+  }
+`;

package/node/components/DataGridCollapsibleRow/types.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type DataGridCollapsibleRowProps = {
+    /**
+     * Контент, который будет отображаться при развернутом состоянии
+     */
+    children: ReactNode;
+    /**
+     * Функция, которая будет вызываться при развернутом состоянии
+     */
+    onOpen?: () => void;
+    /**
+     * Функция, которая будет вызываться при свернутом состоянии
+     */
+    onClose?: () => void;
+    /**
+     * Флаг начального раскрытия строки при монтировании
+     */
+    initialOpen?: boolean;
+};

package/node/components/DataGridCollapsibleRow/types.js

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

package/node/components/DataGridCollapsibleRow/useLogic/index.d.ts

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

package/node/components/DataGridCollapsibleRow/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/DataGridCollapsibleRow/useLogic/useLogic.d.ts

@@ -0,0 +1,29 @@
+import { type SyntheticEvent } from 'react';
+import type { DataGridCollapsibleRowProps } from '../types';
+type UseLogicParams = Pick<DataGridCollapsibleRowProps, 'initialOpen' | 'onOpen' | 'onClose'>;
+export declare const useLogic: ({ initialOpen, onOpen, onClose }: UseLogicParams) => {
+    handleToggle: (event?: SyntheticEvent) => void;
+    handleRowClick: (clickedRow: Record<string, unknown>) => void;
+    isOpen: boolean | undefined;
+    itemProps: object | undefined;
+    rowBaseProps: {
+        isSelected: boolean | undefined;
+        row: Record<string, unknown>;
+        keyId: unknown;
+        columns: import("../..").DataGridColumns<Record<string, unknown>>[];
+        rowId: string;
+        isDisabled: boolean;
+        disabledReason: string | undefined;
+        onSelectRow: (row: Record<string, unknown>) => (event: import("react").ChangeEvent<HTMLInputElement, Element>) => void;
+        onRowEnter: ((rowId: string) => void) | undefined;
+        onRowLeave: ((rowId: string, event: PointerEvent) => void) | undefined;
+        registerRowElement: ((rowId: string, el: HTMLElement) => void) | undefined;
+        unregisterRowElement: ((rowId: string, el: HTMLElement) => void) | undefined;
+        isSelectable: boolean | undefined;
+        emptyCellValue: import("react").ReactNode;
+        gridColumns: string;
+        activeRowId: string | undefined;
+        mobileDisplayVariant: "list" | "cards" | undefined;
+    };
+};
+export {};

package/node/components/DataGridCollapsibleRow/useLogic/useLogic.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DataGridContext_1 = require("../../DataGrid/DataGridContext");
+const DataGridStorageContext_1 = require("../../DataGrid/DataGridStorageContext");
+const RowContext_1 = require("../../DataGrid/Row/RowContext");
+const constants_1 = require("../constants");
+const useLogic = ({ initialOpen, onOpen, onClose }) => {
+    const { keyId, columns, gridColumns, activeRowId, emptyCellValue, onRowClick, mobileDisplayVariant, } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
+    const { row, onSelectRow, isDisabled, disabledReason, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, isSelectable, itemProps, isSelected, } = (0, react_1.useContext)(RowContext_1.RowContext);
+    const rowId = row[keyId];
+    /**
+     * Используется локальное хранилище DataGridStorageContext. Для сохранения состояния раскрытия строки на время жизни DataGrid.
+     */
+    const { getItem, setItem } = (0, react_1.useContext)(DataGridStorageContext_1.DataGridStorageContext);
+    const storageKey = `${constants_1.STORAGE_KEY_PREFIX}:${rowId}`;
+    const storedValue = getItem(storageKey);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(storedValue !== undefined ? storedValue : initialOpen);
+    const handleToggle = (0, react_1.useCallback)((event) => {
+        event?.stopPropagation();
+        if (isOpen) {
+            setIsOpen(false);
+            setItem(storageKey, false);
+            onClose?.();
+        }
+        else {
+            setIsOpen(true);
+            setItem(storageKey, true);
+            onOpen?.();
+        }
+    }, [isOpen, onOpen, onClose, storageKey, setItem]);
+    const handleRowClick = (0, react_1.useCallback)((clickedRow) => {
+        if (onRowClick) {
+            onRowClick(clickedRow);
+            return;
+        }
+        handleToggle();
+    }, [onRowClick, handleToggle]);
+    return {
+        handleToggle,
+        handleRowClick,
+        isOpen,
+        itemProps,
+        rowBaseProps: {
+            isSelected,
+            row,
+            keyId,
+            columns,
+            rowId,
+            isDisabled,
+            disabledReason,
+            onSelectRow,
+            onRowEnter,
+            onRowLeave,
+            registerRowElement,
+            unregisterRowElement,
+            isSelectable,
+            emptyCellValue,
+            gridColumns,
+            activeRowId,
+            mobileDisplayVariant,
+        },
+    };
+};
+exports.useLogic = useLogic;