@astral/ui 4.62.2 → 4.64.0

package/components/ConfirmDialog/ConfirmDialog.js

@@ -8,8 +8,8 @@ import { CancelButton } from './styles';
 import { useLogic } from './useLogic';
 export const ConfirmDialog = (props) => {
     const { isShowCancelButton, cancelButtonProps } = 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 (_jsxs(Dialog, { size: "sm", title: title, open: open, onClose: onClose, ...restProps, children: [description && (_jsx(DialogContent, { children: typeof description === 'string' ? (_jsx(DialogContentText, { children: description })) : (description) })), _jsxs(DialogActions, { children: [isShowCancelButton && (_jsx(CancelButton, { ...restCancelProps, ...cancelButtonProps, children: cancelText })), _jsx(Button, { ...confirmButtonProps, children: confirmText })] })] }));
+    return (_jsxs(Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && (_jsx(DialogContent, { children: typeof description === 'string' ? (_jsx(DialogContentText, { children: description })) : (description) })), _jsxs(DialogActions, { children: [isShowCancelButton && (_jsx(CancelButton, { ...restCancelProps, ...cancelButtonProps, children: cancelText })), _jsx(Button, { ...confirmButtonProps, children: confirmText })] })] }));
 };

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

@@ -4,6 +4,8 @@ import { bodyClassnames } from './constants';
 export const Wrapper = styled.ul `
   --min-display-rows: 0;
 
+  scrollbar-gutter: stable;
+
   overflow-y: auto;
 
   width: fit-content;
@@ -25,6 +27,8 @@ export const Wrapper = styled.ul `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    scrollbar-gutter: unset;
+
     overflow: initial;
 
     width: 100%;

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

@@ -12,6 +12,17 @@ const cellCva = cva(dataGridCellClassnames.root, {
         isHideOnMobile: {
             true: dataGridCellClassnames.isHideOnMobile,
         },
+        isDisabled: {
+            true: dataGridCellClassnames.disabled,
+        },
+        withStartAdornment: {
+            true: dataGridCellClassnames.withStartAdornment,
+        },
+        align: {
+            left: dataGridCellClassnames.alignLeft,
+            center: dataGridCellClassnames.alignCenter,
+            right: dataGridCellClassnames.alignRight,
+        },
     },
 });
 const cellContentCva = cva(dataGridCellClassnames.cellContent, {
@@ -30,12 +41,17 @@ const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
 });
 export const Cell = (props) => {
     const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, } = 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 = useHidePersonalData({
         isEnabled: isHidePersonalData === true,
     });
-    return (_jsxs(Wrapper, { "$isDisabled": isDisabled, "$align": align, "$hasStartAdornment": hasStartAdornment, className: classNames(className, hidePersonalDataClassname, cellCva({ isHideOnMobile: cell.isHideOnMobile })), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
+    return (_jsxs(Wrapper, { className: classNames(className, hidePersonalDataClassname, cellCva({
+            isHideOnMobile: cell.isHideOnMobile || isHideOnMobile,
+            isDisabled,
+            withStartAdornment: hasStartAdornment,
+            align,
+        })), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
                             hidden: hideTitleOnMobile || isActionColumn,
                         }), children: label }), renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] })] }));
 };

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

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

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

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

package/components/DataGrid/Cell/index.js

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

package/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("../../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>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ColumnLabel: import("../../styled").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     color?: import("../../Typography").TypographyColor | undefined;
     variant?: import("../../Typography").TypographyVariant | undefined;
@@ -23,4 +17,3 @@ export declare const CellContent: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/components/DataGrid/Cell/styles.js

@@ -2,36 +2,71 @@ import { styled } from '../../styled';
 import { Typography } from '../../Typography';
 import { MIN_ROW_HEIGHT } from '../constants';
 import { dataGridRowClassnames } from '../Row/constants';
-import { alignToJustifyContent } from '../utils';
 import { dataGridCellClassnames } from './constants';
-export const Wrapper = styled('div', {
-    shouldForwardProp: (prop) => !['$align', '$isDisabled', '$hasStartAdornment'].includes(prop),
-}) `
+export const Wrapper = styled.div `
   overflow: hidden;
   display: flex;
   align-items: center;
-  justify-content: ${({ $align }) => alignToJustifyContent($align)};
 
   min-height: ${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)};
