@astral/ui 4.55.4 → 4.57.0

package/components/theme/components/MuiDivider.d.ts

@@ -0,0 +1,3 @@
+import { type Components } from '@mui/material/styles/components';
+import { type Theme } from '../types';
+export declare const MuiDivider: Components<Theme>['MuiDivider'];

package/components/theme/components/MuiDivider.js

@@ -0,0 +1,9 @@
+export const MuiDivider = {
+    styleOverrides: {
+        root({ theme }) {
+            return {
+                borderColor: theme.palette.components.border.default,
+            };
+        },
+    },
+};

package/components/theme/components/MuiListItem.d.ts

@@ -0,0 +1,3 @@
+import { type Components } from '@mui/material/styles/components';
+import { type Theme } from '../types';
+export declare const MuiListItem: Components<Theme>['MuiListItem'];

package/components/theme/components/MuiListItem.js

@@ -0,0 +1,9 @@
+export const MuiListItem = {
+    styleOverrides: {
+        divider({ theme }) {
+            return {
+                borderColor: theme.palette.components.border.default,
+            };
+        },
+    },
+};

package/components/theme/components/MuiOutlinedInput.js

@@ -51,7 +51,7 @@ export const MuiOutlinedInput = {
                 },
                 '&::placeholder': {
                     opacity: 1,
-                    color: theme.palette.grey[400],
+                    color: theme.palette.grey[500],
                 },
             };
         },
@@ -64,7 +64,7 @@ export const MuiOutlinedInput = {
         notchedOutline({ theme }) {
             return {
                 borderWidth: 1,
-                borderColor: theme.palette.grey[300],
+                borderColor: theme.palette.components.border.default,
                 top: 0,
                 transition: theme.transitions.create(['border-color'], {
                     easing: theme.transitions.easing.easeInOut,

package/components/theme/components/MuiPaper.js

@@ -24,7 +24,7 @@ export const MuiPaper = {
         },
         outlined({ theme }) {
             return {
-                border: `1px solid ${theme.palette.grey[300]}`,
+                border: `1px solid ${theme.palette.components.border.default}`,
             };
         },
     },

package/components/theme/components/MuiStepConnector.js

@@ -4,7 +4,10 @@ export const MuiStepConnector = {
             return { top: theme.microSpacing(5) };
         },
         lineHorizontal({ theme }) {
-            return { borderTopWidth: 2, borderColor: theme.palette.grey[300] };
+            return {
+                borderTopWidth: 2,
+                borderColor: theme.palette.components.border.default,
+            };
         },
     },
 };

package/components/theme/components/components.js

@@ -7,12 +7,14 @@ import { MuiDialog } from './MuiDialog';
 import { MuiDialogActions } from './MuiDialogActions';
 import { MuiDialogContent } from './MuiDialogContent';
 import { MuiDialogTitle } from './MuiDialogTitle';
+import { MuiDivider } from './MuiDivider';
 import { MuiDrawer } from './MuiDrawer';
 import { MuiFormControlLabel } from './MuiFormControlLabel';
 import { MuiFormHelperText } from './MuiFormHelperText';
 import { MuiFormLabel } from './MuiFormLabel';
 import { MuiInputLabel } from './MuiInputLabel';
 import { MuiLinearProgress } from './MuiLinearProgress';
+import { MuiListItem } from './MuiListItem';
 import { MuiListItemButton } from './MuiListItemButton';
 import { MuiListItemText } from './MuiListItemText';
 import { MuiListSubheader } from './MuiListSubheader';
@@ -49,6 +51,7 @@ export const getComponents = () => {
         MuiAlert,
         MuiButton,
         MuiButtonBase,
+        MuiDivider,
         MuiTypography,
         MuiInputLabel,
         MuiOutlinedInput,
@@ -72,6 +75,7 @@ export const getComponents = () => {
         MuiPaginationItem,
         MuiPaper,
         MuiCircularProgress,
+        MuiListItem,
         MuiListItemButton,
         MuiListItemText,
         MuiLinearProgress,

package/components/theme/palette/componentsColors/componentsColors.d.ts

@@ -3,5 +3,8 @@ export type ComponentsColors = {
     link: LinkColors;
     focused: string;
     disabled: string;
+    border: {
+        default: string;
+    };
 };
 export declare const componentsColors: ComponentsColors;

package/components/theme/palette/componentsColors/componentsColors.js

@@ -3,4 +3,7 @@ export const componentsColors = {
     link: linkColors,
     focused: '#70AEFF',
     disabled: '#F1F1F1',
+    border: {
+        default: '#C7C7C7',
+    },
 };

package/node/components/BottomDrawer/styles.js

@@ -33,7 +33,7 @@ exports.Header = styled_1.styled.header `
   height: ${({ drawerHeaderHeight }) => `${drawerHeaderHeight}px`};
   padding: ${({ theme }) => theme.spacing(1, 2, 1, 4)};
 
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 `;
 exports.HeaderTitle = (0, styled_1.styled)(Typography_1.default) `
   margin-right: ${({ theme }) => theme.spacing(2)};

package/node/components/CardGridInfinite/Footer/styles.js

@@ -12,7 +12,7 @@ exports.Wrapper = styled_1.styled.footer `
   max-height: 76px;
   margin-top: ${({ theme }) => theme.spacing(4)};
 
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
 `;
 exports.FooterDummy = styled_1.styled.div `
   min-height: 20px;

package/node/components/CheckableTag/styles.js

@@ -89,7 +89,7 @@ const getBorder = ({ isChecked, variant, color, theme, disabled, tagState = 'def
     if (tagState === 'default') {
         `1px solid ${theme.palette.grey[600]}`;
     }
-    return `1px solid ${theme.palette.grey[400]}`;
+    return `1px solid ${theme.palette.components.border.default}`;
 };
 exports.Wrapper = styled_1.styled.label `
   width: fit-content;

package/node/components/Checkbox/styles.js

@@ -6,7 +6,7 @@ const mixins_1 = require("../styled/mixins");
 const constants_1 = require("./constants");
 const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, isIndeterminate, }) => {
     if (isDisabled) {
-        return theme.palette.grey[300];
+        return theme.palette.components.border.default;
     }
     if (isError) {
         return isHover ? theme.palette.error[700] : theme.palette.error[800];
@@ -14,7 +14,9 @@ const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, isInd
     if (isChecked || isIndeterminate) {
         return isHover ? theme.palette.primary[700] : theme.palette.primary[800];
     }
-    return isHover ? theme.palette.grey[900] : theme.palette.grey[300];
+    return isHover
+        ? theme.palette.grey[900]
+        : theme.palette.components.border.default;
 };
 exports.Wrapper = (0, styled_1.styled)('span', {
     shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked', '$isIndeterminate'].includes(prop),

package/node/components/Chip/styles.js

@@ -17,7 +17,7 @@ exports.Wrapper = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(0, 2)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {

package/node/components/CodeField/styles.js

@@ -10,7 +10,7 @@ const getBorder = (theme, isDisabled, isError) => {
     }
     return isError
         ? `1px solid ${theme.palette.error[800]}`
-        : `1px solid ${theme.palette.grey[300]};`;
+        : `1px solid ${theme.palette.components.border.default};`;
 };
 exports.Wrapper = styled_1.styled.div `
   display: flex;

package/node/components/ComplianceStatus/styles.js

@@ -40,7 +40,7 @@ exports.Wrapper = styled_1.styled.article `
   &.${constants_1.complianceStatusClassnames.outlined} {
     padding: ${({ theme }) => theme.spacing(3)};
 
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.Inner = (0, styled_1.styled)('ul') `

package/node/components/ContentState/ContentState.d.ts

@@ -1,2 +1,2 @@
 import type { ContentStateProps } from './types';
-export declare const ContentState: ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent, loadingTitle, placeholderSize, isSmoothLoading, }: ContentStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentState: ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent, loadingTitle, placeholderSize, isSmoothLoading, loadingPlaceholderClassname, }: ContentStateProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/ContentState/ContentState.js

@@ -8,13 +8,13 @@ const LoadingPlaceholder_1 = require("../placeholders/LoadingPlaceholder");
 const Placeholder_1 = require("../placeholders/Placeholder");
 const Typography_1 = require("../Typography");
 const useLogic_1 = require("./useLogic");
-const ContentState = ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent, loadingTitle, placeholderSize, isSmoothLoading, }) => {
+const ContentState = ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent, loadingTitle, placeholderSize, isSmoothLoading, loadingPlaceholderClassname, }) => {
     const { imagesMap, isLoadingPhase, isShowLoader } = (0, useLogic_1.useLogic)({
         isLoading,
         isSmoothLoading,
     });
     if (isLoadingPhase) {
-        return ((0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { content: loadingContent, title: loadingTitle, isShowLoader: isShowLoader }));
+        return ((0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { content: loadingContent, title: loadingTitle, isShowLoader: isShowLoader, className: loadingPlaceholderClassname }));
     }
     if (isCustom && customState) {
         return (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { ...customState });

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

@@ -78,4 +78,8 @@ export type ContentStateProps = {
      * лоадер показывается и скрывается сразу при изменении `isLoading`.
      */
     isSmoothLoading?: boolean;
+    /**
+     * Класс применяемый для loading placeholder
+     */
+    loadingPlaceholderClassname?: string;
 };

package/node/components/DashboardLayout/DashboardWrapper/styles.js

@@ -22,7 +22,7 @@ exports.DecorativeHeaderBackground = styled_1.styled.div `
   height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_1.HEADER_HEIGHT_DESKTOP)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   transition: ${({ theme }) => {
     return theme.transitions.create(['height'], {

package/node/components/DashboardLayout/Header/styles.js

@@ -45,7 +45,7 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
     padding: ${({ theme }) => theme.spacing(0, 2, 0, 1)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
     transition: unset;
   }
@@ -160,14 +160,14 @@ exports.PriorityFeatureWrapper = styled_1.styled.div `
         height: ${constants_3.MOBILE_BUTTON_HEIGHT};
         padding: ${({ theme }) => theme.spacing(3, 4)};
 
-        border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
         &:hover {
-          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
         }
 
         &:active {
-          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
         }
       }
 

package/node/components/DashboardLayoutSkeleton/styles.js

@@ -9,7 +9,7 @@ exports.Content = styled_1.styled.div `
   min-height: 0;
 
   background-color: ${({ theme }) => theme.palette.common.white};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/DashboardSidebar/styles.js

@@ -88,7 +88,7 @@ exports.SidebarHeader = styled_1.styled.header `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
     /* Причина игнора: Не критично для отображения */
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -151,7 +151,7 @@ exports.Footer = styled_1.styled.footer `
   margin-top: auto;
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
   border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
   

package/node/components/DashboardSidebarSkeleton/styles.js

@@ -15,7 +15,7 @@ exports.Wrapper = (0, styled_1.styled)('div', {
   padding: ${({ theme, $isPinned }) => $isPinned ? theme.spacing(4, 3) : theme.spacing(4, 2)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

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

@@ -1,2 +1,2 @@
 import type { BodyProps } from './types';
-export declare const Body: <TData extends Record<string, unknown>>(props: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: <TData extends Record<string, unknown>>({ rows, selectedRows, minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps }: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/node/components/DataGrid/Body/Body.js

@@ -2,21 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Body = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ConfigProvider_1 = require("../../ConfigProvider");
+const classNames_1 = require("../../utils/classNames");
+const cva_1 = require("../../utils/cva");
 const Row_1 = require("../Row");
 const RowContext_1 = require("../Row/RowContext");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
 const INITIAL_LEVEL = 0;
-const Body = (props) => {
-    const { components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
-    const { rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps } = props;
+const bodyCva = (0, cva_1.cva)(constants_1.bodyClassnames.root, {
+    variants: {
+        disableMinHeight: {
+            true: constants_1.bodyClassnames.disableMinHeight,
+        },
+    },
+});
+const Body = ({ rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps }) => {
+    const { disableMinHeight, bodyCssVars } = (0, useLogic_1.useLogic)({ minDisplayRows });
     const renderedRows = rows.map(({ children, options, ...row }) => {
         const rowId = row[keyId];
         const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
         return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
     });
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: rows.length ? renderedRows : noDataPlaceholder }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, bodyCva({ disableMinHeight })), style: bodyCssVars, children: rows.length ? renderedRows : noDataPlaceholder }));
 };
 exports.Body = Body;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bodyClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.bodyClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__body'),
+    disableMinHeight: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__body_disable-min-height'),
+};

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

@@ -2,7 +2,4 @@
 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;
-} & {
-    $minDisplayRows: number;
-    $disableMinHeight?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

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

@@ -3,20 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 const styled_1 = require("../../styled");
 const constants_1 = require("../constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.ul `
+  --min-display-rows: 0;
+
   overflow-y: auto;
 
   width: fit-content;
   min-width: 100%;
   height: 100%;
-  min-height: ${({ $minDisplayRows, $disableMinHeight }) => ($disableMinHeight ? 'unset' : `${constants_1.MIN_ROW_HEIGHT * $minDisplayRows}px`)};
+  min-height: calc(var(--min-display-rows) * ${constants_1.MIN_ROW_HEIGHT}px);
   margin: 0;
   padding: 0;
 
   list-style-type: none;
 
+  &.${constants_2.bodyClassnames.disableMinHeight} {
+    min-height: unset;
+  }
+
   &.${constants_1.dataGridClassnames.bodyEmpty} {
     display: flex;
     align-items: center;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: initial;
+
+    width: 100%;
+  }
 `;

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

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

package/node/components/DataGrid/{useLogic/hooks/useClassnames → Body/useLogic}/index.js

@@ -14,4 +14,4 @@ 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("./useClassnames"), exports);
+__exportStar(require("./useLogic"), exports);

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

@@ -0,0 +1,9 @@
+import { type CSSProperties } from 'react';
+import { type CellValue } from '../../types';
+import type { BodyProps } from '../types';
+type UseLogicParams<TData extends Record<string, CellValue>> = Pick<BodyProps<TData>, 'minDisplayRows'>;
+export declare const useLogic: <TData extends Record<string, unknown>>({ minDisplayRows, }: UseLogicParams<TData>) => {
+    disableMinHeight: boolean | undefined;
+    bodyCssVars: CSSProperties;
+};
+export {};

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const ConfigProvider_1 = require("../../../ConfigProvider");
+const useLogic = ({ minDisplayRows, }) => {
+    const { components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
+    const bodyCssVars = !disableMinHeight && minDisplayRows
+        ? {
+            '--min-display-rows': minDisplayRows,
+        }
+        : {};
+    return {
+        disableMinHeight,
+        bodyCssVars,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/DataGrid/Cell/Cell.js

@@ -5,16 +5,32 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const OverflowTypography_1 = require("../../OverflowTypography");
 const personalDataSecurity_1 = require("../../personalDataSecurity");
 const classNames_1 = require("../../utils/classNames");
+const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const cellCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.root, {
+    variants: {
+        isHideOnMobile: {
+            true: constants_1.dataGridCellClassnames.isHideOnMobile,
+        },
+    },
+});
+const cellContentCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.cellContent, {
+    variants: {
+        isActionColumn: {
+            true: constants_1.dataGridCellClassnames.actionColumn,
+        },
+    },
+});
 const Cell = (props) => {
-    const { formattedValue, hasStartAdornment } = (0, useLogic_1.useLogic)(props);
+    const { formattedValue, hasStartAdornment, isActionColumn, label } = (0, useLogic_1.useLogic)(props);
     const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, } = props;
     const { renderCell, align = 'left' } = cell;
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData === true,
     });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isDisabled": isDisabled, "$align": align, "$hasStartAdornment": hasStartAdornment, className: (0, classNames_1.classNames)(className, hidePersonalDataClassname), ...(0, getInertProps_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, renderCell?.(row), !renderCell && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isDisabled": isDisabled, "$align": align, "$hasStartAdornment": hasStartAdornment, className: (0, classNames_1.classNames)(className, hidePersonalDataClassname, cellCva({ isHideOnMobile: cell.isHideOnMobile })), ...(0, getInertProps_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsxs)(styles_1.CellContent, { className: cellContentCva({ isActionColumn }), children: [(0, jsx_runtime_1.jsx)(styles_1.ColumnLabel, { variant: "caption", color: "textSecondary", className: constants_1.dataGridCellClassnames.columnLabel, children: label }), renderCell?.(row), !renderCell && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] })] }));
 };
 exports.Cell = Cell;

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

@@ -0,0 +1,7 @@
+export declare const dataGridCellClassnames: {
+    root: string;
+    isHideOnMobile: string;
+    columnLabel: string;
+    actionColumn: string;
+    cellContent: string;
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridCellClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.dataGridCellClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell'),
+    isHideOnMobile: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_hide-on-mobile'),
+    columnLabel: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell-column-label'),
+    actionColumn: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_action-column'),
+    cellContent: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell-content'),
+};

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

@@ -9,4 +9,18 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & HeadCellProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColumnLabel: 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;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CellContent: 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 {};

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

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper = void 0;
+exports.CellContent = exports.ColumnLabel = exports.Wrapper = void 0;
 const styled_1 = require("../../styled");
+const Typography_1 = require("../../Typography");
 const constants_1 = require("../constants");
+const constants_2 = require("../Row/constants");
 const utils_1 = require("../utils");
+const constants_3 = require("./constants");
 exports.Wrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$align', '$isDisabled', '$hasStartAdornment'].includes(prop),
 }) `
@@ -16,4 +19,48 @@ exports.Wrapper = (0, styled_1.styled)('div', {
   padding: ${({ theme, $hasStartAdornment }) => $hasStartAdornment ? theme.spacing(1, 2, 1, 0) : theme.spacing(1, 2)};
 
   opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    justify-content: space-between;
+
+    min-height: unset;
+    padding: 0;
+
+    &.${constants_3.dataGridCellClassnames.isHideOnMobile} {
+      display: none;
+    }
+
+
+    & .${constants_2.dataGridRowClassnames.checkbox} {
+      align-self: flex-start;
+      order: 1;
+    }
+  }
+`;
+exports.ColumnLabel = (0, styled_1.styled)(Typography_1.Typography) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+  }
+`;
+exports.CellContent = styled_1.styled.div `
+  min-width: 0;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    flex-direction: column;
+    gap: ${({ theme }) => theme.spacing(1)};
+    align-items: flex-start;
+
+    width: 100%;
+    
+    &.${constants_3.dataGridCellClassnames.actionColumn} {
+      align-items: flex-end;
+
+      & .${constants_3.dataGridCellClassnames.columnLabel} {
+        display: none;
+      }
+    }
+  }
 `;

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

@@ -4,5 +4,7 @@ type UseLogicParams<TData extends Record<string, CellValue>> = CellProps<TData>;
 export declare const useLogic: <TData extends Record<string, unknown>>({ row, cell, emptyCellValue, startAdornment, }: UseLogicParams<TData>) => {
     formattedValue: unknown;
     hasStartAdornment: boolean;
+    isActionColumn: boolean;
+    label: string | undefined;
 };
 export {};

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
-    const { format, field } = cell;
+    const { format, field, label } = cell;
     const isValidValue = (value) => {
         return Boolean(value) || value === 0;
     };
@@ -17,6 +17,7 @@ const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
         return emptyCellValue;
     }, [field, format, row, emptyCellValue]);
     const hasStartAdornment = Boolean(startAdornment);
-    return { formattedValue, hasStartAdornment };
+    const isActionColumn = cell.field === 'actions';
+    return { formattedValue, hasStartAdornment, isActionColumn, label };
 };
 exports.useLogic = useLogic;