@mui/x-data-grid 5.8.0 → 5.11.0

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

@@ -7,6 +7,7 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
 import { GridLoadIcon } from '../../icons';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
@@ -18,7 +19,7 @@ function warnDeprecatedTypeSupport(type) {
   warnedOnce[type] = true;
 }
 
-var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
+var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api, OptionComponent) {
   var valueOptions = _ref.valueOptions,
       valueFormatter = _ref.valueFormatter,
       field = _ref.field;
@@ -26,24 +27,26 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
     field: field
   }))) : [''].concat(_toConsumableArray(valueOptions || []));
   return iterableColumnValues.map(function (option) {
-    return _typeof(option) === 'object' ? /*#__PURE__*/_jsx("option", {
-      value: option.value,
-      children: option.label
-    }, option.value) : /*#__PURE__*/_jsx("option", {
+    var isOptionTypeObject = _typeof(option) === 'object';
+    var key = isOptionTypeObject ? option.value : option;
+    var value = isOptionTypeObject ? option.value : option;
+    var formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
-      children: valueFormatter && option !== '' ? valueFormatter({
-        value: option,
-        field: field,
-        api: api
-      }) : option
-    }, option);
+      field: field,
+      api: api
+    }) : option;
+    var content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
   });
 };
 
 export var SUBMIT_FILTER_STROKE_TIME = 500;
 
 function GridFilterInputValue(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -70,12 +73,14 @@ function GridFilterInputValue(props) {
 
   var id = useId();
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var singleSelectProps = type === 'singleSelect' ? {
     select: true,
-    SelectProps: {
-      native: true
-    },
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: _extends({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   } : {};
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value; // NativeSelect casts the value to a string.
@@ -126,7 +131,7 @@ function GridFilterInputValue(props) {
       shrink: true
     },
     inputRef: focusElementRef
-  }, singleSelectProps, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+  }, singleSelectProps, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField));
 }
 
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {

package/legacy/components/toolbar/GridToolbar.js

@@ -1,25 +1,34 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "csvOptions", "printOptions"];
+var _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
 import { GridToolbarContainer } from '../containers/GridToolbarContainer';
 import { GridToolbarColumnsButton } from './GridToolbarColumnsButton';
 import { GridToolbarDensitySelector } from './GridToolbarDensitySelector';
 import { GridToolbarFilterButton } from './GridToolbarFilterButton';
 import { GridToolbarExport } from './GridToolbarExport';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridToolbarQuickFilter } from './GridToolbarQuickFilter';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+  // TODO v6: think about where export option should be passed.
+  // from componentProps={{ toolbarExport: { ...exportOption} }} seems to be more appropriate
   var className = props.className,
       csvOptions = props.csvOptions,
       printOptions = props.printOptions,
+      excelOptions = props.excelOptions,
+      _props$showQuickFilte = props.showQuickFilter,
+      showQuickFilter = _props$showQuickFilte === void 0 ? false : _props$showQuickFilte,
+      _props$quickFilterPro = props.quickFilterProps,
+      quickFilterProps = _props$quickFilterPro === void 0 ? {} : _props$quickFilterPro,
       other = _objectWithoutProperties(props, _excluded);
 
   var rootProps = useGridRootProps();
 
-  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector) {
+  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
 
@@ -28,8 +37,14 @@ var GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref)
   }, other, {
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
-      printOptions: printOptions
-    })]
+      printOptions: printOptions // TODO: remove the reference to excelOptions in community package
+      ,
+      excelOptions: excelOptions
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        flex: 1
+      }
+    }), showQuickFilter && /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
@@ -37,7 +52,17 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  csvOptions: PropTypes.object,
-  printOptions: PropTypes.object
+
+  /**
+   * Props passed to the quick filter component.
+   */
+  quickFilterProps: PropTypes.object,
+
+  /**
+   * Show the quick filter component.
+   * @default false
+   */
+  showQuickFilter: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridToolbar };

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -111,7 +111,7 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-labelledby": densityMenuId,
+      "aria-controls": densityMenuId,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/legacy/components/toolbar/GridToolbarExport.js

@@ -1,22 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["csvOptions", "printOptions"];
+var _excluded = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridToolbarExportContainer } from './GridToolbarExportContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var GridCsvExportMenuItem = function GridCsvExportMenuItem(props) {
   var apiRef = useGridApiContext();
   var hideMenu = props.hideMenu,
       options = props.options;
