@astral/ui 4.62.2 → 4.64.0

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadColumns = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../utils");
+const GroupColumns_1 = require("./GroupColumns");
+const HeadCellStartAdornment_1 = require("./HeadCellStartAdornment");
+const SingleColumn_1 = require("./SingleColumn");
+const useLogic_1 = require("./useLogic");
+const utils_2 = require("./utils");
+const HeadColumns = (props) => {
+    const { checkboxProps, handleSort, gridPositions } = (0, useLogic_1.useLogic)(props);
+    const { columns, isSelectable, sorting, isHideSelectAll, sectionOffset } = props;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: columns.map((column, index) => {
+            const { label, align, columnHint, field, sortable, showCheckbox } = (0, utils_2.getHeadCellProps)({
+                column,
+                index,
+                sectionOffset,
+                isSelectable,
+                isHideSelectAll,
+            });
+            const startAdornment = showCheckbox || columnHint ? ((0, jsx_runtime_1.jsx)(HeadCellStartAdornment_1.HeadCellStartAdornment, { showCheckbox: showCheckbox, columnHint: columnHint, checkboxProps: checkboxProps })) : undefined;
+            if ((0, utils_1.isGroupColumns)(column)) {
+                const position = gridPositions.get(column.label);
+                return ((0, jsx_runtime_1.jsx)(GroupColumns_1.GroupColumns, { column: column, sorting: sorting, onSort: handleSort, gridPosition: position, startAdornment: startAdornment }, column.label));
+            }
+            return ((0, jsx_runtime_1.jsx)(SingleColumn_1.SingleColumn, { sorting: sorting, field: field, label: label, isSortable: sortable, align: align, startAdornment: startAdornment, onSort: handleSort }, label));
+        }) }));
+};
+exports.HeadColumns = HeadColumns;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleColumn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HeadCell_1 = require("../../../HeadCell");
+const SingleColumn = ({ field, label, isSortable, align, sorting, onSort, startAdornment, }) => ((0, jsx_runtime_1.jsx)(HeadCell_1.HeadCell, { sorting: sorting, field: field, label: label, isSortable: isSortable, align: align, startAdornment: startAdornment, onSort: onSort, className: HeadCell_1.headCellClassnames.singleColumn }));
+exports.SingleColumn = SingleColumn;

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

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

package/node/components/DataGrid/Head/HeadColumns/SingleColumn/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("./SingleColumn"), exports);

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

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

package/node/components/DataGrid/Head/HeadColumns/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("./HeadColumns"), exports);

