@mui/x-data-grid 5.17.22 → 5.17.23

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.23
+
+_Feb 9, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Brazilian Portuguese (pt-BR) locale
+- 🎉 Add banner and callouts to inform about MUI X v6 beta
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.23` / `@mui/x-data-grid-pro@v5.17.23` / `@mui/x-data-grid-premium@v5.17.23`
+
+#### Changes
+
+- [DataGrid] Allow to customize the value displayed in the filter button tooltip (#7816) @ithrforu
+- [DataGrid] Fix `getCellElement` method not working with pinned columns (#7844) @yaredtsy
+- [DataGrid] Fix stale rows issue in `unstable_replaceRows` (#7694) @MBilalShafi
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#7850) @ed-ateixeira
+
+### `@mui/x-date-pickers@v_5.0.18` / `@mui/x-date-pickers-pro@v_5.0.18`
+
+#### Changes
+
+- [pickers] Update pickers when new value has a distinct timezone (#7853) @alexfauquette
+
+### Docs
+
+- [docs] Add messages in v5 doc to inform people about v6 (#7838) @flaviendelangle
+- [docs] Fix 301 link @oliviertassinari
+
+### Core
+
+- [core] Upgrade monorepo (#7849) @cherniavskii
+
 ## v5.17.22
 
 _Feb 2, 2023_

package/components/toolbar/GridToolbarFilterButton.js

@@ -67,18 +67,21 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
 
     const getOperatorLabel = item => lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue).label || apiRef.current.getLocaleText(`filterOperator${capitalize(item.operatorValue)}`).toString();
 
+    const getFilterItemValue = item => {
+      const {
+        getValueAsString
+      } = lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue);
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => {
-          var _item$value;
-
-          return _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
-            children: `${lookup[item.columnField].headerName || item.columnField}
+        children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
+          children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${(_item$value = item.value) != null ? _item$value : ''}`
-          }, index));
-        })
+                  ${item.value ? getFilterItemValue(item) : ''}`
+        }, index)))
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);

package/hooks/features/rows/useGridRows.js

