@astral/ui 4.56.0 → 4.57.0

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

@@ -10,6 +10,10 @@ export const Wrapper = styled('header', {
   min-width: 100%;
 
   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';

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const Root: 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 declare const RowWrapper: 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 declare const Cell: 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 declare const Actions: 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/DataGrid/MobileSkeleton/styles.js

@@ -0,0 +1,37 @@
+import { styled } from '../../styled';
+export const Root = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+`;
+export const RowWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(5)};
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
+
+  &:not(:first-of-type) {
+    padding-top: ${({ theme }) => theme.spacing(5)};
+  }
+
+  &:last-of-type {
+    padding-bottom: 0;
+  }
+`;
+export const Cell = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  width: 100%;
+`;
+export const Actions = styled.div `
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;

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

@@ -26,6 +26,11 @@ export const NestedRows = styled('ul', {
 
     border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
+
+  /* TODO: Убрать после реализации задачи по адаптации вложенных строк https://track.astral.ru/soft/browse/UIKIT-2188 */
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 export const MoreButtonRow = styled('li', {
     shouldForwardProp: (prop) => !['$level', '$isShowConnector', '$gridColumns'].includes(prop),

package/components/DataGrid/Row/Row.js

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

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

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