@mui/x-data-grid 6.9.0 → 6.9.2

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -15,6 +15,7 @@ export function computeFlexColumnsWidth({
   totalFlexUnits,
   flexColumns
 }) {
+  const uniqueFlexColumns = new Set(flexColumns.map(col => col.field));
   const flexColumnsLookup = {
     all: {},
     frozenFields: [],
@@ -30,7 +31,7 @@ export function computeFlexColumnsWidth({
   // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
   function loopOverFlexItems() {
     // 5a: If all the flex items on the line are frozen, free space has been distributed.
-    if (flexColumnsLookup.frozenFields.length === flexColumns.length) {
+    if (flexColumnsLookup.frozenFields.length === uniqueFlexColumns.size) {
       return;
     }
     const violationsLookup = {

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

@@ -72,7 +72,7 @@ export function useGridDimensions(apiRef, props) {
     let hasScrollY;
     if (props.autoHeight) {
       hasScrollY = false;
-      hasScrollX = Math.round(columnsTotalWidth) > rootDimensionsRef.current.width;
+      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
         height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
@@ -88,7 +88,7 @@ export function useGridDimensions(apiRef, props) {
           height: rowsMeta.currentPageTotalHeight
         },
         container: {
-          width: viewportOuterSize.width,
+          width: Math.round(viewportOuterSize.width),
           height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
         },
         scrollBarSize

package/modern/hooks/features/editing/useGridEditing.js

@@ -107,7 +107,7 @@ export const useGridEditing = (apiRef, props) => {
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return editingState[id][field];
+    return editingState[id]?.[field] ?? null;
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -10,7 +10,7 @@ import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
-import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
@@ -114,7 +114,7 @@ export const useGridRowEditing = (apiRef, props) => {
       } else if (event.key === 'Enter') {
         reason = GridRowEditStopReasons.enterKeyDown;
       } else if (event.key === 'Tab') {
-        const columnFields = gridColumnFieldsSelector(apiRef).filter(field => {
+        const columnFields = gridVisibleColumnFieldsSelector(apiRef).filter(field => {
           const column = apiRef.current.getColumn(field);
           if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
             return true;

package/modern/hooks/features/filter/gridFilterUtils.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLogicOperator } from '../../../models';
+import { GLOBAL_API_REF, isInternalFilter } from '../../../colDef/utils';
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
@@ -84,27 +85,47 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   if (!filterOperator) {
     throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operator}'.`);
   }
+  const hasUserFunctionLegacy = !isInternalFilter(filterOperator.getApplyFilterFn);
+  const hasUserFunctionV7 = !isInternalFilter(filterOperator.getApplyFilterFnV7);
+  if (filterOperator.getApplyFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) {
+    const applyFilterOnRow = filterOperator.getApplyFilterFnV7(newFilterItem, column);
+    if (typeof applyFilterOnRow !== 'function') {
+      return null;
+    }
+    return {
+      v7: true,
+      item: newFilterItem,
+      fn: row => {
+        const value = apiRef.current.getRowValue(row, column);
+        return applyFilterOnRow(value, row, column, apiRef);
+      }
+    };
+  }
   const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
   if (typeof applyFilterOnRow !== 'function') {
     return null;
   }
-  const fn = rowId => {
-    const cellParams = apiRef.current.getCellParams(rowId, newFilterItem.field);
-    return applyFilterOnRow(cellParams);
-  };
   return {
-    fn,
-    item: newFilterItem
+    v7: false,
+    item: newFilterItem,
+    fn: rowId => {
+      const params = apiRef.current.getCellParams(rowId, newFilterItem.field);
+      GLOBAL_API_REF.current = apiRef;
+      const result = applyFilterOnRow(params);
+      GLOBAL_API_REF.current = null;
+      return result;
+    }
   };
 };
 
 /**
  * Generates a method to easily check if a row is matching the current filter model.
+ * @param {GridRowIdGetter | undefined} getRowId The getter for row's id.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
  * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
+export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef) => {
   const {
     items
   } = filterModel;
@@ -112,74 +133,109 @@ export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   if (appliers.length === 0) {
     return null;
   }
-  return (rowId, shouldApplyFilter) => {
+  return (row, shouldApplyFilter) => {
     const resultPerItemId = {};
-    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.field)) : appliers;
-    filteredAppliers.forEach(applier => {
-      resultPerItemId[applier.item.id] = applier.fn(rowId);
-    });
+    for (let i = 0; i < appliers.length; i += 1) {
+      const applier = appliers[i];
+      if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
+        resultPerItemId[applier.item.id] = applier.v7 ? applier.fn(row) : applier.fn(getRowId ? getRowId(row) : row.id);
+      }
+    }
     return resultPerItemId;
   };
 };
 
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
- * @param {any[]} values The model with which we want to filter the rows.
+ * @param {GridRowIdGetter | undefined} getRowId The getter for row's id.
+ * @param {any[]} filterModel The model with which we want to filter the rows.
  * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
-  const {
-    quickFilterValues = []
-  } = filterModel;
+export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
+  const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
   }
-  const columnsFields = gridColumnFieldsSelector(apiRef);
-  const appliersPerField = {};
-  columnsFields.forEach(field => {
+  const columnFields = gridColumnFieldsSelector(apiRef);
+  const appliersPerField = [];
+  columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);
     const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
-    if (!getApplyQuickFilterFn) {
-      return;
+    const getApplyQuickFilterFnV7 = column?.getApplyQuickFilterFnV7;
+    const hasUserFunctionLegacy = !isInternalFilter(getApplyQuickFilterFn);
+    const hasUserFunctionV7 = !isInternalFilter(getApplyQuickFilterFnV7);
+    if (getApplyQuickFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) {
+      appliersPerField.push({
+        column,
+        appliers: quickFilterValues.map(value => ({
+          v7: true,
+          fn: getApplyQuickFilterFnV7(value, column, apiRef)
+        }))
+      });
+    } else if (getApplyQuickFilterFn) {
+      appliersPerField.push({
+        column,
+        appliers: quickFilterValues.map(value => ({
+          v7: false,
+          fn: getApplyQuickFilterFn(value, column, apiRef)
+        }))
+      });
     }
-    appliersPerField[field] = quickFilterValues.map(value => getApplyQuickFilterFn(value, column, apiRef));
   });
-
-  // If some value does not have an applier we ignore them
-  const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerField).some(field => appliersPerField[field][index] != null));
-  if (sanitizedQuickFilterValues.length === 0) {
-    return null;
-  }
-  return (rowId, shouldApplyFilter) => {
+  return function isRowMatchingQuickFilter(row, shouldApplyFilter) {
+    const result = {};
     const usedCellParams = {};
-    const fieldsToFilter = [];
-    Object.keys(appliersPerField).forEach(field => {
-      if (!shouldApplyFilter || shouldApplyFilter(field)) {
-        usedCellParams[field] = apiRef.current.getCellParams(rowId, field);
-        fieldsToFilter.push(field);
-      }
-    });
-    const quickFilterValueResult = {};
-    sanitizedQuickFilterValues.forEach((value, index) => {
-      const isPassing = fieldsToFilter.some(field => {
-        if (appliersPerField[field][index] == null) {
-          return false;
+
+    /* eslint-disable no-restricted-syntax, no-labels, no-continue */
+    outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
+      const filterValue = quickFilterValues[v];
+      for (let i = 0; i < appliersPerField.length; i += 1) {
+        const {
+          column,
+          appliers
+        } = appliersPerField[i];
+        const {
+          field
+        } = column;
+        if (shouldApplyFilter && !shouldApplyFilter(field)) {
+          continue;
         }
-        return appliersPerField[field][index]?.(usedCellParams[field]);
-      });
-      quickFilterValueResult[value] = isPassing;
-    });
-    return quickFilterValueResult;
+        const applier = appliers[v];
+        const value = apiRef.current.getRowValue(row, column);
+        if (applier.fn === null) {
+          continue;
+        }
+        if (applier.v7) {
+          const isMatching = applier.fn(value, row, column, apiRef);
+          if (isMatching) {
+            result[filterValue] = true;
+            continue outer;
+          }
+        } else {
+          const cellParams = usedCellParams[field] ?? apiRef.current.getCellParams(getRowId ? getRowId(row) : row.id, field);
+          usedCellParams[field] = cellParams;
+          const isMatching = applier.fn(cellParams);
+          if (isMatching) {
+            result[filterValue] = true;
+            continue outer;
+          }
+        }
+      }
+      result[filterValue] = false;
+    }
+    /* eslint-enable no-restricted-syntax, no-labels, no-continue */
+
+    return result;
   };
 };
-export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
-  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
-  return (rowId, shouldApplyFilter) => ({
-    passingFilterItems: isRowMatchingFilterItems && isRowMatchingFilterItems(rowId, shouldApplyFilter),
-    passingQuickFilterValues: isRowMatchingQuickFilter && isRowMatchingQuickFilter(rowId, shouldApplyFilter)
-  });
+export const buildAggregatedFilterApplier = (getRowId, filterModel, apiRef) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef);
+  return function isRowMatchingFilters(row, shouldApplyFilter, result) {
+    result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;
+    result.passingQuickFilterValues = isRowMatchingQuickFilter?.(row, shouldApplyFilter) ?? null;
+  };
 };
 const isNotNull = result => result != null;
 const filterModelItems = (cache, apiRef, items) => {

package/modern/hooks/features/filter/useGridFilter.js

@@ -9,7 +9,7 @@ import { GridPreferencePanelsValue } from '../preferencesPanel/gridPreferencePan
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { gridFilterModelSelector } from './gridFilterSelector';
 import { useFirstRender } from '../../utils/useFirstRender';
-import { GRID_ROOT_GROUP_ID, gridRowTreeSelector } from '../rows';
+import { gridRowsLookupSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
 import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic } from './gridFilterUtils';
@@ -53,7 +53,7 @@ export const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(props.getRowId, filterModel, apiRef) : null;
       const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel ?? getDefaultGridFilterModel()
@@ -67,7 +67,7 @@ export const useGridFilter = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('filteredRowsSet');
-  }, [props.filterMode, apiRef]);
+  }, [apiRef, props.filterMode, props.getRowId]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
@@ -250,36 +250,45 @@ export const useGridFilter = (apiRef, props) => {
     }
     return initialValue;
   }, [props.slots.filterPanel, props.slotProps?.filterPanel]);