@@ -299,14 +299,19 @@ export const useGridRows = (apiRef, props) => {
     apiRef.current.unstable_caches.rows.idRowsLookup = updatedIdRowsLookup;
     apiRef.current.unstable_caches.rows.idToIdLookup = updatedIdToIdLookup;
     apiRef.current.unstable_caches.rows.ids = updatedRows;
-    apiRef.current.setState(state => _extends({}, state, {
-      rows: _extends({}, state.rows, {
+    apiRef.current.setState(state => {
+      const newRowsState = {
         idRowsLookup: updatedIdRowsLookup,
         idToIdLookup: updatedIdToIdLookup,
         tree: updatedTree,
         ids: updatedRows
-      })
-    }));
+      };
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, newRowsState, {
+          groupingResponseBeforeRowHydration: _extends({}, state.rows.groupingResponseBeforeRowHydration, newRowsState)
+        })
+      });
+    });
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.22
+/** @license MUI X v5.17.23
  *
  * 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/toolbar/GridToolbarFilterButton.js

@@ -71,14 +71,21 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
       }).label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(item.operatorValue))).toString();
     };
 
+    var getFilterItemValue = function getFilterItemValue(item) {
+      var _ref2 = lookup[item.columnField].filterOperators.find(function (operator) {
+        return operator.value === item.operatorValue;
+      }),
+          getValueAsString = _ref2.getValueAsString;
+
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
         children: activeFilters.map(function (item, index) {
-          var _item$value;
-
           return _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
-            children: "".concat(lookup[item.columnField].headerName || item.columnField, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat((_item$value = item.value) != null ? _item$value : '')
+            children: "".concat(lookup[item.columnField].headerName || item.columnField, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(item.value ? getFilterItemValue(item) : '')
           }, index));
         })
       })]

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

@@ -329,12 +329,15 @@ export var useGridRows = function useGridRows(apiRef, props) {
     apiRef.current.unstable_caches.rows.idToIdLookup = updatedIdToIdLookup;
     apiRef.current.unstable_caches.rows.ids = updatedRows;
     apiRef.current.setState(function (state) {
+      var newRowsState = {
+        idRowsLookup: updatedIdRowsLookup,
+        idToIdLookup: updatedIdToIdLookup,
+        tree: updatedTree,
+        ids: updatedRows
+      };
       return _extends({}, state, {
-        rows: _extends({}, state.rows, {
-          idRowsLookup: updatedIdRowsLookup,
-          idToIdLookup: updatedIdToIdLookup,
-          tree: updatedTree,
-          ids: updatedRows
+        rows: _extends({}, state.rows, newRowsState, {
+          groupingResponseBeforeRowHydration: _extends({}, state.rows.groupingResponseBeforeRowHydration, newRowsState)
         })
       });
     });

package/legacy/index.js

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

package/legacy/utils/domUtils.js

@@ -27,17 +27,19 @@ function escapeOperandAttributeSelector(operand) {
 export function getGridColumnHeaderElement(root, field) {
   return root.querySelector("[role=\"columnheader\"][data-field=\"".concat(escapeOperandAttributeSelector(field), "\"]"));
 }
+
+function getGridRowElementSelector(id) {
+  return ".".concat(gridClasses.row, "[data-id=\"").concat(escapeOperandAttributeSelector(String(id)), "\"]");
+}
+
 export function getGridRowElement(root, id) {
-  return root.querySelector(".".concat(gridClasses.row, "[data-id=\"").concat(escapeOperandAttributeSelector(String(id)), "\"]"));
+  return root.querySelector(getGridRowElementSelector(id));
 }
 export function getGridCellElement(root, _ref) {
   var id = _ref.id,
       field = _ref.field;
-  var row = getGridRowElement(root, id);
-
-  if (!row) {
-    return null;
-  }
-
-  return row.querySelector(".".concat(gridClasses.cell, "[data-field=\"").concat(escapeOperandAttributeSelector(field), "\"]"));
+  var rowSelector = getGridRowElementSelector(id);
+  var cellSelector = ".".concat(gridClasses.cell, "[data-field=\"").concat(escapeOperandAttributeSelector(field), "\"]");
+  var selector = "".concat(rowSelector, " ").concat(cellSelector);
+  return root.querySelector(selector);
 }

package/models/gridFilterOperator.d.ts

@@ -35,6 +35,12 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
      * The props to pass to the input component in the filter panel for this filter operator.
      */
     InputComponentProps?: Record<string, any>;
+    /**
+     * Converts the value of a filter item to a human-readable form.
+     * @param {GridFilterItem['value']} value The filter item value.
+     * @returns {string} The value formatted to be displayed in the UI of filter button tooltip.
+     */
+    getValueAsString?: (value: GridFilterItem['value']) => string;
     /**
      * If `false`, filter operator doesn't require user-entered value to work.
      * Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`)

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -65,13 +65,20 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
 
     const getOperatorLabel = item => lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue).label || apiRef.current.getLocaleText(`filterOperator${capitalize(item.operatorValue)}`).toString();
 
+    const getFilterItemValue = item => {
+      const {
+        getValueAsString
+      } = lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue);
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+
     return /*#__PURE__*/_jsxs("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
         children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value ?? ''}`
+                  ${item.value ? getFilterItemValue(item) : ''}`
         }, index)))
       })]
     });

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

