@mui/x-data-grid 6.9.0 → 6.9.2

package/colDef/gridStringOperators.js

@@ -1,35 +1,33 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { escapeRegExp } from '../utils/utils';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
-export const getGridStringQuickFilterFn = value => {
+import { convertLegacyOperators, tagInternalFilter } from './utils';
+export const getGridStringQuickFilterFn = tagInternalFilter(value => {
   if (!value) {
     return null;
   }
   const filterRegex = new RegExp(escapeRegExp(value), 'i');
-  return ({
-    formattedValue: columnValue
-  }) => {
+  return (_, row, column, apiRef) => {
+    const columnValue = apiRef.current.getRowFormattedValue(row, column);
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
-};
-export const getGridStringOperators = (disableTrim = false) => [{
+});
+export const getGridStringOperators = (disableTrim = false) => convertLegacyOperators([{
   value: 'contains',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
-    return ({
-      value
-    }) => {
-      return value != null ? filterRegex.test(value.toString()) : false;
+    return value => {
+      return value != null ? filterRegex.test(String(value)) : false;
     };
   },
   InputComponent: GridFilterInputValue
 }, {
   value: 'equals',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
@@ -38,66 +36,56 @@ export const getGridStringOperators = (disableTrim = false) => [{
       sensitivity: 'base',
       usage: 'search'
     });
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
     };
   },
   InputComponent: GridFilterInputValue
 }, {
   value: 'startsWith',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp(`^${escapeRegExp(filterItemValue)}.*$`, 'i');
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? filterRegex.test(value.toString()) : false;
     };
   },
   InputComponent: GridFilterInputValue
 }, {
   value: 'endsWith',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const filterRegex = new RegExp(`.*${escapeRegExp(filterItemValue)}$`, 'i');
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null ? filterRegex.test(value.toString()) : false;
     };
   },
   InputComponent: GridFilterInputValue
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value === '' || value == null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value !== '' && value != null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isAnyOf',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
@@ -106,11 +94,9 @@ export const getGridStringOperators = (disableTrim = false) => [{
       sensitivity: 'base',
       usage: 'search'
     });
-    return ({
-      value
-    }) => value != null ? filterItemValue.some(filterValue => {
+    return value => value != null ? filterItemValue.some(filterValue => {
       return collator.compare(filterValue, value.toString() || '') === 0;
     }) : false;
   },
   InputComponent: GridFilterInputMultipleValue
-}];
+}]);

package/colDef/utils.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../models/api/gridApiCommunity';
+import { GetApplyFilterFnV7, GetApplyFilterFnLegacy, GridFilterOperator } from '../models';
+import { GetApplyQuickFilterFnV7, GetApplyQuickFilterFnLegacy } from '../models/colDef/gridColDef';
+/**
+ * A global API ref, for v7-to-legacy converter
+ */
+export declare const GLOBAL_API_REF: {
+    current: React.MutableRefObject<GridApiCommunity> | null;
+};
+/**
+ * A tagger to determine if the filter is internal or custom user-supplied.
+ * To be a valid internal filter, the V7 function *must* be defined/redefined at
+ * the same time as the legacy one.
+ * https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
+ */
+export declare function tagInternalFilter<T>(fn: T): T;
+export declare function isInternalFilter(fn: Function | undefined): boolean;
+export declare function convertFilterV7ToLegacy(fn: GetApplyFilterFnV7): GetApplyFilterFnLegacy;
+export declare function convertLegacyOperators(ops: Omit<GridFilterOperator, 'getApplyFilterFn'>[]): GridFilterOperator[];
+export declare function convertQuickFilterV7ToLegacy(fn: GetApplyQuickFilterFnV7): GetApplyQuickFilterFnLegacy<any, any, any>;

package/colDef/utils.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * A global API ref, for v7-to-legacy converter
+ */
+export const GLOBAL_API_REF = {
+  current: null
+};
+
+/**
+ * A tagger to determine if the filter is internal or custom user-supplied.
+ * To be a valid internal filter, the V7 function *must* be defined/redefined at
+ * the same time as the legacy one.
+ * https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
+ */
+export function tagInternalFilter(fn) {
+  fn.isInternal = true;
+  return fn;
+}
+export function isInternalFilter(fn) {
+  return fn !== undefined && fn.isInternal === true;
+}
+export function convertFilterV7ToLegacy(fn) {
+  return tagInternalFilter((filterItem, column) => {
+    const filterFn = fn(filterItem, column);
+    if (!filterFn) {
+      return filterFn;
+    }
+    return cellParams => {
+      return filterFn(cellParams.value, cellParams.row, column, GLOBAL_API_REF.current);
+    };
+  });
+}
+export function convertLegacyOperators(ops) {
+  return ops.map(op => {
+    return _extends({}, op, {
+      getApplyFilterFn: convertFilterV7ToLegacy(op.getApplyFilterFnV7),
+      getApplyFilterFnV7: tagInternalFilter(op.getApplyFilterFnV7)
+    });
+  });
+}
+export function convertQuickFilterV7ToLegacy(fn) {
+  return tagInternalFilter((filterItem, column, apiRef) => {
+    const filterFn = fn(filterItem, column, apiRef);
+    if (!filterFn) {
+      return filterFn;
+    }
+    return cellParams => {
+      return filterFn(cellParams.value, cellParams.row, column, apiRef);
+    };
+  });
+}

