@astral/ui 4.62.2 → 4.64.0

package/components/Dialog/public.js

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

package/components/Dialog/styles.js

@@ -1,19 +1,26 @@
 import { backdropClasses } from '@mui/material/Backdrop';
-import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
+import MuiDialog from '@mui/material/Dialog';
 import { dialogActionsClassnames } from '../DialogActions';
 import { dialogContentClassnames } from '../DialogContent';
 import { styled } from '../styled';
-import { DIALOG_SIZES } from './constants';
+import { DIALOG_SIZES, dialogClassnames } from './constants';
 const getSize = (size) => {
     return DIALOG_SIZES[size] || DIALOG_SIZES.md;
 };
 export const StyledDialog = styled(MuiDialog, {
     shouldForwardProp: (prop) => !['$size'].includes(prop),
 }) `
-  &.${dialogClasses.root} .${backdropClasses.root} {
+  &.${dialogClassnames.root} .${backdropClasses.root} {
     background-color: ${({ theme }) => theme.palette.background.modalShadow};
   }
-  .${dialogClasses.paper} {
+
+  &.${dialogClassnames.withoutTitle} {
+    & .${dialogContentClassnames.root} {
+      padding-top: ${({ theme }) => theme.spacing(6)};
+    }
+  }
+
+  .${dialogClassnames.paper} {
     min-width: ${({ $size }) => getSize($size).minWidth};
     max-width: ${({ $size }) => getSize($size).maxWidth};
 

package/components/Dialog/types.d.ts

@@ -0,0 +1,23 @@
+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;
+};

package/components/Dialog/types.js

@@ -0,0 +1 @@
+export {};

package/components/Dialog/useLogic/index.js

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

package/components/Dialog/useLogic/useLogic.d.ts

@@ -0,0 +1,25 @@
+import { type MouseEvent } from 'react';
+import { type DialogProps } from '../types';
+type UseLogicParams = Pick<DialogProps, 'onClose' | 'disableBackdropClick' | 'classes'>;
+export declare const useLogic: ({ onClose, disableBackdropClick, classes, }: UseLogicParams) => {
+    handleClose: ((event: MouseEvent<HTMLButtonElement>, reason: 'backdropClick' | 'escapeKeyDown') => void) | undefined;
+    isMobile: boolean;
+    dialogClasses: {
+        root?: string | undefined;
+        scrollPaper?: string | undefined;
+        scrollBody?: string | undefined;
+        container?: string | undefined;
+        paperScrollPaper?: string | undefined;
+        paperScrollBody?: string | undefined;
+        paperWidthFalse?: string | undefined;
+        paperWidthXs?: string | undefined;
+        paperWidthSm?: string | undefined;
+        paperWidthMd?: string | undefined;
+        paperWidthLg?: string | undefined;
+        paperWidthXl?: string | undefined;
+        paperFullWidth?: string | undefined;
+        paperFullScreen?: string | undefined;
+        paper: string;
+    };
+};
+export {};

package/components/Dialog/useLogic/useLogic.js

@@ -0,0 +1,19 @@
+import { useViewportType } from '../../useViewportType';
+import { classNames } from '../../utils/classNames';
+import { dialogClassnames } from '../constants';
+export const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
+    const { isMobile } = useViewportType();
+    const handleClose = onClose &&
+        ((event, reason) => {
+            if (disableBackdropClick && reason === 'backdropClick') {
+                return;
+            }
+            onClose(event, reason);
+        });
+    const { paper, ...restClasses } = classes || {};
+    const dialogClasses = {
+        paper: classNames(dialogClassnames.paper, paper),
+        ...restClasses,
+    };
+    return { handleClose, isMobile, dialogClasses };
+};

package/components/PageLayoutContainer/PageLayoutContainer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classNames } from '../utils/classNames';
 import { pageLayoutClassnames } from './constants';
-import { StylePaper, Wrapper } from './styles';
+import { StyledPaper, Wrapper } from './styles';
 export const PageLayoutContainer = forwardRef(({ children, className }, forwardedRef) => {
-    return (_jsx(StylePaper, { variant: "outlined", children: _jsx(Wrapper, { className: classNames(className, pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
+    return (_jsx(StyledPaper, { variant: "outlined", children: _jsx(Wrapper, { className: classNames(className, pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
 });

package/components/PageLayoutContainer/styles.d.ts

@@ -3,6 +3,6 @@ export declare const Wrapper: 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 StylePaper: import("../styled").StyledComponent<Omit<import("../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const StyledPaper: import("../styled").StyledComponent<Omit<import("../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/PageLayoutContainer/styles.js

@@ -35,7 +35,7 @@ export const Wrapper = styled.div `
     border: unset;
   }
 `;
-export const StylePaper = styled(Paper) `
+export const StyledPaper = styled(Paper) `
   height: 100%;
   
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/ResizingDataGrid/hooks/useComputedColumns/useComputedColumns.d.ts

@@ -7,6 +7,6 @@ import type { ResizingColumns } from '../../types';
 export declare const useComputedColumns: <TData extends DataGridRow = DataGridRow>(columns: ResizingColumns<TData>, storage?: Storage) => {
     columnsWidths: any[];
     setColumnsWidths: import("react").Dispatch<import("react").SetStateAction<any[]>>;
-    computedColumns: import("../../../DataGrid").DataGridColumns<TData>[];
+    computedColumns: import("../../../DataGrid").DataGridSingleColumn<TData>[];
     actionsColumnWidth: string | undefined;
 };

package/components/ResizingDataGrid/hooks/useComputedColumns/utils/createComputedColumns/createComputedColumns.d.ts

@@ -1,7 +1,7 @@
-import { type DataGridColumns, type DataGridRow } from '../../../../../DataGrid';
+import { type DataGridRow, type DataGridSingleColumn } from '../../../../../DataGrid';
 import { type ResizingColumns } from '../../../../types';
 type CreateComputedColumnsResult<TData extends DataGridRow = DataGridRow> = {
-    computedColumns: DataGridColumns<TData>[];
+    computedColumns: DataGridSingleColumn<TData>[];
     actionsColumnWidth?: string;
 };
 /**

package/components/ResizingDataGrid/types.d.ts

@@ -1,6 +1,6 @@
-import type { DataGridColumns, DataGridProps, DataGridRow } from '../DataGrid';
+import type { DataGridProps, DataGridRow, DataGridSingleColumn } from '../DataGrid';
 import { type CellValue } from '../DataGrid/types';
-type OmittedColumn<TData extends Record<string, CellValue>> = Omit<DataGridColumns<TData>, 'field' | 'width' | 'minWidth'>;
+type OmittedColumn<TData extends Record<string, CellValue>> = Omit<DataGridSingleColumn<TData>, 'field' | 'width' | 'minWidth'>;
 type CommonColumn<TData extends Record<string, CellValue>> = OmittedColumn<TData> & {
     /**
      * Значение ключа поля данных для колонки

package/node/components/ConfirmDialog/ConfirmDialog.js

@@ -11,9 +11,9 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const ConfirmDialog = (props) => {
     const { isShowCancelButton, cancelButtonProps } = (0, useLogic_1.useLogic)(props);
-    const { open, title, description, actions, onClose, ...restProps } = props;
+    const { open, title, description, actions, onClose, size = 'sm', ...restProps } = props;
     const { text: confirmText, ...confirmButtonProps } = actions.confirm;
     const { text: cancelText, variant, onClick, ...restCancelProps } = actions.cancel || {};
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { size: "sm", title: title, open: open, onClose: onClose, ...restProps, children: [description && ((0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.DialogContentText, { children: description })) : (description) })), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [isShowCancelButton && ((0, jsx_runtime_1.jsx)(styles_1.CancelButton, { ...restCancelProps, ...cancelButtonProps, children: cancelText })), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: confirmText })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && ((0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.DialogContentText, { children: description })) : (description) })), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [isShowCancelButton && ((0, jsx_runtime_1.jsx)(styles_1.CancelButton, { ...restCancelProps, ...cancelButtonProps, children: cancelText })), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: confirmText })] })] }));
 };
 exports.ConfirmDialog = ConfirmDialog;

package/node/components/ConfirmDialog/types.d.ts

@@ -5,7 +5,7 @@ export type ConfirmDialogProps = {
     /**
      * Заголовок диалога
      */
-    title: string;
+    title?: string;
     /**
      * Вспомогательный текст
      */
@@ -33,4 +33,4 @@ export type ConfirmDialogProps = {
             text: string;
         };
     };
-} & Pick<DialogProps, 'aria-labelledby' | 'aria-describedby' | 'disableBackdropClick' | 'disablePortal' | 'disableScrollLock' | 'hideBackdrop' | 'keepMounted' | 'open'>;
+} & Pick<DialogProps, 'aria-labelledby' | 'aria-describedby' | 'disableBackdropClick' | 'disablePortal' | 'disableScrollLock' | 'hideBackdrop' | 'keepMounted' | 'open' | 'size'>;

package/node/components/DataGrid/Body/styles.js

@@ -7,6 +7,8 @@ const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.ul `
   --min-display-rows: 0;
 
