@mui/x-data-grid 5.10.0 → 5.12.0

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,102 @@
+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 { 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(rootProps.components.QuickFilterIcon, {
+        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/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, GridDragIcon, 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, GridSearchIcon } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -34,7 +34,8 @@ var DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaExpandIcon: GridKeyboardArrowRight,
   DetailPanelExpandIcon: GridAddIcon,
   DetailPanelCollapseIcon: GridRemoveIcon,
-  RowReorderIcon: GridDragIcon
+  RowReorderIcon: GridDragIcon,
+  QuickFilterIcon: GridSearchIcon
 };
 /**
  * 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', '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']);
+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', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', '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/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',

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

@@ -47,31 +47,27 @@ export var useGridPipeProcessing = function useGridPipeProcessing(apiRef) {
   var registerPipeProcessor = React.useCallback(function (group, id, processor) {
     if (!processorsCache.current[group]) {
       processorsCache.current[group] = {
-        processors: {},
+        processors: new Map(),
         appliers: {}
       };
     }
 
     var groupCache = processorsCache.current[group];
-    var oldProcessor = groupCache.processors[id];
+    var oldProcessor = groupCache.processors.get(id);
 
     if (oldProcessor !== processor) {
-      groupCache.processors[id] = processor;
+      groupCache.processors.set(id, processor);
       runAppliers(groupCache);
     }
 
     return function () {
-      var _processors = processorsCache.current[group].processors,
-          removedGroupProcessor = _processors[id],
-          otherProcessors = _objectWithoutProperties(_processors, [id].map(_toPropertyKey));
-
-      processorsCache.current[group].processors = otherProcessors;
+      processorsCache.current[group].processors.set(id, null);
     };
   }, [runAppliers]);
   var registerPipeApplier = React.useCallback(function (group, id, applier) {
     if (!processorsCache.current[group]) {
       processorsCache.current[group] = {
-        processors: {},
+        processors: new Map(),
         appliers: {}
       };
     }
@@ -104,8 +100,12 @@ export var useGridPipeProcessing = function useGridPipeProcessing(apiRef) {
       return value;
     }
 
-    var preProcessors = Object.values(processorsCache.current[group].processors);
+    var preProcessors = Array.from(processorsCache.current[group].processors.values());
     return preProcessors.reduce(function (acc, preProcessor) {
+      if (!preProcessor) {
+        return acc;
+      }
+
       return preProcessor(acc, context);
     }, value);
   }, []);

package/legacy/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -3,7 +3,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
 export var GRID_DEFAULT_STRATEGY = 'none';
 export var GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
@@ -26,7 +25,7 @@ export var GRID_STRATEGIES_PROCESSORS = {
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterStrategyProcessor` to register their processor.
- *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
+ *   When the processor of the active strategy changes, it will fire `"activeStrategyProcessorChange"` to re-apply the processor.
  *
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
@@ -36,12 +35,12 @@ export var GRID_STRATEGIES_PROCESSORS = {
  *
  * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ * - the "strategyAvailabilityChange" event to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
- *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    For instance "rowsSet" is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
  *
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ * - The "activeStrategyProcessorChange" event to update something when the processor of the active strategy changes.
  *
  * =====================================================================================================================
  *
@@ -76,7 +75,7 @@ export var useGridStrategyProcessing = function useGridStrategyProcessing(apiRef
     }
 
     if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
-      apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, processorName);
+      apiRef.current.publishEvent('activeStrategyProcessorChange', processorName);
     }
 
     return cleanup;
@@ -118,7 +117,7 @@ export var useGridStrategyProcessing = function useGridStrategyProcessing(apiRef
       group: strategyGroup,
       isAvailable: isAvailable
     });
-    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+    apiRef.current.publishEvent('strategyAvailabilityChange');
   }, [apiRef]);
   var strategyProcessingApi = {
     unstable_registerStrategyProcessor: registerStrategyProcessor,

package/legacy/hooks/core/useGridApiInitialization.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
@@ -15,6 +14,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   if (!apiRef.current) {
     apiRef.current = {
       unstable_eventManager: new EventManager(),
+      unstable_caches: {},
       state: {},
       instanceId: globalId
     };
@@ -52,7 +52,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     };
   }, [apiRef]);
   var showError = React.useCallback(function (args) {
-    apiRef.current.publishEvent(GridEvents.componentError, args);
+    apiRef.current.publishEvent('componentError', args);
   }, [apiRef]);
   useGridApiMethod(apiRef, {
     subscribeEvent: subscribeEvent,
@@ -62,7 +62,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(function () {
     var api = apiRef.current;
     return function () {
-      api.publishEvent(GridEvents.unmount);
+      api.publishEvent('unmount');
     };
   }, [apiRef]);
   return apiRef;

package/legacy/hooks/core/useGridErrorHandler.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiEventHandler } from '../utils/useGridApiEventHandler';
 export function useGridErrorHandler(apiRef, props) {
   var handleError = React.useCallback(function (args) {
@@ -14,5 +13,5 @@ export function useGridErrorHandler(apiRef, props) {
   React.useEffect(function () {
     handleError(props.error);
   }, [handleError, props.error]);
-  useGridApiEventHandler(apiRef, GridEvents.componentError, handleError);
+  useGridApiEventHandler(apiRef, 'componentError', handleError);
 }

package/legacy/hooks/core/useGridStateInitialization.js

@@ -4,7 +4,6 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["stateId"];
 import * as React from 'react';
 import { GridSignature } from '../utils/useGridApiEventHandler';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils';
 import { isFunction } from '../../utils/utils';
 export var useGridStateInitialization = function useGridStateInitialization(apiRef, props) {
@@ -71,7 +70,7 @@ export var useGridStateInitialization = function useGridStateInitialization(apiR
       apiRef.current.state = newState;
 
       if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent(GridEvents.stateChange, newState);
+        apiRef.current.publishEvent('stateChange', newState);
       }
     }
 

package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -14,7 +14,6 @@ import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
 import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
@@ -160,11 +159,11 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var handleColumnReorderStop = React.useCallback(function () {
     return setDragCol('');
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleColumnResizeStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleColumnResizeStop);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnReorderStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleColumnReorderStop);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScroll);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleScroll);
 
   var getColumns = function getColumns(params) {
     var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

package/legacy/hooks/features/columnMenu/useGridColumnMenu.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { gridColumnMenuSelector } from './columnMenuSelector';
 export var columnMenuStateInitializer = function columnMenuStateInitializer(state) {
@@ -80,7 +79,7 @@ export var useGridColumnMenu = function useGridColumnMenu(apiRef) {
    * EVENTS
    */
 
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerWheel, apiRef.current.hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerTouchMove, apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

package/legacy/hooks/features/columns/useGridColumnSpanning.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events/gridEvents';
 
 /**
  * @requires useGridColumns (method, event)
@@ -103,5 +102,5 @@ export var useGridColumnSpanning = function useGridColumnSpanning(apiRef) {
     // `colSpan` needs to be recalculated after column reordering
     lookup.current = {};
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
 };

package/legacy/hooks/features/columns/useGridColumns.js

@@ -2,7 +2,6 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
@@ -15,6 +14,9 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
   var _props$initialState, _props$initialState$c, _props$initialState2, _ref, _props$columnVisibili, _props$initialState3, _props$initialState3$;
 
   var isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
+  apiRef.current.unstable_caches.columns = {
+    isUsingColumnVisibilityModel: isUsingColumnVisibilityModel
+  };
   var columnsTypes = computeColumnTypes(props.columnTypes);
   var columnsState = createColumnsState({
     apiRef: apiRef,
@@ -36,7 +38,7 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
  */
 
 export function useGridColumns(apiRef, props) {
-  var _props$initialState4, _props$initialState4$, _props$componentsProp2;
+  var _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridColumns');
   var columnTypes = React.useMemo(function () {
@@ -44,24 +46,18 @@ export function useGridColumns(apiRef, props) {
   }, [props.columnTypes]);
   var previousColumnsProp = React.useRef(props.columns);
   var previousColumnTypesProp = React.useRef(columnTypes);
-  /**
-   * If `initialState.columns.columnVisibilityModel` or `columnVisibilityModel` was defined during the 1st render, we are directly updating the model
-   * If not, we keep the old behavior and update the `GridColDef.hide` option (which will update the state model through the `GridColDef.hide` => `columnVisibilityModel` sync in `createColumnsState`
-   */
-
-  var isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel));
   apiRef.current.unstable_updateControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
     propOnChange: props.onColumnVisibilityModelChange,
     stateSelector: gridColumnVisibilityModelSelector,
-    changeEvent: GridEvents.columnVisibilityModelChange
+    changeEvent: 'columnVisibilityModelChange'
   });
   var setGridColumnsState = React.useCallback(function (columnsState) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
+    apiRef.current.publishEvent('columnsChange', columnsState.all);
   }, [logger, apiRef]);
   /**
    * API METHODS
@@ -128,7 +124,7 @@ export function useGridColumns(apiRef, props) {
     // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
     // `updateColumns` take care of updating the model itself if needs be.
     // TODO v6: stop using the `hide` field even when the model is not defined
-    if (isUsingColumnVisibilityModel.current) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
       var _columnVisibilityMode;
 
       var columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -152,7 +148,7 @@ export function useGridColumns(apiRef, props) {
         colDef: newColumn,
         isVisible: isVisible
       };
-      apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
+      apiRef.current.publishEvent('columnVisibilityChange', params);
     }
   }, [apiRef]);
   var setColumnIndex = React.useCallback(function (field, targetIndexPosition) {
@@ -169,7 +165,8 @@ export function useGridColumns(apiRef, props) {
 
     var updatedColumns = _toConsumableArray(allColumns);
 
-    updatedColumns.splice(targetIndexPosition, 0, updatedColumns.splice(oldIndexPosition, 1)[0]);
+    var fieldRemoved = updatedColumns.splice(oldIndexPosition, 1)[0];
+    updatedColumns.splice(targetIndexPosition, 0, fieldRemoved);
     setGridColumnsState(_extends({}, gridColumnsSelector(apiRef.current.state), {
       all: updatedColumns
     }));
@@ -180,7 +177,7 @@ export function useGridColumns(apiRef, props) {
       targetIndex: targetIndexPosition,
       oldIndex: oldIndexPosition
     };
-    apiRef.current.publishEvent(GridEvents.columnOrderChange, params);
+    apiRef.current.publishEvent('columnOrderChange', params);
   }, [apiRef, logger, setGridColumnsState]);
   var setColumnWidth = React.useCallback(function (field, width) {
     logger.debug("Updating column ".concat(field, " width to ").concat(width));
@@ -191,7 +188,7 @@ export function useGridColumns(apiRef, props) {
     });
 
     apiRef.current.updateColumns([newColumn]);
-    apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+    apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
       width: width
@@ -219,7 +216,7 @@ export function useGridColumns(apiRef, props) {
   var stateExportPreProcessing = React.useCallback(function (prevState) {
     var columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel.current) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
       var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
       var hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(function (value) {
         return value === false;
@@ -260,7 +257,7 @@ export function useGridColumns(apiRef, props) {
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 
-    var columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    var columnVisibilityModelToImport = apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
     var initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -272,14 +269,14 @@ export function useGridColumns(apiRef, props) {
       columnTypes: columnTypes,
       columnsToUpsert: [],
       initialState: initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
     apiRef.current.setState(mergeColumnsState(columnsState));
 
     if (initialState != null) {
-      apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
+      apiRef.current.publishEvent('columnsChange', columnsState.all);
     }
 
     return params;
@@ -310,8 +307,8 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
-  useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridApiOptionHandler(apiRef, 'columnVisibilityChange', props.onColumnVisibilityChange);
   /**
    * APPLIERS
    */
@@ -323,7 +320,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes: columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
@@ -353,7 +350,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes: columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });