@astral/ui 4.55.4 → 4.57.0

package/components/BottomDrawer/styles.js

@@ -27,7 +27,7 @@ export const Header = 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};
 `;
 export const HeaderTitle = styled(Typography) `
   margin-right: ${({ theme }) => theme.spacing(2)};

package/components/CardGridInfinite/Footer/styles.js

@@ -9,7 +9,7 @@ export const Wrapper = 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};
 `;
 export const FooterDummy = styled.div `
   min-height: 20px;

package/components/CheckableTag/styles.js

@@ -86,7 +86,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}`;
 };
 export const Wrapper = styled.label `
   width: fit-content;

package/components/Checkbox/styles.js

@@ -3,7 +3,7 @@ import { easeOutBackTransition } from '../styled/mixins';
 import { CHECKBOX_SIZE, checkboxClassnames, MOBILE_CHECKBOX_SIZE, } from './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];
@@ -11,7 +11,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;
 };
 export const Wrapper = styled('span', {
     shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked', '$isIndeterminate'].includes(prop),

package/components/Chip/styles.js

@@ -14,7 +14,7 @@ export const Wrapper = 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/components/CodeField/styles.js

@@ -7,7 +7,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};`;
 };
 export const Wrapper = styled.div `
   display: flex;

package/components/ComplianceStatus/styles.js

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

package/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/components/ContentState/ContentState.js

@@ -5,13 +5,13 @@ import { LoadingPlaceholder } from '../placeholders/LoadingPlaceholder';
 import { Placeholder } from '../placeholders/Placeholder';
 import { Typography } from '../Typography';
 import { useLogic } from './useLogic';
-export const ContentState = ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent, loadingTitle, placeholderSize, isSmoothLoading, }) => {
+export const ContentState = ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent, loadingTitle, placeholderSize, isSmoothLoading, loadingPlaceholderClassname, }) => {
     const { imagesMap, isLoadingPhase, isShowLoader } = useLogic({
         isLoading,
         isSmoothLoading,
     });
     if (isLoadingPhase) {
-        return (_jsx(LoadingPlaceholder, { content: loadingContent, title: loadingTitle, isShowLoader: isShowLoader }));
+        return (_jsx(LoadingPlaceholder, { content: loadingContent, title: loadingTitle, isShowLoader: isShowLoader, className: loadingPlaceholderClassname }));
     }
     if (isCustom && customState) {
         return _jsx(Placeholder, { ...customState });

package/components/ContentState/types.d.ts

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

package/components/DashboardLayout/DashboardWrapper/styles.js

@@ -19,7 +19,7 @@ export const DecorativeHeaderBackground = styled.div `
   height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : 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/components/DashboardLayout/Header/styles.js

@@ -42,7 +42,7 @@ export const HeaderRoot = 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;
   }
@@ -157,14 +157,14 @@ export const PriorityFeatureWrapper = styled.div `
         height: ${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/components/DashboardLayoutSkeleton/styles.js

@@ -6,7 +6,7 @@ export const Content = 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/components/DashboardSidebar/styles.js

@@ -85,7 +85,7 @@ export const SidebarHeader = 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 */
@@ -148,7 +148,7 @@ export const Footer = 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/components/DashboardSidebarSkeleton/styles.js

@@ -12,7 +12,7 @@ export const Wrapper = 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/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/components/DataGrid/Body/Body.js

@@ -1,18 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ConfigContext } from '../../ConfigProvider';
+import { classNames } from '../../utils/classNames';
+import { cva } from '../../utils/cva';
 import { Row } from '../Row';
 import { RowContextProvider } from '../Row/RowContext';
+import { bodyClassnames } from './constants';
 import { Wrapper } from './styles';
+import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
-export const Body = (props) => {
-    const { components } = useContext(ConfigContext);
-    const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
-    const { rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps } = props;
+const bodyCva = cva(bodyClassnames.root, {
+    variants: {
+        disableMinHeight: {
+            true: bodyClassnames.disableMinHeight,
+        },
+    },
+});
+export const Body = ({ rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps }) => {
+    const { disableMinHeight, bodyCssVars } = useLogic({ minDisplayRows });
     const renderedRows = rows.map(({ children, options, ...row }) => {
         const rowId = row[keyId];
         const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
         return (_jsx(RowContextProvider, { children: _jsx(Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
     });
-    return (_jsx(Wrapper, { className: className, "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: rows.length ? renderedRows : noDataPlaceholder }));
+    return (_jsx(Wrapper, { className: classNames(className, bodyCva({ disableMinHeight })), style: bodyCssVars, children: rows.length ? renderedRows : noDataPlaceholder }));
 };

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

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

package/components/DataGrid/Body/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const bodyClassnames = {
+    root: createUIKitClassname('data-grid__body'),
+    disableMinHeight: createUIKitClassname('data-grid__body_disable-min-height'),
+};

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

@@ -2,7 +2,4 @@
 export declare const Wrapper: import("../../styled").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/components/DataGrid/Body/styles.js

@@ -1,19 +1,32 @@
 import { styled } from '../../styled';
 import { dataGridClassnames, MIN_ROW_HEIGHT } from '../constants';
+import { bodyClassnames } from './constants';
 export const Wrapper = styled.ul `
+  --min-display-rows: 0;
+
   overflow-y: auto;
 
   width: fit-content;
   min-width: 100%;
   height: 100%;
-  min-height: ${({ $minDisplayRows, $disableMinHeight }) => ($disableMinHeight ? 'unset' : `${MIN_ROW_HEIGHT * $minDisplayRows}px`)};
+  min-height: calc(var(--min-display-rows) * ${MIN_ROW_HEIGHT}px);
   margin: 0;
   padding: 0;
 
   list-style-type: none;
 
+  &.${bodyClassnames.disableMinHeight} {
+    min-height: unset;
+  }
+
   &.${dataGridClassnames.bodyEmpty} {
     display: flex;
     align-items: center;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: initial;
+
+    width: 100%;
+  }
 `;

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

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

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

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

package/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/components/DataGrid/Body/useLogic/useLogic.js

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { ConfigContext } from '../../../ConfigProvider';
+export const useLogic = ({ minDisplayRows, }) => {
+    const { components } = useContext(ConfigContext);
+    const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
+    const bodyCssVars = !disableMinHeight && minDisplayRows
+        ? {
+            '--min-display-rows': minDisplayRows,
+        }
+        : {};
+    return {
+        disableMinHeight,
+        bodyCssVars,
+    };
+};

package/components/DataGrid/Cell/Cell.js

@@ -1,16 +1,32 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { OverflowTypography } from '../../OverflowTypography';
 import { useHidePersonalData } from '../../personalDataSecurity';
 import { classNames } from '../../utils/classNames';
+import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
-import { Wrapper } from './styles';
+import { dataGridCellClassnames } from './constants';
+import { CellContent, ColumnLabel, Wrapper } from './styles';
 import { useLogic } from './useLogic';
+const cellCva = cva(dataGridCellClassnames.root, {
+    variants: {
+        isHideOnMobile: {
+            true: dataGridCellClassnames.isHideOnMobile,
+        },
+    },
+});
+const cellContentCva = cva(dataGridCellClassnames.cellContent, {
+    variants: {
+        isActionColumn: {
+            true: dataGridCellClassnames.actionColumn,
+        },
+    },
+});
 export const Cell = (props) => {
-    const { formattedValue, hasStartAdornment } = useLogic(props);
+    const { formattedValue, hasStartAdornment, isActionColumn, label } = useLogic(props);
     const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, } = props;
     const { renderCell, align = 'left' } = cell;
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData === true,
     });
-    return (_jsxs(Wrapper, { "$isDisabled": isDisabled, "$align": align, "$hasStartAdornment": hasStartAdornment, className: classNames(className, hidePersonalDataClassname), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] }));
+    return (_jsxs(Wrapper, { "$isDisabled": isDisabled, "$align": align, "$hasStartAdornment": hasStartAdornment, className: classNames(className, hidePersonalDataClassname, cellCva({ isHideOnMobile: cell.isHideOnMobile })), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: dataGridCellClassnames.columnLabel, children: label }), renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] })] }));
 };