+  &.${dataGridCellClassnames.disabled} {
+    opacity: 0.5;
+  }
+
+  &.${dataGridCellClassnames.withStartAdornment} {
+    padding: ${({ theme }) => theme.spacing(1, 2, 1, 0)};
+  }
+
+  &.${dataGridCellClassnames.alignLeft} {
+    justify-content: flex-start;
+  }
+
+  &.${dataGridCellClassnames.alignCenter} {
+    justify-content: center;
+  }
+
+  &.${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;
 
     &.${dataGridCellClassnames.isHideOnMobile} {
       display: none;
     }
 
-
     & .${dataGridRowClassnames.checkbox} {
       align-self: flex-start;
       order: 1;
     }
+
+    &.${dataGridCellClassnames.grouped} {
+      margin-top: ${({ theme }) => theme.spacing(1)};
+
+      & .${dataGridCellClassnames.cellContent} {
+        flex-direction: row;
+        gap: ${({ theme }) => theme.spacing(2)};
+        align-items: baseline;
+
+        & .${dataGridCellClassnames.columnLabel} {
+          /* Декоративный разделитель между названием колонки и значением */
+          &::after {
+            content: ':';
+          }
+        }
+      }
+    }
+
+    &:first-of-type {
+      margin-top: 0;
+    }
   }
 `;
 export const ColumnLabel = styled(Typography) `

package/components/DataGrid/DataGrid.js

@@ -26,11 +26,18 @@ const pinnedSectionsCva = cva(dataGridClassnames.pinnedSections, {
 const dataGridCva = cva(dataGridClassnames.root, {
     variants: {
         hasPinnedColumns: {
-            true: dataGridClassnames.dataGridHasPinnedSections,
+            true: dataGridClassnames.hasPinnedSections,
         },
         isAllowHorizontalScroll: {
             true: dataGridClassnames.isAllowHorizontalScroll,
         },
+        gridViewMode: {
+            full: dataGridClassnames.gridViewFull,
+            standard: dataGridClassnames.gridViewStandard,
+        },
+        hasGroupedColumns: {
+            true: dataGridClassnames.hasGroupedColumns,
+        },
     },
 });
 const bodyCva = cva(dataGridClassnames.body, {
@@ -41,7 +48,7 @@ const bodyCva = cva(dataGridClassnames.body, {
     },
 });
 export 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, } = 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, } = useLogic(props);
     const { emptySymbol } = useContext(ConfigContext);
     const { columns, selectedRows = [], minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
@@ -86,5 +93,7 @@ export const DataGrid = (props) => {
     return (_jsx(DataGridContextProvider, { isLoading: isLoading, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: classNames(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
+                gridViewMode,
+                hasGroupedColumns,
             })), children: [renderTableContent(), _jsx(Loader, { ...loaderProps }), footer && footer] }) }));
 };

package/components/DataGrid/Head/Head.js

@@ -1,33 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Checkbox } from '../../Checkbox';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from '../../utils/cva';
 import { dataGridClassnames } from '../constants';
-import { HeadCell } from '../HeadCell';
-import { CheckboxCell, Wrapper } from './styles';
-import { useLogic } from './useLogic';
+import { isGroupColumns } from '../utils';
+import { HeadColumns } from './HeadColumns/HeadColumns';
+import { Wrapper } from './styles';
+const headerCva = cva(dataGridClassnames.header, {
+    variants: {
+        isGroup: {
+            true: dataGridClassnames.hasGroupedColumns,
+        },
+    },
+});
 export const Head = (props) => {
-    const { checkboxProps, handleSort } = useLogic(props);
-    const { columns, gridColumns, isSelectable, sorting, onSelectAllRows, isHideSelectAll, sectionOffset, } = props;
-    const renderColumns = 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 (_jsxs(_Fragment, { children: [showCheckbox && (_jsx(CheckboxCell, { children: _jsx(Checkbox, { ...checkboxProps, onChange: onSelectAllRows }) })), columnHint] }));
-            };
-            return (_jsx(HeadCell, { sorting: sorting, field: field, label: label, isSortable: sortable, align: align, startAdornment: startAdornmentRender(), onSort: handleSort }, label));
-        });
-    }, [
-        columns,
-        sorting,
-        isSelectable,
-        checkboxProps,
-        onSelectAllRows,
-        handleSort,
-    ]);
-    return (_jsx(Wrapper, { role: "heading", className: dataGridClassnames.header, "$gridColumns": gridColumns, children: renderColumns }));
+    const { columns, gridColumns } = props;
+    return (_jsx(Wrapper, { role: "heading", className: headerCva({ isGroup: columns.some(isGroupColumns) }), "$gridColumns": gridColumns, children: _jsx(HeadColumns, { ...props }) }));
 };

