@astral/ui 4.73.1 → 4.75.0

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

@@ -11,6 +11,11 @@ exports.dataGridRowClassnames = {
     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'),
+    mobileVariantCards: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_mobile-variant-cards'),
+    mobileVariantList: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_mobile-variant-list'),
+    nestedChildren: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-nested-children'),
+    hasOpenChildren: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_has-open-children'),
+    hasNestedChildren: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_has-nested-children'),
 };
 exports.dataGridRowContentClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-content'),
@@ -20,6 +25,7 @@ exports.dataGridRowContentClassnames = {
 exports.dataGridRowCellClassnames = {
     single: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-cell_single'),
     grouped: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-cell_grouped'),
+    firstCell: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-cell_first'),
 };
 exports.dataGridGroupedColumnLabelClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-grouped-column-label'),

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

@@ -48,6 +48,90 @@ exports.Wrapper = styled_1.styled.li `
     &:first-of-type {
       padding-top: ${({ theme }) => theme.spacing(1)};
     }
+
+    &.${constants_2.dataGridRowClassnames.mobileVariantCards} {
+      border-bottom: none;
+
+      &:not(.${constants_2.dataGridRowClassnames.nestedChildren}) {
+        padding: ${({ theme }) => theme.spacing(5, 4, 4)};
+
+        background-color: ${({ theme }) => theme.palette.background.default};
+        border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        border-radius: ${({ theme }) => theme.shape.medium};
+      }
+    }
+
+    &.${constants_2.dataGridRowClassnames.hasNestedChildren} {
+      :not(.${constants_2.dataGridRowClassnames.nestedChildren}) .${Cell_1.dataGridCellClassnames.root}:last-of-type {
+        padding-bottom: ${({ theme }) => theme.spacing(3)};
+      }
+
+      /* Ко всем ячейкам кроме первой применяем декоративный элемент слева и добавляем отступы для выравнивания с NestedChildren */
+      &:not(.${constants_2.dataGridRowClassnames.nestedChildren}) > .${constants_2.dataGridRowContentClassnames.root} .${Cell_1.dataGridCellClassnames.root}:not(.${constants_2.dataGridRowCellClassnames.firstCell}) {
+        position: relative;
+
+        margin-top: 0;
+        padding-top: ${({ theme }) => theme.spacing(3)};
+        padding-left: ${({ theme }) => theme.spacing(5)};
+
+        &::before {
+          content: '';
+
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+
+          width: 0;
+
+          border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+        }
+      }
+
+      /* L-коннектор применяем ко 2 ячейки основной строки */
+      &:not(.${constants_2.dataGridRowClassnames.nestedChildren})
+       > .${constants_2.dataGridRowContentClassnames.root} .${Cell_1.dataGridCellClassnames.root}.${constants_2.dataGridRowCellClassnames.firstCell} 
+        + .${Cell_1.dataGridCellClassnames.root} {
+        &::after {
+          content: '';
+
+          position: absolute;
+          top: ${({ theme }) => theme.spacing(3)};
+          left: 0;
+
+          width: ${constants_1.MOBILE_TREE_LINE_WIDTH}px;
+          height: ${({ theme }) => theme.spacing(2)};
+
+          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};
+        }
+      }  
+    }
+
+    &.${constants_2.dataGridRowClassnames.nestedChildren} {
+      padding: ${({ theme }) => theme.spacing(3, 0, 3, 5)};
+
+      &::before {
+        content: '';
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: unset;
+
+        display: block;
+
+        width: 0;
+
+        border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+      }
+
+      &:last-of-type::before {
+        /* Высота последнего декоративного элемента закрывает отступ между компонентами Row */
+        height: ${({ theme }) => theme.spacing(3)};
+      }
+    }
   }
 `;
 exports.ContentWrapper = styled_1.styled.div `
@@ -77,6 +161,21 @@ exports.ContentWrapper = styled_1.styled.div `
     }
   }
 
