@mui/x-data-grid 5.17.23 → 5.17.24

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.24
+
+_Feb 16, 2023_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Hungarian (hu-HU) locale
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.24` / `@mui/x-data-grid-pro@v5.17.24` / `@mui/x-data-grid-premium@v5.17.24`
+
+#### Changes
+
+- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7897) @Vivek-Prajapatii
+- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7945) @cherniavskii
+- [DataGridPro] Change cursor when dragging a column (#7878) @sai6855
+- [DataGridPremium] Fix `leafField` to have correct focus value (#7959) @MBilalShafi
+
+### `@mui/x-date-pickers@v5.0.19` / `@mui/x-date-pickers-pro@v5.0.19`
+
+#### Changes
+
+- [l10n] Add Hungarian (hu-HU) locale (#7796) @noherczeg
+
 ## 5.17.23
 
 _Feb 9, 2023_

package/components/panel/GridColumnsPanel.js

@@ -226,6 +226,17 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // ----------------------------------------------------------------------
   autoFocusSearchField: PropTypes.bool,
   searchPredicate: PropTypes.func,
+  slotProps: PropTypes.shape({
+    TrapFocus: PropTypes.shape({
+      children: PropTypes.element.isRequired,
+      disableAutoFocus: PropTypes.bool,
+      disableEnforceFocus: PropTypes.bool,
+      disableRestoreFocus: PropTypes.bool,
+      getTabbable: PropTypes.func,
+      isEnabled: PropTypes.func,
+      open: PropTypes.bool.isRequired
+    })
+  }),
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;
 export { GridColumnsPanel };

package/components/panel/GridPanelWrapper.d.ts

@@ -1,7 +1,11 @@
 import * as React from 'react';
+import { TrapFocusProps } from '@mui/material/Unstable_TrapFocus';
 import { Theme } from '@mui/material/styles';
 import { MUIStyledCommonProps } from '@mui/system';
 export interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>, MUIStyledCommonProps<Theme> {
+    slotProps?: {
+        TrapFocus?: TrapFocusProps;
+    };
 }
 declare const GridPanelWrapper: React.ForwardRefExoticComponent<GridPanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
 export { GridPanelWrapper };

package/components/panel/GridPanelWrapper.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "slotProps"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
@@ -37,7 +38,8 @@ const isEnabled = () => true;
 
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-    className
+    className,
+    slotProps = {}
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -46,15 +48,33 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TrapFocus, {
+  return /*#__PURE__*/_jsx(TrapFocus, _extends({
     open: true,
     disableEnforceFocus: true,
-    isEnabled: isEnabled,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
       className: clsx(className, classes.root)
     }, other))
-  });
+  }));
 });
+process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  slotProps: PropTypes.shape({
+    TrapFocus: PropTypes.shape({
+      children: PropTypes.element.isRequired,
+      disableAutoFocus: PropTypes.bool,
+      disableEnforceFocus: PropTypes.bool,
+      disableRestoreFocus: PropTypes.bool,
+      getTabbable: PropTypes.func,
+      isEnabled: PropTypes.func,
+      open: PropTypes.bool.isRequired
+    })
+  })
+} : void 0;
 export { GridPanelWrapper };

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -53,6 +53,15 @@ export const getRenderableIndexes = ({
 }) => {
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
+
+const areRenderContextsEqual = (context1, context2) => {
+  if (context1 === context2) {
+    return true;
+  }
+
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
+
 export const useGridVirtualScroller = props => {
   var _currentPage$range3, _currentPage$range4;
 
@@ -218,6 +227,11 @@ export const useGridVirtualScroller = props => {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
+
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.23
+/** @license MUI X v5.17.24
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/components/panel/GridColumnsPanel.js

@@ -247,6 +247,17 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // ----------------------------------------------------------------------
   autoFocusSearchField: PropTypes.bool,
   searchPredicate: PropTypes.func,
+  slotProps: PropTypes.shape({
+    TrapFocus: PropTypes.shape({
+      children: PropTypes.element.isRequired,
+      disableAutoFocus: PropTypes.bool,
+      disableEnforceFocus: PropTypes.bool,
+      disableRestoreFocus: PropTypes.bool,
+      getTabbable: PropTypes.func,
+      isEnabled: PropTypes.func,
+      open: PropTypes.bool.isRequired
+    })
+  }),
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;
 export { GridColumnsPanel };

package/legacy/components/panel/GridPanelWrapper.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
+var _excluded = ["className", "slotProps"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
@@ -39,6 +40,8 @@ var isEnabled = function isEnabled() {
 
 var GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   var className = props.className,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       other = _objectWithoutProperties(props, _excluded);
 
   var rootProps = useGridRootProps();
@@ -46,15 +49,33 @@ var GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(p
     classes: rootProps.classes
   };
   var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TrapFocus, {
+  return /*#__PURE__*/_jsx(TrapFocus, _extends({
     open: true,
     disableEnforceFocus: true,
-    isEnabled: isEnabled,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
       className: clsx(className, classes.root)
     }, other))
-  });
+  }));
 });
+process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  slotProps: PropTypes.shape({
+    TrapFocus: PropTypes.shape({
+      children: PropTypes.element.isRequired,
+      disableAutoFocus: PropTypes.bool,
+      disableEnforceFocus: PropTypes.bool,
+      disableRestoreFocus: PropTypes.bool,
+      getTabbable: PropTypes.func,
+      isEnabled: PropTypes.func,
+      open: PropTypes.bool.isRequired
+    })
+  })
+} : void 0;
 export { GridPanelWrapper };

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

@@ -56,6 +56,15 @@ export var getRenderableIndexes = function getRenderableIndexes(_ref) {
       maxLastIndex = _ref.maxLastIndex;
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
+
+var areRenderContextsEqual = function areRenderContextsEqual(context1, context2) {
+  if (context1 === context2) {
+    return true;
+  }
+
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
+
 export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   var _currentPage$range3, _currentPage$range4;
 
@@ -241,6 +250,11 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
   var updateRenderContext = React.useCallback(function (nextRenderContext) {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
+
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
 

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.23
+/** @license MUI X v5.17.24
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/components/panel/GridColumnsPanel.js

@@ -220,6 +220,17 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // ----------------------------------------------------------------------
   autoFocusSearchField: PropTypes.bool,
   searchPredicate: PropTypes.func,
+  slotProps: PropTypes.shape({
+    TrapFocus: PropTypes.shape({
+      children: PropTypes.element.isRequired,
+      disableAutoFocus: PropTypes.bool,
+      disableEnforceFocus: PropTypes.bool,
+      disableRestoreFocus: PropTypes.bool,
+      getTabbable: PropTypes.func,
+      isEnabled: PropTypes.func,
+      open: PropTypes.bool.isRequired
+    })
+  }),
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;
 export { GridColumnsPanel };

package/modern/components/panel/GridPanelWrapper.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "slotProps"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
@@ -37,7 +38,8 @@ const isEnabled = () => true;
 
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-    className
+    className,
+    slotProps = {}
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -46,15 +48,33 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TrapFocus, {
+  return /*#__PURE__*/_jsx(TrapFocus, _extends({
     open: true,
     disableEnforceFocus: true,
-    isEnabled: isEnabled,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
       className: clsx(className, classes.root)
     }, other))
-  });
+  }));
 });
+process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  slotProps: PropTypes.shape({
+    TrapFocus: PropTypes.shape({
+      children: PropTypes.element.isRequired,
+      disableAutoFocus: PropTypes.bool,
+      disableEnforceFocus: PropTypes.bool,
+      disableRestoreFocus: PropTypes.bool,
+      getTabbable: PropTypes.func,
+      isEnabled: PropTypes.func,
+      open: PropTypes.bool.isRequired
+    })
+  })
+} : void 0;
 export { GridPanelWrapper };

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

@@ -53,6 +53,15 @@ export const getRenderableIndexes = ({
 }) => {
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
+
+const areRenderContextsEqual = (context1, context2) => {
+  if (context1 === context2) {
+    return true;
+  }
+
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
+
 export const useGridVirtualScroller = props => {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -214,6 +223,11 @@ export const useGridVirtualScroller = props => {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
+
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.23
+/** @license MUI X v5.17.24
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/components/panel/GridColumnsPanel.js

@@ -255,5 +255,16 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // ----------------------------------------------------------------------
   autoFocusSearchField: _propTypes.default.bool,
   searchPredicate: _propTypes.default.func,
+  slotProps: _propTypes.default.shape({
+    TrapFocus: _propTypes.default.shape({
+      children: _propTypes.default.element.isRequired,
+      disableAutoFocus: _propTypes.default.bool,
+      disableEnforceFocus: _propTypes.default.bool,
+      disableRestoreFocus: _propTypes.default.bool,
+      getTabbable: _propTypes.default.func,
+      isEnabled: _propTypes.default.func,
+      open: _propTypes.default.bool.isRequired
+    })
+  }),
   sort: _propTypes.default.oneOf(['asc', 'desc'])
 } : void 0;

package/node/components/panel/GridPanelWrapper.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
@@ -27,7 +29,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className"];
+const _excluded = ["className", "slotProps"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -60,7 +62,8 @@ const isEnabled = () => true;
 
 const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
-    className
+    className,
+    slotProps = {}
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -68,15 +71,33 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, (0, _extends2.default)({
     open: true,
     disableEnforceFocus: true,
-    isEnabled: isEnabled,
+    isEnabled: isEnabled
+  }, slotProps.TrapFocus, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
       ref: ref,
       tabIndex: -1,
       className: (0, _clsx.default)(className, classes.root)
     }, other))
-  });
+  }));
 });
-exports.GridPanelWrapper = GridPanelWrapper;
+exports.GridPanelWrapper = GridPanelWrapper;
+process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  slotProps: _propTypes.default.shape({
+    TrapFocus: _propTypes.default.shape({
+      children: _propTypes.default.element.isRequired,
+      disableAutoFocus: _propTypes.default.bool,
+      disableEnforceFocus: _propTypes.default.bool,
+      disableRestoreFocus: _propTypes.default.bool,
+      getTabbable: _propTypes.default.func,
+      isEnabled: _propTypes.default.func,
+      open: _propTypes.default.bool.isRequired
+    })
+  })
+} : void 0;

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

@@ -90,6 +90,14 @@ const getRenderableIndexes = ({
 
 exports.getRenderableIndexes = getRenderableIndexes;
 
+const areRenderContextsEqual = (context1, context2) => {
+  if (context1 === context2) {
+    return true;
+  }
+
+  return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+};
+
 const useGridVirtualScroller = props => {
   var _currentPage$range3, _currentPage$range4;
 
@@ -255,6 +263,11 @@ const useGridVirtualScroller = props => {
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
+    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
+      updateRenderZonePosition(nextRenderContext);
+      return;
+    }
+
     setRenderContext(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.23
+/** @license MUI X v5.17.24
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "5.17.23",
+  "version": "5.17.24",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",