package/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/components/DataGrid/Head/HeadColumns/GroupColumns/GroupColumns.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { HeadCell, headCellClassnames } from '../../../HeadCell';
+export const GroupColumns = ({ column, sorting, onSort, gridPosition, startAdornment, }) => (_jsxs(Fragment, { children: [_jsx(HeadCell, { sorting: sorting, label: column.label, onSort: onSort, className: headCellClassnames.groupParent, gridPosition: gridPosition, startAdornment: startAdornment }), column.children.map((child) => (_jsx(HeadCell, { ...child, onSort: onSort, className: headCellClassnames.groupChild, startAdornment: child.columnHint }, child.label)))] }, column.label));

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

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

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

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

package/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/components/DataGrid/Head/HeadColumns/HeadCellStartAdornment/HeadCellStartAdornment.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../../../../Checkbox';
+import { CheckboxCell } from './styles';
+export const HeadCellStartAdornment = ({ showCheckbox, columnHint, checkboxProps, }) => {
+    if (!showCheckbox && !columnHint) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [showCheckbox && (_jsx(CheckboxCell, { children: _jsx(Checkbox, { ...checkboxProps }) })), columnHint] }));
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+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/HeadColumns/HeadCellStartAdornment/styles.js

@@ -0,0 +1,9 @@
+import { styled } from '../../../../styled';
+import { ROOT_ACTION_CELL_WIDTH } from '../../../constants';
+export const CheckboxCell = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${ROOT_ACTION_CELL_WIDTH}px;
+`;

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

@@ -0,0 +1,41 @@
+import { type ChangeEvent } from 'react';
+import { type CellValue, type DataGridColumns, type DataGridRow, type DataGridSort } from '../../types';
+export type HeadColumnsProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    /**
+     * Конфигурация колонок для таблицы
+     */
+    columns: DataGridColumns<TData>[];
+    /**
+     * Если true, то будет отображаться чекбокс для выбора элемента
+     */
+    isSelectable: boolean;
+    /**
+     * Параметры сортируемой колонки
+     */
+    sorting?: DataGridSort<TSortField>;
+    /**
+     * Общее количество строк, доступных для выбора
+     */
+    rowsCount: number;
+    /**
+     * Количество строк, которые не выбраны
+     */
+    uncheckedRowsCount: number;
+    /**
+     * Обработчик выбора всех строк
+     */
+    onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик сортировки
+     */
+    onSort?: (sorting: DataGridSort<TSortField> | undefined) => void;
+    /**
+     * Используется для скрытия чекбокса "Выбрать все"
+     */
+    isHideSelectAll?: boolean;
+    /**
+     * Смещение секции
+     */
+    sectionOffset?: number;
+};
+export declare const HeadColumns: <TData extends Record<string, unknown>, TSortField extends keyof TData>(props: HeadColumnsProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { isGroupColumns } from '../../utils';
+import { GroupColumns } from './GroupColumns';
+import { HeadCellStartAdornment } from './HeadCellStartAdornment';
+import { SingleColumn } from './SingleColumn';
+import { useLogic } from './useLogic';
+import { getHeadCellProps } from './utils';
+export const HeadColumns = (props) => {
+    const { checkboxProps, handleSort, gridPositions } = useLogic(props);
+    const { columns, isSelectable, sorting, isHideSelectAll, sectionOffset } = props;
+    return (_jsx(_Fragment, { children: columns.map((column, index) => {
+            const { label, align, columnHint, field, sortable, showCheckbox } = getHeadCellProps({
+                column,
+                index,
+                sectionOffset,
+                isSelectable,
+                isHideSelectAll,
+            });
+            const startAdornment = showCheckbox || columnHint ? (_jsx(HeadCellStartAdornment, { showCheckbox: showCheckbox, columnHint: columnHint, checkboxProps: checkboxProps })) : undefined;
+            if (isGroupColumns(column)) {
+                const position = gridPositions.get(column.label);
+                return (_jsx(GroupColumns, { column: column, sorting: sorting, onSort: handleSort, gridPosition: position, startAdornment: startAdornment }, column.label));
+            }
+            return (_jsx(SingleColumn, { sorting: sorting, field: field, label: label, isSortable: sortable, align: align, startAdornment: startAdornment, onSort: handleSort }, label));
+        }) }));
+};

package/components/DataGrid/Head/HeadColumns/SingleColumn/SingleColumn.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type CellValue, type DataGridRow, type DataGridSort } from '../../../types';
+type SingleColumnProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = {
+    field?: keyof TData;
+    label?: string;
+    isSortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    sorting?: DataGridSort<TSortField>;
+    onSort: (field: TSortField) => void;
+    startAdornment?: ReactNode;
+};
+export declare const SingleColumn: <TData extends Record<string, unknown>, TSortField extends keyof TData>({ field, label, isSortable, align, sorting, onSort, startAdornment, }: SingleColumnProps<TData, TSortField>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/DataGrid/Head/HeadColumns/SingleColumn/SingleColumn.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeadCell, headCellClassnames } from '../../../HeadCell';
+export const SingleColumn = ({ field, label, isSortable, align, sorting, onSort, startAdornment, }) => (_jsx(HeadCell, { sorting: sorting, field: field, label: label, isSortable: isSortable, align: align, startAdornment: startAdornment, onSort: onSort, className: headCellClassnames.singleColumn }));

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+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/HeadColumns/styles.js

@@ -0,0 +1,9 @@
+import { styled } from '../../../styled';
+import { ROOT_ACTION_CELL_WIDTH } from '../../constants';
+export const CheckboxCell = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${ROOT_ACTION_CELL_WIDTH}px;
+`;

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

