@mui/x-data-grid 6.11.1 → 6.12.0

package/modern/locales/zhCN.js

@@ -60,34 +60,32 @@ const zhCNGrid = {
   filterOperatorIsEmpty: '为空',
   filterOperatorIsNotEmpty: '不为空',
   filterOperatorIsAnyOf: '属于',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: '包含',
+  headerFilterOperatorEquals: '等于',
+  headerFilterOperatorStartsWith: '开始于',
+  headerFilterOperatorEndsWith: '结束于',
+  headerFilterOperatorIs: '是',
+  headerFilterOperatorNot: '不是',
+  headerFilterOperatorAfter: '在后面',
+  headerFilterOperatorOnOrAfter: '在当前或后面',
+  headerFilterOperatorBefore: '在前面',
+  headerFilterOperatorOnOrBefore: '在当前或前面',
+  headerFilterOperatorIsEmpty: '为空',
+  headerFilterOperatorIsNotEmpty: '不为空',
+  headerFilterOperatorIsAnyOf: '属于',
+  'headerFilterOperator=': '等于',
+  'headerFilterOperator!=': '不等于',
+  'headerFilterOperator>': '大于',
+  'headerFilterOperator>=': '大于或等于',
+  'headerFilterOperator<': '小雨',
+  'headerFilterOperator<=': '小于或等于',
   // Filter values text
   filterValueAny: '任何',
   filterValueTrue: '真',

package/modern/locales/zhTW.js

@@ -37,7 +37,7 @@ const zhTWGrid = {
   columnsPanelHideAllButton: '隱藏所有',
   // Filter panel text
   filterPanelAddFilter: '增加篩選器',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '清除所有',
   filterPanelDeleteIconLabel: '刪除',
   filterPanelLogicOperator: '邏輯運算子',
   filterPanelOperator: '運算子',
@@ -60,34 +60,32 @@ const zhTWGrid = {
   filterOperatorIsEmpty: '為空',
   filterOperatorIsNotEmpty: '不為空',
   filterOperatorIsAnyOf: '是其中之一',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: '包含',
+  headerFilterOperatorEquals: '等於',
+  headerFilterOperatorStartsWith: '以...開頭',
+  headerFilterOperatorEndsWith: '以...結束',
+  headerFilterOperatorIs: '為',
+  headerFilterOperatorNot: '不為',
+  headerFilterOperatorAfter: '...之後',
+  headerFilterOperatorOnOrAfter: '...(含)之後',
+  headerFilterOperatorBefore: '...之前',
+  headerFilterOperatorOnOrBefore: '...(含)之前',
+  headerFilterOperatorIsEmpty: '為空',
+  headerFilterOperatorIsNotEmpty: '不為空',
+  headerFilterOperatorIsAnyOf: '是其中之一',
+  'headerFilterOperator=': '等於',
+  'headerFilterOperator!=': '不等於',
+  'headerFilterOperator>': '大於',
+  'headerFilterOperator>=': '大於或等於',
+  'headerFilterOperator<': '小於',
+  'headerFilterOperator<=': '小於或等於',
   // Filter values text
   filterValueAny: '任何值',
   filterValueTrue: '真',
@@ -95,7 +93,7 @@ const zhTWGrid = {
   // Column menu text
   columnMenuLabel: '選單',
   columnMenuShowColumns: '顯示欄位',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '管理欄位',
   columnMenuFilter: '篩選器',
   columnMenuHideColumn: '隱藏',
   columnMenuUnsort: '預設排序',
@@ -139,15 +137,13 @@ const zhTWGrid = {
   expandDetailPanel: '展開',
   collapseDetailPanel: '摺疊',
   // Row reordering text
-  rowReorderingHeaderName: '排序'
-
+  rowReorderingHeaderName: '排序',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: '集合',
+  aggregationFunctionLabelSum: '總數',
+  aggregationFunctionLabelAvg: '平均數',
+  aggregationFunctionLabelMin: '最小',
+  aggregationFunctionLabelMax: '最大',
+  aggregationFunctionLabelSize: '尺寸'
 };
-
 export const zhTW = getGridLocalization(zhTWGrid, zhTWCore);

package/node/DataGrid/DataGrid.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DataGrid = void 0;
+exports.SUBMIT_FILTER_STROKE_TIME = exports.SUBMIT_FILTER_DATE_STROKE_TIME = exports.DataGrid = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -36,7 +36,21 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
   });
 });
 const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
