@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/node/hooks/features/columns/index.js

@@ -3,64 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "gridColumnDefinitionsSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridColumnDefinitionsSelector;
-  }
-});
-Object.defineProperty(exports, "gridColumnFieldsSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridColumnFieldsSelector;
-  }
-});
-Object.defineProperty(exports, "gridColumnLookupSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridColumnLookupSelector;
-  }
-});
-Object.defineProperty(exports, "gridColumnPositionsSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridColumnPositionsSelector;
-  }
-});
-Object.defineProperty(exports, "gridColumnVisibilityModelSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridColumnVisibilityModelSelector;
-  }
-});
-Object.defineProperty(exports, "gridColumnsTotalWidthSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridColumnsTotalWidthSelector;
-  }
-});
-Object.defineProperty(exports, "gridFilterableColumnDefinitionsSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridFilterableColumnDefinitionsSelector;
-  }
-});
-Object.defineProperty(exports, "gridFilterableColumnLookupSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridFilterableColumnLookupSelector;
-  }
-});
-Object.defineProperty(exports, "gridVisibleColumnDefinitionsSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridVisibleColumnDefinitionsSelector;
-  }
-});
-Object.defineProperty(exports, "gridVisibleColumnFieldsSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridColumnsSelector.gridVisibleColumnFieldsSelector;
-  }
-});
-var _gridColumnsSelector = require("./gridColumnsSelector");
+var _gridColumnsSelector = require("./gridColumnsSelector");
+Object.keys(_gridColumnsSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridColumnsSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridColumnsSelector[key];
+    }
+  });
+});
+var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
+Object.keys(_gridColumnsInterfaces).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridColumnsInterfaces[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridColumnsInterfaces[key];
+    }
+  });
+});

package/node/hooks/features/columns/useGridColumnSpanning.js

@@ -15,66 +15,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const useGridColumnSpanning = apiRef => {
   const lookup = React.useRef({});
-  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
-    const sizes = lookup.current;
-    if (!sizes[rowId]) {
-      sizes[rowId] = {};
-    }
-    sizes[rowId][columnIndex] = cellColSpanInfo;
-  }, []);
-  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
+  const getCellColSpanInfo = (rowId, columnIndex) => {
     return lookup.current[rowId]?.[columnIndex];
-  }, []);
-
-  // Calculate `colSpan` for the cell.
-  const calculateCellColSpan = React.useCallback(params => {
-    const {
-      columnIndex,
-      rowId,
-      minFirstColumnIndex,
-      maxLastColumnIndex,
-      columns
-    } = params;
-    const columnsLength = columns.length;
-    const column = columns[columnIndex];
-    const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
-    if (!colSpan || colSpan === 1) {
-      setCellColSpanInfo(rowId, columnIndex, {
-        spannedByColSpan: false,
-        cellProps: {
-          colSpan: 1,
-          width: column.computedWidth
-        }
-      });
-      return {
-        colSpan: 1
-      };
-    }
-    let width = column.computedWidth;
-    for (let j = 1; j < colSpan; j += 1) {
-      const nextColumnIndex = columnIndex + j;
-      // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
-      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
-        const nextColumn = columns[nextColumnIndex];
-        width += nextColumn.computedWidth;
-        setCellColSpanInfo(rowId, columnIndex + j, {
-          spannedByColSpan: true,
-          rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
-          leftVisibleCellIndex: columnIndex
-        });
-      }
-      setCellColSpanInfo(rowId, columnIndex, {
-        spannedByColSpan: false,
-        cellProps: {
-          colSpan,
-          width
-        }
-      });
-    }
-    return {
-      colSpan
-    };
-  }, [apiRef, setCellColSpanInfo]);
+  };
 
   // Calculate `colSpan` for each cell in the row
   const calculateColSpan = React.useCallback(({
@@ -85,6 +28,8 @@ const useGridColumnSpanning = apiRef => {
   }) => {
     for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
       const cellProps = calculateCellColSpan({
+        apiRef,
+        lookup: lookup.current,
         columnIndex: i,
         rowId,
         minFirstColumnIndex: minFirstColumn,
@@ -95,7 +40,7 @@ const useGridColumnSpanning = apiRef => {
         i += cellProps.colSpan - 1;
       }
     }
-  }, [calculateCellColSpan]);
+  }, [apiRef]);
   const columnSpanningPublicApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
@@ -110,4 +55,60 @@ const useGridColumnSpanning = apiRef => {
   }, []);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnReorderChange);
 };
-exports.useGridColumnSpanning = useGridColumnSpanning;
+exports.useGridColumnSpanning = useGridColumnSpanning;
+function calculateCellColSpan(params) {
+  const {
+    apiRef,
+    lookup,
+    columnIndex,
+    rowId,
+    minFirstColumnIndex,
+    maxLastColumnIndex,
+    columns
+  } = params;
+  const columnsLength = columns.length;
+  const column = columns[columnIndex];
+  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+  if (!colSpan || colSpan === 1) {
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan: 1,
+        width: column.computedWidth
+      }
+    });
+    return {
+      colSpan: 1
+    };
+  }
+  let width = column.computedWidth;
+  for (let j = 1; j < colSpan; j += 1) {
+    const nextColumnIndex = columnIndex + j;
+    // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+    if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+      const nextColumn = columns[nextColumnIndex];
+      width += nextColumn.computedWidth;
+      setCellColSpanInfo(lookup, rowId, columnIndex + j, {
+        spannedByColSpan: true,
+        rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+        leftVisibleCellIndex: columnIndex
+      });
+    }
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan,
+        width
+      }
+    });
+  }
+  return {
+    colSpan
+  };
+}
+function setCellColSpanInfo(lookup, rowId, columnIndex, cellColSpanInfo) {
+  if (!lookup[rowId]) {
+    lookup[rowId] = {};
+  }
+  lookup[rowId][columnIndex] = cellColSpanInfo;
+}

