@astral/ui 4.62.2 → 4.64.0

package/components/DataGrid/Head/HeadColumns/utils/getHeadCellProps.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type CellValue, type DataGridColumns } from '../../../types';
+type Params<TData extends Record<string, CellValue>> = {
+    column: DataGridColumns<TData>;
+    index: number;
+    sectionOffset?: number;
+    isSelectable: boolean;
+    isHideSelectAll?: boolean;
+};
+export declare const getHeadCellProps: <TData extends Record<string, unknown>>({ column, index, sectionOffset, isSelectable, isHideSelectAll, }: Params<TData>) => {
+    label: string | undefined;
+    align: import("../../../types").AlignVariant | undefined;
+    columnHint: import("react").ReactNode;
+    field: keyof TData | undefined;
+    sortable: boolean | undefined;
+    showCheckbox: boolean;
+};
+export {};

package/components/DataGrid/Head/HeadColumns/utils/getHeadCellProps.js

@@ -0,0 +1,17 @@
+import { isGroupColumns } from '../../../utils';
+export const getHeadCellProps = ({ column, index, sectionOffset, isSelectable, isHideSelectAll, }) => {
+    const { label, align, columnHint } = column;
+    const field = isGroupColumns(column) ? undefined : column.field;
+    const sortable = isGroupColumns(column) ? undefined : column.sortable;
+    const globalIndex = (sectionOffset ?? 0) + index;
+    const isFirstCell = globalIndex === 0;
+    const showCheckbox = isFirstCell && isSelectable && !isHideSelectAll;
+    return {
+        label,
+        align,
+        columnHint,
+        field,
+        sortable,
+        showCheckbox,
+    };
+};

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

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

package/components/DataGrid/Head/HeadColumns/utils/index.js

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

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