+  const dataRowIdToIdLookup = apiRef.current.state.rows.dataRowIdToModelLookup;
+  const rows = React.useMemo(() => Object.values(dataRowIdToIdLookup), [dataRowIdToIdLookup]);
+  const {
+    getRowId
+  } = props;
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode === 'client' && params.isRowMatchingFilters) {
-      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;
-        if (typeof rowId === 'string' && rowId.startsWith('auto-generated-group-footer')) {
-          isRowPassing = true;
-        } else {
-          const {
-            passingFilterItems,
-            passingQuickFilterValues
-          } = params.isRowMatchingFilters(rowId);
-          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef, filterCache);
-        }
-        filteredRowsLookup[rowId] = isRowPassing;
-      }
+    if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
       return {
-        filteredRowsLookup,
+        filteredRowsLookup: {},
         filteredDescendantCountLookup: {}
       };
     }
+    const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
+    const filteredRowsLookup = {};
+    const {
+      isRowMatchingFilters
+    } = params;
+    const filterCache = {};
+    const result = {
+      passingFilterItems: null,
+      passingQuickFilterValues: null
+    };
+    for (let i = 0; i < rows.length; i += 1) {
+      const row = rows[i];
+      const id = getRowId ? getRowId(row) : row.id;
+      isRowMatchingFilters(row, undefined, result);
+      const isRowPassing = passFilterLogic([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
+      filteredRowsLookup[id] = isRowPassing;
+    }
+    const footerId = 'auto-generated-group-footer-root';
+    const footer = dataRowIdToModelLookup[footerId];
+    if (footer) {
+      filteredRowsLookup[footerId] = true;
+    }
     return {
-      filteredRowsLookup: {},
+      filteredRowsLookup,
       filteredDescendantCountLookup: {}
     };
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, rows, props.filterMode, getRowId]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);

