@mui/x-data-grid 5.10.0 → 5.11.0

package/CHANGELOG.md

@@ -3,6 +3,159 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.11.0
+
+_May 13, 2022_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Premium plan release
+
+  We’re happy to announce that the Premium plan is [finally out](https://mui.com/blog/premium-plan-release/)!
+  With it, MUI X officially steps up to the next level, supporting the most advanced use cases for UI components.
+
+  This plan is available through the new `@mui/x-data-grid-premium` package, which contains the row grouping and the Excel export features.
+
+  If you were already using the row grouping feature, you can upgrade by [installing](https://mui.com/x/react-data-grid/getting-started/#installation) `@mui/x-data-grid-premium` and replace `DataGridPro` with `DataGridPremium`, as follows.
+  Note that the experimental flag is not required anymore to use the row grouping.
+
+  ```diff
+  -import { DataGridPro } from '@mui/x-data-grid-pro';
+  +import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+  -<DataGridPro experimentalFeatures={{ rowGrouping: true }} />
+  +<DataGridPremium />
+  ```
+
+  For more information about the revised pricing model please have a look at the [blog post](https://mui.com/blog/premium-plan-release/#the-new-licensing-model).
+
+- 👔 Add Excel export
+
+- 🔎 Quick filtering
+
+  You can now add a quick filtering search bar to your grid.
+  To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar.
+
+  More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter)
+
+  ![image](https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png)
+
+- 🐞 Bugs fixes
+
+### `@mui/x-data-grid@v5.11.0` / `@mui/x-data-grid-pro@v5.11.0` / `@mui/x-data-grid-premium@v5.11.0`
+
+#### Breaking changes
+
+- Moving row grouping to premium package
+
+  The use of `rowGrouping` in the `@mui/x-data-grid-pro` package is deprecated. The experimental flag will be removed in an upcoming release.
+
+#### Changes
+
+- [DataGrid] Add TypeScript support to the `sx` prop in inner components (#4743) @lindapaiste
+- [DataGrid] Add props to control cell mode (#4210) @m4theushw
+- [DataGrid] Add quick filtering engine (#4317) @alexfauquette
+- [DataGrid] Check focus validity whenever the rows in state changes (#4683) @flaviendelangle
+- [DataGrid] Fix infinite scroll when dragging column header cell over row cell (#4735) @DjoSmer
+- [DataGrid] Fix scroll jump when using keyboard navigation (#4515) @cherniavskii
+- [DataGrid] Improve sorting accessibility (#4379) @cherniavskii
+- [DataGrid] New `getRowGroupChildren` API method (#4304) @flaviendelangle
+- [DataGrid] Publish `preferencePanelClose` event only once when clicking on another panel button (#4810) @flaviendelangle
+- [DataGrid] Update focused action if the currently focused one is removed (#4694) @m4theushw
+- [DataGrid] Add `onChange` callback to edit components (#4621) @m4theushw
+- [DataGrid] Add `keepNonExistentRowsSelected` prop (#4786) @willsoto
+- [DataGrid] Prevent crash if row is removed with click (#4831) @m4theushw
+- [DataGridPro] Fix detail panel not taking full width (#4610) @cherniavskii
+- [DataGridPremium] Add Excel export (#3981) @alexfauquette
+- [DataGridPremium] Bootstrap `@mui/x-data-grid-premium` (#4223) @flaviendelangle
+- [DataGridPremium] Fix Excel date serialization when row grouping is enabled (#4774) @cherniavskii
+- [l10n] Improve German (de-DE) locale (#4748) @sebastianfrey
+- [l10n] Improve German (de-DE) locale (#4668) @izu-co
+
+### `@mui/x-date-pickers@5.0.0-alpha.3` / `@mui/x-date-pickers-pro@5.0.0-alpha.3`
+
+#### Breaking changes
+
+- Rework the auto-closing behavior of the pickers.
+
+  The `disableCloseOnSelect` prop has been replaced by a new `closeOnSelect` prop which has the opposite behavior.
+  The default behavior remains the same (close after the last step on desktop but not on mobile).
+
+  ```diff
+   // If you don't want to close after the last step
+  -<DatePicker disableCloseOnSelect={false} />
+  +<DatePicker closeOnSelect />
+
+   // If you want to close after the last step
+  -<DatePicker disableCloseOnSelect />
+  +<DatePicker closeOnSelect={false} />
+  ```
+
+#### Changes
+
+- [DatePicker] Ignore <kbd>Escape</kbd> when the picker is already closed (#4770) @mikewolfd
+- [DatePicker] Make month year order changeable in header (#4695) @gky360
+- [DateRangePicker] Open view on click, <kbd>Enter</kbd> or <kbd>Space</kbd> instead of focus (#4747) @alexfauquette
+- [DateRangePicker] Refactor tests (#4745) @flaviendelangle
+- [DateRangePicker] Remove `orientation` prop (#4665) @m4theushw
+- [DateTimePicker] `Toolbar` should be visible by default on mobile (#4833) @flaviendelangle
+- [MonthPicker] New prop `shouldDisableMonth` (#4708) @someone635
+- [TimePicker] Disable and invalidate date with minutes not matching `minutesStep` (#4726) @flaviendelangle
+- [TimePicker] Don't merge with previous value when new value is not valid (#4847) @flaviendelangle
+- [TimePicker] Refactor `isTimeDisabled` method (#4688) @flaviendelangle
+- [pickers] Add details in invalid mask error (#4501) @alexfauquette
+- [pickers] Add explicit interfaces for components slots and components slots props (#4589) @flaviendelangle
+- [pickers] Add missing `peerDependencies` for `yarn pnp` users (#4763) @nate-summercook
+- [pickers] Add overrides to `PickersArrowSwitcher` (#4672) @m4theushw
+- [pickers] Clean component interfaces and remove non-implemented props (#4758) @flaviendelangle
+- [pickers] Do not apply the current time when no date provided in `DayPicker` (#4649) @flaviendelangle
+- [pickers] Document and refacto the value manager (#4701) @flaviendelangle
+- [pickers] Drop `allowSameDateSelection` prop (#4808) @flaviendelangle
+- [pickers] Enable mask by default when using `ampm=true` (#4731) @alexfauquette
+- [pickers] Fix `disabled` and `readOnly` behavior on calendar and clock (#4645) @alexfauquette
+- [pickers] Invalid character does not delete last digit (#4839) @alexfauquette
+- [pickers] Rename prop `date` into `parsedValue` when it can contain a range (#4736) @flaviendelangle
+- [pickers] Rework `TDate`, `TInputDate`, `TValue` and `TInputValue` generics (#4617) @flaviendelangle
+- [pickers] Rework the date lifecycle in `usePickerState` (#4408) @flaviendelangle
+
+### Docs
+
+- [docs] Add `scopePathNames` property to column page (#4811) @flaviendelangle
+- [docs] Add label to each demo (#4667) @m4theushw
+- [docs] Correctly capitalize <kbd>Ctrl</kbd> (#4707) @oliviertassinari
+- [docs] Fix documentation on `ampm` prop (#4846) @alexfauquette
+- [docs] Generate the event documentation from `GridEventLookup` (#4725) @flaviendelangle
+- [docs] Keep columns section expanded when switching between pages (#4816) @cherniavskii
+- [docs] Move `useKeepGroupingColumnsHidden` on `@mui/x-data-grid-premium` (#4319) @flaviendelangle
+- [docs] Remove legacy pages for old URLs (#4575) @m4theushw
+- [docs] Remove remaining pages in `docs/pages/api-docs` folder (#4709) @m4theushw
+- [docs] SEO fixes (#4711) @oliviertassinari
+- [docs] Set type number to movie column year (#4753) @flaviendelangle
+- [docs] Simplify server examples (#4186) @alexfauquette
+- [docs] Small typo (#4670) @flaviendelangle
+- [docs] Split the 'Columns' page (#4600) @flaviendelangle
+- [docs] Stop using `GridEvents` enum in documentation (#4699) @flaviendelangle
+- [docs] Update mono repo to get copy code block (#4691) @siriwatknp
+- [docs] Update the feature table in the Getting Started page of the data grid (#4619) @flaviendelangle
+- [docs] Add demo for Premium (#4750) @m4theushw
+
+### Core
+
+- [core] Check if `process` is available (#4193) @m4theushw
+- [core] Fix naming collision (#4853) @alexfauquette
+- [core] Prevent out-of-memory when type-checking in CI (#4697) @flaviendelangle
+- [core] Remove `rowsCache` from state (#4480) @m4theushw
+- [core] Rework `DayPicker` api (#4783) @flaviendelangle
+- [core] Update `x-license-pro` license to handle premium package (#4315) @DanailH
+- [core] Update monorepo & version (#4789) @oliviertassinari
+- [core] Update monorepo (#4772) @flaviendelangle
+- [core] Stop using `GridEvents` enum (#4698, #4696, #4685) @flaviendelangle
+- [core] Update monorepo (#4854) @cherniavskii
+- [license] Allow to limit some packages to a specific license plan (#4651) @flaviendelangle
+- [test] Fix path to detect `DataGrid` tests (#4752) @m4theushw
+- [test] Reset cleanup tracking on Karma tests (#4679) @m4theushw
+- [test] Restore `sinon` sandbox after each `karma` test (#4689) @m4theushw
+
 ## v5.10.0
 
 _Apr 25, 2022_
@@ -49,7 +202,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 
   Now the data grid and pickers components support the concurrent mode.
 
-- 🎁 Add support for [Column spanning](https://mui.com/x/react-data-grid/columns/#column-spanning) (#4020) @cherniavskii
+- 🎁 Add support for [Column spanning](https://mui.com/x/react-data-grid/column-spanning/) (#4020) @cherniavskii
 
   <img src="https://user-images.githubusercontent.com/13808724/162926746-93bcb180-3c9d-4eb9-afc7-c3908a5c6406.png" width="788">
 
@@ -672,7 +825,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some
   />
   ```
 
-  See the [documentation](https://mui.com/x/react-data-grid/columns/#column-visibility) for more details.
+  See the [documentation](https://mui.com/x/react-data-grid/column-visibility/) for more details.
 
   The `hide` property from `GridColDef` still works but has been deprecated.
 
@@ -828,7 +981,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some
 
 ### `@mui/x-data-grid@v5.2.0` / `@mui/x-data-grid-pro@v5.2.0`
 
-- 🚀 Introduce the [column pinning](https://mui.com/x/react-data-grid/columns/#column-pinning) feature (#2946) @m4theushw
+- 🚀 Introduce the [column pinning](https://mui.com/x/react-data-grid/column-pinning/) feature (#2946) @m4theushw
 
   <img src="https://user-images.githubusercontent.com/42154031/145425635-b6314fbe-2f1e-4b73-908f-33ee1fda20c7.gif" width="964" height="657">
 
@@ -1782,7 +1935,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some
 - 📚 Migrate to the new documentation infrastructure and design (#2441) (@DanailH, @m4theushw)
 - 🎁 Add `actions` column type (#2385) @m4theushw
 
-  See the documentation for [more details](https://mui.com/x/react-data-grid/columns/#column-types).
+  See the documentation for [more details](https://mui.com/x/react-data-grid/column-definition/#column-types).
 
 - 👁 Allow to disable virtualization with the `disableVirtualization` prop (#2326) @m4theushw
 - 🚀 Introduce the new `isRowSelected` api method (#2523) @flaviendelangle
@@ -2404,11 +2557,11 @@ _July 1, 2021_
 Big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
 - 🐞 As a focus of Q2, we have kept fixing bugs
-- 💅 End users are now allowed to copy the selected rows to the clipboard with <kbd>CTRL</kbd> + <kbd>c</kbd> (#1929) @m4theushw
+- 💅 End users are now allowed to copy the selected rows to the clipboard with <kbd>Ctrl</kbd> + <kbd>c</kbd> (#1929) @m4theushw
 - 🐛 We have fixed the `Select all` checkbox. When triggered, it should only select the filtered rows (#1879) @ZeeshanTamboli
 - ⚡️ We have added a new `singleSelect` column type (#1956) @DanailH
 
-  Using the column `type: 'singleSelect'` defaults to `Select` component when the cell is in `edit` mode. You can find the documentation [following this link](https://mui.com/x/react-data-grid/columns/#column-types).
+  Using the column `type: 'singleSelect'` defaults to `Select` component when the cell is in `edit` mode. You can find the documentation [following this link](https://mui.com/x/react-data-grid/column-definition/#column-types).
 
   ```jsx
   <DataGrid
@@ -2604,7 +2757,7 @@ _June 9, 2021_
 Big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
 - 💅 Allow to customize GridToolbarExport's CSV export (#1695) @michallukowski
-- 🐛 Allow to deselect rows with <kbd>CTRL</kbd> + click (#1813) @ZeeshanTamboli
+- 🐛 Allow to deselect rows with <kbd>Ctrl</kbd> + click (#1813) @ZeeshanTamboli
 - ⚡️ Refactor scroll size detector (#1703) @dtassone
 - 📖 Add [documentation](https://mui.com/x/api/data-grid/) for interfaces and events (#1529) @m4theushw
 - 🐞 Bugfixes
@@ -2631,7 +2784,7 @@ Big thanks to the 6 contributors who made this release possible. Here are some h
 
 - [DataGrid] Add `valueParser` to parse values entered by the user (#1785) @m4theushw
 - [DataGrid] Allow to customize GridToolbarExport's CSV export (#1695) @michallukowski
-- [DataGrid] Allow to deselect rows with <kbd>CTRL</kbd> + click (#1813) @ZeeshanTamboli
+- [DataGrid] Allow to deselect rows with <kbd>Ctrl</kbd> + click (#1813) @ZeeshanTamboli
 - [DataGrid] Improve general architecture to better isolate hooks (#1720) @dtassone
 - [DataGrid] Fix cell height after changing grid density (#1819) @DanailH
 - [DataGrid] Fix fluid columns width when available `viewportWidth` < 0 (#1816) @DanailH
@@ -3153,7 +3306,7 @@ Big thanks to the 8 contributors who made this release possible. Here are some h
 - [DataGrid] Rename `useGridBaseComponentProps` hook to `useGridSlotComponentProps` (#1252) @DanailH
 - [DataGrid] Rename modules (#1292) @DanailH
 - [DataGrid] Rename all events related to column reordering, e.g. `GRID_COL_REORDER_START` -> `GRID_COLUMN_REORDER_START` (#1299) @m4theushw
-- [DataGrid] Methods `onColItemDragStart`, `onColHeaderDragOver`, `onColItemDragOver`, `onColItemDragEnter` removed from the grid API. Prefer listening to [column reordering events](https://mui.com/x/react-data-grid/columns/#column-reorder) (#1299) @m4theushw
+- [DataGrid] Methods `onColItemDragStart`, `onColHeaderDragOver`, `onColItemDragOver`, `onColItemDragEnter` removed from the grid API. Prefer listening to [column reordering events](https://mui.com/x/react-data-grid/column-ordering/) (#1299) @m4theushw
 - [DataGrid] Calling `apiRef.current.getColumnHeaderParams` returns a `GridColumnHeaderParams` instead of `GridColParams` (#1299) @m4theushw
 - [DataGrid] Events that follow the pattern `GRID_COLUMN_HEADER_xxx` will be called with a `GridColumnHeaderParams` instead of `GridColParams` (#1299) @m4theushw
 - [DataGrid] The `renderHeader` will be called with a `GridColumnHeaderParams` instead of `GridColParams` (#1299) @m4theushw
@@ -3521,7 +3674,7 @@ _Jan 14, 2021_
 Big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
 
 - 🎛 Add support for Column selector (#837) @DanailH @dtassone.
-  The feature can be triggered from the toolbar or the column menu. Check [the documentation](https://mui.com/x/react-data-grid/columns/#column-selector).
+  The feature can be triggered from the toolbar or the column menu. Check [the documentation](https://mui.com/x/react-data-grid/column-definition/#column-selector).
 
   ![column selector](https://user-images.githubusercontent.com/3165635/104791267-6ff77300-579a-11eb-9338-11a8fde83258.gif)
 

package/DataGrid/DataGrid.js

@@ -58,6 +58,11 @@ DataGridRaw.propTypes = {
    */
   autoPageSize: PropTypes.bool,
 
+  /**
+   * Controls the modes of the cells.
+   */
+  cellModesModel: PropTypes.object,
+
   /**
    * If `true`, the grid get a first column with a checkbox that allows to select rows.
    * @default false
@@ -205,7 +210,9 @@ DataGridRaw.propTypes = {
       operatorValue: PropTypes.string,
       value: PropTypes.any
     })).isRequired,
-    linkOperator: PropTypes.oneOf(['and', 'or'])
+    linkOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterValues: PropTypes.array
   }),
 
   /**
@@ -293,6 +300,14 @@ DataGridRaw.propTypes = {
    */
   isRowSelectable: PropTypes.func,
 
+  /**
+   * If `true`, the selection model will retain selected rows that do not exist.
+   * Useful when using server side pagination and row selections need to be retained
+   * when changing pages.
+   * @default false
+   */
+  keepNonExistentRowsSelected: PropTypes.bool,
+
   /**
    * If `true`, a  loading overlay is displayed.
    */
@@ -380,6 +395,13 @@ DataGridRaw.propTypes = {
    */
   onCellKeyDown: PropTypes.func,
 
+  /**
+   * Callback fired when the `cellModesModel` prop changes.
+   * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellModesModelChange: PropTypes.func,
+
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -566,6 +588,13 @@ DataGridRaw.propTypes = {
    */
   onRowEditStop: PropTypes.func,
 
+  /**
+   * Callback fired when the `rowModesModel` prop changes.
+   * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowModesModelChange: PropTypes.func,
+
   /**
    * Callback fired when the selection state of one or multiple rows changes.
    * @param {GridSelectionModel} selectionModel With all the row ids [[GridSelectionModel]].
@@ -651,6 +680,11 @@ DataGridRaw.propTypes = {
    */
   rowHeight: PropTypes.number,
 
+  /**
+   * Controls the modes of the rows.
+   */
+  rowModesModel: PropTypes.object,
+
   /**
    * Set of rows of type [[GridRowsProp]].
    */

package/DataGrid/useDataGridProps.js

@@ -61,7 +61,8 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   sortingMode: GridFeatureModeConstant.client,
   throttleRowsMs: 0,
   disableColumnReorder: false,
-  disableColumnResize: false
+  disableColumnResize: false,
+  keepNonExistentRowsSelected: false
 };
 export const useDataGridProps = inProps => {
   if (inProps.pageSize > MAX_PAGE_SIZE) {

package/README.md

@@ -1,6 +1,6 @@
 # @mui/x-data-grid
 
-This package is the community edition of the data grid component.
+This package is the Community Plan edition of the data grid component.
 It's part of MUI X, an open core extension of MUI, with advanced components.
 
 ## Installation

package/colDef/gridActionsColDef.js

@@ -11,5 +11,6 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   headerName: '',
   disableColumnMenu: true,
   disableExport: true,
-  renderCell: renderActionsCell
+  renderCell: renderActionsCell,
+  getApplyQuickFilterFn: undefined
 });

package/colDef/gridBooleanColDef.js

@@ -20,5 +20,6 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditBooleanCell,
   sortComparator: gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
-  filterOperators: getGridBooleanOperators()
+  filterOperators: getGridBooleanOperators(),
+  getApplyQuickFilterFn: undefined
 });

package/colDef/gridCheckboxSelectionColDef.js

@@ -15,6 +15,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,
+  getApplyQuickFilterFn: undefined,
   valueGetter: params => {
     const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
     return selectionLookup[params.id] !== undefined;

package/colDef/gridDateColDef.js

@@ -26,12 +26,14 @@ export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridDateComparator,
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
-  renderEditCell: renderEditDateCell
+  renderEditCell: renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });
 export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'dateTime',
   sortComparator: gridDateComparator,
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
-  renderEditCell: renderEditDateCell
+  renderEditCell: renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });

package/colDef/gridNumericColDef.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { isNumber } from '../utils/utils';
-import { getGridNumericOperators } from './gridNumericOperators';
+import { getGridNumericOperators, getGridNumericQuickFilterFn } from './gridNumericOperators';
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'number',
@@ -12,5 +12,6 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: ({
     value
   }) => value && isNumber(value) && value.toLocaleString() || value,
-  filterOperators: getGridNumericOperators()
+  filterOperators: getGridNumericOperators(),
+  getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/colDef/gridNumericOperators.d.ts

@@ -1,4 +1,6 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import { GridCellParams } from '../models';
+export declare const getGridNumericQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
 /**
  * @deprecated Use `getGridNumericOperators` instead.

package/colDef/gridNumericOperators.js

@@ -10,6 +10,17 @@ const parseNumericValue = value => {
   return Number(value);
 };
 
+export const getGridNumericQuickFilterFn = value => {
+  if (value == null || Number.isNaN(value) || value === '') {
+    return null;
+  }
+
+  return ({
+    value: columnValue
+  }) => {
+    return parseNumericValue(columnValue) === parseNumericValue(value);
+  };
+};
 export const getGridNumericOperators = () => [{
   label: '=',
   value: '=',

package/colDef/gridSingleSelectColDef.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
-import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
+import { getGridSingleSelectOperators, getGridSingleSelectQuickFilterFn } from './gridSingleSelectOperators';
 export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   renderEditCell: renderEditSingleSelectCell,
-  filterOperators: getGridSingleSelectOperators()
+  filterOperators: getGridSingleSelectOperators(),
+  getApplyQuickFilterFn: getGridSingleSelectQuickFilterFn
 });

package/colDef/gridSingleSelectOperators.d.ts

@@ -1,2 +1,5 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import { GridCellParams, GridColDef } from '../models';
+import { GridApiCommunity } from '../models/api/gridApiCommunity';
+export declare const getGridSingleSelectQuickFilterFn: (value: any, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridSingleSelectOperators: () => GridFilterOperator[];

package/colDef/gridSingleSelectOperators.js

@@ -9,6 +9,58 @@ const parseObjectValue = value => {
   return value.value;
 };
 
+export const getGridSingleSelectQuickFilterFn = (value, column, apiRef) => {
+  if (!value) {
+    return null;
+  }
+
+  const {
+    valueOptions,
+    valueFormatter,
+    field
+  } = column;
+  const potentialValues = [parseObjectValue(value).toString()];
+  const iterableColumnValues = typeof valueOptions === 'function' ? valueOptions({
+    field
+  }) : valueOptions || [];
+
+  if (iterableColumnValues) {
+    iterableColumnValues.forEach(option => {
+      // for each valueOption, check if the formatted value
+      let optionValue;
+      let optionLabel;
+
+      if (typeof option === 'object') {
+        optionValue = option.value;
+        optionLabel = option.label;
+      } else {
+        optionValue = option;
+
+        if (valueFormatter) {
+          optionLabel = valueFormatter({
+            value: option,
+            field,
+            api: apiRef.current
+          });
+        } else {
+          optionLabel = option;
+        }
+      }
+
+      if (optionLabel.slice(0, value.length).toLowerCase() === value.toLowerCase()) {
+        if (!potentialValues.includes(optionValue)) {
+          potentialValues.push(optionValue.toString());
+        }
+      }
+    });
+  }
+
+  return ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue).toString()) : false;
+  };
+};
 export const getGridSingleSelectOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {

package/colDef/gridStringColDef.js

@@ -1,6 +1,6 @@
 import { renderEditInputCell } from '../components/cell/GridEditInputCell';
 import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridStringOperators } from './gridStringOperators';
+import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
 export const GRID_STRING_COL_DEF = {
   width: 100,
   minWidth: 50,
@@ -17,5 +17,6 @@ export const GRID_STRING_COL_DEF = {
   type: 'string',
   align: 'left',
   filterOperators: getGridStringOperators(),
-  renderEditCell: renderEditInputCell
+  renderEditCell: renderEditInputCell,
+  getApplyQuickFilterFn: getGridStringQuickFilterFn
 };

package/colDef/gridStringOperators.d.ts

@@ -1,2 +1,4 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import { GridCellParams } from '../models';
+export declare const getGridStringQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridStringOperators: () => GridFilterOperator<any, number | string | null, any>[];

package/colDef/gridStringOperators.js

@@ -1,6 +1,18 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { escapeRegExp } from '../utils/utils';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+export const getGridStringQuickFilterFn = value => {
+  if (!value) {
+    return null;
+  }
+
+  const filterRegex = new RegExp(escapeRegExp(value), 'i');
+  return ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
+  };
+};
 export const getGridStringOperators = () => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {

package/components/GridFooter.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { GridFooterContainerProps } from './containers/GridFooterContainer';
-export declare const GridFooter: React.ForwardRefExoticComponent<GridFooterContainerProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridFooter };

package/components/GridFooter.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
 import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
@@ -11,7 +12,7 @@ import { GridFooterContainer } from './containers/GridFooterContainer';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   var _rootProps$components;
 
   const apiRef = useGridApiContext();
@@ -34,4 +35,12 @@ export const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(prop
   }, props, {
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridFooter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridFooter };

package/components/GridRow.js

@@ -9,7 +9,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { GridEvents } from '../models/events';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -156,7 +155,7 @@ function GridRow(props) {
       }
     }
 
-    publish(GridEvents.rowClick, onClick)(event);
+    publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
 
   const style = _extends({}, styleProp, {
@@ -287,9 +286,9 @@ function GridRow(props) {
     "aria-selected": selected,
     style: style,
     onClick: publishClick,
-    onDoubleClick: publish(GridEvents.rowDoubleClick, onDoubleClick),
-    onMouseEnter: publish(GridEvents.rowMouseEnter, onMouseEnter),
-    onMouseLeave: publish(GridEvents.rowMouseLeave, onMouseLeave)
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   }, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth,

package/components/GridRowCount.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 interface RowCountProps {
     rowCount: number;
     visibleRowCount: number;
 }
-declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridRowCount };

package/components/GridRowCount.js

@@ -65,6 +65,7 @@ process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   rowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   visibleRowCount: PropTypes.number.isRequired
 } : void 0;
 export { GridRowCount };