@@ -0,0 +1,12 @@
+import { type CSSProperties } from 'react';
+import { type CheckboxProps } from '../../../../Checkbox';
+import { type DataGridRow } from '../../../types';
+import { type HeadColumnsProps } from '../HeadColumns';
+import { type GridPositions } from './utils';
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ columns, onSort, sorting, uncheckedRowsCount, rowsCount, onSelectAllRows, }: HeadColumnsProps<TData, TSortField>) => {
+    checkboxProps: CheckboxProps;
+    handleSort: (field: TSortField) => void;
+    gridPositions: Map<string | keyof TData, GridPositions>;
+    headerCssVars: (position?: GridPositions) => CSSProperties;
+    hasGroupedColumns: boolean;
+};

package/components/DataGrid/Head/HeadColumns/useLogic/useLogic.js

@@ -0,0 +1,46 @@
+import { useCallback, useMemo } from 'react';
+import { isGroupColumns } from '../../../utils';
+import { getGridPositions } from './utils';
+export const useLogic = ({ columns, onSort, sorting, uncheckedRowsCount, rowsCount, onSelectAllRows, }) => {
+    const isChecked = useMemo(() => !uncheckedRowsCount && rowsCount > 0, [uncheckedRowsCount, rowsCount]);
+    const isIndeterminate = useMemo(() => uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount, [uncheckedRowsCount, rowsCount]);
+    const isDisabled = !rowsCount;
+    const checkboxProps = useMemo(() => ({
+        checked: isChecked,
+        disabled: isDisabled,
+        indeterminate: isIndeterminate,
+        onChange: onSelectAllRows,
+    }), [isChecked, isDisabled, isIndeterminate, onSelectAllRows]);
+    const handleSort = useCallback((field) => {
+        if (!onSort) {
+            return;
+        }
+        const isCurrentField = sorting?.fieldId === field;
+        if (isCurrentField && sorting?.sort === 'asc') {
+            return onSort({ fieldId: field, sort: 'desc' });
+        }
+        if (isCurrentField && sorting?.sort === 'desc') {
+            return onSort(undefined);
+        }
+        onSort({ fieldId: field, sort: 'asc' });
+    }, [sorting, onSort]);
+    const gridPositions = useMemo(() => {
+        return getGridPositions(columns);
+    }, [columns]);
+    const headerCssVars = useCallback((position) => {
+        if (!position) {
+            return {};
+        }
+        return {
+            '--grid-column-start': position.start,
+            '--grid-column-end': position.end,
+        };
+    }, []);
+    return {
+        checkboxProps,
+        handleSort,
+        gridPositions,
+        headerCssVars,
+        hasGroupedColumns: columns.some(isGroupColumns),
+    };
+};

package/components/DataGrid/Head/HeadColumns/useLogic/utils/getGridPositions/getGridPositions.d.ts

@@ -0,0 +1,6 @@
+import { type DataGridColumns } from '../../../../../types';
+export type GridPositions = {
+    start: number;
+    end: number;
+};
+export declare const getGridPositions: <TData extends Record<string, unknown>>(columns: DataGridColumns<TData>[]) => Map<string | keyof TData, GridPositions>;

package/components/DataGrid/Head/HeadColumns/useLogic/utils/getGridPositions/getGridPositions.js

@@ -0,0 +1,19 @@
+import { isGroupColumns } from '../../../../../utils';
+export const getGridPositions = (columns) => {
+    const { positionsMap } = columns.reduce((acc, column) => {
+        // Ширина колонки: количество детей для группы или 1 для обычной ячейки
+        const width = isGroupColumns(column) ? column.children.length : 1;
+        const start = acc.currentLine;
+        const end = start + width;
+        const key = isGroupColumns(column)
+            ? column.label
+            : column.field || column.label || '';
+        acc.positionsMap.set(key, { start, end });
+        acc.currentLine = end;
+        return acc;
+    }, {
+        positionsMap: new Map(),
+        currentLine: 1,
+    });
+    return positionsMap;
+};

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

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

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

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

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

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

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

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