@mui/x-data-grid 8.0.0-alpha.3 → 8.0.0-alpha.4

package/node/components/panel/GridPanelFooter.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -26,16 +26,17 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridPanelFooterRoot = (0, _system.styled)('div', {
+const GridPanelFooterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelFooter',
   overridesResolver: (props, styles) => styles.panelFooter
 })(({
   theme
 }) => ({
-  padding: theme.spacing(0.5),
+  padding: theme.spacing(1),
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  borderTop: `1px solid ${theme.palette.divider}`
 }));
 function GridPanelFooter(props) {
   const {

package/node/components/panel/filterPanel/GridFilterForm.js

@@ -47,27 +47,22 @@ const GridFilterFormRoot = (0, _styles.styled)('div', {
   theme
 }) => ({
   display: 'flex',
-  padding: theme.spacing(1)
+  gap: theme.spacing(1.5)
 }));
 const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
-})(({
-  theme
-}) => ({
+})({
   flexShrink: 0,
-  justifyContent: 'flex-end',
-  marginRight: theme.spacing(0.5),
-  marginBottom: theme.spacing(0.2)
-}));
+  justifyContent: 'center'
+});
 const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
 })({
-  minWidth: 55,
-  marginRight: 5,
+  minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = (0, _styles.styled)('div', {
@@ -269,7 +264,6 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
     ownerState: rootProps
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
-      variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, deleteIconProps, {
       className: (0, _clsx.default)(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
@@ -286,7 +280,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         })
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormLogicOperatorInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
       sx: [hasLogicOperatorColumn ? {
@@ -316,7 +311,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormColumnInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, columnInputProps, {
       className: (0, _clsx.default)(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
@@ -341,7 +337,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterFormOperatorInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, operatorInputProps, {
       className: (0, _clsx.default)(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
@@ -367,12 +364,15 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
       }))]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
-      variant: "standard",
+      variant: "outlined",
+      size: "small",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
       ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({
+        variant: "outlined",
+        size: "small",
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,

package/node/constants/dataGridPropsDefaultValues.js

@@ -54,11 +54,11 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   rows: [],
   rowSelection: true,
   rowSpacingType: 'margin',
+  rowSpanning: false,
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false,
   virtualizeColumnsWithAutoRowHeight: false
 };

package/node/hooks/core/useGridStateInitialization.js

@@ -32,8 +32,8 @@ const useGridStateInitialization = apiRef => {
     const updatedControlStateIds = [];
     Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
-      const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
-      const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const oldSubState = controlState.stateSelector(apiRef.current.state, undefined, apiRef.current.instanceId);
+      const newSubState = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
@@ -65,7 +65,7 @@ const useGridStateInitialization = apiRef => {
         hasPropChanged
       } = updatedControlStateIds[0];
       const controlState = controlStateMapRef.current[stateId];
-      const model = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const model = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,

package/node/hooks/features/filter/useGridFilter.js

@@ -68,7 +68,7 @@ const useGridFilter = (apiRef, props) => {
   });
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
-      const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
+      const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, undefined, apiRef.current.instanceId);
       const filterState = apiRef.current.getFilterState(filterModel);
       const newState = (0, _extends2.default)({}, state, {
         filter: (0, _extends2.default)({}, state.filter, filterState)

package/node/hooks/features/overlays/useGridOverlays.js

@@ -13,6 +13,7 @@ var _useGridApiContext = require("../../utils/useGridApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _filter = require("../filter");
 var _rows = require("../rows");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _GridOverlays = require("../../../components/base/GridOverlays");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -24,7 +25,8 @@ const useGridOverlays = () => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalRowCount = (0, _utils.useGridSelector)(apiRef, _rows.gridRowCountSelector);
   const visibleRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = (0, _utils.useGridSelector)(apiRef, _rows.gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -322,11 +322,12 @@ const useGridRowSelection = (apiRef, props) => {
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !(0, _keyboardUtils.isKeyboardEvent)(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
-    const isSelected = apiRef.current.isRowSelected(id);
-    if (resetSelection) {
-      apiRef.current.selectRow(id, !isMultipleSelectionDisabled ? !isSelected : true, true);
+    const selectedRowsCount = apiRef.current.getSelectedRows().size;
+    if (canHaveMultipleSelection && selectedRowsCount > 1 && !hasCtrlKey) {
+      apiRef.current.selectRow(id, true, resetSelection);
     } else {
-      apiRef.current.selectRow(id, !isSelected, false);
+      const isSelected = apiRef.current.isRowSelected(id);
+      apiRef.current.selectRow(id, !isSelected, resetSelection);
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   const handleRowClick = React.useCallback((params, event) => {

package/node/hooks/features/rows/useGridRowSpanning.js

@@ -14,6 +14,7 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
 var _useGridSelector = require("../../utils/useGridSelector");
+var _gridRowsSelector = require("./gridRowsSelector");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 const EMPTY_STATE = {
@@ -43,7 +44,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     if (skippedFields.has(colDef.field)) {
       return;
     }
-    for (let index = rangeToProcess.firstRowIndex; index <= rangeToProcess.lastRowIndex; index += 1) {
+    for (let index = rangeToProcess.firstRowIndex; index < rangeToProcess.lastRowIndex; index += 1) {
       const row = visibleRows[index];
       if (hiddenCells[row.id]?.[colDef.field]) {
         continue;
@@ -137,7 +138,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
  * @requires filterStateInitializer (method) - should be initialized before
  */
 const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (props.unstable_rowSpanning) {
+  if (props.rowSpanning) {
     const rowIds = state.rows.dataRowIds || [];
     const orderedFields = state.columns.orderedFields || [];
     const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
@@ -150,7 +151,7 @@ const rowSpanningStateInitializer = (state, props, apiRef) => {
     }
     const rangeToProcess = {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(rowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
     };
     const rows = rowIds.map(id => ({
       id,
@@ -182,10 +183,11 @@ const useGridRowSpanning = (apiRef, props) => {
   } = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
   const colDefs = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   const processedRange = (0, _useLazyRef.default)(() => {
     return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(apiRef.current.state.rows.dataRowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
     } : EMPTY_RANGE;
   });
   const lastRange = React.useRef(EMPTY_RANGE);
@@ -197,7 +199,7 @@ const useGridRowSpanning = (apiRef, props) => {
   // - The `paginationModel` is updated
   // - The rows are updated
   (resetState = true) => {
-    if (!props.unstable_rowSpanning) {
+    if (!props.rowSpanning) {
       if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
         apiRef.current.setState(state => (0, _extends2.default)({}, state, {
           rowSpanning: EMPTY_STATE
@@ -213,7 +215,7 @@ const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = (0, _gridRowSpanningUtils.getUnprocessedRange)({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
+      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex + 1)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;
@@ -242,15 +244,21 @@ const useGridRowSpanning = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.unstable_rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
+  }, [apiRef, props.rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
   const prevRenderContext = React.useRef(renderContext);
   const isFirstRender = React.useRef(true);
   const shouldResetState = React.useRef(false);
+  const previousTree = React.useRef(tree);
   React.useEffect(() => {
     const firstRender = isFirstRender.current;
     if (isFirstRender.current) {
       isFirstRender.current = false;
     }
+    if (tree !== previousTree.current) {
+      previousTree.current = tree;
+      updateRowSpanningState(true);
+      return;
+    }
     if (range && lastRange.current && (0, _gridRowSpanningUtils.isRowRangeUpdated)(range, lastRange.current)) {
       lastRange.current = range;
       shouldResetState.current = true;
@@ -264,6 +272,6 @@ const useGridRowSpanning = (apiRef, props) => {
       return;
     }
     updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange]);
+  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
 };
 exports.useGridRowSpanning = useGridRowSpanning;

package/node/hooks/features/rows/useGridRows.js

@@ -248,7 +248,7 @@ const useGridRows = (apiRef, props) => {
       throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
     }
     apiRef.current.setState(state => {
-      const group = (0, _gridRowsSelector.gridRowTreeSelector)(state, apiRef.current.instanceId)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
+      const group = (0, _gridRowsSelector.gridRowTreeSelector)(state, undefined, apiRef.current.instanceId)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
       const allRows = group.children;
       const oldIndex = allRows.findIndex(row => row === rowId);
       if (oldIndex === -1 || oldIndex === targetIndex) {
@@ -401,10 +401,10 @@ const useGridRows = (apiRef, props) => {
   const applyHydrateRowsProcessor = React.useCallback(() => {
     apiRef.current.setState(state => {
       const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
-        tree: (0, _gridRowsSelector.gridRowTreeSelector)(state, apiRef.current.instanceId),
-        treeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(state, apiRef.current.instanceId),
-        dataRowIds: (0, _gridRowsSelector.gridDataRowIdsSelector)(state, apiRef.current.instanceId),
-        dataRowIdToModelLookup: (0, _gridRowsSelector.gridRowsLookupSelector)(state, apiRef.current.instanceId)
+        tree: (0, _gridRowsSelector.gridRowTreeSelector)(state, undefined, apiRef.current.instanceId),
+        treeDepths: (0, _gridRowsSelector.gridRowTreeDepthsSelector)(state, undefined, apiRef.current.instanceId),
+        dataRowIds: (0, _gridRowsSelector.gridDataRowIdsSelector)(state, undefined, apiRef.current.instanceId),
+        dataRowIdToModelLookup: (0, _gridRowsSelector.gridRowsLookupSelector)(state, undefined, apiRef.current.instanceId)
       });
       return (0, _extends2.default)({}, state, {
         rows: (0, _extends2.default)({}, state.rows, response, {

package/node/hooks/features/sorting/gridSortingSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridSortedRowIdsSelector = exports.gridSortedRowEntriesSelector = exports.gridSortModelSelector = exports.gridSortColumnLookupSelector = void 0;
+exports.gridSortedRowIndexLookupSelector = exports.gridSortedRowIdsSelector = exports.gridSortedRowEntriesSelector = exports.gridSortModelSelector = exports.gridSortColumnLookupSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
@@ -61,4 +61,15 @@ const gridSortColumnLookupSelector = exports.gridSortColumnLookupSelector = (0,
     return res;
   }, {});
   return result;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+const gridSortedRowIndexLookupSelector = exports.gridSortedRowIndexLookupSelector = (0, _createSelector.createSelectorMemoized)(gridSortedRowIdsSelector, sortedIds => {
+  return sortedIds.reduce((acc, id, index) => {
+    acc[id] = index;
+    return acc;
+  }, Object.create(null));
 });

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

@@ -3,11 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  gridDateComparator: true,
-  gridNumberComparator: true,
-  gridStringOrNumberComparator: true
-};
 Object.defineProperty(exports, "gridDateComparator", {
   enumerable: true,
   get: function () {
@@ -20,6 +15,30 @@ Object.defineProperty(exports, "gridNumberComparator", {
     return _gridSortingUtils.gridNumberComparator;
   }
 });
+Object.defineProperty(exports, "gridSortColumnLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortColumnLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortModelSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortModelSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortedRowEntriesSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowEntriesSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortedRowIdsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowIdsSelector;
+  }
+});
 Object.defineProperty(exports, "gridStringOrNumberComparator", {
   enumerable: true,
   get: function () {
@@ -27,15 +46,4 @@ Object.defineProperty(exports, "gridStringOrNumberComparator", {
   }
 });
 var _gridSortingSelector = require("./gridSortingSelector");
-Object.keys(_gridSortingSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gridSortingSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridSortingSelector[key];
-    }
-  });
-});
 var _gridSortingUtils = require("./gridSortingUtils");

package/node/hooks/features/sorting/useGridSorting.js

@@ -97,7 +97,7 @@ const useGridSorting = (apiRef, props) => {
           })
         });
       }
-      const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(state, apiRef.current.instanceId);
+      const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(state, undefined, apiRef.current.instanceId);
       const sortRowList = (0, _gridSortingUtils.buildAggregatedSortingApplier)(sortModel, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -103,10 +103,7 @@ const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = {
-      width: initialRect.width,
-      height: initialRect.height
-    };
+    let lastSize = roundDimensions(initialRect);
     apiRef.current.publishEvent('resize', lastSize);
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
@@ -116,10 +113,7 @@ const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = {
-        width: entry.contentRect.width,
-        height: entry.contentRect.height
-      };
+      const newSize = roundDimensions(entry.contentRect);
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -796,4 +790,13 @@ function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verti
       // eslint unable to figure out enum exhaustiveness
       throw new Error('unreachable');
   }
+}
+
+// Round to avoid issues with subpixel rendering
+// https://github.com/mui/mui-x/issues/15721
+function roundDimensions(dimensions) {
+  return {
+    width: Math.round(dimensions.width * 10) / 10,
+    height: Math.round(dimensions.height * 10) / 10
+  };
 }

package/node/hooks/utils/useGridSelector.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompare = exports.argsEqual = void 0;
+exports.useGridSelector = exports.objectShallowCompare = exports.argsEqual = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _warning = require("@mui/x-internals/warning");
@@ -13,20 +13,11 @@ var _useOnMount = require("./useOnMount");
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
-// TODO v8: Remove this function
-function applySelector(apiRef, selector) {
-  if (isOutputSelector(selector)) {
-    return selector(apiRef);
-  }
-  return selector(apiRef.current.state);
-}
-
-// TODO v8: Rename this function to `applySelector`
-function applySelectorV8(apiRef, selector, args, instanceId) {
+function applySelector(apiRef, selector, args, instanceId) {
   if (isOutputSelector(selector)) {
     return selector(apiRef, args);
   }
-  return selector(apiRef.current.state, instanceId);
+  return selector(apiRef.current.state, args, instanceId);
 }
 const defaultCompare = Object.is;
 const objectShallowCompare = exports.objectShallowCompare = _fastObjectShallowCompare.fastObjectShallowCompare;
@@ -52,37 +43,7 @@ const createRefs = () => ({
   selector: null,
   args: null
 });
-
-// TODO v8: Remove this function
-const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      (0, _warning.warnOnce)(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
-    }
-  }
-  const refs = (0, _useLazyRef.useLazyRef)(createRefs);
-  const didInit = refs.current.selector !== null;
-  const [state, setState] = React.useState(
-  // We don't use an initialization function to avoid allocations
-  didInit ? null : applySelector(apiRef, selector));
-  refs.current.state = state;
-  refs.current.equals = equals;
-  refs.current.selector = selector;
-  (0, _useOnMount.useOnMount)(() => {
-    return apiRef.current.store.subscribe(() => {
-      const newState = applySelector(apiRef, refs.current.selector);
-      if (!refs.current.equals(refs.current.state, newState)) {
-        refs.current.state = newState;
-        setState(newState);
-      }
-    });
-  });
-  return state;
-};
-
-// TODO v8: Rename this function to `useGridSelector`
-exports.useGridSelector = useGridSelector;
-const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+const useGridSelector = (apiRef, selector, args = undefined, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
       (0, _warning.warnOnce)(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
@@ -92,14 +53,14 @@ const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultC
   const didInit = refs.current.selector !== null;
   const [state, setState] = React.useState(
   // We don't use an initialization function to avoid allocations
-  didInit ? null : applySelectorV8(apiRef, selector, args, apiRef.current.instanceId));
+  didInit ? null : applySelector(apiRef, selector, args, apiRef.current.instanceId));
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
   const prevArgs = refs.current.args;
   refs.current.args = args;
   if (didInit && !argsEqual(prevArgs, args)) {
-    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
     if (!refs.current.equals(refs.current.state, newState)) {
       refs.current.state = newState;
       setState(newState);
@@ -107,7 +68,7 @@ const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultC
   }
   (0, _useOnMount.useOnMount)(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+      const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
@@ -116,4 +77,4 @@ const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultC
   });
   return state;
 };
-exports.useGridSelectorV8 = useGridSelectorV8;
+exports.useGridSelector = useGridSelector;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.3
+ * @mui/x-data-grid v8.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/index.js

@@ -73,6 +73,7 @@ var _exportNames = {
   useGridRowSelectionPreProcessors: true,
   useGridSorting: true,
   sortingStateInitializer: true,
+  gridSortedRowIndexLookupSelector: true,
   useGridScroll: true,
   useGridEvents: true,
   dimensionsStateInitializer: true,
@@ -92,10 +93,7 @@ var _exportNames = {
   getColumnsToExport: true,
   defaultGetRowsToExport: true,
   createSelector: true,
-  createSelectorV8: true,
   createSelectorMemoized: true,
-  createSelectorMemoizedV8: true,
-  useGridSelectorV8: true,
   findParentElementFromClassName: true,
   getActiveElement: true,
   isEventTargetInPortal: true,
@@ -220,18 +218,6 @@ Object.defineProperty(exports, "createSelectorMemoized", {
     return _createSelector.createSelectorMemoized;
   }
 });
-Object.defineProperty(exports, "createSelectorMemoizedV8", {
-  enumerable: true,
-  get: function () {
-    return _createSelector.createSelectorMemoizedV8;
-  }
-});
-Object.defineProperty(exports, "createSelectorV8", {
-  enumerable: true,
-  get: function () {
-    return _createSelector.createSelectorV8;
-  }
-});
 Object.defineProperty(exports, "defaultGetRowsToExport", {
   enumerable: true,
   get: function () {
@@ -370,6 +356,12 @@ Object.defineProperty(exports, "gridRowGroupsToFetchSelector", {
     return _gridRowsSelector.gridRowGroupsToFetchSelector;
   }
 });
+Object.defineProperty(exports, "gridSortedRowIndexLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowIndexLookupSelector;
+  }
+});
 Object.defineProperty(exports, "headerFilteringStateInitializer", {
   enumerable: true,
   get: function () {
@@ -676,12 +668,6 @@ Object.defineProperty(exports, "useGridScroll", {
     return _useGridScroll.useGridScroll;
   }
 });
-Object.defineProperty(exports, "useGridSelectorV8", {
-  enumerable: true,
-  get: function () {
-    return _useGridSelector.useGridSelectorV8;
-  }
-});
 Object.defineProperty(exports, "useGridSorting", {
   enumerable: true,
   get: function () {
@@ -791,6 +777,7 @@ var _useGridHeaderFiltering = require("../hooks/features/headerFiltering/useGrid
 var _useGridRowSelection = require("../hooks/features/rowSelection/useGridRowSelection");
 var _useGridRowSelectionPreProcessors = require("../hooks/features/rowSelection/useGridRowSelectionPreProcessors");
 var _useGridSorting = require("../hooks/features/sorting/useGridSorting");
+var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _useGridScroll = require("../hooks/features/scroll/useGridScroll");
 var _useGridEvents = require("../hooks/features/events/useGridEvents");
 var _useGridDimensions = require("../hooks/features/dimensions/useGridDimensions");
@@ -828,7 +815,6 @@ Object.keys(_createControllablePromise).forEach(function (key) {
   });
 });
 var _createSelector = require("../utils/createSelector");
-var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _domUtils = require("../utils/domUtils");
 var _keyboardUtils = require("../utils/keyboardUtils");
 var _utils3 = require("../utils/utils");