@mui/x-data-grid 7.24.1 → 7.25.0

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

@@ -13,7 +13,7 @@ var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
 var _focus = require("../focus");
 var _pagination = require("../pagination");
 var _rows = require("../rows");
-const gridIsFocusedCellOutOfContex = (0, _reselect.createSelector)(_focus.gridFocusCellSelector, _gridVirtualizationSelectors.gridRenderContextSelector, _pagination.gridVisibleRowsSelector, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _rows.gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
+const gridIsFocusedCellOutOfContext = (0, _reselect.createSelector)(_focus.gridFocusCellSelector, _gridVirtualizationSelectors.gridRenderContextSelector, _pagination.gridVisibleRowsSelector, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _rows.gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
   if (!focusedCell) {
     return false;
   }
@@ -26,7 +26,7 @@ const gridIsFocusedCellOutOfContex = (0, _reselect.createSelector)(_focus.gridFo
   const isInRenderContext = rowIndex !== undefined && columnIndex !== -1 && rowIndex >= renderContext.firstRowIndex && rowIndex <= renderContext.lastRowIndex;
   return !isInRenderContext;
 });
-const gridFocusedVirtualCellSelector = exports.gridFocusedVirtualCellSelector = (0, _createSelector.createSelectorMemoized)(gridIsFocusedCellOutOfContex, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _pagination.gridVisibleRowsSelector, _rows.gridRowsLookupSelector, _focus.gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
+const gridFocusedVirtualCellSelector = exports.gridFocusedVirtualCellSelector = (0, _createSelector.createSelectorMemoized)(gridIsFocusedCellOutOfContext, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _pagination.gridVisibleRowsSelector, _rows.gridRowsLookupSelector, _focus.gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
   if (!isFocusedCellOutOfRenderContext) {
     return null;
   }

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

@@ -36,7 +36,9 @@ var _useGridVirtualization = require("./useGridVirtualization");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
+var _columns = require("../columns");
 var _gridFocusedVirtualCellSelector = require("./gridFocusedVirtualCellSelector");
+var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
 var _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
@@ -69,17 +71,13 @@ const useGridVirtualScroller = () => {
   const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
   const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
-  const pinnedColumnDefinitions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedColumns = listView ? {
-    left: [],
-    right: []
-  } : pinnedColumnDefinitions;
+  const pinnedColumnDefinitions = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
+  const pinnedColumns = listView ? _columns.EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = (0, _RtlProvider.useRtl)();
-  const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
   const selectedRowsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSelectionSelector.selectedIdsLookupSelector);
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
+  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef);
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
@@ -95,7 +93,10 @@ const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = roundDimensions(initialRect);
+    let lastSize = {
+      width: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(initialRect.width, 1),
+      height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(initialRect.height, 1)
+    };
     if (!previousSize.current || lastSize.width !== previousSize.current.width && lastSize.height !== previousSize.current.height) {
       previousSize.current = lastSize;
       apiRef.current.publishEvent('resize', lastSize);
@@ -108,7 +109,10 @@ const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = roundDimensions(entry.contentRect);
+      const newSize = {
+        width: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(entry.contentRect.width, 1),
+        height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(entry.contentRect.height, 1)
+      };
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -176,9 +180,13 @@ const useGridVirtualScroller = () => {
     if (!scroller) {
       return undefined;
     }
+    const maxScrollTop = Math.ceil(dimensions.minimumSize.height - dimensions.viewportOuterSize.height);
+    const maxScrollLeft = Math.ceil(dimensions.minimumSize.width - dimensions.viewportInnerSize.width);
+
+    // Clamp the scroll position to the viewport to avoid re-calculating the render context for scroll bounce
     const newScroll = {
-      top: scroller.scrollTop,
-      left: scroller.scrollLeft
+      top: (0, _utils3.clamp)(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? (0, _utils3.clamp)(scroller.scrollLeft, -maxScrollLeft, 0) : (0, _utils3.clamp)(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -231,34 +239,15 @@ const useGridVirtualScroller = () => {
     frozenContext.current = undefined;
     updateRenderContext(nextRenderContext);
   };
-  const handleScroll = (0, _utils.unstable_useEventCallback)(event => {
+  const handleScroll = (0, _utils.unstable_useEventCallback)(() => {
     if (ignoreNextScrollEvent.current) {
       ignoreNextScrollEvent.current = false;
       return;
     }
-    const {
-      scrollTop,
-      scrollLeft
-    } = event.currentTarget;
-
-    // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (scrollTop < 0) {
-      return;
-    }
-    if (!isRtl) {
-      if (scrollLeft < 0) {
-        return;
-      }
-    }
-    if (isRtl) {
-      if (scrollLeft > 0) {
-        return;
-      }
-    }
     const nextRenderContext = triggerUpdateRenderContext();
     apiRef.current.publishEvent('scrollPositionChange', {
-      top: scrollTop,
-      left: scrollLeft,
+      top: scrollPosition.current.top,
+      left: scrollPosition.current.left,
       renderContext: nextRenderContext
     });
   });
@@ -380,7 +369,6 @@ const useGridVirtualScroller = () => {
         rowId: id,
         index: rowIndex,
         selected: isSelected,
-        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
         offsetLeft: offsetLeft,
         columnsTotalWidth: dimensions.columnsTotalWidth,
         rowHeight: baseRowHeight,
@@ -538,11 +526,13 @@ const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     })
   };
 };
@@ -585,6 +575,11 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
     firstColumnIndex: 0,
     lastColumnIndex: inputs.visibleColumns.length
   };
+  if (inputs.listView) {
+    return (0, _extends2.default)({}, renderContext, {
+      lastColumnIndex: 1
+    });
+  }
   const {
     top,
     left
@@ -836,13 +831,4 @@ 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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.24.1
+ * @mui/x-data-grid v7.25.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/models/api/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _gridParamsApi = require("./gridParamsApi");
-Object.keys(_gridParamsApi).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridParamsApi[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridParamsApi[key];
-    }
-  });
-});
 var _gridColumnApi = require("./gridColumnApi");
 Object.keys(_gridColumnApi).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/utils/roundToDecimalPlaces.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.roundToDecimalPlaces = roundToDecimalPlaces;
+function roundToDecimalPlaces(value, decimals) {
+  return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}

package/node/utils/utils.js

@@ -14,6 +14,7 @@ exports.isNumber = isNumber;
 exports.isObject = isObject;
 exports.localStorageAvailable = localStorageAvailable;
 exports.range = range;
+exports.runIf = void 0;
 function isNumber(value) {
   return typeof value === 'number' && !Number.isNaN(value);
 }
@@ -213,4 +214,10 @@ function deepClone(obj) {
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-function eslintUseValue(_) {}
+function eslintUseValue(_) {}
+const runIf = (condition, fn) => params => {
+  if (condition) {
+    fn(params);
+  }
+};
+exports.runIf = runIf;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.24.1",
+  "version": "7.25.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -42,7 +42,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-internals": "7.24.1"
+    "@mui/x-internals": "7.25.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/roundToDecimalPlaces.d.ts

@@ -0,0 +1 @@
+export declare function roundToDecimalPlaces(value: number, decimals: number): number;

package/utils/roundToDecimalPlaces.js

@@ -0,0 +1,3 @@
+export function roundToDecimalPlaces(value, decimals) {
+  return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}

package/utils/utils.d.ts

@@ -54,3 +54,4 @@ export declare function deepClone(obj: Record<string, any>): any;
  * that hint disables checks on all values instead of just one.
  */
 export declare function eslintUseValue(_: any): void;
+export declare const runIf: (condition: boolean, fn: Function) => (params: unknown) => void;

package/utils/utils.js

@@ -196,4 +196,9 @@ export function deepClone(obj) {
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-export function eslintUseValue(_) {}
+export function eslintUseValue(_) {}
+export const runIf = (condition, fn) => params => {
+  if (condition) {
+    fn(params);
+  }
+};