package/node/components/DataGrid/Head/HeadColumns/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/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;
+`;

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

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

package/node/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/node/components/DataGrid/Head/{useLogic → HeadColumns/useLogic}/useLogic.js

@@ -2,33 +2,49 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const useLogic = ({ rowsCount, sorting, uncheckedRowsCount, onSort, }) => {
+const utils_1 = require("../../../utils");
+const utils_2 = require("./utils");
+const useLogic = ({ columns, onSort, sorting, uncheckedRowsCount, rowsCount, onSelectAllRows, }) => {
     const isChecked = (0, react_1.useMemo)(() => !uncheckedRowsCount && rowsCount > 0, [uncheckedRowsCount, rowsCount]);
     const isIndeterminate = (0, react_1.useMemo)(() => uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount, [uncheckedRowsCount, rowsCount]);
     const isDisabled = !rowsCount;
+    const checkboxProps = (0, react_1.useMemo)(() => ({
+        checked: isChecked,
+        disabled: isDisabled,
+        indeterminate: isIndeterminate,
+        onChange: onSelectAllRows,
+    }), [isChecked, isDisabled, isIndeterminate, onSelectAllRows]);
     const handleSort = (0, react_1.useCallback)((field) => {
         if (!onSort) {
             return;
         }
         const isCurrentField = sorting?.fieldId === field;
-        // если для выбранного столбца текущая сортировка ASC - меняем на DESC
         if (isCurrentField && sorting?.sort === 'asc') {
             return onSort({ fieldId: field, sort: 'desc' });
         }
-        // если для выбранного столбца текущая сортировка DESC - убираем сортировку
         if (isCurrentField && sorting?.sort === 'desc') {
             return onSort(undefined);
         }
-        // если для выбранного столбца нет сортировки - добавляем сортировку ASC
         onSort({ fieldId: field, sort: 'asc' });
     }, [sorting, onSort]);
+    const gridPositions = (0, react_1.useMemo)(() => {
+        return (0, utils_2.getGridPositions)(columns);
+    }, [columns]);
+    const headerCssVars = (0, react_1.useCallback)((position) => {
+        if (!position) {
+            return {};
+        }
+        return {
+            '--grid-column-start': position.start,
+            '--grid-column-end': position.end,
+        };
+    }, []);
     return {
+        checkboxProps,
         handleSort,
-        checkboxProps: {
-            checked: isChecked,
-            disabled: isDisabled,
-            indeterminate: isIndeterminate,
-        },
+        gridPositions,
+        headerCssVars,
+        hasGroupedColumns: columns.some(utils_1.isGroupColumns),
     };
 };
 exports.useLogic = useLogic;

package/node/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/node/components/DataGrid/Head/HeadColumns/useLogic/utils/getGridPositions/getGridPositions.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridPositions = void 0;
+const utils_1 = require("../../../../../utils");
+const getGridPositions = (columns) => {
+    const { positionsMap } = columns.reduce((acc, column) => {
+        // Ширина колонки: количество детей для группы или 1 для обычной ячейки
+        const width = (0, utils_1.isGroupColumns)(column) ? column.children.length : 1;
+        const start = acc.currentLine;
+        const end = start + width;
+        const key = (0, utils_1.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;
+};
+exports.getGridPositions = getGridPositions;

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

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

package/node/components/DataGrid/Head/HeadColumns/useLogic/utils/getGridPositions/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("./getGridPositions"), exports);

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

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

package/node/components/DataGrid/Head/HeadColumns/useLogic/utils/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("./getGridPositions"), exports);

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHeadCellProps = void 0;
+const utils_1 = require("../../../utils");
+const getHeadCellProps = ({ column, index, sectionOffset, isSelectable, isHideSelectAll, }) => {
+    const { label, align, columnHint } = column;
+    const field = (0, utils_1.isGroupColumns)(column) ? undefined : column.field;
+    const sortable = (0, utils_1.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,
+    };
+};
+exports.getHeadCellProps = getHeadCellProps;

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

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

package/node/components/DataGrid/Head/HeadColumns/utils/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("./getHeadCellProps"), exports);

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

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxCell = exports.Wrapper = void 0;
+exports.Wrapper = void 0;
+const scrollbar_1 = require("../../constants/scrollbar");
 const styled_1 = require("../../styled");
-const constants_1 = require("../constants");
 exports.Wrapper = (0, styled_1.styled)('header', {
     shouldForwardProp: (prop) => !['$gridColumns'].includes(prop),
 }) `