+  scrollbar-gutter: stable;
+
   overflow-y: auto;
 
   width: fit-content;
@@ -28,6 +30,8 @@ exports.Wrapper = styled_1.styled.ul `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    scrollbar-gutter: unset;
+
     overflow: initial;
 
     width: 100%;

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { CellValue, DataGridColumns } from '../types';
+import type { CellValue, DataGridSingleColumn } from '../types';
 export type CellProps<TData extends Record<string, CellValue>> = {
     /**
      * Название класса, применяется к корневому компоненту
@@ -9,7 +9,7 @@ export type CellProps<TData extends Record<string, CellValue>> = {
      * Данные строки для отображения
      */
     row: TData;
-    cell: DataGridColumns<TData>;
+    cell: DataGridSingleColumn<TData>;
     /**
      * Дополнительное содержимое ячейки, которое будет распложено справа
      */
@@ -26,5 +26,9 @@ export type CellProps<TData extends Record<string, CellValue>> = {
      * Скрытие персональных данных от инструментов мониторинга
      */
     isHidePersonalData?: boolean;
+    /**
+     * Скрытие ячейки на мобильных устройствах
+     */
+    isHideOnMobile?: boolean;
 };
 export declare const Cell: <TData extends Record<string, unknown>>(props: CellProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/node/components/DataGrid/Cell/Cell.js

@@ -15,6 +15,17 @@ const cellCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.root, {
         isHideOnMobile: {
             true: constants_1.dataGridCellClassnames.isHideOnMobile,
         },
+        isDisabled: {
+            true: constants_1.dataGridCellClassnames.disabled,
+        },
+        withStartAdornment: {
+            true: constants_1.dataGridCellClassnames.withStartAdornment,
+        },
+        align: {
+            left: constants_1.dataGridCellClassnames.alignLeft,
+            center: constants_1.dataGridCellClassnames.alignCenter,
+            right: constants_1.dataGridCellClassnames.alignRight,
+        },
     },
 });
 const cellContentCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.cellContent, {
@@ -33,12 +44,17 @@ const columnLabelCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.columnL
 });
 const Cell = (props) => {
     const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, } = (0, useLogic_1.useLogic)(props);
-    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, } = props;
+    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, } = props;
     const { renderCell, align = 'left' } = cell;
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData === true,
     });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isDisabled": isDisabled, "$align": align, "$hasStartAdornment": hasStartAdornment, className: (0, classNames_1.classNames)(className, hidePersonalDataClassname, cellCva({ isHideOnMobile: cell.isHideOnMobile })), ...(0, getInertProps_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsxs)(styles_1.CellContent, { className: cellContentCva({ isActionColumn }), children: [(0, jsx_runtime_1.jsx)(styles_1.ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, hidePersonalDataClassname, cellCva({
+            isHideOnMobile: cell.isHideOnMobile || isHideOnMobile,
+            isDisabled,
+            withStartAdornment: hasStartAdornment,
+            align,
+        })), ...(0, getInertProps_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsxs)(styles_1.CellContent, { className: cellContentCva({ isActionColumn }), children: [(0, jsx_runtime_1.jsx)(styles_1.ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
                             hidden: hideTitleOnMobile || isActionColumn,
                         }), children: label }), renderCell?.(row), !renderCell && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] })] }));
 };

package/node/components/DataGrid/Cell/constants.d.ts

@@ -5,4 +5,10 @@ export declare const dataGridCellClassnames: {
     columnLabelHidden: string;
     actionColumn: string;
     cellContent: string;
+    disabled: string;
+    withStartAdornment: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    grouped: string;
 };

package/node/components/DataGrid/Cell/constants.js

@@ -9,4 +9,10 @@ exports.dataGridCellClassnames = {
     columnLabelHidden: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell-column-label_hidden'),
     actionColumn: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_action-column'),
     cellContent: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell-content'),
+    disabled: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_disabled'),
+    withStartAdornment: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_with-start-adornment'),
+    alignLeft: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_align-left'),
+    alignCenter: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_align-center'),
+    alignRight: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_align-right'),
+    grouped: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_grouped'),
 };

package/node/components/DataGrid/Cell/index.d.ts

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

package/node/components/DataGrid/Cell/index.js

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridCellClassnames = void 0;
 __exportStar(require("./Cell"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "dataGridCellClassnames", { enumerable: true, get: function () { return constants_1.dataGridCellClassnames; } });

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

@@ -1,14 +1,8 @@
 /// <reference types="react" />
-import type { AlignVariant } from '../types';
-type HeadCellProps = {
-    $align?: AlignVariant;
-    $isDisabled?: boolean;
-    $hasStartAdornment?: boolean;
-};
 export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & HeadCellProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ColumnLabel: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     color?: import("../../Typography").TypographyColor | undefined;
     variant?: import("../../Typography").TypographyVariant | undefined;
@@ -23,4 +17,3 @@ export declare const CellContent: import("@emotion/styled/dist/declarations/src/
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/node/components/DataGrid/Cell/styles.js

@@ -5,36 +5,71 @@ const styled_1 = require("../../styled");
 const Typography_1 = require("../../Typography");
 const constants_1 = require("../constants");
 const constants_2 = require("../Row/constants");
-const utils_1 = require("../utils");
 const constants_3 = require("./constants");
-exports.Wrapper = (0, styled_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$align', '$isDisabled', '$hasStartAdornment'].includes(prop),
-}) `
+exports.Wrapper = styled_1.styled.div `
   overflow: hidden;
   display: flex;
   align-items: center;
-  justify-content: ${({ $align }) => (0, utils_1.alignToJustifyContent)($align)};
 
   min-height: ${constants_1.MIN_ROW_HEIGHT}px;
-  padding: ${({ theme, $hasStartAdornment }) => $hasStartAdornment ? theme.spacing(1, 2, 1, 0) : theme.spacing(1, 2)};
+  padding: ${({ theme }) => theme.spacing(1, 2)};
 
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
+  &.${constants_3.dataGridCellClassnames.disabled} {
+    opacity: 0.5;
+  }
+
+  &.${constants_3.dataGridCellClassnames.withStartAdornment} {
+    padding: ${({ theme }) => theme.spacing(1, 2, 1, 0)};
+  }
+
+  &.${constants_3.dataGridCellClassnames.alignLeft} {
+    justify-content: flex-start;
+  }
+
+  &.${constants_3.dataGridCellClassnames.alignCenter} {
+    justify-content: center;
+  }
+
+  &.${constants_3.dataGridCellClassnames.alignRight} {
+    justify-content: flex-end;
+  }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     justify-content: space-between;
 
     min-height: unset;
+    margin-top: ${({ theme }) => theme.spacing(3)};
     padding: 0;
 
     &.${constants_3.dataGridCellClassnames.isHideOnMobile} {
       display: none;
     }
 
-
     & .${constants_2.dataGridRowClassnames.checkbox} {
       align-self: flex-start;
       order: 1;
     }
+
+    &.${constants_3.dataGridCellClassnames.grouped} {
+      margin-top: ${({ theme }) => theme.spacing(1)};
+
+      & .${constants_3.dataGridCellClassnames.cellContent} {
+        flex-direction: row;
+        gap: ${({ theme }) => theme.spacing(2)};
+        align-items: baseline;
+
+        & .${constants_3.dataGridCellClassnames.columnLabel} {
+          /* Декоративный разделитель между названием колонки и значением */
+          &::after {
+            content: ':';
+          }
+        }
+      }
+    }
+
+    &:first-of-type {
+      margin-top: 0;
+    }
   }
 `;
 exports.ColumnLabel = (0, styled_1.styled)(Typography_1.Typography) `

package/node/components/DataGrid/DataGrid.js

@@ -29,11 +29,18 @@ const pinnedSectionsCva = (0, cva_1.cva)(constants_1.dataGridClassnames.pinnedSe
 const dataGridCva = (0, cva_1.cva)(constants_1.dataGridClassnames.root, {
     variants: {
         hasPinnedColumns: {
-            true: constants_1.dataGridClassnames.dataGridHasPinnedSections,
+            true: constants_1.dataGridClassnames.hasPinnedSections,
         },
         isAllowHorizontalScroll: {
             true: constants_1.dataGridClassnames.isAllowHorizontalScroll,
         },
+        gridViewMode: {
+            full: constants_1.dataGridClassnames.gridViewFull,
+            standard: constants_1.dataGridClassnames.gridViewStandard,
+        },
+        hasGroupedColumns: {
+            true: constants_1.dataGridClassnames.hasGroupedColumns,
+        },
     },
 });
 const bodyCva = (0, cva_1.cva)(constants_1.dataGridClassnames.body, {
@@ -44,7 +51,7 @@ const bodyCva = (0, cva_1.cva)(constants_1.dataGridClassnames.body, {
     },
 });
 const DataGrid = (props) => {
-    const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, } = (0, useLogic_1.useLogic)(props);
+    const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, hasGroupedColumns, gridViewMode, } = (0, useLogic_1.useLogic)(props);
     const { emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { columns, selectedRows = [], minDisplayRows = constants_1.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
@@ -89,6 +96,8 @@ const DataGrid = (props) => {
     return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, classNames_1.classNames)(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
+                gridViewMode,
+                hasGroupedColumns,
             })), children: [renderTableContent(), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
 };
 exports.DataGrid = DataGrid;

package/node/components/DataGrid/Head/Head.js

@@ -2,36 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Head = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Checkbox_1 = require("../../Checkbox");
+const cva_1 = require("../../utils/cva");
 const constants_1 = require("../constants");
-const HeadCell_1 = require("../HeadCell");
+const utils_1 = require("../utils");
+const HeadColumns_1 = require("./HeadColumns/HeadColumns");
 const styles_1 = require("./styles");
-const useLogic_1 = require("./useLogic");
+const headerCva = (0, cva_1.cva)(constants_1.dataGridClassnames.header, {
+    variants: {
+        isGroup: {
+            true: constants_1.dataGridClassnames.hasGroupedColumns,
+        },
+    },
+});
 const Head = (props) => {
-    const { checkboxProps, handleSort } = (0, useLogic_1.useLogic)(props);
-    const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, sectionOffset, } = props;
-    const renderColumns = (0, react_1.useMemo)(() => {
-        return columns.map(({ field, label, sortable, align, columnHint }, index) => {
-            const globalIndex = (sectionOffset ?? 0) + index;
-            const isFirstCell = globalIndex === 0;
-            const startAdornmentRender = () => {
-                const showCheckbox = isFirstCell && isSelectable && !isHideSelectAll;
-                if (!showCheckbox && !columnHint) {
-                    return null;
-                }
-                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCheckbox && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps, onChange: onSelectAllRows }) })), columnHint] }));
-            };
-            return ((0, jsx_runtime_1.jsx)(HeadCell_1.HeadCell, { sorting: sorting, field: field, label: label, isSortable: sortable, align: align, startAdornment: startAdornmentRender(), onSort: handleSort }, label));
-        });
-    }, [
-        columns,
-        sorting,
-        isSelectable,
-        checkboxProps,
-        onSelectAllRows,
-        handleSort,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { role: "heading", className: constants_1.dataGridClassnames.header, "$gridColumns": gridColumns, children: renderColumns }));
+    const { columns, gridColumns } = props;
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { role: "heading", className: headerCva({ isGroup: columns.some(utils_1.isGroupColumns) }), "$gridColumns": gridColumns, children: (0, jsx_runtime_1.jsx)(HeadColumns_1.HeadColumns, { ...props }) }));
 };
 exports.Head = Head;

package/node/components/DataGrid/Head/HeadColumns/GroupColumns/GroupColumns.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type CellValue, type DataGridGroupColumn, type DataGridRow, type DataGridSort } from '../../../types';
+type GroupColumnsProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    column: DataGridGroupColumn<TData>;
+    sorting?: DataGridSort<TSortField>;
+    onSort: (field: TSortField) => void;
+    gridPosition?: {
+        start: number;
+        end: number;
+    };
+    startAdornment?: ReactNode;
+};
+export declare const GroupColumns: <TData extends Record<string, unknown>, TSortField extends keyof TData>({ column, sorting, onSort, gridPosition, startAdornment, }: GroupColumnsProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/components/DataGrid/Head/HeadColumns/GroupColumns/GroupColumns.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupColumns = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const HeadCell_1 = require("../../../HeadCell");
+const GroupColumns = ({ column, sorting, onSort, gridPosition, startAdornment, }) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeadCell_1.HeadCell, { sorting: sorting, label: column.label, onSort: onSort, className: HeadCell_1.headCellClassnames.groupParent, gridPosition: gridPosition, startAdornment: startAdornment }), column.children.map((child) => ((0, jsx_runtime_1.jsx)(HeadCell_1.HeadCell, { ...child, onSort: onSort, className: HeadCell_1.headCellClassnames.groupChild, startAdornment: child.columnHint }, child.label)))] }, column.label));
+exports.GroupColumns = GroupColumns;

package/node/components/DataGrid/Head/HeadColumns/GroupColumns/index.d.ts

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

package/node/components/DataGrid/{utils/alignToJustifyContent → Head/HeadColumns/GroupColumns}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./alignToJustifyContent"), exports);
+__exportStar(require("./GroupColumns"), exports);

package/node/components/DataGrid/Head/HeadColumns/HeadCellStartAdornment/HeadCellStartAdornment.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type CheckboxProps } from '../../../../Checkbox';
+type HeadCellStartAdornmentProps = {
+    showCheckbox: boolean;
+    columnHint?: ReactNode;
+    checkboxProps: CheckboxProps;
+};
+export declare const HeadCellStartAdornment: ({ showCheckbox, columnHint, checkboxProps, }: HeadCellStartAdornmentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/node/components/DataGrid/Head/HeadColumns/HeadCellStartAdornment/HeadCellStartAdornment.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadCellStartAdornment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkbox_1 = require("../../../../Checkbox");
+const styles_1 = require("./styles");
+const HeadCellStartAdornment = ({ showCheckbox, columnHint, checkboxProps, }) => {
+    if (!showCheckbox && !columnHint) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCheckbox && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps }) })), columnHint] }));
+};
+exports.HeadCellStartAdornment = HeadCellStartAdornment;

package/node/components/DataGrid/Head/HeadColumns/HeadCellStartAdornment/index.d.ts

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

package/node/components/DataGrid/Head/HeadColumns/HeadCellStartAdornment/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./HeadCellStartAdornment"), exports);

package/node/components/DataGrid/Head/HeadColumns/HeadCellStartAdornment/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const CheckboxCell: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DataGrid/Head/HeadColumns/HeadCellStartAdornment/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxCell = void 0;
+const styled_1 = require("../../../../styled");
+const constants_1 = require("../../../constants");
+exports.CheckboxCell = styled_1.styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
+`;