@mui/x-data-grid 5.10.0 → 5.11.0

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/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/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';
@@ -55,13 +54,13 @@ export function useGridColumns(apiRef, props) {
     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
@@ -152,7 +151,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) {
@@ -180,7 +179,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 +190,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
@@ -279,7 +278,7 @@ export function useGridColumns(apiRef, props) {
     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 +309,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
    */

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { debounce, ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -101,12 +100,12 @@ export function useGridDimensions(apiRef, props) {
     fullDimensionsRef.current = newFullDimensions;
 
     if (newFullDimensions.viewportInnerSize.width !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.width) || newFullDimensions.viewportInnerSize.height !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.height)) {
-      apiRef.current.publishEvent(GridEvents.viewportInnerSizeChange, newFullDimensions.viewportInnerSize);
+      apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
   }, [apiRef, props.scrollbarSize, props.autoHeight, headerHeight, rowsMeta.currentPageTotalHeight]);
   var resize = React.useCallback(function () {
     updateGridDimensionsRef();
-    apiRef.current.publishEvent(GridEvents.debouncedResize, rootDimensionsRef.current);
+    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
   }, [apiRef, updateGridDimensionsRef]);
   var getRootDimensions = React.useCallback(function () {
     return fullDimensionsRef.current;
@@ -178,10 +177,10 @@ export function useGridDimensions(apiRef, props) {
   useEnhancedEffect(function () {
     return updateGridDimensionsRef();
   }, [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, GridEvents.sortedRowsSet, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.pageChange, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.pageSizeChange, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.columnsChange, updateGridDimensionsRef);
-  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
-  useGridApiOptionHandler(apiRef, GridEvents.debouncedResize, props.onResize);
+  useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'pageChange', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'pageSizeChange', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'columnsChange', updateGridDimensionsRef);
+  useGridApiEventHandler(apiRef, 'resize', handleResize);
+  useGridApiOptionHandler(apiRef, 'debouncedResize', props.onResize);
 }