@astral/ui 4.56.0 → 4.57.0

package/components/DescriptionCell/styles.js

@@ -1,5 +1,6 @@
-import { typographyClasses } from '@mui/material/Typography';
+import { descriptionClassnames } from '../Description/constants';
 import { styled } from '../styled';
+import { typographyClassnames } from '../Typography/constants';
 import { descriptionCellClassnames } from './constants';
 export const Wrapper = styled.div `
   display: flex;
@@ -20,15 +21,23 @@ export const IconWrapper = styled.div `
     width: 24px;
     height: 24px;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 export const ItemWrapper = styled.div `
   display: flex;
   flex-direction: column;
 
-  dl {
-    .${typographyClasses.root} {
+  & .${descriptionClassnames.root} {
+    & .${typographyClassnames.root} {
       font-size: unset;
       color: unset;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(1)};
+  }
 `;

package/components/NewStepper/index.d.ts

@@ -1,4 +1,5 @@
 export { NewStepper } from './NewStepper';
+export { stepperClassnames } from './constants';
 export { Step, type StepProps, stepClassnames } from './Step';
 export type { StepperProps } from './types';
 export { stepIconClassnames } from './StepIcon';

package/components/NewStepper/index.js

@@ -1,3 +1,4 @@
 export { NewStepper } from './NewStepper';
+export { stepperClassnames } from './constants';
 export { Step, stepClassnames } from './Step';
 export { stepIconClassnames } from './StepIcon';

package/components/NewStepper/public.d.ts

@@ -1,3 +1,4 @@
+export { stepperClassnames } from './constants';
 export { NewStepper } from './NewStepper';
 export { Step, type StepProps, stepClassnames } from './Step';
 export { stepIconClassnames } from './StepIcon';

package/components/NewStepper/public.js

@@ -1,3 +1,4 @@
+export { stepperClassnames } from './constants';
 export { NewStepper } from './NewStepper';
 export { Step, stepClassnames } from './Step';
 export { stepIconClassnames } from './StepIcon';

package/components/PageLayoutSection/PageLayoutSection.d.ts

@@ -5,6 +5,10 @@ export type PageLayoutSectionProps = {
      * Название класса, применяется к корневому компоненту
      */
     className?: string;
+    /**
+     * Отключает боковые отступы на мобильных разрешениях
+     */
+    isNoMobileSidePadding?: boolean;
 };
 /**
  * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.

package/components/PageLayoutSection/PageLayoutSection.js

@@ -1,6 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Section, SectionInner } from './styles';
+import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
+import { pageLayoutSectionClassnames } from './constants';
+import { Section, SectionWrapper } from './styles';
+const sectionWrapperCva = cva(pageLayoutSectionClassnames.wrapper, {
+    variants: {
+        isNoMobileSidePadding: {
+            true: pageLayoutSectionClassnames.isNoMobileSidePadding,
+        },
+    },
+});
 /**
  * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
  *
@@ -13,7 +23,6 @@ import { Section, SectionInner } from './styles';
  *   </PageLayoutSectionContainer>
  * } />
  */
-export const PageLayoutSection = forwardRef((props, ref) => {
-    const { children, className } = props;
-    return (_jsx(Section, { className: className, ref: ref, children: _jsx(SectionInner, { children: children }) }));
+export const PageLayoutSection = forwardRef(({ children, className, isNoMobileSidePadding = false }, ref) => {
+    return (_jsx(Section, { className: classNames(className, pageLayoutSectionClassnames.root), ref: ref, children: _jsx(SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
 });

package/components/PageLayoutSection/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const pageLayoutSectionClassnames: {
+    root: string;
+    wrapper: string;
+    isNoMobileSidePadding: string;
+};

package/components/PageLayoutSection/constants.js

@@ -0,0 +1,6 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const pageLayoutSectionClassnames = {
+    root: createUIKitClassname('page-layout__section'),
+    wrapper: createUIKitClassname('page-layout__section-wrapper'),
+    isNoMobileSidePadding: createUIKitClassname('page-layout__section-wrapper_no-mobile-side-padding'),
+};

package/components/PageLayoutSection/styles.d.ts

@@ -3,7 +3,7 @@ export declare const Section: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const SectionInner: import("../styled").StyledComponent<{
+export declare const SectionWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageLayoutSection/styles.js

@@ -1,4 +1,5 @@
 import { styled } from '../styled';
+import { pageLayoutSectionClassnames } from './constants';
 export const Section = styled.section `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     margin: ${({ theme }) => theme.spacing(0, 4)};
@@ -8,7 +9,7 @@ export const Section = styled.section `
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;
-export const SectionInner = styled.div `
+export const SectionWrapper = styled.div `
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
@@ -17,5 +18,9 @@ export const SectionInner = styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
+
+    &.${pageLayoutSectionClassnames.isNoMobileSidePadding} {
+      padding: ${({ theme }) => theme.spacing(4, 0)};
+    }
   }
 `;

package/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.d.ts

@@ -13,9 +13,13 @@ type Props = {
      * Используется вместе с хуком `useLoadingState`
      */
     isShowLoader?: boolean;
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
 };
 /**
  * Дефолтный лоадер загрузки
  */
-export declare const LoadingPlaceholder: ({ title, content, isShowLoader, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingPlaceholder: ({ title, content, isShowLoader, className, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader } from '../../Loader';
 import { Typography } from '../../Typography';
+import { classNames } from '../../utils/classNames';
 import { loadingPlaceholderClassnames } from './constants';
 import { LoadingContainer } from './styles';
 /**
  * Дефолтный лоадер загрузки
  */
-export const LoadingPlaceholder = ({ title, content, isShowLoader = true, }) => {
+export const LoadingPlaceholder = ({ title, content, isShowLoader = true, className, }) => {
     if (!isShowLoader) {
-        return _jsx(LoadingContainer, { className: loadingPlaceholderClassnames.root });
+        return (_jsx(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className) }));
     }
     if (content) {
-        return (_jsx(LoadingContainer, { className: loadingPlaceholderClassnames.root, children: content }));
+        return (_jsx(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className), children: content }));
     }
-    return (_jsxs(LoadingContainer, { className: loadingPlaceholderClassnames.root, children: [_jsx(Loader, {}), title && _jsx(Typography, { variant: "h4", children: title })] }));
+    return (_jsxs(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className), children: [_jsx(Loader, {}), title && _jsx(Typography, { variant: "h4", children: title })] }));
 };

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

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;