package/node/hooks/features/columns/useGridColumns.js

@@ -13,24 +13,25 @@ var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _pipeProcessing = require("../../core/pipeProcessing");
+var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridColumnsUtils = require("./gridColumnsUtils");
 var _preferencesPanel = require("../preferencesPanel");
-var _colDef = require("../../../colDef");
 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 defaultColumnTypes = (0, _colDef.getGridDefaultColumnTypes)();
 const columnsStateInitializer = (state, props, apiRef) => {
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
     apiRef,
-    columnTypes: defaultColumnTypes,
     columnsToUpsert: props.columns,
     initialState: props.initialState?.columns,
     columnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
     keepOnlyColumnsToUpsert: true
   });
   return (0, _extends2.default)({}, state, {
-    columns: columnsState
+    columns: columnsState,
+    // In pro/premium, this part of the state is defined. We give it an empty but defined value
+    // for the community version.
+    pinnedColumns: state.pinnedColumns ?? _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS
   });
 };
 
@@ -42,9 +43,7 @@ const columnsStateInitializer = (state, props, apiRef) => {
 exports.columnsStateInitializer = columnsStateInitializer;
 function useGridColumns(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
-  const columnTypes = defaultColumnTypes;
   const previousColumnsProp = React.useRef(props.columns);
-  const previousColumnTypesProp = React.useRef(columnTypes);
   apiRef.current.registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -54,9 +53,9 @@ function useGridColumns(apiRef, props) {
   });
   const setGridColumnsState = React.useCallback(columnsState => {
     logger.debug('Updating columns state.');
-    apiRef.current.setState((0, _gridColumnsUtils.mergeColumnsState)(columnsState));
-    apiRef.current.forceUpdate();
+    apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
   /**
@@ -79,7 +78,6 @@ function useGridColumns(apiRef, props) {
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         columns: (0, _gridColumnsUtils.createColumnsState)({
           apiRef,
-          columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
           columnVisibilityModel: model,
@@ -88,17 +86,16 @@ function useGridColumns(apiRef, props) {
       }));
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, columnTypes]);
+  }, [apiRef]);
   const updateColumns = React.useCallback(columns => {
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
-      columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, setGridColumnsState, columnTypes]);
+  }, [apiRef, setGridColumnsState]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
     const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
     const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
@@ -145,7 +142,7 @@ function useGridColumns(apiRef, props) {
       lookup: (0, _extends2.default)({}, columnsState.lookup, {
         [field]: newColumn
       })
-    }), apiRef.current.getRootDimensions()?.viewportInnerSize.width ?? 0));
+    }), apiRef.current.getRootDimensions().viewportInnerSize.width));
     apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
@@ -220,18 +217,17 @@ function useGridColumns(apiRef, props) {
     }
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
-      columnTypes,
       columnsToUpsert: [],
       initialState,
       columnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
-    apiRef.current.setState((0, _gridColumnsUtils.mergeColumnsState)(columnsState));
+    apiRef.current.setState(mergeColumnsState(columnsState));
     if (initialState != null) {
       apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
     }
     return params;
-  }, [apiRef, columnTypes]);
+  }, [apiRef]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === _preferencesPanel.GridPreferencePanelsValue.columns) {
       const ColumnsPanel = props.slots.columnsPanel;
@@ -269,13 +265,12 @@ function useGridColumns(apiRef, props) {
     logger.info(`Columns pipe processing have changed, regenerating the columns`);
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
-      columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
-  }, [apiRef, logger, setGridColumnsState, columnTypes]);
+  }, [apiRef, logger, setGridColumnsState]);
   (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'hydrateColumns', hydrateColumns);
 
   /**
@@ -290,24 +285,27 @@ function useGridColumns(apiRef, props) {
       return;
     }
     logger.info(`GridColumns have changed, new length ${props.columns.length}`);
-    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+    if (previousColumnsProp.current === props.columns) {
       return;
     }
     const columnsState = (0, _gridColumnsUtils.createColumnsState)({
       apiRef,
-      columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });
     previousColumnsProp.current = props.columns;
-    previousColumnTypesProp.current = columnTypes;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
+  }, [logger, apiRef, setGridColumnsState, props.columns]);
   React.useEffect(() => {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
     }
   }, [apiRef, logger, props.columnVisibilityModel]);
+}
+function mergeColumnsState(columnsState) {
+  return state => (0, _extends2.default)({}, state, {
+    columns: columnsState
+  });
 }

package/node/hooks/features/dimensions/gridDimensionsSelectors.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridDimensionsSelector = void 0;
+const gridDimensionsSelector = state => state.dimensions;
+exports.gridDimensionsSelector = gridDimensionsSelector;

package/node/hooks/features/dimensions/index.js

@@ -2,4 +2,15 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
+});
+var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
+Object.keys(_gridDimensionsSelectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridDimensionsSelectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridDimensionsSelectors[key];
+    }
+  });
 });