@astral/ui 4.62.2 → 4.64.0

package/components/DataGrid/styles.js

@@ -1,5 +1,8 @@
 import { styled } from '../styled';
+import { dataGridCellClassnames } from './Cell/constants';
 import { dataGridClassnames } from './constants';
+import { headCellClassnames } from './HeadCell';
+import { dataGridRowClassnames } from './Row/constants';
 export const Container = styled.div `
   --max-height: initial;
 
@@ -21,10 +24,33 @@ export const Container = styled.div `
     }
   }
 
-  &.${dataGridClassnames.dataGridHasPinnedSections} {
+  &.${dataGridClassnames.hasPinnedSections} {
     overflow: hidden;
   }
 
+  &.${dataGridClassnames.hasGroupedColumns} {
+    & .${dataGridClassnames.header} {
+      grid-template-rows: repeat(2, auto);
+
+      & .${headCellClassnames.groupParent} {
+        grid-column: var(--grid-column-start) / var(--grid-column-end);
+        grid-row: 1;
+        justify-content: center;
+      }
+
+      & .${headCellClassnames.groupChild} {
+        grid-row: 2;
+        justify-content: center;
+      }
+
+      & .${headCellClassnames.singleColumn} {
+        grid-row: 1 / -1;
+
+        height: 80px;
+      }
+    }
+  }
+
   @supports not (container-type: scroll-state) {
     &.${dataGridClassnames.overflowed} {
       & .${dataGridClassnames.rightPinnedSection} {
@@ -37,6 +63,52 @@ export const Container = styled.div `
     }
   }
 
+  &.${dataGridClassnames.gridViewFull} {
+    & .${dataGridClassnames.header} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+      border-top-left-radius: ${({ theme }) => theme.shape.medium};
+      border-top-right-radius: ${({ theme }) => theme.shape.medium};
+    }
+
+    & .${dataGridCellClassnames.root},
+    & .${headCellClassnames.root} {
+      border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
+      border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+
+      &:first-of-type,
+      &:first-of-type + .${headCellClassnames.groupChild} {
+        border-left: none;
+      }
+    }
+
+    & .${headCellClassnames.singleColumn},
+    & .${headCellClassnames.groupParent} {
+      border-top: none;
+    }
+
+    & .${dataGridRowClassnames.root}:last-of-type .${dataGridCellClassnames.root} {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    }
+
+    &:not(.${dataGridClassnames.hasPinnedSections}) .${dataGridClassnames.body},
+    & .${dataGridClassnames.pinnedSections} {
+      container-name: data-grid-scroll-container;
+      container-type: scroll-state;
+    }
+
+    /* Прогрессивное улучшение. Убираем нижнюю границу последней строки когда scrollbar находится в нижней точке. Для того что бы избежать двойного разделителя снизу */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    @container data-grid-scroll-container scroll-state((scrollable: y) and (not (scrollable: bottom))) {
+      & .${dataGridRowClassnames.root}:last-of-type .${dataGridCellClassnames.root} {
+        border-bottom: none;
+      }
+    }
+
+    & .${dataGridRowClassnames.root}:first-of-type .${dataGridCellClassnames.root} {
+      border-top: none;
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     overflow: initial;
 
@@ -44,7 +116,7 @@ export const Container = styled.div `
       justify-content: flex-start;
     }
 
-    &.${dataGridClassnames.dataGridHasPinnedSections} {
+    &.${dataGridClassnames.hasPinnedSections} {
       overflow: initial;
     }
 
@@ -55,6 +127,16 @@ export const Container = styled.div `
         overflow: initial;
       }
     }
+
+    &.${dataGridClassnames.gridViewFull} {
+      & .${dataGridCellClassnames.root}, & .${headCellClassnames.root} {
+        border: none;
+      }
+
+      & .${dataGridRowClassnames.root}:last-of-type .${dataGridCellClassnames.root} {
+        border-bottom: none;
+      }
+    }
   }
 `;
 export const DataGridWrapper = styled.div `

package/components/DataGrid/types.d.ts

@@ -175,6 +175,11 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
      * Убирает шапку таблицы, когда нет данных
      */
     isHideHeaderIfNoData?: boolean;
+    /**
+     * Режим отображения разделителей в таблице
+     * @default standard
+     */
+    gridViewMode?: 'full' | 'standard';
 };
 export type DataGridSort<TSortField> = {
     /**
@@ -188,7 +193,37 @@ export type DataGridSort<TSortField> = {
      */
     sort: SortState;
 };
-export type DataGridColumns<TData extends Record<string, CellValue>> = {
+export type DataGridGroupColumn<TData extends Record<string, CellValue>> = {
+    /**
+     * Группа дочерних колонок
+     */
+    children: DataGridSingleColumn<TData>[];
+    /**
+     * Принимает компонент DataGridColumnHintIcon - подсказка в шапке колонки
+     */
+    columnHint?: ReactNode;
+    /**
+     * Название колонки таблицы
+     */
+    label: string;
+    /**
+     * Закрепление группы дочерних колонок в таблице
+     */
+    pinned?: 'left' | 'right';
+    /**
+     * Скрывает группу колонок на мобильных устройствах
+     */
+    isHideOnMobile?: boolean;
+    /**
+     * Скрывает название группы колонок на мобильных устройствах
+     */
+    hideTitleOnMobile?: boolean;
+    /**
+     * Скрывает персональные данные в группе колонок
+     */
+    isHidePersonalData?: boolean;
+};
+export type DataGridSingleColumn<TData extends Record<string, CellValue>> = {
     /**
      * @example {field: 'test'}
      * Значение ключа поля данных для колонки
@@ -247,7 +282,9 @@ export type DataGridColumns<TData extends Record<string, CellValue>> = {
      * Скрывает заголовок колонки на мобильных устройствах
      */
     hideTitleOnMobile?: boolean;
+    children?: never;
 };
+export type DataGridColumns<TData extends Record<string, CellValue>> = DataGridSingleColumn<TData> | DataGridGroupColumn<TData>;
 export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> = {
     /**
      * Значение ключа поля данных для колонки

package/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/useDataGridMobileLogic.d.ts

@@ -1,9 +1,9 @@
 import { type RefObject } from 'react';
-import { type CellValue, type DataGridColumns, type DataGridRow } from '../../../types';
+import { type CellValue, type DataGridRow, type DataGridSingleColumn } from '../../../types';
 type UseDataGridMobileLogicParams<TData extends Record<string, CellValue> = DataGridRow> = {
     containerRef?: RefObject<HTMLDivElement | null>;
     isLoading?: boolean;
-    columns?: DataGridColumns<TData>[];
+    columns?: DataGridSingleColumn<TData>[];
     rows?: TData[];
     isNoScrollToTop?: boolean;
 };

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

@@ -1,7 +1,7 @@
 import { type ChangeEvent } from 'react';
 import type { CellValue, DataGridProps, DataGridRow } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp, }: UseLogicParams<TData, TSortField>) => {
     dataGridClassName: string | undefined;
     containerCssVars: import("react").CSSProperties;
     isDataGridDisabled: boolean | undefined;
@@ -37,12 +37,14 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     containerRef: import("react").RefObject<HTMLDivElement | null>;
     gridColumns: string;
     isNoData: boolean;
+    gridViewMode: "standard" | "full";
     headColumns: import("../types").DataGridColumns<TData>[];
     isLoading: boolean | undefined;
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
     };
+    hasGroupedColumns: boolean;
     headProps: {
         rowsCount: number;
         uncheckedRowsCount: number;

package/components/DataGrid/useLogic/useLogic.js

@@ -5,10 +5,10 @@ import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';
 import { dataGridClassnames } from '../constants';
 import { Variant } from '../enums';
-import { getDataGridCssVars, getGridTemplateColumns } from '../utils';
+import { getDataGridCssVars, getFlattenColumns, getGridTemplateColumns, isGroupColumns, } from '../utils';
 import { useDataGridMobileLogic, usePinnedColumns } from './hooks';
 import { getIsAllowHorizontalScroll } from './utils';
-export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, }) => {
+export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, gridViewMode: gridViewModeProp = 'standard', }) => {
     const isFirstRender = useFirstMountState();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
@@ -39,7 +39,7 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
     const { isMobile, mobileSkeletonProps } = useDataGridMobileLogic({
         containerRef,
         isLoading,
-        columns: processedColumns(),
+        columns: getFlattenColumns(processedColumns()),
         rows,
         isNoScrollToTop: isLoading && isNoData,
     });
@@ -47,8 +47,8 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         ? { ...subrows, isInitialExpanded: true }
         : tree;
     const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
-    const gridColumns = getGridTemplateColumns(columns);
-    const isAllowHorizontalScroll = getIsAllowHorizontalScroll(columns);
+    const gridColumns = useMemo(() => getGridTemplateColumns(getFlattenColumns(columns)), [columns]);
+    const isAllowHorizontalScroll = getIsAllowHorizontalScroll(getFlattenColumns(columns));
     const uncheckedRowsCount = useMemo(() => {
         return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
     }, [availableRows, selectedRows, keyId]);
@@ -72,7 +72,9 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         }
         onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
     };
-    const isHideHead = isHideHeaderIfNoData && isNoData;
+    const hasGroupedColumns = columns.some(isGroupColumns);
+    const gridViewMode = hasGroupedColumns ? 'full' : gridViewModeProp;
+    const isHideHead = (isHideHeaderIfNoData && isNoData) || (hasGroupedColumns && isNoData);
     const contentStateProps = useMemo(() => {
         return {
             isLoading: (isLoading && isNoData) || (isMobile && isLoading),
@@ -104,9 +106,11 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         containerRef,
         gridColumns,
         isNoData,
+        gridViewMode,
         headColumns: processedColumns(),
         isLoading,
         mobileSkeletonProps,
+        hasGroupedColumns,
         headProps: {
             rowsCount: availableRows.length,
             uncheckedRowsCount,

package/components/DataGrid/useLogic/utils/getColumnSections/getColumnSections.d.ts

@@ -5,7 +5,7 @@ import type { DataGridColumns, DataGridRow } from '../../../types';
  * Выбрасывает ошибку, если колонки с pinned="right" не идут непрерывным блоком в конце
  * или колонки с pinned="left" не идут непрерывным блоком в начале.
  */
-export declare const validatePinnedColumns: (positions: ('left' | 'right' | 'center')[]) => void;
+export declare const validatePinnedColumns: <TData extends Record<string, unknown> = DataGridRow>(columns: DataGridColumns<TData>[]) => void;
 /**
  * Группирует колонки DataGrid по закреплённым позициям (pinned):
  * - left (закреплены слева)

package/components/DataGrid/useLogic/utils/getColumnSections/getColumnSections.js

@@ -1,22 +1,30 @@
+import { ErrorService } from '../../../../services/ErrorService';
+import { isGroupColumns } from '../../../utils';
 /**
  * Валидирует корректность комбинаций закрепления колонок.
  * Выбрасывает ошибку, если колонки с pinned="right" не идут непрерывным блоком в конце
  * или колонки с pinned="left" не идут непрерывным блоком в начале.
  */
-export const validatePinnedColumns = (positions) => {
+export const validatePinnedColumns = (columns) => {
+    const errorService = ErrorService.getInstance();
+    const positions = columns.map((c) => c.pinned ?? 'center');
     const firstRight = positions.indexOf('right');
     if (firstRight !== -1 &&
         positions.slice(firstRight).some((p) => p !== 'right')) {
-        // biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
-        console.error('DataGrid: Колонки с pinned="right" должны идти непрерывным блоком в конце');
+        errorService.logError('DataGrid', 'Колонки с pinned="right" должны идти непрерывным блоком в конце');
     }
     // left: должны быть в начале
     const lastLeft = positions.lastIndexOf('left');
     if (lastLeft !== -1 &&
         positions.slice(0, lastLeft + 1).some((p) => p !== 'left')) {
-        // biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
-        console.error('DataGrid: Колонки с pinned="left" должны идти непрерывным блоком в начале');
+        errorService.logError('DataGrid', 'Колонки с pinned="left" должны идти непрерывным блоком в начале');
     }
+    columns.forEach((column) => {
+        if (isGroupColumns(column) &&
+            column.children.some((child) => child.pinned)) {
+            errorService.logError('DataGrid', 'pinned должен быть указан у родительской колонки, а не у дочерних элементов');
+        }
+    });
 };
 /**
  * Группирует колонки DataGrid по закреплённым позициям (pinned):
@@ -25,6 +33,7 @@ export const validatePinnedColumns = (positions) => {
  * - right (закреплены справа)
  */
 export const getColumnSections = (columns) => {
+    validatePinnedColumns(columns);
     const groups = columns.reduce((acc, col) => {
         const position = col.pinned ?? 'center';
         if (!acc[position]) {
@@ -33,13 +42,11 @@ export const getColumnSections = (columns) => {
         acc[position].push(col);
         return acc;
     }, {});
-    const positions = columns.map((c) => c.pinned ?? 'center');
-    validatePinnedColumns(positions);
     return {
         sections: [
-            { position: 'left', columns: groups.left },
-            { position: 'center', columns: groups.center },
-            { position: 'right', columns: groups.right },
+            { position: 'left', columns: groups.left || [] },
+            { position: 'center', columns: groups.center || [] },
+            { position: 'right', columns: groups.right || [] },
         ],
     };
 };

package/components/DataGrid/utils/getFlattenColumns/getFlattenColumns.d.ts

@@ -0,0 +1,2 @@
+import { type DataGridColumns, type DataGridSingleColumn } from '../../types';
+export declare const getFlattenColumns: <TData extends Record<string, unknown>>(columns: DataGridColumns<TData>[], pinned?: 'left' | 'right') => DataGridSingleColumn<TData>[];

package/components/DataGrid/utils/getFlattenColumns/getFlattenColumns.js

@@ -0,0 +1,13 @@
+import { isGroupColumns } from '../isGroupColumns';
+export const getFlattenColumns = (columns, pinned) => {
+    return columns.flatMap((column) => {
+        const currentPinned = column.pinned ?? pinned;
+        if (isGroupColumns(column)) {
+            return getFlattenColumns(column.children, currentPinned);
+        }
+        return {
+            ...column,
+            pinned: currentPinned,
+        };
+    });
+};

package/components/DataGrid/utils/getFlattenColumns/index.d.ts

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

package/components/DataGrid/utils/getFlattenColumns/index.js

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

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

@@ -1,3 +1,4 @@
-export { alignToJustifyContent } from './alignToJustifyContent';
 export { getDataGridCssVars } from './getDataGridCssVars';
 export { getGridTemplateColumns } from './getGridTemplateColumns';
+export { isGroupColumns } from './isGroupColumns';
+export { getFlattenColumns } from './getFlattenColumns';

package/components/DataGrid/utils/index.js

@@ -1,3 +1,4 @@
-export { alignToJustifyContent } from './alignToJustifyContent';
 export { getDataGridCssVars } from './getDataGridCssVars';
 export { getGridTemplateColumns } from './getGridTemplateColumns';
+export { isGroupColumns } from './isGroupColumns';
+export { getFlattenColumns } from './getFlattenColumns';

package/components/DataGrid/utils/isGroupColumns/index.d.ts

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

package/components/DataGrid/utils/isGroupColumns/index.js

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

package/components/DataGrid/utils/isGroupColumns/isGroupColumns.d.ts

@@ -0,0 +1,2 @@
+import { type DataGridColumns, type DataGridGroupColumn } from '../../types';
+export declare const isGroupColumns: <TData extends Record<string, unknown>>(column: DataGridColumns<TData>) => column is DataGridGroupColumn<TData>;

package/components/DataGrid/utils/isGroupColumns/isGroupColumns.js

@@ -0,0 +1,3 @@
+export const isGroupColumns = (column) => {
+    return 'children' in column && Array.isArray(column.children);
+};

package/components/DataGridInfinite/DataGridInfinite.js

@@ -13,6 +13,7 @@ import { Container } from '../DataGrid/styles';
 import { Loader } from '../Loader';
 import { ScrollToTopButton } from '../ScrollToTopButton';
 import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { getInertProps } from '../utils/getInertProps';
 import { OVERSCAN_COUNT } from './constants';
 import { EndData } from './EndData';
@@ -22,14 +23,25 @@ import { NoData } from './NoData';
 import { Backdrop, DataGridWrapper, DisabledDataGridWrapper, FooterRow, } from './styles';
 import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
+const dataGridInfiniteCva = cva(dataGridClassnames.root, {
+    variants: {
+        hasGroupedColumns: {
+            true: dataGridClassnames.hasGroupedColumns,
+        },
+        gridViewMode: {
+            full: dataGridClassnames.gridViewFull,
+            standard: dataGridClassnames.gridViewStandard,
+        },
+    },
+});
 export const DataGridInfinite = (props) => {
     const { imagesMap, emptySymbol } = useContext(ConfigContext);
-    const { isNoData, isDataGridDisabled, isStickyButtonActive, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, } = useLogic(props);
+    const { isNoData, isDataGridDisabled, isStickyButtonActive, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, flattenColumns, hasGroupedColumns, gridViewMode, } = useLogic(props);
     const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, 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 = isDisabled ? DisabledDataGridWrapper : DataGridWrapper;
-    return (_jsx(DataGridContextProvider, { children: _jsxs(Container, { style: containerCssVars, className: classNames(dataGridClassnames.root, className), children: [headPreAddon, _jsxs(TableContainer, { ...getInertProps(isDataGridDisabled), children: [!isHideHead && (_jsx(Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), _jsx(ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, loadingContent: isMobile && _jsx(MobileSkeleton, { ...mobileSkeletonProps }), errorState: {
+    return (_jsx(DataGridContextProvider, { children: _jsxs(Container, { style: containerCssVars, className: classNames(dataGridInfiniteCva({ hasGroupedColumns, gridViewMode }), className), children: [headPreAddon, _jsxs(TableContainer, { ...getInertProps(isDataGridDisabled), children: [!isHideHead && (_jsx(Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), _jsx(ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, loadingContent: isMobile && _jsx(MobileSkeleton, { ...mobileSkeletonProps }), errorState: {
                                 imgAlt: 'Что-то пошло не так',
                                 errorList: [errorMsg || ''],
                                 imgSrc: imagesMap.defaultErrorImgSrc,
@@ -40,7 +52,7 @@ export const DataGridInfinite = (props) => {
                                     List,
                                     Item: ({ children, item, ...itemProps }) => {
                                         const { children: nestedChildren, options, ...row } = item;
-                                        return (_jsx(RowContextProvider, { children: _jsx(Row, { ...rowProps, ...itemProps, row: row, columns: columns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
+                                        return (_jsx(RowContextProvider, { children: _jsx(Row, { ...rowProps, ...itemProps, row: row, columns: flattenColumns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
                                     },
                                     EmptyPlaceholder: () => _jsx(_Fragment, { children: noDataPlaceholder || _jsx(NoData, {}) }),
                                     Footer: () => {

package/components/DataGridInfinite/useLogic/useLogic.d.ts

@@ -4,12 +4,13 @@ import { type DataGridRow } from '../../DataGrid';
 import { type CellValue } from '../../DataGrid/types';
 import { type DataGridInfiniteProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridInfiniteProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, }: UseLogicParams<TData, TSortField>) => {
     containerCssVars: import("react").CSSProperties;
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
     };
+    flattenColumns: import("../../DataGrid").DataGridSingleColumn<TData>[];
     isNoData: boolean;
     isMobile: boolean;
     isDataGridDisabled: boolean | undefined;
@@ -21,6 +22,8 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     } | undefined;
     isEndReached: boolean | undefined;
     isHideHead: boolean;
+    hasGroupedColumns: boolean;
+    gridViewMode: "standard" | "full";
     virtuosoProps: {
         id: string;
         ref: import("react").RefObject<VirtuosoHandle | null>;

package/components/DataGridInfinite/useLogic/useLogic.js

@@ -1,13 +1,13 @@
 import { useCallback, useMemo, useRef, useState, } from 'react';
 import { Variant } from '../../DataGrid/enums';
 import { useDataGridMobileLogic } from '../../DataGrid/useLogic/hooks';
-import { getDataGridCssVars, getGridTemplateColumns, } from '../../DataGrid/utils';
+import { getDataGridCssVars, getFlattenColumns, getGridTemplateColumns, isGroupColumns, } from '../../DataGrid/utils';
 import { useToggle } from '../../useToggle';
 import { useViewportType } from '../../useViewportType';
 import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';
 import { VIRTUOSO_CONTAINER_ID, VIRTUOSO_LIST_ID } from '../constants';
-export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
+export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', }) => {
     const virtuoso = useRef(null);
     const { isMobile } = useViewportType();
     const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
@@ -19,7 +19,10 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
         ? { ...subrows, isInitialExpanded: true }
         : tree;
     const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
-    const gridColumns = getGridTemplateColumns(columns);
+    const flattenColumns = useMemo(() => getFlattenColumns(columns), [columns]);
+    const hasGroupedColumns = columns.some(isGroupColumns);
+    const gridViewMode = hasGroupedColumns ? 'full' : gridViewModeProp;
+    const gridColumns = getGridTemplateColumns(flattenColumns);
     const handleEndReach = useCallback(() => {
         if (!isEndReached && onEndReached) {
             onEndReached();
@@ -63,12 +66,13 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
     };
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
     const { mobileSkeletonProps } = useDataGridMobileLogic({
-        columns,
+        columns: flattenColumns,
     });
     const containerCssVars = getDataGridCssVars(maxHeight);
     return {
         containerCssVars,
         mobileSkeletonProps,
+        flattenColumns,
         isNoData,
         isMobile,
         isDataGridDisabled,
@@ -76,6 +80,8 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
         treeRenderConfig,
         isEndReached: isEndReached && hasVerticalScroll,
         isHideHead,
+        hasGroupedColumns,
+        gridViewMode,
         virtuosoProps: {
             id: VIRTUOSO_CONTAINER_ID,
             ref: virtuoso,

package/components/Dialog/Dialog.d.ts

@@ -1,24 +1,2 @@
-import type { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
-import { type ReactElement, type ReactNode } from 'react';
-import type { WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type DialogProps = WithoutEmotionSpecific<Omit<MuiDialogProps, 'title' | 'maxWidth'>> & {
-    /**
-     * Заголовок
-     */
-    title?: ReactElement | ReactElement[] | string;
-    /**
-     * Отключить кликабельность фонового компонента
-     */
-    disableBackdropClick?: boolean;
-    /**
-     * Размер Dialog
-     * @default md
-     */
-    size?: DialogSize;
-    /**
-     * Дополнительный контент хедера
-     */
-    headerContent?: ReactNode;
-};
-export declare const Dialog: ({ children, title, disableBackdropClick, onClose, size, headerContent, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+import type { DialogProps } from './types';
+export declare const Dialog: ({ children, title, disableBackdropClick, onClose, size, headerContent, className, classes, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;

package/components/Dialog/Dialog.js

@@ -1,19 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BottomDrawer } from '../BottomDrawer';
 import { DialogTitle } from '../DialogTitle';
-import { useViewportType } from '../useViewportType';
+import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
+import { dialogClassnames } from './constants';
 import { StyledDialog } from './styles';
-export const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', headerContent, ...props }) => {
-    const handleClose = onClose &&
-        ((event, reason) => {
-            if (disableBackdropClick && reason === 'backdropClick') {
-                return;
-            }
-            onClose(event, reason);
-        });
-    const { isMobile } = useViewportType();
+import { useLogic } from './useLogic';
+const dialogCva = cva(dialogClassnames.root, {
+    variants: {
+        withoutTitle: {
+            true: dialogClassnames.withoutTitle,
+        },
+    },
+});
+export const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', headerContent, className, classes, ...props }) => {
+    const { handleClose, isMobile, dialogClasses } = useLogic({
+        onClose,
+        disableBackdropClick,
+        classes,
+    });
     if (isMobile) {
         return (_jsx(BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, ...props, children: children }));
     }
-    return (_jsxs(StyledDialog, { "$size": size, onClose: handleClose, ...props, children: [title && (_jsx(DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
+    return (_jsxs(StyledDialog, { "$size": size, onClose: handleClose, className: classNames(dialogCva({ withoutTitle: !title }), className), classes: dialogClasses, ...props, children: [title && (_jsx(DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
 };

package/components/Dialog/constants.d.ts

@@ -20,3 +20,8 @@ export declare const DIALOG_SIZES: {
         maxWidth: string;
     };
 };
+export declare const dialogClassnames: {
+    root: string;
+    withoutTitle: string;
+    paper: string;
+};

package/components/Dialog/constants.js

@@ -1,3 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const DIALOG_SIZES = {
     xs: { minWidth: '300px', maxWidth: '399px' },
     sm: { minWidth: '400px', maxWidth: '499px' },
@@ -5,3 +6,8 @@ export const DIALOG_SIZES = {
     lg: { minWidth: '600px', maxWidth: '699px' },
     xl: { minWidth: '700px', maxWidth: '980px' },
 };
+export const dialogClassnames = {
+    root: createUIKitClassname('dialog'),
+    withoutTitle: createUIKitClassname('dialog_without-title'),
+    paper: createUIKitClassname('dialog__paper'),
+};

package/components/Dialog/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Dialog';
-export { DIALOG_SIZES } from './constants';
+export { DIALOG_SIZES, dialogClassnames } from './constants';
+export type { DialogProps, DialogSize } from './types';

package/components/Dialog/index.js

@@ -1,2 +1,2 @@
 export * from './Dialog';
-export { DIALOG_SIZES } from './constants';
+export { DIALOG_SIZES, dialogClassnames } from './constants';

package/components/Dialog/public.d.ts

@@ -1,2 +1,3 @@
-export { DIALOG_SIZES } from './constants';
+export { DIALOG_SIZES, dialogClassnames } from './constants';
 export * from './Dialog';
+export type { DialogProps, DialogSize } from './types';