@mui/x-data-grid 7.0.0-beta.6 → 7.0.0-beta.7

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled, useTheme } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -13,16 +12,11 @@ import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
+import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
+import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const SpaceFiller = styled('div')({
-  /* GridRootStyles conflict */
-  '&&&': {
-    padding: 0,
-    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
-  }
-});
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
@@ -33,7 +27,6 @@ export const GridColumnHeaderRow = styled('div', {
 });
 export const useGridColumnHeaders = props => {
   const {
-    innerRef: innerRefProp,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
@@ -53,20 +46,30 @@ export const useGridColumnHeaders = props => {
   const theme = useTheme();
   const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  const innerRef = React.useRef(null);
-  const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   React.useEffect(() => {
-    apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
   }, [apiRef]);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
   const handleColumnReorderStop = React.useCallback(() => setDragCol(''), []);
+  const leftRenderContext = React.useMemo(() => {
+    return pinnedColumns.left.length ? {
+      firstColumnIndex: 0,
+      lastColumnIndex: pinnedColumns.left.length
+    } : null;
+  }, [pinnedColumns.left.length]);
+  const rightRenderContext = React.useMemo(() => {
+    return pinnedColumns.right.length ? {
+      firstColumnIndex: visibleColumns.length - pinnedColumns.right.length,
+      lastColumnIndex: visibleColumns.length
+    } : null;
+  }, [pinnedColumns.right.length, visibleColumns.length]);
   useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
   useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
@@ -99,8 +102,9 @@ export const useGridColumnHeaders = props => {
         style: {
           width: leftOffsetWidth
         }
-      }), children, isNotPinned && /*#__PURE__*/_jsx(SpaceFiller, {
-        className: gridClasses.columnHeader
+      }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        className: gridClasses.filler
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
         borderTop: borderTop,
@@ -108,6 +112,27 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  const getCellOffsetStyle = ({
+    pinnedPosition,
+    columnIndex,
+    computedWidth
+  }) => {
+    let style;
+    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
+      if (pinnedPosition === 'left') {
+        style = {
+          left: pinnedOffset
+        };
+      }
+      if (pinnedPosition === 'right') {
+        style = {
+          right: pinnedOffset
+        };
+      }
+    }
+    return style;
+  };
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -121,6 +146,12 @@ export const useGridColumnHeaders = props => {
       const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasOtherElementInTabSequence ? 0 : -1;
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
+      const pinnedPosition = params == null ? void 0 : params.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: colDef.computedWidth
+      });
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -130,120 +161,176 @@ export const useGridColumnHeaders = props => {
         colIndex: columnIndex,
         isResizing: resizeCol === colDef.field,
         hasFocus: hasFocus,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: i,
+        sectionLength: renderedColumns.length
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+    return getFillers(params, columns, 0);
+  };
+  const getColumnHeadersRow = () => {
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
-      children: getFillers(params, columns, 0)
+      children: [leftRenderContext && getColumnHeaders({
+        position: GridPinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true
+      }), getColumnHeaders({
+        renderContext,
+        minFirstColumn: pinnedColumns.left.length,
+        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+      }), rightRenderContext && getColumnHeaders({
+        position: GridPinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true,
+        separatorSide: GridColumnHeaderSeparatorSides.Left
+      })]
     });
   };