package/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/components/DataGrid/Cell/constants.js

@@ -0,0 +1,8 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const dataGridCellClassnames = {
+    root: createUIKitClassname('data-grid__cell'),
+    isHideOnMobile: createUIKitClassname('data-grid__cell_hide-on-mobile'),
+    columnLabel: createUIKitClassname('data-grid__cell-column-label'),
+    actionColumn: createUIKitClassname('data-grid__cell_action-column'),
+    cellContent: createUIKitClassname('data-grid__cell-content'),
+};

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

@@ -9,4 +9,18 @@ export declare const Wrapper: import("../../styled").StyledComponent<{
     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("../../styled").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("../../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>, {}>;
 export {};

package/components/DataGrid/Cell/styles.js

@@ -1,6 +1,9 @@
 import { styled } from '../../styled';
+import { Typography } from '../../Typography';
 import { MIN_ROW_HEIGHT } from '../constants';
+import { dataGridRowClassnames } from '../Row/constants';
 import { alignToJustifyContent } from '../utils';
+import { dataGridCellClassnames } from './constants';
 export const Wrapper = styled('div', {
     shouldForwardProp: (prop) => !['$align', '$isDisabled', '$hasStartAdornment'].includes(prop),
 }) `
@@ -13,4 +16,48 @@ export const Wrapper = 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;
+
+    &.${dataGridCellClassnames.isHideOnMobile} {
+      display: none;
+    }
+
+
+    & .${dataGridRowClassnames.checkbox} {
+      align-self: flex-start;
+      order: 1;
+    }
+  }
+`;
+export const ColumnLabel = styled(Typography) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+  }
+`;
+export const CellContent = 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%;
+    
+    &.${dataGridCellClassnames.actionColumn} {
+      align-items: flex-end;
+
+      & .${dataGridCellClassnames.columnLabel} {
+        display: none;
+      }
+    }
+  }
 `;

package/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/components/DataGrid/Cell/useLogic/useLogic.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
-    const { format, field } = cell;
+    const { format, field, label } = cell;
     const isValidValue = (value) => {
         return Boolean(value) || value === 0;
     };
@@ -14,5 +14,6 @@ export 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 };
 };

