@mui/x-data-grid 7.24.0 → 7.25.0

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

@@ -36,7 +36,10 @@ 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;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -56,14 +59,6 @@ const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, h
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-let isJSDOM = false;
-try {
-  if (typeof window !== 'undefined') {
-    isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
-  }
-} catch (_) {
-  /* ignore */
-}
 const useGridVirtualScroller = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -71,22 +66,18 @@ const useGridVirtualScroller = () => {
     unstable_listView: listView
   } = rootProps;
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, () => listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef));
-  const enabledForRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationRowEnabledSelector) && !isJSDOM;
-  const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector) && !isJSDOM;
+  const enabledForRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationRowEnabledSelector) && !_isJSDOM.isJSDOM;
+  const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector) && !_isJSDOM.isJSDOM;
   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;
@@ -102,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);
@@ -115,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;
       }
@@ -183,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;
@@ -238,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
     });
   });
@@ -387,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,
@@ -545,11 +526,13 @@ const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     })
   };
 };
@@ -592,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
@@ -843,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/hooks/utils/useGridApiRef.js

@@ -9,5 +9,7 @@ var React = _interopRequireWildcard(require("react"));
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-const useGridApiRef = () => React.useRef({});
+const useGridApiRef = () =>
+// TODO v8: initialize with null (see https://github.com/mui/mui-x/issues/16135#issuecomment-2589395230 and https://github.com/mui/mui-x/issues/16000#issuecomment-2567820735)
+React.useRef({});
 exports.useGridApiRef = useGridApiRef;

package/node/index.js

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

package/node/locales/faIR.js

@@ -40,8 +40,7 @@ const faIRGrid = {
   columnsManagementNoColumns: 'بدون سطر',
   columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
   columnsManagementReset: 'بازنشانی',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'پاک کردن',
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelRemoveAll: 'حذف همه',
@@ -55,9 +54,9 @@ const faIRGrid = {
   filterPanelInputPlaceholder: 'فیلتر مقدار',
   // Filter operators text
   filterOperatorContains: 'شامل',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'شامل نمیشود',
   filterOperatorEquals: 'مساوی',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'برابر نیست',
   filterOperatorStartsWith: 'شروع با',
   filterOperatorEndsWith: 'پایان با',
   filterOperatorIs: 'هست',
@@ -77,9 +76,9 @@ const faIRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'شامل',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'شامل نمیشود',
   headerFilterOperatorEquals: 'مساوی',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'برابر نیست',
   headerFilterOperatorStartsWith: 'شروع با',
   headerFilterOperatorEndsWith: 'پایان با',
   headerFilterOperatorIs: 'هست',

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/isJSDOM.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isJSDOM = void 0;
+const isJSDOM = exports.isJSDOM = typeof window !== 'undefined' && /jsdom|HappyDOM/.test(window.navigator.userAgent);

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.0",
+  "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.0"
+    "@mui/x-internals": "7.25.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/createSelector.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { Selector, SelectorResultArray } from 'reselect';
 import type { GridCoreApi } from '../models/api/gridCoreApi';
 export interface OutputSelector<State, Result> {
-    (apiRef: React.RefObject<{
+    (apiRef: RefObject<{
         state: State;
         instanceId: GridCoreApi['instanceId'];
     }>): Result;
@@ -10,7 +10,7 @@ export interface OutputSelector<State, Result> {
     acceptsApiRef: boolean;
 }
 export interface OutputSelectorV8<State, Args, Result> {
-    (apiRef: React.RefObject<{
+    (apiRef: RefObject<{
         state: State;
         instanceId: GridCoreApi['instanceId'];
     }>, args?: Args): Result;

package/utils/getPublicApiRef.d.ts

@@ -1,2 +1,3 @@
+import { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
-export declare function getPublicApiRef<PrivateApi extends GridPrivateApiCommunity>(apiRef: React.RefObject<PrivateApi>): React.RefObject<ReturnType<PrivateApi["getPublicApi"]>>;
+export declare function getPublicApiRef<PrivateApi extends GridPrivateApiCommunity>(apiRef: RefObject<PrivateApi>): RefObject<ReturnType<PrivateApi["getPublicApi"]>>;

package/utils/isJSDOM.d.ts

@@ -0,0 +1 @@
+export declare const isJSDOM: boolean;

package/utils/isJSDOM.js

@@ -0,0 +1 @@
+export const isJSDOM = typeof window !== 'undefined' && /jsdom|HappyDOM/.test(window.navigator.userAgent);

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);
+  }
+};