@astral/ui 4.55.4 → 4.57.0

package/node/components/DataGrid/DataGrid.js

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ConfigProvider_1 = require("../ConfigProvider");
 const ContentState_1 = require("../ContentState");
+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");
@@ -12,17 +14,42 @@ const DataGridContext_1 = require("./DataGridContext");
 const enums_1 = require("./enums");
 const Head_1 = require("./Head");
 const Loader_1 = require("./Loader");
+const MobileSkeleton_1 = require("./MobileSkeleton");
 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, {
+    variants: {
+        isDisabled: {
+            true: constants_1.dataGridClassnames.disabled,
+        },
+    },
+});
+const dataGridCva = (0, cva_1.cva)(constants_1.dataGridClassnames.root, {
+    variants: {
+        hasPinnedColumns: {
+            true: constants_1.dataGridClassnames.dataGridHasPinnedSections,
+        },
+        isAllowHorizontalScroll: {
+            true: constants_1.dataGridClassnames.isAllowHorizontalScroll,
+        },
+    },
+});
+const bodyCva = (0, cva_1.cva)(constants_1.dataGridClassnames.body, {
+    variants: {
+        isNoData: {
+            true: constants_1.dataGridClassnames.bodyEmpty,
+        },
+    },
+});
 const DataGrid = (props) => {
-    const { isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, pinnedSectionsClassname, dataGridClassname, contentStateProps, rowHoverProps, containerRef, sections, isNoData, bodyClassName, } = (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, } = (0, useLogic_1.useLogic)(props);
     const { emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { columns, selectedRows = [], maxHeight, minDisplayRows = constants_1.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, isLoading, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
+    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, } = 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 = isDataGridDisabled
+    const Wrapper = isDataGridDisabled
         ? styles_1.DisabledDataGridWrapper
         : styles_1.DataGridWrapper;
     const renderedPlaceholder = (0, react_1.useCallback)(() => {
@@ -50,11 +77,18 @@ const DataGrid = (props) => {
         ...rowHoverProps,
     };
     const renderTableContent = () => {
-        if (!hasPinnedColumns) {
-            return ((0, jsx_runtime_1.jsxs)(TableContainer, { "$isAllowHorizontalScroll": isAllowHorizontalScroll, ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), 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, children: (0, jsx_runtime_1.jsx)(Body_1.Body, { ...commonBodyProps, columns: columns, gridColumns: gridColumns, className: bodyClassName }) })] }));
+        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, columns: columns, gridColumns: gridColumns, className: bodyCva({
+                                isNoData,
+                            }) }) })] }));
         }