-  const getColumnGroupHeaders = params => {
-    if (headerGroupingMaxDepth === 0) {
-      return null;
-    }
+  const getColumnGroupHeaders = ({
+    depth,
+    params
+  }) => {
+    var _apiRef$current$getCo, _apiRef$current$getCo2;
     const columnsToRender = getColumnsToRender(params);
     if (columnsToRender.renderedColumns.length === 0) {
       return null;
     }
     const {
+      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
-    const columns = [];
-    const headerToRender = [];
-    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      var _apiRef$current$getCo, _apiRef$current$getCo2;
-      const rowStructure = columnGroupsHeaderStructure[depth];
-      const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      const firstGroupToRender = (_apiRef$current$getCo = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo : null;
-      const firstGroupIndex = rowStructure.findIndex(({
-        groupId,
-        columnFields
-      }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
-      const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      const lastGroupToRender = (_apiRef$current$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
-      const lastGroupIndex = rowStructure.findIndex(({
-        groupId,
-        columnFields
-      }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
-      const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
-        return _extends({}, groupStructure, {
-          columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
-        });
-      }).filter(groupStructure => groupStructure.columnFields.length > 0);
-      const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
-      const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
-      const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
-        var _column$computedWidth;
-        const column = apiRef.current.getColumn(field);
-        return acc + ((_column$computedWidth = column.computedWidth) != null ? _column$computedWidth : 0);
-      }, 0);
-      let columnIndex = firstColumnToRender;
-      const elements = visibleColumnGroupHeader.map(({
-        groupId,
-        columnFields
-      }) => {
-        const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
-        const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
-        const headerInfo = {
-          groupId,
-          width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
-          fields: columnFields,
-          colIndex: columnIndex,
-          hasFocus,
-          tabIndex
-        };
-        columnIndex += columnFields.length;
-        return headerInfo;
-      });
-      headerToRender.push({
-        leftOverflow,
-        elements
+    const rowStructure = columnGroupsHeaderStructure[depth];
+    const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
+    const firstGroupToRender = (_apiRef$current$getCo = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo : null;
+    const firstGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
+    const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
+    const lastGroupToRender = (_apiRef$current$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
+    const lastGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
+    const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
+      return _extends({}, groupStructure, {
+        columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
       });
-    }
-    headerToRender.forEach((depthInfo, depthIndex) => {
-      const children = depthInfo.elements.map(({
+    }).filter(groupStructure => groupStructure.columnFields.length > 0);
+    const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
+    const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
+    const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
+      var _column$computedWidth;
+      const column = apiRef.current.getColumn(field);
+      return acc + ((_column$computedWidth = column.computedWidth) != null ? _column$computedWidth : 0);
+    }, 0);
+    let columnIndex = firstColumnToRender;
+    const children = visibleColumnGroupHeader.map(({
+      groupId,
+      columnFields
+    }, index) => {
+      const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
+      const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
+      const headerInfo = {
         groupId,
-        width,
-        fields,
-        colIndex,
+        width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
+        fields: columnFields,
+        colIndex: columnIndex,
         hasFocus,
         tabIndex
-      }, groupIndex) => {
-        return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
-          groupId: groupId,
-          width: width,
-          fields: fields,
-          colIndex: colIndex,
-          depth: depthIndex,
-          isLastColumn: colIndex === visibleColumns.length - fields.length,
-          maxDepth: headerToRender.length,
-          height: dimensions.headerHeight,
-          hasFocus: hasFocus,
-          tabIndex: tabIndex
-        }, groupIndex);
+      };
+      const pinnedPosition = params.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: headerInfo.width
       });
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+      columnIndex += columnFields.length;
+      let indexInSection = index;
+      if (pinnedPosition === 'left') {
+        // Group headers can expand to multiple columns, we need to adjust the index
+        indexInSection = columnIndex - 1;
+      }
+      return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+        groupId: groupId,
+        width: headerInfo.width,
+        fields: headerInfo.fields,
+        colIndex: headerInfo.colIndex,
+        depth: depth,
+        isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
+        maxDepth: headerGroupingMaxDepth,
+        height: dimensions.headerHeight,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        style: style,
+        indexInSection: indexInSection,
+        sectionLength: renderedColumns.length
+      }, index);
+    });
+    return getFillers(params, children, leftOverflow);
+  };
+  const getColumnGroupHeadersRows = () => {
+    if (headerGroupingMaxDepth === 0) {
+      return null;
+    }
+    const headerRows = [];
+    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
+      headerRows.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
-        "aria-rowindex": depthIndex + 1,
+        "aria-rowindex": depth + 1,
         ownerState: rootProps,
-        children: getFillers(params, children, depthInfo.leftOverflow)
-      }, depthIndex));
-    });
-    return columns;
+        children: [leftRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: GridPinnedColumnPosition.LEFT,
+            renderContext: leftRenderContext,
+            minFirstColumn: leftRenderContext.firstColumnIndex,
+            maxLastColumn: leftRenderContext.lastColumnIndex
+          }
+        }), getColumnGroupHeaders({
+          depth,
+          params: {
+            renderContext
+          }
+        }), rightRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: GridPinnedColumnPosition.RIGHT,
+            renderContext: rightRenderContext,
+            minFirstColumn: rightRenderContext.firstColumnIndex,
+            maxLastColumn: rightRenderContext.lastColumnIndex
+          }
+        })]
+      }, depth));
+    }
+    return headerRows;
   };
   return {
     renderContext,
+    leftRenderContext,
+    rightRenderContext,
+    pinnedColumns,
+    visibleColumns,
+    getCellOffsetStyle,
     getFillers,
-    getColumnHeaders,
+    getColumnHeadersRow,
     getColumnsToRender,
-    getColumnGroupHeaders,
+    getColumnGroupHeadersRows,
     isDragging: !!dragCol,
     getInnerProps: () => ({
-      ref: handleInnerRef,
       role: 'rowgroup'
     })
   };