package/components/DataGrid/DataGrid.js

@@ -2,24 +2,51 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext } from 'react';
 import { ConfigContext } from '../ConfigProvider';
 import { ContentState } from '../ContentState';
+import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { getInertProps } from '../utils/getInertProps';
 import { Body } from './Body';
-import { EXPANDED_LEVEL_BY_DEFAULT, INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, MIN_DISPLAY_ROWS_BY_DEFAULT, } from './constants';
+import { dataGridClassnames, EXPANDED_LEVEL_BY_DEFAULT, INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, MIN_DISPLAY_ROWS_BY_DEFAULT, } from './constants';
 import { DataGridContextProvider } from './DataGridContext';
 import { Variant } from './enums';
 import { Head } from './Head';
 import { Loader } from './Loader';
+import { MobileSkeleton } from './MobileSkeleton';
 import { NoData } from './NoData';
 import { PinnedSections } from './PinnedSections';
 import { Container, DataGridWrapper, DisabledDataGridWrapper } from './styles';
 import { useLogic } from './useLogic';
+const pinnedSectionsCva = cva(dataGridClassnames.pinnedSections, {
+    variants: {
+        isDisabled: {
+            true: dataGridClassnames.disabled,
+        },
+    },
+});
+const dataGridCva = cva(dataGridClassnames.root, {
+    variants: {
+        hasPinnedColumns: {
+            true: dataGridClassnames.dataGridHasPinnedSections,
+        },
+        isAllowHorizontalScroll: {
+            true: dataGridClassnames.isAllowHorizontalScroll,
+        },
+    },
+});
+const bodyCva = cva(dataGridClassnames.body, {
+    variants: {
+        isNoData: {
+            true: dataGridClassnames.bodyEmpty,
+        },
+    },
+});
 export const DataGrid = (props) => {
-    const { isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, pinnedSectionsClassname, dataGridClassname, contentStateProps, rowHoverProps, containerRef, sections, isNoData, bodyClassName, } = useLogic(props);
+    const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, } = useLogic(props);
     const { emptySymbol } = useContext(ConfigContext);