-        return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: (0, jsx_runtime_1.jsx)(PinnedSections_1.PinnedSections, { sections: sections, className: pinnedSectionsClassname, isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
+        return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: (0, jsx_runtime_1.jsx)(PinnedSections_1.PinnedSections, { sections: sections, className: pinnedSectionsCva({
+                    isDisabled: isDataGridDisabled,
+                }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, "$maxHeight": maxHeight, "$isAllowHorizontalScroll": isAllowHorizontalScroll, className: dataGridClassname, children: [renderTableContent(), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, classNames_1.classNames)(dataGridClassName, dataGridCva({
+                isAllowHorizontalScroll,
+                hasPinnedColumns,
+            })), children: [renderTableContent(), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
 };
 exports.DataGrid = DataGrid;

package/node/components/DataGrid/Head/Head.js

@@ -32,6 +32,6 @@ const Head = (props) => {
         onSelectAllRows,
         handleSort,
     ]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: constants_1.dataGridClassnames.header, "$gridColumns": gridColumns, children: renderColumns }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { role: "heading", className: constants_1.dataGridClassnames.header, "$gridColumns": gridColumns, children: renderColumns }));
 };
 exports.Head = Head;

package/node/components/DataGrid/Head/styles.js

@@ -12,7 +12,11 @@ exports.Wrapper = (0, styled_1.styled)('header', {
   width: fit-content;
   min-width: 100%;
 
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 exports.CheckboxCell = styled_1.styled.div `
   display: flex;

package/node/components/DataGrid/Loader/styles.js

@@ -44,6 +44,10 @@ exports.LoaderWrapper = styled_1.styled.div `
   position: sticky;
   z-index: ${({ theme }) => theme.zIndex.fab};
   left: 0;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 exports.StyledLinearProgress = (0, styled_1.styled)(LinearProgress_1.default) `
   height: 2px;

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Skeleton_1 = require("../../Skeleton");
+const styles_1 = require("./styles");
+const MobileSkeleton = ({ cellsCount, rowsCount, }) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.Root, { children: Array.from({ length: rowsCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsxs)(styles_1.RowWrapper
+        // biome-ignore lint/suspicious/noArrayIndexKey: Статичный скелетон
+        , { children: [Array.from({ length: cellsCount - 1 }, (_cell, cellIndex) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: Статичный скелетон
+                (0, jsx_runtime_1.jsxs)(styles_1.Cell, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 20 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 16, width: "50%" })] }, cellIndex))), (0, jsx_runtime_1.jsx)(styles_1.Actions, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: "100%", height: 40 }) })] }, rowIndex))) }));
+};
+exports.MobileSkeleton = MobileSkeleton;

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

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

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

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const Root: 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 RowWrapper: 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 Cell: 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 Actions: 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>, {}>;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Actions = exports.Cell = exports.RowWrapper = exports.Root = void 0;
+const styled_1 = require("../../styled");
+exports.Root = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+`;
+exports.RowWrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(5)};
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
+
+  &:not(:first-of-type) {
+    padding-top: ${({ theme }) => theme.spacing(5)};
+  }
+
+  &:last-of-type {
+    padding-bottom: 0;
+  }
+`;
+exports.Cell = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  width: 100%;
+`;
+exports.Actions = styled_1.styled.div `
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;

package/node/components/DataGrid/PinnedSections/Section/styles.js

@@ -43,7 +43,7 @@ exports.DataGridSection = styled_1.styled.div `
 
       height: 100%;
 
-      border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-right: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
     & .${constants_1.dataGridClassnames.header} {
@@ -82,7 +82,7 @@ exports.DataGridSection = styled_1.styled.div `
 
       height: 100%;
 
-      border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
     & .${constants_1.dataGridClassnames.header} {

package/node/components/DataGrid/Row/NestedChildren/styles.js

@@ -27,7 +27,12 @@ exports.NestedRows = (0, styled_1.styled)('ul', {
     width: 0;
     height: 100%;
 
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  }
+
+  /* TODO: Убрать после реализации задачи по адаптации вложенных строк https://track.astral.ru/soft/browse/UIKIT-2188 */
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
   }
 `;
 exports.MoreButtonRow = (0, styled_1.styled)('li', {
@@ -53,8 +58,8 @@ exports.MoreButtonRow = (0, styled_1.styled)('li', {
     width: ${constants_1.TREE_LINE_WIDTH}px;
     height: 50%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
 `;

package/node/components/DataGrid/Row/Row.js

@@ -3,18 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Row = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const BottomDrawer_1 = require("../../BottomDrawer");
 const Checkbox_1 = require("../../Checkbox");
 const Tooltip_1 = require("../../Tooltip");
 const checkIsDeepEqual_1 = require("../../utils/checkIsDeepEqual");
+const classNames_1 = require("../../utils/classNames");
+const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
 const constants_1 = require("./constants");
 const NestedChildren_1 = require("./NestedChildren");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const utils_1 = require("./utils");
+const rootCva = (0, cva_1.cva)(constants_1.dataGridRowClassnames.root, {
+    variants: {
+        isShowConnector: {
+            true: constants_1.dataGridRowClassnames.showConnector,
+        },
+    },
+});
+const rowContentCva = (0, cva_1.cva)(constants_1.dataGridRowContentClassnames.root, {
+    variants: {
+        isHovered: {
+            true: constants_1.dataGridRowContentClassnames.hovered,
+        },
+    },
+});
 const RowComponent = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, } = (0, useLogic_1.useLogic)(props);
-    const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, 
+    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, } = (0, useLogic_1.useLogic)(props);
+    const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
     // Необходимы для DataGridInfinite
     ...selfProps } = props;
@@ -23,7 +40,7 @@ const RowComponent = (props) => {
         if (!isRenderCollapseButton && (!isSelectable || isNotSelectable)) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRenderCollapseButton && ((0, jsx_runtime_1.jsx)(styles_1.CollapseCell, { children: (0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(disabled), onClick: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps }) }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRenderCollapseButton && ((0, jsx_runtime_1.jsx)(styles_1.CollapseCell, { children: (0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(disabled), onClick: (event) => event.stopPropagation(), className: constants_1.dataGridRowClassnames.checkbox, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps }) }))] }));
     };
     const renderCells = (0, react_1.useCallback)(() => {
         const lastCellGlobalIndex = (totalColumnsCount ?? columns.length) - 1;
@@ -35,7 +52,7 @@ const RowComponent = (props) => {
             const globalIndex = (sectionOffset ?? 0) + index;
             const isDisabledCell = (0, utils_1.checkIsDisabled)(disabled, availableCellsByIndex, globalIndex);
             const isFirstCell = globalIndex === 0;
-            return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { "$level": isFirstCell ? level : 0, row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
+            return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
         });
     }, [
         isOpen,
@@ -66,10 +83,10 @@ const RowComponent = (props) => {
         onRowEnter,
         onRowLeave,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$level": level, "$isShowConnector": isShowConnector, className: className, ...selfProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "$level": level, "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), "$isShowConnector": isShowConnector, "$gridColumns": gridColumns, [constants_1.DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), (0, jsx_runtime_1.jsx)(NestedChildren_1.NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, 
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, rootCva({ isShowConnector })), style: rowStyles, ...selfProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered }), "$gridColumns": gridColumns, [constants_1.DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), (0, jsx_runtime_1.jsx)(NestedChildren_1.NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, 
                 // biome-ignore lint/suspicious/noTsIgnore: <>
                 // @ts-ignore
-                renderRow: renderRow })] }));
+                renderRow: renderRow }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: disabledReasonText }) })] }));
 };
 const arePropsEqual = (prevProps, nextProps) => {
     const deepEqualityProps = new Set(['row']);

package/node/components/DataGrid/Row/constants.d.ts

@@ -1,6 +1,14 @@
 export declare const DISABLE_ROW_ATTR = "data-row-disable";
+export declare const MOBILE_DRAWER_TITLE = "\u041F\u0440\u0438\u0447\u0438\u043D\u0430 ";
 export declare const dataGridRowClassnames: {
+    root: string;
+    showConnector: string;
     hidden: string;
     hover: string;
     hasPinnedColumns: string;
+    checkbox: string;
+};
+export declare const dataGridRowContentClassnames: {
+    root: string;
+    hovered: string;
 };

package/node/components/DataGrid/Row/constants.js

@@ -1,10 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataGridRowClassnames = exports.DISABLE_ROW_ATTR = void 0;
+exports.dataGridRowContentClassnames = exports.dataGridRowClassnames = exports.MOBILE_DRAWER_TITLE = exports.DISABLE_ROW_ATTR = void 0;
 const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.DISABLE_ROW_ATTR = 'data-row-disable';
+exports.MOBILE_DRAWER_TITLE = 'Причина ';
 exports.dataGridRowClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row'),
+    showConnector: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_show-connector'),
     hidden: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_hidden'),
     hover: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_hover'),
     hasPinnedColumns: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_has-pinned-columns'),
+    checkbox: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-checkbox'),
+};
+exports.dataGridRowContentClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-content'),
+    hovered: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-content_hovered'),
 };

package/node/components/DataGrid/Row/styles.d.ts

@@ -2,24 +2,15 @@
 export declare const Wrapper: 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;
-} & {
-    $isShowConnector: boolean;
-    $level: number;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const ContentWrapper: 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;
 } & {
-    $isShowConnector: boolean;
-    $isHovered?: boolean | undefined;
-    $isSelected?: boolean | undefined;
     $gridColumns: string;
-    $level: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CellStyled: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Cell").CellProps<Record<string, unknown>> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $level: number;
 }, {}, {}>;
 export declare const CheckboxCell: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -48,3 +39,7 @@ export declare const ChevronIcon: import("@emotion/styled/dist/declarations/src/
 } & {
     $isActive?: boolean | undefined;
 }, {}, {}>;
+export declare const BottomDrawerContent: 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>, {}>;

package/node/components/DataGrid/Row/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChevronIcon = exports.CollapseButton = exports.CollapseCell = exports.CheckboxCell = exports.CellStyled = exports.ContentWrapper = exports.Wrapper = void 0;
+exports.BottomDrawerContent = exports.ChevronIcon = exports.CollapseButton = exports.CollapseCell = exports.CheckboxCell = exports.CellStyled = exports.ContentWrapper = exports.Wrapper = void 0;
 const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
 const IconButton_1 = require("../../IconButton");
 const styled_1 = require("../../styled");
@@ -8,6 +8,7 @@ const Cell_1 = require("../Cell");
 const constants_1 = require("../constants");
 const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.li `
+  --level: 0;
   position: relative;
 
   &:not(:last-of-type)::before,
@@ -17,14 +18,35 @@ exports.Wrapper = styled_1.styled.li `
     position: absolute;
     z-index: 1;
     top: 0;
-    transform: ${({ $level }) => `translateX(calc(${constants_1.ROOT_ACTION_CELL_WIDTH}px * ${$level} - ${constants_1.TREE_LINE_WIDTH}px))`};
+    transform: translateX(calc(${constants_1.ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${constants_1.TREE_LINE_WIDTH}px));
 
-    display: ${({ $isShowConnector }) => ($isShowConnector ? 'block' : 'none')};
+    display: none;
 
     width: 0;
     height: 100%;
 
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  }
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &.${constants_2.dataGridRowClassnames.showConnector}::before,
+    & .${constants_2.dataGridRowContentClassnames.root}::before {
+      display: block;
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding-bottom: ${({ theme }) => theme.spacing(3)};
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+    &:not(:first-of-type) {
+      padding-top: ${({ theme }) => theme.spacing(5)};
+    }
+
+    &:first-of-type {
+      padding-top: ${({ theme }) => theme.spacing(1)};
+    }
   }
 `;
 exports.ContentWrapper = styled_1.styled.div `
@@ -33,42 +55,63 @@ exports.ContentWrapper = styled_1.styled.div `
   display: grid;
   grid-template-columns: ${({ $gridColumns }) => $gridColumns};
 
-  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.palette.primary[100] : 'transparent'};
+  background-color: transparent;
 
   &::before {
     content: '';
 
     position: absolute;
     top: 0;
-    transform: ${({ $level }) => `translateX(calc(${constants_1.ROOT_ACTION_CELL_WIDTH}px * ${$level} - ${constants_1.TREE_LINE_WIDTH}px))`};
-
-    display: ${({ $isShowConnector }) => ($isShowConnector ? 'block' : 'none')};
+    transform: translateX(calc(${constants_1.ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${constants_1.TREE_LINE_WIDTH}px));
 
     width: ${constants_1.TREE_LINE_WIDTH}px;
     height: 50%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      display: none;
+    }
   }
 
   &:hover {
-    cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
-
     background-color: ${({ theme }) => theme.palette.background.elementHover};
+    &.${constants_2.dataGridRowContentClassnames.hovered} {
+      cursor: pointer;
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      cursor: initial;
+
+      background-color: transparent;
+    }
   }
 
 
   &.${constants_2.dataGridRowClassnames.hover} {
-    cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+    &.${constants_2.dataGridRowContentClassnames.hovered} {
+      cursor: pointer;
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      cursor: initial;
+
+      background-color: transparent;
+    }
+  }
 
-    background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.palette.primary[100]
-    : theme.palette.background.elementHover};
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
+    gap: ${({ theme }) => theme.spacing(3)};
   }
 `;
 exports.CellStyled = (0, styled_1.styled)(Cell_1.Cell) `
-  margin-left: ${({ $level }) => `${$level * constants_1.ROOT_ACTION_CELL_WIDTH}px`};
+  &:first-of-type {
+    margin-left: calc(var(--level) * ${constants_1.ROOT_ACTION_CELL_WIDTH}px);
+  }
 `;
 exports.CheckboxCell = styled_1.styled.div `
   display: flex;
@@ -84,6 +127,10 @@ exports.CollapseCell = styled_1.styled.div `
   justify-content: center;
 
   width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
   width: 24px;
@@ -105,3 +152,8 @@ exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd
     duration: theme.transitions.duration.short,
 })};
 `;
+exports.BottomDrawerContent = styled_1.styled.div `
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      padding: ${({ theme }) => theme.spacing(5, 4)};
+    }
+`;

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

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type ReactNode } from 'react';
+import { type ChangeEvent, type CSSProperties, type ReactNode } from 'react';
 import { type Variant } from '../enums';
 import { type CellValue, type DataGridColumns, type DataGridRowOptions } from '../types';
 export type RowProps<TData extends Record<string, CellValue>> = {
@@ -115,4 +115,8 @@ export type RowProps<TData extends Record<string, CellValue>> = {
      * Обработчик выхода из строки
      */
     onRowLeave?: (rowId: string, event: PointerEvent) => void;
+    /**
+     * Стили для строки
+     */
+    style?: CSSProperties;
 };

package/node/components/DataGrid/Row/useLogic/hooks/index.d.ts

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

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

package/node/components/DataGrid/Row/useLogic/hooks/useMobileLogic.d.ts

@@ -0,0 +1,5 @@
+export declare const useMobileLogic: () => {
+    isDrawerOpen: boolean;
+    handleOpenDrawer: () => void;
+    handleCloseDrawer: () => void;
+};

package/node/components/DataGrid/Row/useLogic/hooks/useMobileLogic.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileLogic = void 0;
+const react_1 = require("react");
+const useViewportType_1 = require("../../../../useViewportType");
+const useMobileLogic = () => {
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    const [isDrawerOpen, setIsDrawerOpen] = (0, react_1.useState)(false);
+    const handleOpenDrawer = () => {
+        if (isMobile) {
+            setIsDrawerOpen(true);
+        }
+    };
+    const handleCloseDrawer = () => {
+        setIsDrawerOpen(false);
+    };
+    return { isDrawerOpen, handleOpenDrawer, handleCloseDrawer };
+};
+exports.useMobileLogic = useMobileLogic;