@@ -11,6 +11,7 @@ exports.Wrapper = (0, styled_1.styled)('header', {
 
   width: fit-content;
   min-width: 100%;
+  padding-right: ${scrollbar_1.SCROLLBAR_SIZE};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
@@ -18,10 +19,3 @@ exports.Wrapper = (0, styled_1.styled)('header', {
     display: none;
   }
 `;
-exports.CheckboxCell = styled_1.styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
-`;

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

@@ -7,11 +7,29 @@ const SortDownFillSm_1 = require("../../../icons/SortDownFillSm");
 const SortFillSm_1 = require("../../../icons/SortFillSm");
 const SortUpFillSm_1 = require("../../../icons/SortUpFillSm");
 const OverflowTypography_1 = require("../../OverflowTypography");
+const classNames_1 = require("../../utils/classNames");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const headCellCva = (0, cva_1.cva)(constants_1.headCellClassnames.root, {
+    variants: {
+        isSortable: {
+            true: constants_1.headCellClassnames.sortable,
+        },
+        align: {
+            left: constants_1.headCellClassnames.alignLeft,
+            center: constants_1.headCellClassnames.alignCenter,
+            right: constants_1.headCellClassnames.alignRight,
+        },
+        hasStartAdornment: {
+            true: constants_1.headCellClassnames.hasStartAdornment,
+        },
+    },
+});
 const HeadCell = (props) => {
-    const { wrapperProps } = (0, useLogic_1.useLogic)(props);
-    const { startAdornment, field, isSortable, align, label, sorting } = props;
+    const { hasStartAdornment, handleSortClick, headCellCssVars } = (0, useLogic_1.useLogic)(props);
+    const { startAdornment, field, isSortable, align, label, sorting, className, } = props;
     const sortIcon = (0, react_1.useMemo)(() => {
         if (!isSortable) {
             return null;
@@ -28,6 +46,6 @@ const HeadCell = (props) => {
                 return (0, jsx_runtime_1.jsx)(SortFillSm_1.SortFillSm, {});
         }
     }, [sorting, isSortable, field]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$align": align, "$isSortable": isSortable, ...wrapperProps, children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, variant: "pointer", component: "p", children: label }), sortIcon] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleSortClick, className: (0, classNames_1.classNames)(className, headCellCva({ isSortable, align, hasStartAdornment })), style: headCellCssVars, children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, variant: "pointer", component: "p", children: label }), sortIcon] }));
 };
 exports.HeadCell = HeadCell;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headCellClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.headCellClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell'),
+    groupParent: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell_group-parent'),
+    groupChild: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell_group-child'),
+    singleColumn: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell_single-column'),
+    alignLeft: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell_align-left'),
+    alignCenter: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell_align-center'),
+    alignRight: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell_align-right'),
+    hasStartAdornment: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell_has-start-adornment'),
+    sortable: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__head-cell_sortable'),
+};

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

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

package/node/components/DataGrid/HeadCell/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.headCellClassnames = void 0;
 __exportStar(require("./HeadCell"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "headCellClassnames", { enumerable: true, get: function () { return constants_1.headCellClassnames; } });

package/node/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("@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>, {}>;
-export {};
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -3,20 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 const HintIcon_1 = require("../../HintIcon");
 const styled_1 = require("../../styled");
-const utils_1 = require("../utils");
-exports.Wrapper = (0, styled_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$align', '$isSortable', '$hasStartAdornment'].includes(prop),
-}) `
-  cursor: ${({ $isSortable }) => ($isSortable ? 'pointer' : 'initial')};
+const constants_1 = require("./constants");
+exports.Wrapper = styled_1.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 }) => (0, utils_1.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]};
 
@@ -25,6 +26,22 @@ exports.Wrapper = (0, styled_1.styled)('div', {
     height: 16px;
   }
 
+  &.${constants_1.headCellClassnames.sortable} {
+    cursor: pointer;
+  }
+
+  &.${constants_1.headCellClassnames.hasStartAdornment} {
+    padding: ${({ theme }) => theme.spacing(1, 2, 1, 0)};
+  }
+
+  &.${constants_1.headCellClassnames.alignCenter} {
+    justify-content: center;
+  }
+
+  &.${constants_1.headCellClassnames.alignRight} {
+    justify-content: flex-end;
+  }
+
   .${HintIcon_1.hintIconClassnames.iconWrapper}  {
     margin-right: ${({ theme }) => theme.spacing(1)};
   }

package/node/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/node/components/DataGrid/HeadCell/useLogic/useLogic.js

@@ -1,18 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
-const useLogic = ({ field, isSortable, startAdornment, onSort, }) => {
+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,
     };
 };
 exports.useLogic = useLogic;