@@ -5,7 +5,3 @@ export declare const Wrapper: import("../../styled").StyledComponent<{
 } & {
     $gridColumns: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const CheckboxCell: 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/Head/styles.js

@@ -1,5 +1,5 @@
+import { SCROLLBAR_SIZE } from '../../constants/scrollbar';
 import { styled } from '../../styled';
-import { ROOT_ACTION_CELL_WIDTH } from '../constants';
 export const Wrapper = styled('header', {
     shouldForwardProp: (prop) => !['$gridColumns'].includes(prop),
 }) `
@@ -8,6 +8,7 @@ export const Wrapper = styled('header', {
 
   width: fit-content;
   min-width: 100%;
+  padding-right: ${SCROLLBAR_SIZE};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
@@ -15,10 +16,3 @@ export const Wrapper = styled('header', {
     display: none;
   }
 `;
-export const CheckboxCell = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: ${ROOT_ACTION_CELL_WIDTH}px;
-`;

package/components/DataGrid/HeadCell/HeadCell.d.ts

@@ -14,5 +14,16 @@ export type HeadCellProps<TData = DataGridRow, TSortField extends keyof TData =
      * Дополнительное содержимое ячейки, которое будет распложено справа
      */
     startAdornment?: ReactNode;
+    /**
+     * Класс применяемый к корневому элементу
+     */
+    className?: string;
+    /**
+     * Позиция ячейки в сетке CSS Grid
+     */
+    gridPosition?: {
+        start: number;
+        end: number;
+    };
 };
 export declare const HeadCell: <TData, TSortField extends keyof TData>(props: HeadCellProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/HeadCell/HeadCell.js

@@ -4,11 +4,29 @@ import { SortDownFillSm } from '../../../icons/SortDownFillSm';
 import { SortFillSm } from '../../../icons/SortFillSm';
 import { SortUpFillSm } from '../../../icons/SortUpFillSm';
 import { OverflowTypography } from '../../OverflowTypography';
+import { classNames } from '../../utils/classNames';
+import { cva } from '../../utils/cva';
+import { headCellClassnames } from './constants';
 import { Wrapper } from './styles';
 import { useLogic } from './useLogic';
+const headCellCva = cva(headCellClassnames.root, {
+    variants: {
+        isSortable: {
+            true: headCellClassnames.sortable,
+        },
+        align: {
+            left: headCellClassnames.alignLeft,
+            center: headCellClassnames.alignCenter,
+            right: headCellClassnames.alignRight,
+        },
+        hasStartAdornment: {
+            true: headCellClassnames.hasStartAdornment,
+        },
+    },
+});
 export const HeadCell = (props) => {
-    const { wrapperProps } = useLogic(props);
-    const { startAdornment, field, isSortable, align, label, sorting } = props;
+    const { hasStartAdornment, handleSortClick, headCellCssVars } = useLogic(props);
+    const { startAdornment, field, isSortable, align, label, sorting, className, } = props;
     const sortIcon = useMemo(() => {
         if (!isSortable) {
             return null;
@@ -25,5 +43,5 @@ export const HeadCell = (props) => {
                 return _jsx(SortFillSm, {});
         }
     }, [sorting, isSortable, field]);
-    return (_jsxs(Wrapper, { "$align": align, "$isSortable": isSortable, ...wrapperProps, children: [startAdornment && startAdornment, _jsx(OverflowTypography, { rowsCount: 2, variant: "pointer", component: "p", children: label }), sortIcon] }));
+    return (_jsxs(Wrapper, { onClick: handleSortClick, className: classNames(className, headCellCva({ isSortable, align, hasStartAdornment })), style: headCellCssVars, children: [startAdornment && startAdornment, _jsx(OverflowTypography, { rowsCount: 2, variant: "pointer", component: "p", children: label }), sortIcon] }));
 };

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

@@ -0,0 +1,11 @@
+export declare const headCellClassnames: {
+    root: string;
+    groupParent: string;
+    groupChild: string;
+    singleColumn: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    hasStartAdornment: string;
+    sortable: string;
+};

package/components/DataGrid/HeadCell/constants.js

@@ -0,0 +1,12 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const headCellClassnames = {
+    root: createUIKitClassname('data-grid__head-cell'),
+    groupParent: createUIKitClassname('data-grid__head-cell_group-parent'),
+    groupChild: createUIKitClassname('data-grid__head-cell_group-child'),
+    singleColumn: createUIKitClassname('data-grid__head-cell_single-column'),
+    alignLeft: createUIKitClassname('data-grid__head-cell_align-left'),
+    alignCenter: createUIKitClassname('data-grid__head-cell_align-center'),
+    alignRight: createUIKitClassname('data-grid__head-cell_align-right'),
+    hasStartAdornment: createUIKitClassname('data-grid__head-cell_has-start-adornment'),
+    sortable: createUIKitClassname('data-grid__head-cell_sortable'),
+};

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

@@ -1 +1,2 @@
 export * from './HeadCell';
+export { headCellClassnames } from './constants';

package/components/DataGrid/HeadCell/index.js

@@ -1 +1,2 @@
 export * from './HeadCell';
+export { headCellClassnames } from './constants';

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

@@ -1,12 +1,5 @@
 /// <reference types="react" />
-import type { AlignVariant } from '../types';
-type HeadCellProps = {
-    $align?: AlignVariant;
-    $isSortable?: boolean;
-    $hasStartAdornment?: boolean;
-};
 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 {};
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DataGrid/HeadCell/styles.js

@@ -1,19 +1,20 @@
 import { hintIconClassnames } from '../../HintIcon';
 import { styled } from '../../styled';
-import { alignToJustifyContent } from '../utils';
-export const Wrapper = styled('div', {
-    shouldForwardProp: (prop) => !['$align', '$isSortable', '$hasStartAdornment'].includes(prop),
-}) `
-  cursor: ${({ $isSortable }) => ($isSortable ? 'pointer' : 'initial')};
+import { headCellClassnames } from './constants';
+export const Wrapper = styled.div `
+  --grid-column-start: 0;
+  --grid-column-end: 0;
+
+  cursor: initial;
   user-select: none;
 
   overflow: hidden;
   display: flex;
   align-items: center;
-  justify-content: ${({ $align }) => alignToJustifyContent($align)};
+  justify-content: flex-start;
 
   height: 40px;
-  padding: ${({ theme, $hasStartAdornment }) => $hasStartAdornment ? theme.spacing(1, 2, 1, 0) : theme.spacing(1, 2)};
+  padding: ${({ theme }) => theme.spacing(1, 2)};
 
   color: ${({ theme }) => theme.palette.grey[700]};
 
@@ -22,6 +23,22 @@ export const Wrapper = styled('div', {
     height: 16px;
   }
 
+  &.${headCellClassnames.sortable} {
+    cursor: pointer;
+  }
+
+  &.${headCellClassnames.hasStartAdornment} {
+    padding: ${({ theme }) => theme.spacing(1, 2, 1, 0)};
+  }
+
+  &.${headCellClassnames.alignCenter} {
+    justify-content: center;
+  }
+
+  &.${headCellClassnames.alignRight} {
+    justify-content: flex-end;
+  }
+
   .${hintIconClassnames.iconWrapper}  {
     margin-right: ${({ theme }) => theme.spacing(1)};
   }

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

@@ -1,10 +1,10 @@
+import { type CSSProperties } from 'react';
 import type { DataGridRow } from '../../types';
 import { type HeadCellProps } from '../HeadCell';
 type UseLogicParams<TData = DataGridRow, TSortField extends keyof TData = keyof TData> = HeadCellProps<TData, TSortField>;
-export declare const useLogic: <TData, TSortField extends keyof TData>({ field, isSortable, startAdornment, onSort, }: UseLogicParams<TData, TSortField>) => {
-    wrapperProps: {
-        $hasStartAdornment: boolean;
-        onClick: () => void;
-    };
+export declare const useLogic: <TData, TSortField extends keyof TData>({ gridPosition, field, isSortable, startAdornment, onSort, }: UseLogicParams<TData, TSortField>) => {
+    hasStartAdornment: boolean;
+    handleSortClick: () => void;
+    headCellCssVars: CSSProperties;
 };
 export {};

package/components/DataGrid/HeadCell/useLogic/useLogic.js

@@ -1,14 +1,17 @@
-export const useLogic = ({ field, isSortable, startAdornment, onSort, }) => {
+export const useLogic = ({ gridPosition, field, isSortable, startAdornment, onSort, }) => {
     const hasStartAdornment = Boolean(startAdornment);
     const handleSortClick = () => {
         if (field && isSortable) {
             onSort(field);
         }
     };
+    const headCellCssVars = {
+        '--grid-column-start': gridPosition?.start,
+        '--grid-column-end': gridPosition?.end,
+    };
     return {
-        wrapperProps: {
-            $hasStartAdornment: hasStartAdornment,
-            onClick: handleSortClick,
-        },
+        hasStartAdornment,
+        handleSortClick,
+        headCellCssVars,
     };
 };

package/components/DataGrid/PinnedSections/Section/styles.js

@@ -17,6 +17,10 @@ export const DataGridSection = styled.div `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 
+  & .${dataGridClassnames.body} {
+    scrollbar-gutter: unset;
+  }
+
   &.${dataGridClassnames.pinnedSectionNoData} {
     grid-column: 1 / -1;
   }

package/components/DataGrid/PinnedSections/Section/useLogic/useLogic.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { classNames } from '../../../../utils/classNames';
 import { dataGridClassnames } from '../../../constants';
-import { getGridTemplateColumns } from '../../../utils';
+import { getFlattenColumns, getGridTemplateColumns } from '../../../utils';
 export const useLogic = ({ position, isNoData, columns, }) => {
     const classnames = useMemo(() => classNames({
         [dataGridClassnames.leftPinnedSection]: position === 'left',
@@ -11,6 +11,6 @@ export const useLogic = ({ position, isNoData, columns, }) => {
     const shouldNotRenderSection = (isNoData && position !== 'center') || !columns || columns.length === 0;
     const gridColumns = shouldNotRenderSection
         ? ''
-        : getGridTemplateColumns(columns);
+        : getGridTemplateColumns(getFlattenColumns(columns));
     return { classnames, gridColumns, shouldNotRenderSection };
 };

package/components/DataGrid/PinnedSections/styles.js

@@ -8,11 +8,15 @@ export const PinnedColumnsContainer = styled.div `
   width: 100%;
   height: 100%;
 
+  & .${dataGridClassnames.header} {
+    padding-right: unset;
+  }
+
   &.${dataGridClassnames.disabled} {
-   pointer-events: none;
+    pointer-events: none;
 
-  background: ${({ theme }) => theme.palette.background.element};
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  mix-blend-mode: luminosity;
+    background: ${({ theme }) => theme.palette.background.element};
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    mix-blend-mode: luminosity;
   }
 `;

package/components/DataGrid/PinnedSections/useLogic/useLogic.js

@@ -1,17 +1,22 @@
 import { useMemo } from 'react';
+import { getFlattenColumns } from '../../utils';
 export const useLogic = ({ sections, }) => {
+    const leftColumns = sections.find((section) => section.position === 'left')?.columns;
+    const rightColumns = sections.find((section) => section.position === 'right')?.columns;
     const pinnedContainerStyles = {
-        '--left-columns-count': sections.find((section) => section.position === 'left')?.columns
-            ?.length ?? 0,
-        '--right-columns-count': sections.find((section) => section.position === 'right')?.columns
-            ?.length ?? 0,
+        '--left-columns-count': leftColumns
+            ? getFlattenColumns(leftColumns).length
+            : 0,
+        '--right-columns-count': rightColumns
+            ? getFlattenColumns(rightColumns).length
+            : 0,
     };
     const sectionOffsets = useMemo(() => {
         const offsets = {};
         let currentOffset = 0;
         sections.forEach((section) => {
             offsets[section.position] = currentOffset;
-            currentOffset += section.columns?.length ?? 0;
+            currentOffset += getFlattenColumns(section.columns).length;
         });
         return offsets;
     }, [sections]);

package/components/DataGrid/Row/Row.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
+import { Fragment, memo, useCallback } from 'react';
 import { BottomDrawer } from '../../BottomDrawer';
 import { Checkbox } from '../../Checkbox';
 import { Tooltip } from '../../Tooltip';
@@ -7,9 +7,11 @@ import { checkIsDeepEqual } from '../../utils/checkIsDeepEqual';
 import { classNames } from '../../utils/classNames';
 import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
-import { DISABLE_ROW_ATTR, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
+import { dataGridCellClassnames } from '../Cell';
+import { isGroupColumns } from '../utils';
+import { DISABLE_ROW_ATTR, dataGridGroupedColumnLabelClassnames, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
 import { NestedChildren } from './NestedChildren';
-import { BottomDrawerContent, CellStyled, CheckboxCell, ChevronIcon, CollapseButton, CollapseCell, ContentWrapper, Wrapper, } from './styles';
+import { BottomDrawerContent, CellStyled, CheckboxCell, ChevronIcon, CollapseButton, CollapseCell, ContentWrapper, GroupedColumnLabel, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 import { checkIsDisabled } from './utils';
 const rootCva = cva(dataGridRowClassnames.root, {
@@ -26,6 +28,13 @@ const rowContentCva = cva(dataGridRowContentClassnames.root, {
         },
     },
 });
+const groupedColumnLabelCva = cva(dataGridGroupedColumnLabelClassnames.root, {
+    variants: {
+        hidden: {
+            true: dataGridGroupedColumnLabelClassnames.hidden,
+        },
+    },
+});
 const RowComponent = (props) => {
     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, 
@@ -49,6 +58,16 @@ const RowComponent = (props) => {
             const globalIndex = (sectionOffset ?? 0) + index;
             const isDisabledCell = checkIsDisabled(disabled, availableCellsByIndex, globalIndex);
             const isFirstCell = globalIndex === 0;
+            if (isGroupColumns(cell)) {
+                const { label, children, hideTitleOnMobile, isHideOnMobile } = cell;
+                return (_jsxs(Fragment, { children: [_jsx(GroupedColumnLabel, { variant: "caption", color: "grey", colorIntensity: "700", className: groupedColumnLabelCva({
+                                hidden: hideTitleOnMobile || isHideOnMobile,
+                            }), children: label }), children.map((child, childIndex) => {
+                            const childCellId = `${cellId}-${childIndex}`;
+                            const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
+                            return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, className: dataGridCellClassnames.grouped }, childCellId));
+                        })] }, cellId));
+            }
             return (_jsx(CellStyled, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
         });
     }, [

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

@@ -12,3 +12,11 @@ export declare const dataGridRowContentClassnames: {
     root: string;
     hovered: string;
 };
+export declare const dataGridRowCellClassnames: {
+    single: string;
+    grouped: string;
+};
+export declare const dataGridGroupedColumnLabelClassnames: {
+    root: string;
+    hidden: string;
+};

package/components/DataGrid/Row/constants.js

@@ -13,3 +13,11 @@ export const dataGridRowContentClassnames = {
     root: createUIKitClassname('data-grid__row-content'),
     hovered: createUIKitClassname('data-grid__row-content_hovered'),
 };
+export const dataGridRowCellClassnames = {
+    single: createUIKitClassname('data-grid__row-cell_single'),
+    grouped: createUIKitClassname('data-grid__row-cell_grouped'),
+};
+export const dataGridGroupedColumnLabelClassnames = {
+    root: createUIKitClassname('data-grid-grouped-column-label'),
+    hidden: createUIKitClassname('data-grid-grouped-column-label_hidden'),
+};

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

@@ -43,3 +43,13 @@ export declare const BottomDrawerContent: 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 GroupedColumnLabel: 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;
+}, {}, {}>;

package/components/DataGrid/Row/styles.js

@@ -1,9 +1,10 @@
 import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
 import { IconButton } from '../../IconButton';
 import { styled } from '../../styled';
+import { Typography } from '../../Typography';
 import { Cell } from '../Cell';
 import { ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH } from '../constants';
-import { dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
+import { dataGridGroupedColumnLabelClassnames, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
 export const Wrapper = styled.li `
   --level: 0;
   position: relative;
@@ -102,7 +103,6 @@ export const ContentWrapper = styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-template-columns: 1fr;
-    gap: ${({ theme }) => theme.spacing(3)};
   }
 `;
 export const CellStyled = styled(Cell) `
@@ -154,3 +154,16 @@ export const BottomDrawerContent = styled.div `
       padding: ${({ theme }) => theme.spacing(5, 4)};
     }
 `;
+export const GroupedColumnLabel = styled(Typography) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+
+    margin-top: ${({ theme }) => theme.spacing(3)};
+
+    &.${dataGridGroupedColumnLabelClassnames.hidden} {
+      display: none;
+    }
+  }
+`;

package/components/DataGrid/constants.d.ts

@@ -13,11 +13,14 @@ export declare const dataGridClassnames: {
     bodyEmpty: string;
     disabled: string;
     pinnedSectionNoData: string;
-    dataGridHasPinnedSections: string;
+    hasPinnedSections: string;
     pinnedSections: string;
     leftPinnedSection: string;
     rightPinnedSection: string;
     overflowed: string;
     wrapper: string;
     isAllowHorizontalScroll: string;
+    hasGroupedColumns: string;
+    gridViewFull: string;
+    gridViewStandard: string;
 };

package/components/DataGrid/constants.js

@@ -14,11 +14,14 @@ export const dataGridClassnames = {
     bodyEmpty: createUIKitClassname('data-grid__body_empty'),
     disabled: createUIKitClassname('data-grid_disabled'),
     pinnedSectionNoData: createUIKitClassname('data-grid__pinned-section_no-data'),
-    dataGridHasPinnedSections: createUIKitClassname('data-grid_has-pinned-sections'),
+    hasPinnedSections: createUIKitClassname('data-grid_has-pinned-sections'),
     pinnedSections: createUIKitClassname('data-grid__pinned-sections'),
     leftPinnedSection: createUIKitClassname('data-grid__left-pinned-section'),
     rightPinnedSection: createUIKitClassname('data-grid__right-pinned-section'),
     overflowed: createUIKitClassname('data-grid_overflowed'),
     wrapper: createUIKitClassname('data-grid__wrapper'),
     isAllowHorizontalScroll: createUIKitClassname('data-grid_is-allow-horizontal-scroll'),
+    hasGroupedColumns: createUIKitClassname('data-grid_has-grouped-columns'),
+    gridViewFull: createUIKitClassname('data-grid_grid-view-full'),
+    gridViewStandard: createUIKitClassname('data-grid_grid-view-standard'),
 };

package/components/DataGrid/faker.js

@@ -1,4 +1,5 @@
 import { faker } from '@ui/dev/faker';
+import { isGroupColumns } from './utils';
 const RECIPIENTS = [
     'ИП Иванов О.В.',
     'ООО "Новая организация"',
@@ -12,22 +13,25 @@ export const makeRandomDate = () => {
     return randomDate.toISOString();
 };
 export const makeColumns = (columnsTemplate, mergedColumns = []) => {
-    const mergedColumnsMap = mergedColumns.reduce((acc, { field, ...columnsOptions }) => {
-        if (field) {
+    const mergedColumnsMap = mergedColumns.reduce((acc, column) => {
+        if (!isGroupColumns(column) && column.field) {
+            const { field, ...columnsOptions } = column;
             return {
-                // biome-ignore lint/performance/noAccumulatingSpread: <>
                 ...acc,
                 [field]: columnsOptions,
             };
         }
         return acc;
     }, {});
-    return columnsTemplate.map((column) => ({
-        ...column,
-        // biome-ignore lint/suspicious/noTsIgnore: <>
-        // @ts-ignore
-        ...(mergedColumnsMap[column?.field] || {}),
-    }));
+    return columnsTemplate.map((column) => {
+        if (isGroupColumns(column) || !column.field) {
+            return column;
+        }
+        return {
+            ...column,
+            ...(mergedColumnsMap[column.field] || {}),
+        };
+    });
 };
 export const makeDataList = (dataObjTemplate, options) => {
     const DATA_ARRAY_LENGTH = 50;

package/components/DataGrid/index.d.ts

@@ -1,4 +1,4 @@
 export { DataGrid } from './DataGrid';
-export type { DataGridProps, DataGridColumns, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
+export type { DataGridProps, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
 export { dataGridClassnames } from './constants';
 export { MobileSkeleton } from './MobileSkeleton';