package/components/GridPagination.js

@@ -25,7 +25,6 @@ const GridPaginationRoot = styled(TablePagination)(({
   }
 }));
 export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
-  var _rootProps$pageSizeOp;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
@@ -42,22 +41,36 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   const handlePageChange = React.useCallback((_, page) => {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  const isPageSizeIncludedInPageSizeOptions = pageSize => {
+    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;
+  };
   if (process.env.NODE_ENV !== 'production') {
     var _rootProps$pagination, _rootProps$pagination2;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     ref: ref,
     component: "div",
     count: rowCount,
     page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
-    rowsPerPageOptions: (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.includes(paginationModel.pageSize) ? rootProps.pageSizeOptions : [],
+    rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange

package/components/cell/GridCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _excluded2 = ["align", "children", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

package/components/cell/GridEditDateCell.js

@@ -112,7 +112,7 @@ function GridEditDateCell(props) {
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   const handleInputRef = el => {
     inputRef.current = el;
-    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+    if (meta != null && meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
       const inputValue = inputRef.current.value;
       const parsedDate = parseValueToDate(inputValue);
       setValueState({

package/components/cell/GridEditInputCell.js

@@ -68,12 +68,12 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       unstable_skipValueParser: true
     }, event);
   }, [apiRef, debounceMs, field, id, onValueChange]);
-  const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   useEnhancedEffect(() => {
     if (hasFocus) {
       inputRef.current.focus();

package/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/hooks/features/dimensions/useGridDimensions.js

@@ -73,7 +73,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)
@@ -89,7 +89,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/hooks/features/editing/useGridEditing.js

@@ -106,8 +106,9 @@ export const useGridEditing = (apiRef, props) => {
     return props.editMode === GridEditModes.Cell ? apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
+    var _editingState$id$fiel, _editingState$id;
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return editingState[id][field];
+    return (_editingState$id$fiel = (_editingState$id = editingState[id]) == null ? void 0 : _editingState$id[field]) != null ? _editingState$id$fiel : null;
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/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';
@@ -115,7 +115,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/hooks/features/filter/gridFilterState.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridFilterModel } from '../../../models/gridFilterModel';
-import { GridRowId } from '../../../models/gridRows';
+import { GridRowId, GridValidRowModel } from '../../../models/gridRows';
 export type GridFilterItemResult = {
     [key: Required<GridFilterItem>['id']]: boolean;
 };
@@ -28,14 +28,15 @@ export interface GridFilterState {
 export interface GridFilterInitialState {
     filterModel?: GridFilterModel;
 }
+export interface GridAggregatedFilterItemApplierResult {
+    passingFilterItems: null | GridFilterItemResult;
+    passingQuickFilterValues: null | GridQuickFilterValueResult;
+}
 /**
  * @param {GridRowId} rowId The id of the row we want to filter.
  * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
  */
-export type GridAggregatedFilterItemApplier = (rowId: GridRowId, shouldApplyItem?: (field: string) => boolean) => {
-    passingFilterItems: null | GridFilterItemResult;
-    passingQuickFilterValues: null | GridQuickFilterValueResult;
-};
+export type GridAggregatedFilterItemApplier = (row: GridValidRowModel, shouldApplyItem: ((field: string) => boolean) | undefined, result: GridAggregatedFilterItemApplierResult) => void;
 export interface GridFilteringMethodParams {
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
     filterModel: GridFilterModel;

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { GridFilterItem, GridFilterModel, GridRowId } from '../../../models';
+import { GridFilterItem, GridFilterModel, GridRowIdGetter, GridValidRowModel } from '../../../models';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from './gridFilterState';
-type GridFilterItemApplierNotAggregated = (rowId: GridRowId, shouldApplyItem?: (field: string) => boolean) => GridFilterItemResult;
+type GridFilterItemApplierNotAggregated = (row: GridValidRowModel, shouldApplyItem?: (field: string) => boolean) => GridFilterItemResult;
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -16,19 +16,21 @@ export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultip
 export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['filter'];
 /**
  * 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 declare const buildAggregatedFilterItemsApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
+export declare const buildAggregatedFilterItemsApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
 /**
  * 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 declare const buildAggregatedQuickFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
-export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier;
+export declare const buildAggregatedQuickFilterApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
+export declare const buildAggregatedFilterApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier;
 type FilterCache = {
     cleanedFilterItems?: GridFilterItem[];
 };