package/hooks/features/columnResize/columnResizeSelector.d.ts

@@ -0,0 +1,3 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+export declare const gridColumnResizeSelector: (state: GridStateCommunity) => import("./columnResizeState").GridColumnResizeState;
+export declare const gridResizingColumnFieldSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;

package/hooks/features/columnResize/columnResizeSelector.js

@@ -0,0 +1,3 @@
+import { createSelector } from '../../../utils/createSelector';
+export const gridColumnResizeSelector = state => state.columnResize;
+export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/hooks/features/columnResize/columnResizeState.d.ts

@@ -0,0 +1,3 @@
+export interface GridColumnResizeState {
+    resizingColumnField: string;
+}

package/hooks/features/columnResize/columnResizeState.js

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

package/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -0,0 +1,44 @@
+import type { GridColDef } from '../../../models/colDef/gridColDef';
+export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
+    includeHeaders: boolean;
+    includeOutliers: boolean;
+    outliersFactor: number;
+    expand: boolean;
+};
+export type GridAutosizeOptions = {
+    /**
+     * The columns to autosize. By default, applies to all columns.
+     */
+    columns?: GridColDef['field'][];
+    /**
+     * If true, include the header widths in the calculation.
+     * @default false
+     */
+    includeHeaders?: boolean;
+    /**
+     * If true, width outliers will be ignored.
+     * @default false
+     */
+    includeOutliers?: boolean;
+    /**
+     * The IQR factor range to detect outliers.
+     * @default 1.5
+     */
+    outliersFactor?: number;
+    /**
+     * If the total width is less than the available width, expand columns to fill it.
+     * @default false
+     */
+    expand?: boolean;
+};
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */
+export interface GridColumnResizeApi {
+    /**
+     * Auto-size the columns of the grid based on the cells' content and the space available.
+     * @param {GridAutosizeOptions} options The autosizing options
+     * @returns {Promise} A promise that resolves when autosizing is completed
+     */
+    autosizeColumns: (options?: GridAutosizeOptions) => Promise<void>;
+}

package/hooks/features/columnResize/gridColumnResizeApi.js

@@ -0,0 +1,10 @@
+export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
+  includeHeaders: true,
+  includeOutliers: false,
+  outliersFactor: 1.5,
+  expand: false
+};
+
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */

package/hooks/features/columnResize/index.d.ts

@@ -0,0 +1,3 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';
+export * from './gridColumnResizeApi';

package/hooks/features/columnResize/index.js

@@ -0,0 +1,3 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';
+export * from './gridColumnResizeApi';

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+export declare const columnResizeStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'autosizeOptions' | 'autosizeOnMount' | 'disableAutosize' | 'onColumnResize' | 'onColumnWidthChange'>) => void;