+  /* L-коннектор для nestedChildren на мобильных устройствах */
+  .${constants_2.dataGridRowClassnames.nestedChildren} &::before {
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      left: -20px;
+      transform: none;
+
+      display: block;
+
+      width: ${constants_1.MOBILE_TREE_LINE_WIDTH}px;
+
+      /* Высота 8px для выравнивания с названием колонки первой ячейки */
+      height: ${({ theme }) => theme.spacing(2)};
+    }
+  }
+
   &.${constants_2.dataGridRowContentClassnames.active} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }

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

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

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

@@ -14,6 +14,6 @@ const useMobileLogic = () => {
     const handleCloseDrawer = () => {
         setIsDrawerOpen(false);
     };
-    return { isDrawerOpen, handleOpenDrawer, handleCloseDrawer };
+    return { isMobile, isDrawerOpen, handleOpenDrawer, handleCloseDrawer };
 };
 exports.useMobileLogic = useMobileLogic;

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

@@ -2,7 +2,7 @@ import { type MouseEvent, type SyntheticEvent } from 'react';
 import type { CellValue } from '../../types';
 import type { RowProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue>> = RowProps<TData>;
-export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, isSelected, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
     disabledReasonText: string | undefined;
     rowStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
@@ -870,10 +870,14 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     rowId: string;
     rowRef: (element: HTMLElement | null) => void;
     disabled: boolean | undefined;
+    isSelectable: boolean | undefined;
     isRenderCollapseButton: boolean;
     handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;
+    rootRowElement: HTMLLIElement | null;
+    rootRowRef: (element: HTMLLIElement | null) => void;
     isHovered: boolean;
     isActive: boolean;
+    mobileDisplayVariant: "list" | "cards" | undefined;
     rowProps: {
         onClick: () => void;
         onMouseMove: (event: MouseEvent<HTMLElement>) => void;
@@ -896,7 +900,6 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     };
     nestedChildrenProps: {
         isOpen: boolean;
-        rowId: string;
     };
 };
 export {};

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

@@ -9,11 +9,18 @@ const constants_1 = require("../constants");
 const RowContext_1 = require("../RowContext");
 const hooks_1 = require("./hooks");
 const utils_1 = require("./utils");
-const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
+const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, isSelected, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
     const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = (0, hooks_1.useMobileLogic)();
-    const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
-    const { checkIsOpened, toggleOpenItems } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
+    const [rootRowElement, setRootRowElement] = (0, react_1.useState)(null);
+    const rootRowRef = (0, react_1.useCallback)((element) => {
+        if (element) {
+            setRootRowElement(element);
+        }
+    }, []);
+    const isDefaultExpanded = Boolean(isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length);
+    const { mobileDisplayVariant } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
     const { isDisabled, disabledReason } = (0, react_1.useContext)(RowContext_1.RowContext);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(isDefaultExpanded);
     const savedElementRef = (0, react_1.useRef)(null);
     const rowRef = (element) => {
         if (element) {
@@ -29,7 +36,6 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
     const rowId = row[keyId];
     const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, target, } = options || {};
     const disabled = isDisabled || isExternalDisabled;
-    const isOpen = checkIsOpened(rowId);
     const handleRowClick = () => {
         if (disabled) {
             handleOpenDrawer();
@@ -40,20 +46,12 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
         }
         onRowClick?.(row);
     };
-    (0, react_1.useEffect)(() => {
-        // Проверка на isOpen необходима для infinite версии с виртуализацией, когда происходит размонтировании компонента
-        if (isDefaultExpanded && !isOpen) {
-            toggleOpenItems(rowId);
-        }
-    }, []);
-    const isChecked = isSelectable &&
-        Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
     const isShowConnector = Object.is(variant, enums_1.Variant.Tree);
     const childrenColumns = (0, react_1.useMemo)(() => (0, utils_1.mergeColumnsOptions)(columns, options?.childrenColumns), [columns, options]);
-    const handleToggle = (event) => {
+    const handleToggle = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        toggleOpenItems(rowId);
-    };
+        setIsOpen((prev) => !prev);
+    }, []);
     const handleOpenTooltip = (event) => {
         const element = event.target;
         const isDisabledCell = element?.getAttribute(constants_1.DISABLE_ROW_ATTR) === 'true';
@@ -80,6 +78,7 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
     const isHovered = Boolean(!disabled && (onRowClick || href));
     const isActive = activeRowId === rowId;
     const disabledReasonText = externalDisabledReason || disabledReason;
+    const handleCheckboxChange = (0, react_1.useMemo)(() => onSelectRow(row), [onSelectRow, row]);
     return {
         disabledReasonText,
         rowStyles,
@@ -89,10 +88,14 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
         rowId,
         rowRef,
         disabled,
+        isSelectable,
         isRenderCollapseButton,
         handleToggle,
+        rootRowElement,
+        rootRowRef,
         isHovered,
         isActive,
+        mobileDisplayVariant,
         rowProps: {
             onClick: handleRowClick,
             onMouseMove: handleMouseMove,
@@ -109,13 +112,12 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
             onClose: handleCloseTooltip,
         },
         checkboxProps: {
-            checked: isChecked,
+            checked: isSelected,
             disabled,
-            onChange: onSelectRow(row),
+            onChange: handleCheckboxChange,
         },
         nestedChildrenProps: {
             isOpen,
-            rowId,
         },
     };
 };

