@mui/x-data-grid 7.6.0 → 7.6.2

package/CHANGELOG.md

@@ -3,6 +3,97 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.6.2
+
+_Jun 6, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Adds Date and Time Pickers accessibility page
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.2`
+
+- [DataGrid] Add the `areElementSizesEqual` utility to improve code readability (#13254) @layerok
+- [DataGrid] Clean up IE remnants from the codebase (#13390) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.6.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.6.2`.
+
+#### `@mui/x-data-grid-premium@7.6.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.6.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.2`
+
+- [fields] Fix `PageUp` and `PageDown` editing on letter sections (#13310) @arthurbalduini
+- [pickers] Fix `AdapterDayjs` timezone behavior (#13362) @LukasTy
+- [pickers] Use `useRtl` instead of `useTheme` to access direction (#13363) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.6.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.6.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.2`
+
+- [charts] Add `Initializable` type and behaviour to allow checking if a complex context has been initialized. (#13365) @JCQuintas
+- [charts] Fix some props not working in `xAxis` and `yAxis` (#13372) @Valyok26
+- [charts] Harmonize charts types (#13366) @alexfauquette
+- [charts] Introduce plugins system (#13367) @alexfauquette
+- [charts] Simplify plugin types (#13396) @JCQuintas
+
+### Docs
+
+- [docs] Add badges like in Material UI @oliviertassinari
+- [docs] Update twitter.com to x.com @oliviertassinari
+- [docs] Fix the description of `tickInterval` (#13355) @alexfauquette
+- [docs] Adjust the code example for `quickFilterValues` (#12919) @michelengelen
+- [docs] Create Pickers accessibility page (#13274) @arthurbalduini
+
+### Core
+
+- [core] Comment on `CSS.escape` for the future @oliviertassinari
+- [core] Fix `l10n` action setup (#13382) @LukasTy
+- [core] Fixes in preparation for React 18.3 (#13378) @LukasTy
+- [core] Remove explicit `marked` dependency (#13383) @LukasTy
+- [core] Remove unused `@types/prettier` dependency (#13389) @LukasTy
+- [core] Add `docs/.env.local` to `.gitignore` (#13377) @KenanYusuf
+
+## 7.6.1
+
+_May 31, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+🐞 Address the `@mui/internal-test-utils` added as a direct dependency to `@mui/x-data-grid` by mistake.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.1`
+
+- [DataGrid] Fix column resize not working with special character (#13069) @oukunan
+- [DataGrid] Move `@mui/internal-test-utils` to dev dependency (#13318) @LukasTy
+
+#### `@mui/x-data-grid-pro@7.6.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.6.1`.
+
+#### `@mui/x-data-grid-premium@7.6.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.6.1`.
+
 ## 7.6.0
 
 _May 30, 2024_

package/components/GridRow.js

@@ -108,12 +108,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowHeight
   };
   const classes = useUtilityClasses(ownerState);
-  React.useLayoutEffect(() => {
-    if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
-      // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
-    }
-  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"],
+  _excluded2 = ["key"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
@@ -73,13 +74,20 @@ function GridFilterInputMultipleSingleSelect(props) {
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
-      variant: "outlined",
-      size: "small",
-      label: getOptionLabel(option)
-    }, getTagProps({
-      index
-    })))),
+    renderTags: (value, getTagProps) => value.map((option, index) => {
+      const _getTagProps = getTagProps({
+          index
+        }),
+        {
+          key
+        } = _getTagProps,
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded2);
+      return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
+        variant: "outlined",
+        size: "small",
+        label: getOptionLabel(option)
+      }, tagProps), key);
+    }),
     renderInput: params => /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
       label: apiRef.current.getLocaleText('filterPanelInputLabel'),
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),

package/components/toolbar/GridToolbarQuickFilter.js

@@ -39,13 +39,6 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
   '& .MuiInput-underline:before': {
     borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
   },
-  [`& input[type=search]::-ms-clear,
-& input[type=search]::-ms-reveal`]: {
-    /* clears the 'X' icon from IE */
-    display: 'none',
-    width: 0,
-    height: 0
-  },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
   & input[type="search"]::-webkit-search-results-button,

package/hooks/features/columnResize/useGridColumnResize.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from '../../../utils/domUtils';
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from '../../utils';
@@ -303,7 +303,7 @@ export const useGridColumnResize = (apiRef, props) => {
     refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth;
     refs.colDef = colDef;
     refs.columnHeaderElement = findHeaderElementFromField(apiRef.current.columnHeadersContainerRef.current, colDef.field);
-    const headerFilterElement = root.querySelector(`.${gridClasses.headerFilterRow} [data-field="${colDef.field}"]`);
+    const headerFilterElement = root.querySelector(`.${gridClasses.headerFilterRow} [data-field="${escapeOperandAttributeSelector(colDef.field)}"]`);
     if (headerFilterElement) {
       refs.headerFilterElement = headerFilterElement;
     }

package/hooks/features/dimensions/useGridDimensions.js

@@ -74,17 +74,13 @@ export function useGridDimensions(apiRef, props) {
       return;
     }
     const computedStyle = ownerWindow(element).getComputedStyle(element);
-    const height = parseFloat(computedStyle.height) || 0;
-    const width = parseFloat(computedStyle.width) || 0;
-    const hasHeightChanged = height !== previousSize.current?.height;
-    const hasWidthChanged = width !== previousSize.current?.width;
-    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
-      const size = {
-        width,
-        height
-      };
-      apiRef.current.publishEvent('resize', size);
-      previousSize.current = size;
+    const newSize = {
+      width: parseFloat(computedStyle.width) || 0,
+      height: parseFloat(computedStyle.height) || 0
+    };
+    if (!previousSize.current || !areElementSizesEqual(previousSize.current, newSize)) {
+      apiRef.current.publishEvent('resize', newSize);
+      previousSize.current = newSize;
     }
   }, [apiRef]);
   const getViewportPageSize = React.useCallback(() => {
@@ -190,7 +186,7 @@ export function useGridDimensions(apiRef, props) {
     };
     const prevDimensions = apiRef.current.state.dimensions;
     setDimensions(newDimensions);
-    if (newDimensions.viewportInnerSize.width !== prevDimensions.viewportInnerSize.width || newDimensions.viewportInnerSize.height !== prevDimensions.viewportInnerSize.height) {
+    if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
@@ -285,4 +281,7 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
 // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
 function roundToDecimalPlaces(value, decimals) {
   return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}
+function areElementSizesEqual(a, b) {
+  return a.width === b.width && a.height === b.height;
 }

package/index.js

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

package/modern/components/GridRow.js

@@ -108,12 +108,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowHeight
   };
   const classes = useUtilityClasses(ownerState);
-  React.useLayoutEffect(() => {
-    if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
-      // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
-    }
-  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the

package/modern/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"],
+  _excluded2 = ["key"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
@@ -73,13 +74,20 @@ function GridFilterInputMultipleSingleSelect(props) {
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
-      variant: "outlined",
-      size: "small",
-      label: getOptionLabel(option)
-    }, getTagProps({
-      index
-    })))),
+    renderTags: (value, getTagProps) => value.map((option, index) => {
+      const _getTagProps = getTagProps({
+          index
+        }),
+        {
+          key
+        } = _getTagProps,
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded2);
+      return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
+        variant: "outlined",
+        size: "small",
+        label: getOptionLabel(option)
+      }, tagProps), key);
+    }),
     renderInput: params => /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
       label: apiRef.current.getLocaleText('filterPanelInputLabel'),
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -39,13 +39,6 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
   '& .MuiInput-underline:before': {
     borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
   },
-  [`& input[type=search]::-ms-clear,
-& input[type=search]::-ms-reveal`]: {
-    /* clears the 'X' icon from IE */
-    display: 'none',
-    width: 0,
-    height: 0
-  },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
   & input[type="search"]::-webkit-search-results-button,

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from '../../../utils/domUtils';
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from '../../utils';
@@ -303,7 +303,7 @@ export const useGridColumnResize = (apiRef, props) => {
     refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth;
     refs.colDef = colDef;
     refs.columnHeaderElement = findHeaderElementFromField(apiRef.current.columnHeadersContainerRef.current, colDef.field);
-    const headerFilterElement = root.querySelector(`.${gridClasses.headerFilterRow} [data-field="${colDef.field}"]`);
+    const headerFilterElement = root.querySelector(`.${gridClasses.headerFilterRow} [data-field="${escapeOperandAttributeSelector(colDef.field)}"]`);
     if (headerFilterElement) {
       refs.headerFilterElement = headerFilterElement;
     }

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -74,17 +74,13 @@ export function useGridDimensions(apiRef, props) {
       return;
     }
     const computedStyle = ownerWindow(element).getComputedStyle(element);
-    const height = parseFloat(computedStyle.height) || 0;
-    const width = parseFloat(computedStyle.width) || 0;
-    const hasHeightChanged = height !== previousSize.current?.height;
-    const hasWidthChanged = width !== previousSize.current?.width;
-    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
-      const size = {
-        width,
-        height
-      };
-      apiRef.current.publishEvent('resize', size);
-      previousSize.current = size;
+    const newSize = {
+      width: parseFloat(computedStyle.width) || 0,
+      height: parseFloat(computedStyle.height) || 0
+    };
+    if (!previousSize.current || !areElementSizesEqual(previousSize.current, newSize)) {
+      apiRef.current.publishEvent('resize', newSize);
+      previousSize.current = newSize;
     }
   }, [apiRef]);
   const getViewportPageSize = React.useCallback(() => {
@@ -190,7 +186,7 @@ export function useGridDimensions(apiRef, props) {
     };
     const prevDimensions = apiRef.current.state.dimensions;
     setDimensions(newDimensions);
-    if (newDimensions.viewportInnerSize.width !== prevDimensions.viewportInnerSize.width || newDimensions.viewportInnerSize.height !== prevDimensions.viewportInnerSize.height) {
+    if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
@@ -285,4 +281,7 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
 // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
 function roundToDecimalPlaces(value, decimals) {
   return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}
+function areElementSizesEqual(a, b) {
+  return a.width === b.width && a.height === b.height;
 }

package/modern/index.js

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

package/modern/utils/domUtils.js

@@ -5,7 +5,10 @@ export function isOverflown(element) {
 export function findParentElementFromClassName(elem, className) {
   return elem.closest(`.${className}`);
 }
-function escapeOperandAttributeSelector(operand) {
+
+// TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
+// https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
+export function escapeOperandAttributeSelector(operand) {
   return operand.replace(/["\\]/g, '\\$&');
 }
 export function getGridColumnHeaderElement(root, field) {
@@ -51,13 +54,13 @@ export function getFieldFromHeaderElem(colCellEl) {
   return colCellEl.getAttribute('data-field');
 }
 export function findHeaderElementFromField(elem, field) {
-  return elem.querySelector(`[data-field="${field}"]`);
+  return elem.querySelector(`[data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
 export function getFieldsFromGroupHeaderElem(colCellEl) {
   return colCellEl.getAttribute('data-fields').slice(2, -2).split('-|-');
 }
 export function findGroupHeaderElementsFromField(elem, field) {
-  return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);
+  return Array.from(elem.querySelectorAll(`[data-fields*="|-${escapeOperandAttributeSelector(field)}-|"]`) ?? []);
 }
 export function findGridCellElementsFromCol(col, api) {
   const root = findParentElementFromClassName(col, gridClasses.root);
@@ -176,11 +179,11 @@ export function findRightPinnedHeadersBeforeCol(api, col) {
 }
 export function findGridHeader(api, field) {
   const headers = api.columnHeadersContainerRef.current;
-  return headers.querySelector(`:scope > div > [data-field="${field}"][role="columnheader"]`);
+  return headers.querySelector(`:scope > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="columnheader"]`);
 }
 export function findGridCells(api, field) {
   const container = api.virtualScrollerRef.current;
-  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${field}"][role="gridcell"]`));
+  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`));
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(

package/node/components/GridRow.js

@@ -117,12 +117,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowHeight
   };
   const classes = useUtilityClasses(ownerState);
-  React.useLayoutEffect(() => {
-    if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
-      // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
-    }
-  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the

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

@@ -14,7 +14,8 @@ var _utils = require("@mui/utils");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"],
+  _excluded2 = ["key"];
 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 && {}.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 filter = (0, _Autocomplete.createFilterOptions)();
@@ -82,13 +83,20 @@ function GridFilterInputMultipleSingleSelect(props) {
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
-      variant: "outlined",
-      size: "small",
-      label: getOptionLabel(option)
-    }, getTagProps({
-      index
-    })))),
+    renderTags: (value, getTagProps) => value.map((option, index) => {
+      const _getTagProps = getTagProps({
+          index
+        }),
+        {
+          key
+        } = _getTagProps,
+        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded2);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
+        variant: "outlined",
+        size: "small",
+        label: getOptionLabel(option)
+      }, tagProps), key);
+    }),
     renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, params, {
       label: apiRef.current.getLocaleText('filterPanelInputLabel'),
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -48,13 +48,6 @@ const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
   '& .MuiInput-underline:before': {
     borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
   },
-  [`& input[type=search]::-ms-clear,
-& input[type=search]::-ms-reveal`]: {
-    /* clears the 'X' icon from IE */
-    display: 'none',
-    width: 0,
-    height: 0
-  },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
   & input[type="search"]::-webkit-search-results-button,

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -313,7 +313,7 @@ const useGridColumnResize = (apiRef, props) => {
     refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth;
     refs.colDef = colDef;
     refs.columnHeaderElement = (0, _domUtils.findHeaderElementFromField)(apiRef.current.columnHeadersContainerRef.current, colDef.field);
-    const headerFilterElement = root.querySelector(`.${_gridClasses.gridClasses.headerFilterRow} [data-field="${colDef.field}"]`);
+    const headerFilterElement = root.querySelector(`.${_gridClasses.gridClasses.headerFilterRow} [data-field="${(0, _domUtils.escapeOperandAttributeSelector)(colDef.field)}"]`);
     if (headerFilterElement) {
       refs.headerFilterElement = headerFilterElement;
     }

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

@@ -85,17 +85,13 @@ function useGridDimensions(apiRef, props) {
       return;
     }
     const computedStyle = (0, _utils.unstable_ownerWindow)(element).getComputedStyle(element);
-    const height = parseFloat(computedStyle.height) || 0;
-    const width = parseFloat(computedStyle.width) || 0;
-    const hasHeightChanged = height !== previousSize.current?.height;
-    const hasWidthChanged = width !== previousSize.current?.width;
-    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
-      const size = {
-        width,
-        height
-      };
-      apiRef.current.publishEvent('resize', size);
-      previousSize.current = size;
+    const newSize = {
+      width: parseFloat(computedStyle.width) || 0,
+      height: parseFloat(computedStyle.height) || 0
+    };
+    if (!previousSize.current || !areElementSizesEqual(previousSize.current, newSize)) {
+      apiRef.current.publishEvent('resize', newSize);
+      previousSize.current = newSize;
     }
   }, [apiRef]);
   const getViewportPageSize = React.useCallback(() => {
@@ -201,7 +197,7 @@ function useGridDimensions(apiRef, props) {
     };
     const prevDimensions = apiRef.current.state.dimensions;
     setDimensions(newDimensions);
-    if (newDimensions.viewportInnerSize.width !== prevDimensions.viewportInnerSize.width || newDimensions.viewportInnerSize.height !== prevDimensions.viewportInnerSize.height) {
+    if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
@@ -296,4 +292,7 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
 // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
 function roundToDecimalPlaces(value, decimals) {
   return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}
+function areElementSizesEqual(a, b) {
+  return a.width === b.width && a.height === b.height;
 }

package/node/index.js

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

package/node/utils/domUtils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.escapeOperandAttributeSelector = escapeOperandAttributeSelector;
 exports.findGridCellElementsFromCol = findGridCellElementsFromCol;
 exports.findGridCells = findGridCells;
 exports.findGridElement = findGridElement;
@@ -29,6 +30,9 @@ function isOverflown(element) {
 function findParentElementFromClassName(elem, className) {
   return elem.closest(`.${className}`);
 }
+
+// TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
+// https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
 function escapeOperandAttributeSelector(operand) {
   return operand.replace(/["\\]/g, '\\$&');
 }
@@ -76,13 +80,13 @@ function getFieldFromHeaderElem(colCellEl) {
   return colCellEl.getAttribute('data-field');
 }
 function findHeaderElementFromField(elem, field) {
-  return elem.querySelector(`[data-field="${field}"]`);
+  return elem.querySelector(`[data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
 function getFieldsFromGroupHeaderElem(colCellEl) {
   return colCellEl.getAttribute('data-fields').slice(2, -2).split('-|-');
 }
 function findGroupHeaderElementsFromField(elem, field) {
-  return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);
+  return Array.from(elem.querySelectorAll(`[data-fields*="|-${escapeOperandAttributeSelector(field)}-|"]`) ?? []);
 }
 function findGridCellElementsFromCol(col, api) {
   const root = findParentElementFromClassName(col, _gridClasses.gridClasses.root);
@@ -201,11 +205,11 @@ function findRightPinnedHeadersBeforeCol(api, col) {
 }
 function findGridHeader(api, field) {
   const headers = api.columnHeadersContainerRef.current;
-  return headers.querySelector(`:scope > div > [data-field="${field}"][role="columnheader"]`);
+  return headers.querySelector(`:scope > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="columnheader"]`);
 }
 function findGridCells(api, field) {
   const container = api.virtualScrollerRef.current;
-  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${field}"][role="gridcell"]`));
+  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`));
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.6.0",
+  "version": "7.6.2",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -38,7 +38,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.6",
-    "@mui/internal-test-utils": "1.0.0-dev.20240529-082515-213b5e33ab",
     "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "clsx": "^2.1.1",

package/utils/domUtils.d.ts

@@ -4,6 +4,7 @@ import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
 import type { GridRowId } from '../models/gridRows';
 export declare function isOverflown(element: Element): boolean;
 export declare function findParentElementFromClassName(elem: Element, className: string): Element | null;
+export declare function escapeOperandAttributeSelector(operand: string): string;
 export declare function getGridColumnHeaderElement(root: Element, field: string): HTMLDivElement | null;
 export declare function getGridRowElement(root: Element, id: GridRowId): HTMLDivElement | null;
 export declare function getGridCellElement(root: Element, { id, field }: {

package/utils/domUtils.js

@@ -5,7 +5,10 @@ export function isOverflown(element) {
 export function findParentElementFromClassName(elem, className) {
   return elem.closest(`.${className}`);
 }
-function escapeOperandAttributeSelector(operand) {
+
+// TODO, eventually replaces this function with CSS.escape, once available in jsdom, either added manually or built in
+// https://github.com/jsdom/jsdom/issues/1550#issuecomment-236734471
+export function escapeOperandAttributeSelector(operand) {
   return operand.replace(/["\\]/g, '\\$&');
 }
 export function getGridColumnHeaderElement(root, field) {
@@ -51,13 +54,13 @@ export function getFieldFromHeaderElem(colCellEl) {
   return colCellEl.getAttribute('data-field');
 }
 export function findHeaderElementFromField(elem, field) {
-  return elem.querySelector(`[data-field="${field}"]`);
+  return elem.querySelector(`[data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
 export function getFieldsFromGroupHeaderElem(colCellEl) {
   return colCellEl.getAttribute('data-fields').slice(2, -2).split('-|-');
 }
 export function findGroupHeaderElementsFromField(elem, field) {
-  return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);
+  return Array.from(elem.querySelectorAll(`[data-fields*="|-${escapeOperandAttributeSelector(field)}-|"]`) ?? []);
 }
 export function findGridCellElementsFromCol(col, api) {
   const root = findParentElementFromClassName(col, gridClasses.root);
@@ -176,11 +179,11 @@ export function findRightPinnedHeadersBeforeCol(api, col) {
 }
 export function findGridHeader(api, field) {
   const headers = api.columnHeadersContainerRef.current;
-  return headers.querySelector(`:scope > div > [data-field="${field}"][role="columnheader"]`);
+  return headers.querySelector(`:scope > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="columnheader"]`);
 }
 export function findGridCells(api, field) {
   const container = api.virtualScrollerRef.current;
-  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${field}"][role="gridcell"]`));
+  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`));
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(