-    const { columns, selectedRows = [], maxHeight, minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, isLoading, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
+    const { columns, selectedRows = [], minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
-    const TableContainer = isDataGridDisabled
+    const Wrapper = isDataGridDisabled
         ? DisabledDataGridWrapper
         : DataGridWrapper;
     const renderedPlaceholder = useCallback(() => {
@@ -47,10 +74,17 @@ export const DataGrid = (props) => {
         ...rowHoverProps,
     };
     const renderTableContent = () => {
-        if (!hasPinnedColumns) {
-            return (_jsxs(TableContainer, { "$isAllowHorizontalScroll": isAllowHorizontalScroll, ...getInertProps(isDataGridDisabled), children: [headPreAddon, !isHideHead && (_jsx(Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), _jsx(ContentState, { ...contentStateProps, children: _jsx(Body, { ...commonBodyProps, columns: columns, gridColumns: gridColumns, className: bodyClassName }) })] }));
+        if (!hasPinnedColumns || isMobile) {
+            return (_jsxs(Wrapper, { ...getInertProps(isDataGridDisabled), className: dataGridClassnames.wrapper, children: [headPreAddon, !isHideHead && (_jsx(Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), _jsx(ContentState, { ...contentStateProps, loadingContent: isMobile && _jsx(MobileSkeleton, { ...mobileSkeletonProps }), children: _jsx(Body, { ...commonBodyProps, columns: columns, gridColumns: gridColumns, className: bodyCva({
+                                isNoData,
+                            }) }) })] }));
         }
-        return (_jsx(ContentState, { ...contentStateProps, children: _jsx(PinnedSections, { sections: sections, className: pinnedSectionsClassname, isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
+        return (_jsx(ContentState, { ...contentStateProps, children: _jsx(PinnedSections, { sections: sections, className: pinnedSectionsCva({
+                    isDisabled: isDataGridDisabled,
+                }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return (_jsx(DataGridContextProvider, { isLoading: isLoading, children: _jsxs(Container, { ref: containerRef, "$maxHeight": maxHeight, "$isAllowHorizontalScroll": isAllowHorizontalScroll, className: dataGridClassname, children: [renderTableContent(), _jsx(Loader, { ...loaderProps }), footer && footer] }) }));
+    return (_jsx(DataGridContextProvider, { isLoading: isLoading, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: classNames(dataGridClassName, dataGridCva({
+                isAllowHorizontalScroll,
+                hasPinnedColumns,
+            })), children: [renderTableContent(), _jsx(Loader, { ...loaderProps }), footer && footer] }) }));
 };

package/components/DataGrid/Head/Head.js

@@ -29,5 +29,5 @@ export const Head = (props) => {
         onSelectAllRows,
         handleSort,
     ]);
-    return (_jsx(Wrapper, { className: dataGridClassnames.header, "$gridColumns": gridColumns, children: renderColumns }));
+    return (_jsx(Wrapper, { role: "heading", className: dataGridClassnames.header, "$gridColumns": gridColumns, children: renderColumns }));
 };

package/components/DataGrid/Head/styles.js

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

package/components/DataGrid/Loader/styles.js

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

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

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

package/components/DataGrid/MobileSkeleton/MobileSkeleton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '../../Skeleton';
+import { Actions, Cell, Root, RowWrapper } from './styles';
+export const MobileSkeleton = ({ cellsCount, rowsCount, }) => {
+    return (_jsx(Root, { children: Array.from({ length: rowsCount }, (_, rowIndex) => (_jsxs(RowWrapper
+        // biome-ignore lint/suspicious/noArrayIndexKey: Статичный скелетон
+        , { children: [Array.from({ length: cellsCount - 1 }, (_cell, cellIndex) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: Статичный скелетон
+                _jsxs(Cell, { children: [_jsx(Skeleton, { variant: "rounded", height: 20 }), _jsx(Skeleton, { variant: "rounded", height: 16, width: "50%" })] }, cellIndex))), _jsx(Actions, { children: _jsx(Skeleton, { variant: "rounded", width: "100%", height: 40 }) })] }, rowIndex))) }));
+};

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

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

package/components/DataGrid/MobileSkeleton/index.js

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