+
+/**
+ * Remove at v7
+ * @deprecated
+ */
 exports.DataGrid = DataGrid;
+const SUBMIT_FILTER_STROKE_TIME = _useDataGridProps.DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
+
+/**
+ * Remove at v7
+ * @deprecated
+ */
+exports.SUBMIT_FILTER_STROKE_TIME = SUBMIT_FILTER_STROKE_TIME;
+const SUBMIT_FILTER_DATE_STROKE_TIME = _useDataGridProps.DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
+exports.SUBMIT_FILTER_DATE_STROKE_TIME = SUBMIT_FILTER_DATE_STROKE_TIME;
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -150,6 +164,12 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableDensitySelector: _propTypes.default.bool,
+  /**
+   * If `true`, `eval()` is not used for performance optimization.
+   * @default false
+   * @ignore - do not document
+   */
+  disableEval: _propTypes.default.bool,
   /**
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false
@@ -174,6 +194,11 @@ DataGridRaw.propTypes = {
     columnGrouping: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering.
+   * @default 150
+   */
+  filterDebounceMs: _propTypes.default.number,
   /**
    * Filtering can be processed on the server or client-side.
    * Set it to 'server' if you would like to handle filtering on the server-side.

package/node/DataGrid/useDataGridProps.js

@@ -46,6 +46,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnMenu: false,
   disableColumnSelector: false,
   disableDensitySelector: false,
+  disableEval: false,
   disableMultipleColumnsFiltering: false,
   disableMultipleRowSelection: false,
   disableMultipleColumnsSorting: false,
@@ -53,6 +54,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableVirtualization: false,
   editMode: _models.GridEditModes.Cell,
   filterMode: 'client',
+  filterDebounceMs: 150,
   columnHeaderHeight: 56,
   hideFooter: false,
   hideFooterPagination: false,

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

@@ -5,19 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputDate = GridFilterInputDate;
-exports.SUBMIT_FILTER_DATE_STROKE_TIME = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const SUBMIT_FILTER_DATE_STROKE_TIME = 500;
-exports.SUBMIT_FILTER_DATE_STROKE_TIME = SUBMIT_FILTER_DATE_STROKE_TIME;
 function GridFilterInputDate(props) {
   const {
       item,
@@ -31,28 +29,22 @@ function GridFilterInputDate(props) {
       disabled
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const filterTimeout = React.useRef();
+  const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
-    clearTimeout(filterTimeout.current);
     setFilterValueState(String(value));
     setIsApplying(true);
-    filterTimeout.current = setTimeout(() => {
+    filterTimeout.start(rootProps.filterDebounceMs, () => {
       applyValue((0, _extends2.default)({}, item, {
         value
       }));
       setIsApplying(false);
-    }, SUBMIT_FILTER_DATE_STROKE_TIME);
-  }, [applyValue, item]);
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(filterTimeout.current);
-    };
-  }, []);
+    });
+  }, [applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(() => {
     const itemValue = item.value ?? '';
     setFilterValueState(String(itemValue));

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

@@ -5,19 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputValue = GridFilterInputValue;
-exports.SUBMIT_FILTER_STROKE_TIME = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const SUBMIT_FILTER_STROKE_TIME = 500;
-exports.SUBMIT_FILTER_STROKE_TIME = SUBMIT_FILTER_STROKE_TIME;
 function GridFilterInputValue(props) {
   const {
       item,
@@ -31,7 +29,7 @@ function GridFilterInputValue(props) {
       InputProps
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const filterTimeout = React.useRef();
+  const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _utils.unstable_useId)();
@@ -40,25 +38,23 @@ function GridFilterInputValue(props) {
     const {
       value
     } = event.target;
-    clearTimeout(filterTimeout.current);
     setFilterValueState(String(value));
     setIsApplying(true);
-    filterTimeout.current = setTimeout(() => {
-      applyValue((0, _extends2.default)({}, item, {
-        value
-      }));
+    filterTimeout.start(rootProps.filterDebounceMs, () => {
+      const newItem = (0, _extends2.default)({}, item, {
+        value,
+        fromInput: id
+      });
+      applyValue(newItem);
       setIsApplying(false);
-    }, SUBMIT_FILTER_STROKE_TIME);
-  }, [applyValue, item]);
+    });
+  }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(() => {
-    return () => {
-      clearTimeout(filterTimeout.current);
-    };
-  }, []);
-  React.useEffect(() => {
-    const itemValue = item.value ?? '';
-    setFilterValueState(String(itemValue));
-  }, [item.value]);
+    const itemPlusTag = item;
+    if (itemPlusTag.fromInput !== id) {
+      setFilterValueState(String(item.value ?? ''));
+    }
+  }, [id, item]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),

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

@@ -45,9 +45,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       disableRemoveAllButton = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const applyFilter = React.useCallback(item => {
-    apiRef.current.upsertFilterItem(item);
-  }, [apiRef]);
+  const applyFilter = apiRef.current.upsertFilterItem;
   const applyFilterLogicOperator = React.useCallback(operator => {
     apiRef.current.setFilterLogicOperator(operator);
   }, [apiRef]);

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -54,15 +54,15 @@ const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = 500
+      debounceMs = rootProps.filterDebounceMs
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
   const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
@@ -125,7 +125,7 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The debounce time in milliseconds.
-   * @default 500
+   * @default 150
    */
   debounceMs: _propTypes.default.number,
   /**

package/node/hooks/features/export/useGridPrintExport.js

@@ -15,6 +15,7 @@ var _gridClasses = require("../../../constants/gridClasses");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _utils2 = require("./utils");
+var _useGridPagination = require("../pagination/useGridPagination");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
@@ -55,11 +56,6 @@ const useGridPrintExport = (apiRef, props) => {
   // Returns a promise because updateColumns triggers state update and
   // the new state needs to be in place before the grid can be sized correctly
   const updateGridColumnsForPrint = React.useCallback((fields, allColumns) => new Promise(resolve => {
-    // TODO remove unused Promise
-    if (!fields && !allColumns) {
-      resolve();
-      return;
-    }
     const exportedColumnFields = (0, _utils2.getColumnsToExport)({
       apiRef,
       options: {
@@ -202,7 +198,14 @@ const useGridPrintExport = (apiRef, props) => {
     previousColumnVisibility.current = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
     if (props.pagination) {
       const visibleRowCount = (0, _gridFilterSelector.gridExpandedRowCountSelector)(apiRef);
-      apiRef.current.setPageSize(visibleRowCount);
+      const paginationModel = {
+        page: 0,
+        pageSize: visibleRowCount
+      };
+      apiRef.current.updateControlState('pagination',
+      // Using signature `DataGridPro` to allow more than 100 rows in the print export
+      (0, _useGridPagination.mergeStateWithPaginationModel)(visibleRowCount, 'DataGridPro', paginationModel));
+      apiRef.current.forceUpdate();
     }
     await updateGridColumnsForPrint(options?.fields, options?.allColumns);
     apiRef.current.unstable_disableVirtualization();

package/node/hooks/features/export/utils.js

@@ -13,7 +13,13 @@ const getColumnsToExport = ({
 }) => {
   const columns = (0, _columns.gridColumnDefinitionsSelector)(apiRef);
   if (options.fields) {
-    return options.fields.map(field => columns.find(column => column.field === field)).filter(column => !!column);
+    return options.fields.reduce((currentColumns, field) => {
+      const column = columns.find(col => col.field === field);
+      if (column) {
+        currentColumns.push(column);
+      }
+      return currentColumns;
+    }, []);
   }
   const validColumns = options.allColumns ? columns : (0, _columns.gridVisibleColumnDefinitionsSelector)(apiRef);
   return validColumns.filter(column => !column.disableExport);

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

@@ -11,6 +11,13 @@ var _utils = require("../../../colDef/utils");
 var _gridFilterState = require("./gridFilterState");
 var _warning = require("../../../utils/warning");
 var _columns = require("../columns");
+let hasEval;
+try {
+  // eslint-disable-next-line no-eval
+  hasEval = eval('true');
+} catch (_) {
+  hasEval = false;
+}
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -136,7 +143,7 @@ let filterItemsApplierId = 1;
  * @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.
  */
