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

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridColumnHeaders = exports.GridColumnHeaderRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _utils2 = require("../../utils");
+var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -20,17 +19,12 @@ var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller"
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 var _columns = require("../columns");
 var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
+var _getPinnedCellOffset = require("../../../internals/utils/getPinnedCellOffset");
+var _GridColumnHeaderSeparator = require("../../../components/columnHeaders/GridColumnHeaderSeparator");
 var _gridClasses = require("../../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const SpaceFiller = (0, _styles.styled)('div')({
-  /* GridRootStyles conflict */
-  '&&&': {
-    padding: 0,
-    width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
-  }
-});
 const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
@@ -41,7 +35,6 @@ const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('d
 });
 const useGridColumnHeaders = props => {
   const {
-    innerRef: innerRefProp,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
@@ -60,21 +53,31 @@ const useGridColumnHeaders = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const theme = (0, _styles.useTheme)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const hasVirtualization = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
-  const innerRef = React.useRef(null);
-  const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
-  const dimensions = (0, _utils2.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const columnPositions = (0, _utils2.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
-  const renderContext = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
-  const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
+  const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
+  const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
+  const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
+  const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const offsetLeft = (0, _useGridVirtualScroller.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]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStart', handleColumnResizeStart);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStop', handleColumnResizeStop);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
@@ -107,8 +110,9 @@ const useGridColumnHeaders = props => {
         style: {
           width: leftOffsetWidth
         }
-      }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceFiller, {
-        className: _gridClasses.gridClasses.columnHeader
+      }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "presentation",
+        className: _gridClasses.gridClasses.filler
       }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
         header: true,
         borderTop: borderTop,
@@ -116,6 +120,27 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  const getCellOffsetStyle = ({
+    pinnedPosition,
+    columnIndex,
+    computedWidth
+  }) => {
+    let style;
+    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+      const pinnedOffset = (0, _getPinnedCellOffset.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,
@@ -129,6 +154,12 @@ 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?.position;
+      const style = getCellOffsetStyle({
+        pinnedPosition,
+        columnIndex,
+        computedWidth: colDef.computedWidth
+      });
       columns.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -138,118 +169,174 @@ 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__*/(0, _jsxRuntime.jsx)(GridColumnHeaderRow, {
+    return getFillers(params, columns, 0);
+  };
+  const getColumnHeadersRow = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
-      children: getFillers(params, columns, 0)
+      children: [leftRenderContext && getColumnHeaders({
+        position: _columns.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: _columns.GridPinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }, {
+        disableReorder: true,
+        separatorSide: _GridColumnHeaderSeparator.GridColumnHeaderSeparatorSides.Left
+      })]
     });
   };
-  const getColumnGroupHeaders = params => {
-    if (headerGroupingMaxDepth === 0) {
-      return null;
-    }
+  const getColumnGroupHeaders = ({
+    depth,
+    params
+  }) => {
     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) {
-      const rowStructure = columnGroupsHeaderStructure[depth];
-      const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-      const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
-      const firstGroupIndex = rowStructure.findIndex(({
-        groupId,
-        columnFields
-      }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
-      const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-      const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
-      const lastGroupIndex = rowStructure.findIndex(({
-        groupId,
-        columnFields
-      }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
-      const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
-        return (0, _extends2.default)({}, 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) => {
-        const column = apiRef.current.getColumn(field);
-        return acc + (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.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
+    const firstGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
+    const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
+    const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
+    const lastGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
+    const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
+      return (0, _extends2.default)({}, 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) => {
+      const column = apiRef.current.getColumn(field);
+      return acc + (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__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.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__*/(0, _jsxRuntime.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: _columns.GridPinnedColumnPosition.LEFT,
+            renderContext: leftRenderContext,
+            minFirstColumn: leftRenderContext.firstColumnIndex,
+            maxLastColumn: leftRenderContext.lastColumnIndex
+          }
+        }), getColumnGroupHeaders({
+          depth,
+          params: {
+            renderContext
+          }
+        }), rightRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: _columns.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/node/hooks/features/columnResize/columnResizeSelector.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridResizingColumnFieldSelector = exports.gridColumnResizeSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+const gridColumnResizeSelector = state => state.columnResize;
+exports.gridColumnResizeSelector = gridColumnResizeSelector;
+const gridResizingColumnFieldSelector = exports.gridResizingColumnFieldSelector = (0, _createSelector.createSelector)(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/node/hooks/features/columnResize/columnResizeState.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/hooks/features/columnResize/gridColumnResizeApi.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_GRID_AUTOSIZE_OPTIONS = void 0;
+const DEFAULT_GRID_AUTOSIZE_OPTIONS = exports.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/node/hooks/features/columnResize/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _columnResizeSelector = require("./columnResizeSelector");
+Object.keys(_columnResizeSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnResizeSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnResizeSelector[key];
+    }
+  });
+});
+var _columnResizeState = require("./columnResizeState");
+Object.keys(_columnResizeState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnResizeState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnResizeState[key];
+    }
+  });
+});
+var _gridColumnResizeApi = require("./gridColumnResizeApi");
+Object.keys(_gridColumnResizeApi).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridColumnResizeApi[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridColumnResizeApi[key];
+    }
+  });
+});