package/modern/hooks/features/pagination/gridPaginationSelector.js

@@ -61,12 +61,16 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginat
   let topLevelRowAdded = 0;
   while (lastRowIndex < visibleSortedRowEntries.length && topLevelRowAdded <= topLevelRowsInCurrentPageCount) {
     const row = visibleSortedRowEntries[lastRowIndex];
-    const depth = rowTree[row.id].depth;
-    if (topLevelRowAdded < topLevelRowsInCurrentPageCount || depth > 0) {
+    const depth = rowTree[row.id]?.depth;
+    if (depth === undefined) {
       lastRowIndex += 1;
-    }
-    if (depth === 0) {
-      topLevelRowAdded += 1;
+    } else {
+      if (topLevelRowAdded < topLevelRowsInCurrentPageCount || depth > 0) {
+        lastRowIndex += 1;
+      }
+      if (depth === 0) {
+        topLevelRowAdded += 1;
+      }
     }
   }
   return {

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from './gridRowsSelector';
 import { gridDensityFactorSelector } from '../density/densitySelector';
 export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
+export const GRID_ID_AUTOGENERATED = Symbol('mui-autogenerated-id');
 export const buildRootGroup = () => ({
   type: 'group',
   id: GRID_ROOT_GROUP_ID,

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
+import { GRID_ID_AUTOGENERATED } from './gridRowsUtils';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 export class MissingRowIdError extends Error {}
@@ -12,7 +13,10 @@ export class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export function useGridParamsApi(apiRef) {
+export function useGridParamsApi(apiRef, props) {
+  const {
+    getRowId
+  } = props;
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -96,6 +100,28 @@ export function useGridParamsApi(apiRef) {
     }
     return colDef.valueGetter(getBaseCellParams(id, field));
   }, [apiRef, getBaseCellParams]);
+  const getRowValue = React.useCallback((row, colDef) => {
+    const id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : getRowId?.(row) ?? row.id;
+    const field = colDef.field;
+    if (!colDef || !colDef.valueGetter) {
+      return row[field];
+    }
+    return colDef.valueGetter(getBaseCellParams(id, field));
+  }, [getBaseCellParams, getRowId]);
+  const getRowFormattedValue = React.useCallback((row, colDef) => {
+    const value = getRowValue(row, colDef);
+    if (!colDef || !colDef.valueFormatter) {
+      return value;
+    }
+    const id = (getRowId ? getRowId(row) : row.id) ?? row[GRID_ID_AUTOGENERATED];
+    const field = colDef.field;
+    return colDef.valueFormatter({
+      id,
+      field,
+      value,
+      api: apiRef.current
+    });
+  }, [apiRef, getRowId, getRowValue]);
   const getColumnHeaderElement = React.useCallback(field => {
     if (!apiRef.current.rootElementRef.current) {
       return null;
@@ -121,6 +147,8 @@ export function useGridParamsApi(apiRef) {
     getCellValue,
     getCellParams,
     getCellElement,
+    getRowValue,
+    getRowFormattedValue,
     getRowParams,
     getRowElement,
     getColumnHeaderParams,

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

@@ -7,7 +7,7 @@ import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEve
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
 import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
-import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel } from './gridRowsUtils';
+import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel } from './gridRowsUtils';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rows = createRowsInternalCache({
@@ -46,8 +46,9 @@ export const useGridRows = (apiRef, props) => {
     }
     const node = apiRef.current.getRowNode(id);
     if (node && isAutoGeneratedRow(node)) {
-      // TODO rows v6: Is it the best approach ?
-      return {};
+      return {
+        [GRID_ID_AUTOGENERATED]: id
+      };
     }
     return null;
   }, [apiRef]);

package/modern/index.js

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

package/modern/internals/index.js

@@ -56,4 +56,5 @@ export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
+export * from '../colDef/utils';
 export * from './utils';

package/modern/joy/joySlots.js

@@ -20,11 +20,14 @@ import JoySelect from '@mui/joy/Select';
 import JoyOption from '@mui/joy/Option';
 import JoyBox from '@mui/joy/Box';
 import JoyTypography from '@mui/joy/Typography';
+import JoyCircularProgress from '@mui/joy/CircularProgress';
+import JoyTooltip from '@mui/joy/Tooltip';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import joyIconSlots, { GridKeyboardArrowRight, GridKeyboardArrowLeft } from './icons';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridFilteredTopLevelRowCountSelector, gridPaginationModelSelector } from '../hooks';
+import { GridOverlay } from '../components/containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function convertColor(color) {
@@ -296,7 +299,20 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef]);
   const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
   const pageSize = paginationModel.pageSize;
-  const pageSizeOptions = rootProps.pageSizeOptions?.includes(pageSize) ? rootProps.pageSizeOptions : [];
+  const isPageSizeIncludedInPageSizeOptions = () => {
+    for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      const option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions() ? rootProps.pageSizeOptions : [];
   const handleChangeRowsPerPage = (event, newValue) => {
     const newPageSize = Number(newValue);
     apiRef.current.setPageSize(newPageSize);
@@ -320,9 +336,9 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
         value: pageSize,
         children: pageSizeOptions.map(option => {
           return /*#__PURE__*/_jsx(Option, {
-            value: option,
-            children: option
-          }, option);
+            value: typeof option !== 'number' && option.value ? option.value : option,
+            children: typeof option !== 'number' && option.label ? option.label : `${option}`
+          }, typeof option !== 'number' && option.label ? option.label : `${option}`);
         })
       })]
     }), /*#__PURE__*/_jsx(JoyTypography, {
@@ -367,6 +383,12 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     })]
   });
 });