-const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef) => {
+const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disableEval) => {
   const {
     items
   } = filterModel;
@@ -144,22 +151,19 @@ const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef) => {
   if (appliers.length === 0) {
     return null;
   }
-
-  // Original logic:
-  // return (row, shouldApplyFilter) => {
-  //   const resultPerItemId: GridFilterItemResult = {};
-  //
-  //   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;
-  // };
+  if (!hasEval || disableEval) {
+    // This is the original logic, which is used if `eval()` is not supported (aka prevented by CSP).
+    return (row, shouldApplyFilter) => {
+      const resultPerItemId = {};
+      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;
+    };
+  }
 
   // We generate a new function with `eval()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
@@ -269,8 +273,8 @@ const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
   };
 };
 exports.buildAggregatedQuickFilterApplier = buildAggregatedQuickFilterApplier;
-const buildAggregatedFilterApplier = (getRowId, filterModel, apiRef) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef);
+const buildAggregatedFilterApplier = (getRowId, filterModel, apiRef, disableEval) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef, disableEval);
   const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef);
   return function isRowMatchingFilters(row, shouldApplyFilter, result) {
     result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;

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

@@ -69,7 +69,7 @@ const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(props.getRowId, filterModel, apiRef) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(props.getRowId, filterModel, apiRef, props.disableEval) : null;
       const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)()