-
-  if (options != null && options.disableToolbarButton) {
-    return null;
-  }
-
   return /*#__PURE__*/_jsx(MenuItem, {
     onClick: function onClick() {
       apiRef.current.exportDataAsCsv(options);
@@ -29,11 +23,6 @@ export var GridPrintExportMenuItem = function GridPrintExportMenuItem(props) {
   var apiRef = useGridApiContext();
   var hideMenu = props.hideMenu,
       options = props.options;
-
-  if (options != null && options.disableToolbarButton) {
-    return null;
-  }
-
   return /*#__PURE__*/_jsx(MenuItem, {
     onClick: function onClick() {
       apiRef.current.exportDataAsPrint(options);
@@ -47,19 +36,29 @@ var GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport
       csvOptions = _props$csvOptions === void 0 ? {} : _props$csvOptions,
       _props$printOptions = props.printOptions,
       printOptions = _props$printOptions === void 0 ? {} : _props$printOptions,
+      excelOptions = props.excelOptions,
       other = _objectWithoutProperties(props, _excluded);
 
-  if (csvOptions != null && csvOptions.disableToolbarButton && printOptions != null && printOptions.disableToolbarButton) {
+  var apiRef = useGridApiContext();
+  var preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
+    excelOptions: excelOptions,
+    csvOptions: csvOptions,
+    printOptions: printOptions
+  }).sort(function (a, b) {
+    return a.componentName > b.componentName ? 1 : -1;
+  });
+
+  if (preProcessedButtons.length === 0) {
     return null;
   }
 
-  return /*#__PURE__*/_jsxs(GridToolbarExportContainer, _extends({}, other, {
+  return /*#__PURE__*/_jsx(GridToolbarExportContainer, _extends({}, other, {
     ref: ref,
-    children: [/*#__PURE__*/_jsx(GridCsvExportMenuItem, {
-      options: csvOptions
-    }), /*#__PURE__*/_jsx(GridPrintExportMenuItem, {
-      options: printOptions
-    })]
+    children: preProcessedButtons.map(function (button, index) {
+      return /*#__PURE__*/React.cloneElement(button.component, {
+        key: index
+      });
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {

package/legacy/components/toolbar/GridToolbarQuickFilter.js

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["quickFilterParser", "debounceMs"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import TextField from '@mui/material/TextField';
+import SearchIcon from '@mui/icons-material/Search';
+import { styled } from '@mui/material/styles';
+import { debounce } from '@mui/material/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridToolbarQuickFilterRoot = styled(TextField, {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilter',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.toolbarQuickFilter;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    width: 'auto',
+    paddingBottom: theme.spacing(0.5),
+    '& .MuiSvgIcon-root': {
+      marginRight: theme.spacing(0.5)
+    },
+    '& .MuiInput-underline:before': {
+      borderBottom: "1px solid ".concat(theme.palette.divider)
+    }
+  };
+});
+
+var defaultSearchValueParser = function defaultSearchValueParser(searchText) {
+  return searchText.split(' ').filter(function (word) {
+    return word !== '';
+  });
+};
+
+function GridToolbarQuickFilter(props) {
+  var _rootProps$components;
+
+  var _props$quickFilterPar = props.quickFilterParser,
+      quickFilterParser = _props$quickFilterPar === void 0 ? defaultSearchValueParser : _props$quickFilterPar,
+      _props$debounceMs = props.debounceMs,
+      debounceMs = _props$debounceMs === void 0 ? 500 : _props$debounceMs,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      searchValue = _React$useState2[0],
+      setSearchValue = _React$useState2[1];
+
+  var updateSearchValue = React.useCallback(function (newSearchValue) {
+    apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
+  }, [apiRef, quickFilterParser]);
+  var debouncedUpdateSearchValue = React.useMemo(function () {
+    return debounce(updateSearchValue, debounceMs);
+  }, [updateSearchValue, debounceMs]);
+  var handleSearchValueChange = React.useCallback(function (event) {
+    var newSearchValue = event.target.value;
+    setSearchValue(newSearchValue);
+    debouncedUpdateSearchValue(newSearchValue);
+  }, [debouncedUpdateSearchValue]);
+  return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
+    as: rootProps.components.BaseTextField,
+    variant: "standard",
+    value: searchValue,
+    onChange: handleSearchValueChange,
+    placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
+    "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+    type: "search",
+    InputProps: {
+      startAdornment: /*#__PURE__*/_jsx(SearchIcon, {
+        fontSize: "small"
+      })
+    }
+  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+}
+
+process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The debounce time in milliseconds.
+   * @default 500
+   */
+  debounceMs: PropTypes.number,
+
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @param {string} input The value entered by the user
+   * @returns {any[]} The array of value on which quick filter is applied
+   */
+  quickFilterParser: PropTypes.func
+} : void 0;
+export { GridToolbarQuickFilter };

package/legacy/components/toolbar/index.js

@@ -1,6 +1,7 @@
 export * from './GridToolbar';
 export * from './GridToolbarColumnsButton';
 export * from './GridToolbarDensitySelector';
-export * from './GridToolbarExport';
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from './GridToolbarExport';
 export * from './GridToolbarFilterButton';
-export * from './GridToolbarExportContainer';
+export * from './GridToolbarExportContainer';
+export * from './GridToolbarQuickFilter';

package/legacy/components/virtualization/GridVirtualScroller.js

@@ -25,6 +25,8 @@ var VirtualScrollerRoot = styled('div', {
   }
 })({
   overflow: 'auto',
+  // See https://github.com/mui/mui-x/issues/4360
+  position: 'relative',
   '@media print': {
     overflow: 'hidden'
   }

package/legacy/components/virtualization/GridVirtualScrollerContent.js

@@ -24,9 +24,7 @@ var VirtualScrollerContentRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.virtualScrollerContent;
   }
-})({
-  position: 'relative'
-});
+})({});
 var GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
   var className = props.className,
       style = props.style,

package/legacy/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridColumnHeaderFilterIconButton } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -33,7 +33,8 @@ var DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaCollapseIcon: GridExpandMoreIcon,
   GroupingCriteriaExpandIcon: GridKeyboardArrowRight,
   DetailPanelExpandIcon: GridAddIcon,
-  DetailPanelCollapseIcon: GridRemoveIcon
+  DetailPanelCollapseIcon: GridRemoveIcon,
+  RowReorderIcon: GridDragIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/legacy/constants/gridDetailPanelToggleField.js

@@ -0,0 +1,2 @@
+// Can't import from pro package - hence duplication
+export var GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/legacy/constants/localeTextConstants.js

@@ -20,11 +20,16 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   toolbarFiltersTooltipActive: function toolbarFiltersTooltipActive(count) {
     return count !== 1 ? "".concat(count, " active filters") : "".concat(count, " active filter");
   },
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'Search...',
+  toolbarQuickFilterLabel: 'Search',
+  toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
+  toolbarExportExcel: 'Download as Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Find column',
   columnsPanelTextFieldPlaceholder: 'Column title',
@@ -115,5 +120,7 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys
-  MuiTablePagination: {}
+  MuiTablePagination: {},
+  // Row reordering text
+  rowReorderingHeaderName: 'Row reordering'
 };

package/legacy/hooks/core/pipeProcessing/index.js

@@ -1,3 +1,4 @@
 export * from './gridPipeProcessingApi';
 export * from './useGridPipeProcessing';
-export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeProcessor';
+export * from './useGridRegisterPipeApplier';

package/legacy/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -1,11 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
+
 /**
  * Implement the Pipeline Pattern
  *
@@ -19,7 +17,10 @@ import { GridEvents } from '../../../models/events';
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterPipeProcessor` to register their processor.
- *   When the processor changes, it will fire `GridEvents.pipeProcessorRegister` to re-apply the whole pipe.
+ *
+ * - `apiRef.current.unstable_requestPipeProcessorsApplication` to imperatively re-apply a group.
+ *   This method should be used in last resort.
+ *   Most of the time, the application should be triggered by an update on the deps of the processor.
  *
  * =====================================================================================================================
  *
@@ -27,56 +28,91 @@ import { GridEvents } from '../../../models/events';
  *
  * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
  *
- * - `GridEvents.pipeProcessorRegister` to re-apply the whole pipe when a processor of this pipe changes.
- *
+ * - `useGridRegisterPipeApplier` to re-apply the whole pipe when requested.
+ *   The applier will be called when:
+ *   * a processor is registered.
+ *   * `apiRef.current.unstable_requestPipeProcessorsApplication` is called for the given group.
  */
-
 export var useGridPipeProcessing = function useGridPipeProcessing(apiRef) {
   var processorsCache = React.useRef({});
+  var runAppliers = React.useCallback(function (groupCache) {
+    if (!groupCache) {
+      return;
+    }
+
+    Object.values(groupCache.appliers).forEach(function (callback) {
+      callback();
+    });
+  }, []);
   var registerPipeProcessor = React.useCallback(function (group, id, processor) {
     if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {};
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
     }
 
-    var groupProcessors = processorsCache.current[group];
-    var oldProcessor = groupProcessors[id];
+    var groupCache = processorsCache.current[group];
+    var oldProcessor = groupCache.processors[id];
 
     if (oldProcessor !== processor) {
-      processorsCache.current[group] = _extends({}, groupProcessors, _defineProperty({}, id, processor));
-      apiRef.current.publishEvent(GridEvents.pipeProcessorRegister, group);
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
     }
 
     return function () {
-      var _ref = processorsCache.current[group],
-          removedGroupProcessor = _ref[id],
-          otherProcessors = _objectWithoutProperties(_ref, [id].map(_toPropertyKey));
+      var _processors = processorsCache.current[group].processors,
+          removedGroupProcessor = _processors[id],
+          otherProcessors = _objectWithoutProperties(_processors, [id].map(_toPropertyKey));
 
-      processorsCache.current[group] = otherProcessors;
-      apiRef.current.publishEvent(GridEvents.pipeProcessorUnregister, group);
+      processorsCache.current[group].processors = otherProcessors;
     };
-  }, [apiRef]);
+  }, [runAppliers]);
+  var registerPipeApplier = React.useCallback(function (group, id, applier) {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    processorsCache.current[group].appliers[id] = applier;
+    return function () {
+      var _appliers = processorsCache.current[group].appliers,
+          removedGroupApplier = _appliers[id],
+          otherAppliers = _objectWithoutProperties(_appliers, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].appliers = otherAppliers;
+    };
+  }, []);
+  var requestPipeProcessorsApplication = React.useCallback(function (group) {
+    var groupCache = processorsCache.current[group];
+    runAppliers(groupCache);
+  }, [runAppliers]);
   var applyPipeProcessors = React.useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    var _ref2 = args,
-        _ref3 = _slicedToArray(_ref2, 3),
-        group = _ref3[0],
-        value = _ref3[1],
-        context = _ref3[2];
+    var _ref = args,
+        _ref2 = _slicedToArray(_ref, 3),
+        group = _ref2[0],
+        value = _ref2[1],
+        context = _ref2[2];
 
     if (!processorsCache.current[group]) {
       return value;
     }
 
-    var preProcessors = Object.values(processorsCache.current[group]);
+    var preProcessors = Object.values(processorsCache.current[group].processors);
     return preProcessors.reduce(function (acc, preProcessor) {
       return preProcessor(acc, context);
     }, value);
   }, []);
   var preProcessingApi = {
     unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_registerPipeApplier: registerPipeApplier,
+    unstable_requestPipeProcessorsApplication: requestPipeProcessorsApplication,
     unstable_applyPipeProcessors: applyPipeProcessors
   };
   useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');

package/legacy/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export var useGridRegisterPipeApplier = function useGridRegisterPipeApplier(apiRef, group, callback) {
+  var cleanup = React.useRef();
+  var id = React.useRef("mui-".concat(Math.round(Math.random() * 1e9)));
+  var registerPreProcessor = React.useCallback(function () {
+    cleanup.current = apiRef.current.unstable_registerPipeApplier(group, id.current, callback);
+  }, [apiRef, callback, group]);
+  useFirstRender(function () {
+    registerPreProcessor();
+  });
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+
+    return function () {
+      if (cleanup.current) {
+        cleanup.current();
+        cleanup.current = null;
+      }
+    };
+  }, [registerPreProcessor]);
+};

package/legacy/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,9 +1,5 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
-
-/**
- * TODO: Rename `useGridRegisterPipeProcessor`
- */
 export var useGridRegisterPipeProcessor = function useGridRegisterPipeProcessor(apiRef, group, callback) {
   var cleanup = React.useRef();
   var id = React.useRef("mui-".concat(Math.round(Math.random() * 1e9)));