+const LoadingOverlay = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({}, props, {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(JoyCircularProgress, {})
+  }));
+});
 const joySlots = _extends({}, joyIconSlots, {
   baseCheckbox: Checkbox,
   baseTextField: TextField,
@@ -377,8 +399,8 @@ const joySlots = _extends({}, joyIconSlots, {
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
   baseFormControl: JoyFormControl,
-  // BaseTooltip: MUITooltip,
-  // BasePopper: MUIPopper,
-  pagination: Pagination
+  baseTooltip: JoyTooltip,
+  pagination: Pagination,
+  loadingOverlay: LoadingOverlay
 });
 export default joySlots;

package/modern/locales/esES.js

@@ -8,8 +8,8 @@ const esESGrid = {
   toolbarDensity: 'Densidad',
   toolbarDensityLabel: 'Densidad',
   toolbarDensityCompact: 'Compacta',
-  toolbarDensityStandard: 'Standard',
-  toolbarDensityComfortable: 'Comoda',
+  toolbarDensityStandard: 'Estándar',
+  toolbarDensityComfortable: 'Cómoda',
   // Columns selector toolbar button text
   toolbarColumns: 'Columnas',
   toolbarColumnsLabel: 'Seleccionar columnas',
@@ -37,7 +37,7 @@ const esESGrid = {
   columnsPanelHideAllButton: 'Ocultar todo',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Remover todos',
   filterPanelDeleteIconLabel: 'Borrar',
   filterPanelLogicOperator: 'Operador lógico',
   filterPanelOperator: 'Operadores',