package/node/components/DataGrid/RowBase/GroupCell/GroupCell.d.ts

@@ -0,0 +1,2 @@
+import { type GroupCellProps } from './types';
+export declare const GroupCell: ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, }: GroupCellProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/DataGrid/RowBase/GroupCell/GroupCell.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupCell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const Cell_1 = require("../../Cell");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const groupedColumnLabelCva = (0, class_variance_authority_1.cva)(constants_1.dataGridGroupedColumnLabelClassnames.root, {
+    variants: {
+        hidden: {
+            true: constants_1.dataGridGroupedColumnLabelClassnames.hidden,
+        },
+    },
+});
+const GroupCell = ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, }) => {
+    const { label, children, hideTitleOnMobile, isHideOnMobile } = cell;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.GroupedColumnLabel, { variant: "caption", color: "grey", colorIntensity: "700", className: groupedColumnLabelCva({
+                    hidden: hideTitleOnMobile || isHideOnMobile,
+                }), children: label }), children.map((child, childIndex) => {
+                const childCellId = `${cellId}-${childIndex}`;
+                const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
+                return ((0, jsx_runtime_1.jsx)(Cell_1.Cell, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabled, startAdornment: shouldRenderStartAdornment && startAdornment, isHidePersonalData: child.isHidePersonalData, className: Cell_1.dataGridCellClassnames.grouped }, childCellId));
+            })] }));
+};
+exports.GroupCell = GroupCell;

package/node/components/DataGrid/RowBase/GroupCell/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const dataGridGroupedColumnLabelClassnames: {
+    root: string;
+    hidden: string;
+};

package/node/components/DataGrid/RowBase/GroupCell/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridGroupedColumnLabelClassnames = void 0;
+const createUIKitClassname_1 = require("../../../utils/createUIKitClassname");
+exports.dataGridGroupedColumnLabelClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-grouped-column-label'),
+    hidden: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-grouped-column-label_hidden'),
+};

package/node/components/DataGrid/RowBase/GroupCell/index.d.ts

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

package/node/components/DataGrid/RowBase/GroupCell/index.js

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

