@mui/x-data-grid 6.7.0 → 6.9.0

package/hooks/features/filter/gridFilterUtils.js

@@ -183,22 +183,26 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
     passingQuickFilterValues: isRowMatchingQuickFilter && isRowMatchingQuickFilter(rowId, shouldApplyFilter)
   });
 };
-export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef) => {
-  var _filterModel$quickFil, _filterModel$logicOpe;
-  const cleanedFilterItems = filterModel.items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
-  const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
-  const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null);
-
-  // Defaultize operators
-  const quickFilterLogicOperator = (_filterModel$quickFil = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil : getDefaultGridFilterModel().quickFilterLogicOperator;
-  const logicOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : getDefaultGridFilterModel().logicOperator;
+const isNotNull = result => result != null;
+const filterModelItems = (cache, apiRef, items) => {
+  if (!cache.cleanedFilterItems) {
+    cache.cleanedFilterItems = items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
+  }
+  return cache.cleanedFilterItems;
+};
+export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache) => {
+  const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
+  const cleanedFilterItemResults = allFilterItemResults.filter(isNotNull);
+  const cleanedQuickFilterResults = allQuickFilterResults.filter(isNotNull);
 
   // get result for filter items model
-  if (cleanedAllFilterItemResults.length > 0) {
+  if (cleanedFilterItemResults.length > 0) {
+    var _filterModel$logicOpe;
     // Return true if the item pass with one of the rows
     const filterItemPredicate = item => {
-      return cleanedAllFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
+      return cleanedFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
     };
+    const logicOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : getDefaultGridFilterModel().logicOperator;
     if (logicOperator === GridLogicOperator.And) {
       const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
       if (!passesAllFilters) {
@@ -213,11 +217,13 @@ export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, fil
   }
 
   // get result for quick filter model
-  if (cleanedAllQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+  if (cleanedQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+    var _filterModel$quickFil;
     // Return true if the item pass with one of the rows
     const quickFilterValuePredicate = value => {
-      return cleanedAllQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
+      return cleanedQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
     };
+    const quickFilterLogicOperator = (_filterModel$quickFil = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil : getDefaultGridFilterModel().quickFilterLogicOperator;
     if (quickFilterLogicOperator === GridLogicOperator.And) {
       const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
       if (!passesAllQuickFilterValues) {

package/hooks/features/filter/useGridFilter.js

@@ -261,6 +261,7 @@ export const useGridFilter = (apiRef, props) => {
       const tree = gridRowTreeSelector(apiRef);
       const rowIds = tree[GRID_ROOT_GROUP_ID].children;
       const filteredRowsLookup = {};
+      const filterCache = {};
       for (let i = 0; i < rowIds.length; i += 1) {
         const rowId = rowIds[i];
         let isRowPassing;
@@ -271,7 +272,7 @@ export const useGridFilter = (apiRef, props) => {
             passingFilterItems,
             passingQuickFilterValues
           } = params.isRowMatchingFilters(rowId);
-          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
+          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef, filterCache);
         }
         filteredRowsLookup[rowId] = isRowPassing;
       }

package/hooks/features/focus/useGridFocus.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument } from '@mui/utils';
+import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -236,7 +237,6 @@ export const useGridFocus = (apiRef, props) => {
     }
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef]);
-  const focussedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef);
   const handleColumnGroupHeaderFocus = React.useCallback(({
     fields,
     depth
@@ -244,13 +244,18 @@ export const useGridFocus = (apiRef, props) => {
     if (event.target !== event.currentTarget) {
       return;
     }
-    if (focussedColumnGroup !== null && focussedColumnGroup.depth === depth && fields.includes(focussedColumnGroup.field)) {
+    const focusedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef);
+    if (focusedColumnGroup !== null && focusedColumnGroup.depth === depth && fields.includes(focusedColumnGroup.field)) {
       // This group cell has already been focused
       return;
     }
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
-  }, [apiRef, focussedColumnGroup]);
-  const handleBlur = React.useCallback(() => {
+  }, [apiRef]);
+  const handleBlur = React.useCallback((_, event) => {
+    var _event$relatedTarget;
+    if ((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.className.includes(gridClasses.columnHeader)) {
+      return;
+    }
     logger.debug(`Clearing focus`);
     apiRef.current.setState(state => _extends({}, state, {
       focus: {

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -13,7 +13,6 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPan
 import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
-import { useGridSelector } from '../../utils/useGridSelector';
 import { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
@@ -322,12 +321,12 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
-  const focusedColumnGroup = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const dimensions = apiRef.current.getRootDimensions();
     if (!dimensions) {
       return;
     }
+    const focusedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef);
     if (focusedColumnGroup === null) {
       return;
     }
@@ -411,7 +410,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, focusedColumnGroup, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {

package/hooks/features/pagination/gridPaginationSelector.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 import { gridFilteredTopLevelRowCountSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 import { getPageCount } from './gridPaginationUtils';
@@ -37,7 +37,7 @@ export const gridPageCountSelector = createSelector(gridPaginationModelSelector,
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export const gridPaginationRowRangeSelector = createSelector(gridPaginationModelSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowEntriesSelector, gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginationModelSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowEntriesSelector, gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
@@ -79,7 +79,7 @@ export const gridPaginationRowRangeSelector = createSelector(gridPaginationModel
  * Get the id and the model of each row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export const gridPaginatedVisibleSortedGridRowEntriesSelector = createSelector(gridExpandedSortedRowEntriesSelector, gridPaginationRowRangeSelector, (visibleSortedRowEntries, paginationRange) => {
+export const gridPaginatedVisibleSortedGridRowEntriesSelector = createSelectorMemoized(gridExpandedSortedRowEntriesSelector, gridPaginationRowRangeSelector, (visibleSortedRowEntries, paginationRange) => {
   if (!paginationRange) {
     return [];
   }
@@ -90,7 +90,7 @@ export const gridPaginatedVisibleSortedGridRowEntriesSelector = createSelector(g
  * Get the id of each row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export const gridPaginatedVisibleSortedGridRowIdsSelector = createSelector(gridExpandedSortedRowIdsSelector, gridPaginationRowRangeSelector, (visibleSortedRowIds, paginationRange) => {
+export const gridPaginatedVisibleSortedGridRowIdsSelector = createSelectorMemoized(gridExpandedSortedRowIdsSelector, gridPaginationRowRangeSelector, (visibleSortedRowIds, paginationRange) => {
   if (!paginationRange) {
     return [];
   }

package/hooks/features/rowSelection/gridRowSelectionSelector.js

@@ -1,9 +1,9 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
 export const gridRowSelectionStateSelector = state => state.rowSelection;
 export const selectedGridRowsCountSelector = createSelector(gridRowSelectionStateSelector, selection => selection.length);
-export const selectedGridRowsSelector = createSelector(gridRowSelectionStateSelector, gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));
-export const selectedIdsLookupSelector = createSelector(gridRowSelectionStateSelector, selection => selection.reduce((lookup, rowId) => {
+export const selectedGridRowsSelector = createSelectorMemoized(gridRowSelectionStateSelector, gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));
+export const selectedIdsLookupSelector = createSelectorMemoized(gridRowSelectionStateSelector, selection => selection.reduce((lookup, rowId) => {
   lookup[rowId] = rowId;
   return lookup;
 }, {}));

package/hooks/features/rows/gridRowsSelector.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 const gridRowsStateSelector = state => state.rows;
 export const gridRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalRowCount);
 export const gridRowsLoadingSelector = createSelector(gridRowsStateSelector, rows => rows.loading);
@@ -10,7 +10,7 @@ export const gridRowsDataRowIdToIdLookupSelector = createSelector(gridRowsStateS
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthsSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepths);
-export const gridRowMaximumTreeDepthSelector = createSelector(gridRowsStateSelector, rows => {
+export const gridRowMaximumTreeDepthSelector = createSelectorMemoized(gridRowsStateSelector, rows => {
   const entries = Object.entries(rows.treeDepths);
   if (entries.length === 0) {
     return 1;
@@ -27,7 +27,7 @@ export const gridAdditionalRowGroupsSelector = createSelector(gridRowsStateSelec
 /**
  * @ignore - do not document.
  */
-export const gridPinnedRowsSelector = createSelector(gridAdditionalRowGroupsSelector, additionalRowGroups => {
+export const gridPinnedRowsSelector = createSelectorMemoized(gridAdditionalRowGroupsSelector, additionalRowGroups => {
   var _rawPinnedRows$bottom, _rawPinnedRows$top;
   const rawPinnedRows = additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows;
   return {

package/hooks/features/rows/useGridParamsApi.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+export declare class MissingRowIdError extends Error {
+}
 /**
  * @requires useGridColumns (method)
  * @requires useGridRows (method)

package/hooks/features/rows/useGridParamsApi.js

@@ -2,11 +2,7 @@ import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
-let warnedOnceMissingColumn = false;
-function warnMissingColumn(field) {
-  console.warn([`MUI: You are calling getValue('${field}') but the column \`${field}\` is not defined.`, `Instead, you can access the data from \`params.row.${field}\`.`].join('\n'));
-  warnedOnceMissingColumn = true;
-}
+export class MissingRowIdError extends Error {}
 
 /**
  * @requires useGridColumns (method)
@@ -24,7 +20,7 @@ export function useGridParamsApi(apiRef) {
   const getRowParams = React.useCallback(id => {
     const row = apiRef.current.getRow(id);
     if (!row) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const params = {
       id,
@@ -37,7 +33,7 @@ export function useGridParamsApi(apiRef) {
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const cellFocus = gridFocusCellSelector(apiRef);
     const cellTabIndex = gridTabIndexCellSelector(apiRef);
@@ -61,7 +57,7 @@ export function useGridParamsApi(apiRef) {
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const cellFocus = gridFocusCellSelector(apiRef);
     const cellTabIndex = gridTabIndexCellSelector(apiRef);
@@ -75,7 +71,8 @@ export function useGridParamsApi(apiRef) {
       hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
       tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
       value,
-      formattedValue: value
+      formattedValue: value,
+      isEditable: false
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter({
@@ -90,15 +87,10 @@ export function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    if (process.env.NODE_ENV !== 'production') {
-      if (!colDef && !warnedOnceMissingColumn) {
-        warnMissingColumn(field);
-      }
-    }
     if (!colDef || !colDef.valueGetter) {
       const rowModel = apiRef.current.getRow(id);
       if (!rowModel) {
-        throw new Error(`No row with id #${id} found`);
+        throw new MissingRowIdError(`No row with id #${id} found`);
       }
       return rowModel[field];
     }

package/hooks/features/sorting/gridSortingSelector.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
 
 /**
@@ -17,7 +17,7 @@ export const gridSortedRowIdsSelector = createSelector(gridSortingStateSelector,
  * Get the id and the model of the rows after the sorting process.
  * @category Sorting
  */
-export const gridSortedRowEntriesSelector = createSelector(gridSortedRowIdsSelector, gridRowsLookupSelector,
+export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRowIdsSelector, gridRowsLookupSelector,
 // TODO rows v6: Is this the best approach ?
 (sortedIds, idRowsLookup) => sortedIds.map(id => {
   var _idRowsLookup$id;
@@ -36,7 +36,7 @@ export const gridSortModelSelector = createSelector(gridSortingStateSelector, so
  * @category Sorting
  * @ignore - do not document.
  */
-export const gridSortColumnLookupSelector = createSelector(gridSortModelSelector, sortModel => {
+export const gridSortColumnLookupSelector = createSelectorMemoized(gridSortModelSelector, sortModel => {
   const result = sortModel.reduce((res, sortItem, index) => {
     res[sortItem.field] = {
       sortDirection: sortItem.sort,