@@ -83,7 +83,7 @@ const useGridFilter = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('filteredRowsSet');
-  }, [apiRef, props.filterMode, props.getRowId]);
+  }, [apiRef, props.filterMode, props.getRowId, props.disableEval]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;

package/node/hooks/features/pagination/useGridPagination.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridPagination = exports.paginationStateInitializer = void 0;
+exports.useGridPagination = exports.paginationStateInitializer = exports.mergeStateWithPaginationModel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _filter = require("../filter");
@@ -49,6 +49,7 @@ const mergeStateWithPaginationModel = (rowCount, signature, paginationModelProp)
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
+exports.mergeStateWithPaginationModel = mergeStateWithPaginationModel;
 const useGridPagination = (apiRef, props) => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPagination');
   const visibleTopLevelRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);

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

@@ -62,6 +62,16 @@ const useGridRows = (apiRef, props) => {
     }
     return null;
   }, [apiRef]);
+  const getRowIdProp = props.getRowId;
+  const getRowId = React.useCallback(row => {
+    if (_gridRowsUtils.GRID_ID_AUTOGENERATED in row) {
+      return row[_gridRowsUtils.GRID_ID_AUTOGENERATED];
+    }
+    if (getRowIdProp) {
+      return getRowIdProp(row);
+    }
+    return row.id;
+  }, [getRowIdProp]);
   const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
     id
   }, index) => {
@@ -301,6 +311,7 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
+    getRowId,
     getRowModels,
     getRowsCount,
     getAllRowIds,

package/node/hooks/utils/useLazyRef.js

@@ -8,6 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const UNINITIALIZED = {};
+
+// See https://github.com/facebook/react/issues/14490 for when to use this.
 function useLazyRef(init, initArg) {
   const ref = React.useRef(UNINITIALIZED);
   if (ref.current === UNINITIALIZED) {

package/node/hooks/utils/useTimeout.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTimeout = useTimeout;
+var _useLazyRef = require("./useLazyRef");
+var _useOnMount = require("./useOnMount");
+class Timeout {
+  constructor() {
+    this.currentId = 0;
+    this.clear = () => {
+      if (this.currentId !== 0) {
+        clearTimeout(this.currentId);
+        this.currentId = 0;
+      }
+    };
+    this.disposeEffect = () => {
+      return this.clear;
+    };
+  }
+  static create() {
+    return new Timeout();
+  }
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(fn, delay);
+  }
+}
+function useTimeout() {
+  const timeout = (0, _useLazyRef.useLazyRef)(Timeout.create).current;
+  (0, _useOnMount.useOnMount)(timeout.disposeEffect);
+  return timeout;
+}

package/node/index.js

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