package/node/components/DataGrid/RowBase/GroupCell/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const GroupedColumnLabel: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
+    color?: import("../../../Typography").TypographyColor | undefined;
+    variant?: import("../../../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../../../Typography").Intensity | undefined;
+    component?: import("../../../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/DataGrid/RowBase/GroupCell/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedColumnLabel = void 0;
+const styled_1 = require("../../../styled");
+const Typography_1 = require("../../../Typography");
+const constants_1 = require("./constants");
+exports.GroupedColumnLabel = (0, styled_1.styled)(Typography_1.Typography) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+
+    margin-top: ${({ theme }) => theme.spacing(3)};
+
+    &.${constants_1.dataGridGroupedColumnLabelClassnames.hidden} {
+      display: none;
+    }
+  }
+`;

package/node/components/DataGrid/RowBase/GroupCell/types.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import { type DataGridGroupColumn, type DataGridRowWithOptions } from '../../types';
+export type GroupCellProps = {
+    cell: DataGridGroupColumn<Record<string, unknown>>;
+    cellId: string;
+    isFirstCell?: boolean;
+    row: DataGridRowWithOptions<Record<string, unknown>>;
+    emptyCellValue?: ReactNode;
+    isDisabled?: boolean;
+    startAdornment?: ReactNode;
+};

package/node/components/DataGrid/RowBase/GroupCell/types.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RowBaseProps } from './types';
+export declare const RowBase: import("react").MemoExoticComponent<(props: RowBaseProps) => import("react/jsx-runtime").JSX.Element>;

package/node/components/DataGrid/RowBase/RowBase.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowBase = 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 classNames_1 = require("../../utils/classNames");
+const cva_1 = require("../../utils/cva");
+const getInertProps_1 = require("../../utils/getInertProps");
+const Cell_1 = require("../Cell");
+const constants_1 = require("../Row/constants");
+const utils_1 = require("../Row/utils");
+const utils_2 = require("../utils");
+const constants_2 = require("./constants");
+const GroupCell_1 = require("./GroupCell");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const contentWrapperCva = (0, cva_1.cva)(constants_2.dataGridRowBaseClassnames.contentWrapper, {
+    variants: {
+        isHovered: {
+            true: constants_2.dataGridRowBaseClassnames.hovered,
+        },
+        isActive: {
+            true: constants_2.dataGridRowBaseClassnames.active,
+        },
+    },
+});
+const rootCva = (0, cva_1.cva)(constants_2.dataGridRowBaseClassnames.root, {
+    variants: {
+        mobileDisplayVariant: {
+            cards: constants_2.dataGridRowBaseClassnames.mobileVariantCards,
+            list: constants_2.dataGridRowBaseClassnames.mobileVariantList,
+        },
+    },
+});
+exports.RowBase = (0, react_1.memo)((props) => {
+    const { className, tooltipProps, rowBaseVars, isHovered, isActive, drawerProps, emptyCellValue, rowRef, onRowEnter, onRowLeave, rowId, row, isDisabled, sectionOffset, customContent, isDisabledLastCell, renderStartAdornment, checkboxProps, isNotSelectable, isSelectable, columns, dataGridInfiniteItemProps, handleRowClick, drawerContent, mobileDisplayVariant, } = (0, useLogic_1.useLogic)(props);
+    const renderStartAdornmentBase = () => {
+        const adornment = renderStartAdornment?.(true);
+        const shouldRenderCheckbox = isSelectable && !isNotSelectable;
+        if (!adornment && !shouldRenderCheckbox) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [adornment, shouldRenderCheckbox && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(isDisabled), 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 = columns.length - 1;
+        const availableCellsByIndex = !isDisabledLastCell
+            ? [lastCellGlobalIndex]
+            : undefined;
+        return columns?.map((cell, index) => {
+            const cellId = `row-base-${index}`;
+            const globalIndex = (sectionOffset ?? 0) + index;
+            const isFirstCell = globalIndex === 0;
+            const isDisabledCell = (0, utils_1.checkIsDisabled)(isDisabled, availableCellsByIndex, globalIndex);
+            if ((0, utils_2.isGroupColumns)(cell)) {
+                return ((0, jsx_runtime_1.jsx)(GroupCell_1.GroupCell, { cell: cell, cellId: cellId, isFirstCell: isFirstCell, row: row, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: isFirstCell && renderStartAdornmentBase() }, cellId));
+            }
+            return ((0, jsx_runtime_1.jsx)(Cell_1.Cell, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornmentBase(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
+        });
+    }, [
+        row,
+        columns,
+        isDisabled,
+        sectionOffset,
+        renderStartAdornment,
+        checkboxProps.checked,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, rootCva({ mobileDisplayVariant })), style: rowBaseVars, ...dataGridInfiniteItemProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: contentWrapperCva({ isHovered, isActive }), [constants_1.DISABLE_ROW_ATTR]: isDisabled, onClick: handleRowClick, children: renderCells() }) }), customContent, (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: drawerContent }) })] }, `row-base-${rowId}`));
+});

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

@@ -0,0 +1,9 @@
+export declare const DISABLE_ROW_ATTR = "data-row-disable";
+export declare const dataGridRowBaseClassnames: {
+    root: string;
+    contentWrapper: string;
+    hovered: string;
+    active: string;
+    mobileVariantCards: string;
+    mobileVariantList: string;
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridRowBaseClassnames = exports.DISABLE_ROW_ATTR = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.DISABLE_ROW_ATTR = 'data-row-disable';
+exports.dataGridRowBaseClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-row-base'),
+    contentWrapper: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-row-base__content-wrapper'),
+    hovered: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-row-base_hovered'),
+    active: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-row-base_active'),
+    mobileVariantCards: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-row-base_mobile-variant-cards'),
+    mobileVariantList: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-row-base_mobile-variant-list'),
+};

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

@@ -0,0 +1,3 @@
+export { RowBase } from './RowBase';
+export { dataGridRowBaseClassnames } from './constants';
+export type { RowBaseProps } from './types';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridRowBaseClassnames = exports.RowBase = void 0;
+var RowBase_1 = require("./RowBase");
+Object.defineProperty(exports, "RowBase", { enumerable: true, get: function () { return RowBase_1.RowBase; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "dataGridRowBaseClassnames", { enumerable: true, get: function () { return constants_1.dataGridRowBaseClassnames; } });

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const CheckboxCell: 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 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;
+}, 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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+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/RowBase/styles.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomDrawerContent = exports.ContentWrapper = exports.Wrapper = exports.CheckboxCell = void 0;
+const styled_1 = require("../../styled");
+const constants_1 = require("../constants");
+const constants_2 = require("./constants");
+exports.CheckboxCell = styled_1.styled.div `
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+
+  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
+`;
+exports.Wrapper = styled_1.styled.li `
+  --row-base-grid-columns: 1fr;
+
+  position: relative;
+
+  ${({ 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)};
+    }
+
+    &.${constants_2.dataGridRowBaseClassnames.mobileVariantCards} {
+      padding: ${({ theme }) => theme.spacing(5, 4, 4)};
+
+      background-color: ${({ theme }) => theme.palette.background.default};
+      border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: none;
+      border-radius: ${({ theme }) => theme.shape.medium};
+  
+    }
+  }
+`;
+exports.ContentWrapper = styled_1.styled.div `
+  position: relative;
+
+  display: grid;
+  grid-template-columns: var(--row-base-grid-columns);
+
+  background-color: transparent;
+
+  &.${constants_2.dataGridRowBaseClassnames.active} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+
+    &.${constants_2.dataGridRowBaseClassnames.active} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${constants_2.dataGridRowBaseClassnames.hovered} {
+      cursor: pointer;
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
+
+    &.${constants_2.dataGridRowBaseClassnames.active} {
+      background-color: transparent;
+    }
+
+    &:hover, &.${constants_2.dataGridRowBaseClassnames.hovered} {
+      cursor: initial;
+
+      background-color: transparent;
+
+      &.${constants_2.dataGridRowBaseClassnames.active} {
+        background-color: transparent;
+      }
+    }
+  }
+`;
+exports.BottomDrawerContent = styled_1.styled.div `
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      padding: ${({ theme }) => theme.spacing(5, 4)};
+    }
+`;