@@ -291,14 +291,19 @@ export const useGridRows = (apiRef, props) => {
     apiRef.current.unstable_caches.rows.idRowsLookup = updatedIdRowsLookup;
     apiRef.current.unstable_caches.rows.idToIdLookup = updatedIdToIdLookup;
     apiRef.current.unstable_caches.rows.ids = updatedRows;
-    apiRef.current.setState(state => _extends({}, state, {
-      rows: _extends({}, state.rows, {
+    apiRef.current.setState(state => {
+      const newRowsState = {
         idRowsLookup: updatedIdRowsLookup,
         idToIdLookup: updatedIdToIdLookup,
         tree: updatedTree,
         ids: updatedRows
-      })
-    }));
+      };
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, newRowsState, {
+          groupingResponseBeforeRowHydration: _extends({}, state.rows.groupingResponseBeforeRowHydration, newRowsState)
+        })
+      });
+    });
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {

package/modern/index.js

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

package/modern/utils/domUtils.js

@@ -27,18 +27,20 @@ function escapeOperandAttributeSelector(operand) {
 export function getGridColumnHeaderElement(root, field) {
   return root.querySelector(`[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
+
+function getGridRowElementSelector(id) {
+  return `.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`;
+}
+
 export function getGridRowElement(root, id) {
-  return root.querySelector(`.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`);
+  return root.querySelector(getGridRowElementSelector(id));
 }
 export function getGridCellElement(root, {
   id,
   field
 }) {
-  const row = getGridRowElement(root, id);
-
-  if (!row) {
-    return null;
-  }
-
-  return row.querySelector(`.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`);
+  const rowSelector = getGridRowElementSelector(id);
+  const cellSelector = `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
+  const selector = `${rowSelector} ${cellSelector}`;
+  return root.querySelector(selector);
 }

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -95,18 +95,21 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
 
     const getOperatorLabel = item => lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue).label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.capitalize)(item.operatorValue)}`).toString();
 
+    const getFilterItemValue = item => {
+      const {
+        getValueAsString
+      } = lookup[item.columnField].filterOperators.find(operator => operator.value === item.operatorValue);
+      return getValueAsString ? getValueAsString(item.value) : item.value;
+    };
+
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => {
-          var _item$value;
-
-          return (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: `${lookup[item.columnField].headerName || item.columnField}
+        children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${(_item$value = item.value) != null ? _item$value : ''}`
-          }, index));
-        })
+                  ${item.value ? getFilterItemValue(item) : ''}`
+        }, index)))
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);

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

@@ -321,14 +321,19 @@ const useGridRows = (apiRef, props) => {
     apiRef.current.unstable_caches.rows.idRowsLookup = updatedIdRowsLookup;
     apiRef.current.unstable_caches.rows.idToIdLookup = updatedIdToIdLookup;
     apiRef.current.unstable_caches.rows.ids = updatedRows;
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      rows: (0, _extends2.default)({}, state.rows, {
+    apiRef.current.setState(state => {
+      const newRowsState = {
         idRowsLookup: updatedIdRowsLookup,
         idToIdLookup: updatedIdToIdLookup,
         tree: updatedTree,
         ids: updatedRows
-      })
-    }));
+      };
+      return (0, _extends2.default)({}, state, {
+        rows: (0, _extends2.default)({}, state.rows, newRowsState, {
+          groupingResponseBeforeRowHydration: (0, _extends2.default)({}, state.rows.groupingResponseBeforeRowHydration, newRowsState)
+        })
+      });
+    });
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {

package/node/index.js

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

package/node/utils/domUtils.js

@@ -47,19 +47,20 @@ function getGridColumnHeaderElement(root, field) {
   return root.querySelector(`[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
 
+function getGridRowElementSelector(id) {
+  return `.${_gridClasses.gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`;
+}
+
 function getGridRowElement(root, id) {
-  return root.querySelector(`.${_gridClasses.gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`);
+  return root.querySelector(getGridRowElementSelector(id));
 }
 
 function getGridCellElement(root, {
   id,
   field
 }) {
-  const row = getGridRowElement(root, id);
-
-  if (!row) {
-    return null;
-  }
-
-  return row.querySelector(`.${_gridClasses.gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`);
+  const rowSelector = getGridRowElementSelector(id);
+  const cellSelector = `.${_gridClasses.gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
+  const selector = `${rowSelector} ${cellSelector}`;
+  return root.querySelector(selector);
 }

package/package.json

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

package/utils/domUtils.js

@@ -27,18 +27,20 @@ function escapeOperandAttributeSelector(operand) {
 export function getGridColumnHeaderElement(root, field) {
   return root.querySelector(`[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`);
 }
+
+function getGridRowElementSelector(id) {
+  return `.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`;
+}
+
 export function getGridRowElement(root, id) {
-  return root.querySelector(`.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`);
+  return root.querySelector(getGridRowElementSelector(id));
 }
 export function getGridCellElement(root, {
   id,
   field
 }) {
-  const row = getGridRowElement(root, id);
-
-  if (!row) {
-    return null;
-  }
-
-  return row.querySelector(`.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`);
+  const rowSelector = getGridRowElementSelector(id);
+  const cellSelector = `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
+  const selector = `${rowSelector} ${cellSelector}`;
+  return root.querySelector(selector);
 }