From 66c12f4045cdf5c7a5fde69934188b67c8baf6e0 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 17 Jul 2023 23:04:23 -0400 Subject: [PATCH 01/20] feat: make SUBMIT_FILTER_STROKE_TIME into a prop --- .../filtering/CustomMultiValueOperator.js | 7 ++-- .../filtering/CustomMultiValueOperator.tsx | 6 ++-- .../src/tests/filtering.DataGridPro.test.tsx | 4 ++- .../src/DataGrid/useDataGridProps.ts | 1 + .../panel/filterPanel/GridFilterInputDate.tsx | 18 +++------- .../filterPanel/GridFilterInputValue.tsx | 18 +++------- .../x-data-grid/src/hooks/utils/useTimeout.ts | 36 +++++++++++++++++++ .../src/models/props/DataGridProps.ts | 5 +++ scripts/x-data-grid-premium.exports.json | 2 -- scripts/x-data-grid-pro.exports.json | 2 -- scripts/x-data-grid.exports.json | 2 -- 11 files changed, 61 insertions(+), 40 deletions(-) create mode 100644 packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.js b/docs/data/data-grid/filtering/CustomMultiValueOperator.js index 8a339e582458c..07229db9ec8ed 100644 --- a/docs/data/data-grid/filtering/CustomMultiValueOperator.js +++ b/docs/data/data-grid/filtering/CustomMultiValueOperator.js @@ -1,13 +1,12 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; -import { DataGrid } from '@mui/x-data-grid'; +import { DataGrid, useGridRootProps } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; import SyncIcon from '@mui/icons-material/Sync'; -const SUBMIT_FILTER_STROKE_TIME = 500; - function InputNumberInterval(props) { + const rootProps = useGridRootProps(); const { item, applyValue, focusElementRef = null } = props; const filterTimeout = React.useRef(); @@ -33,7 +32,7 @@ function InputNumberInterval(props) { filterTimeout.current = setTimeout(() => { setIsApplying(false); applyValue({ ...item, value: [lowerBound, upperBound] }); - }, SUBMIT_FILTER_STROKE_TIME); + }, rootProps.filterDebounceDelay); }; const handleUpperFilterChange = (event) => { diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx b/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx index c69e5ae6d3851..2ee2fad4322c5 100644 --- a/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx +++ b/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx @@ -7,13 +7,13 @@ import { GridFilterItem, GridFilterModel, GridFilterOperator, + useGridRootProps, } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; import SyncIcon from '@mui/icons-material/Sync'; -const SUBMIT_FILTER_STROKE_TIME = 500; - function InputNumberInterval(props: GridFilterInputValueProps) { + const rootProps = useGridRootProps(); const { item, applyValue, focusElementRef = null } = props; const filterTimeout = React.useRef(); @@ -41,7 +41,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) { filterTimeout.current = setTimeout(() => { setIsApplying(false); applyValue({ ...item, value: [lowerBound, upperBound] }); - }, SUBMIT_FILTER_STROKE_TIME); + }, rootProps.filterDebounceDelay); }; const handleUpperFilterChange: TextFieldProps['onChange'] = (event) => { diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx index eb319fc3b2958..d0af947a15f07 100644 --- a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx @@ -6,7 +6,7 @@ import { GridLogicOperator, GridPreferencePanelsValue, GridRowModel, - SUBMIT_FILTER_STROKE_TIME, + DATA_GRID_PRO_PROPS_DEFAULT_VALUES, useGridApiRef, DataGridPro, GetColumnForNewFilterArgs, @@ -21,6 +21,8 @@ import * as React from 'react'; import { spy } from 'sinon'; import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; +const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PRO_PROPS_DEFAULT_VALUES.filterDebounceDelay; + const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Filter', () => { diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts index 5c91de13e6611..3be25f277dc15 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -55,6 +55,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { disableVirtualization: false, editMode: GridEditModes.Cell, filterMode: 'client', + filterDebounceDelay: 50, columnHeaderHeight: 56, hideFooter: false, hideFooterPagination: false, diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx index e223652625c08..7212cc5263763 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/utils'; +import { useTimeout } from '../../../hooks/utils/useTimeout'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; @@ -16,8 +17,6 @@ export type GridFilterInputDateProps = GridFilterInputValueProps & isFilterActive?: boolean; }; -export const SUBMIT_FILTER_DATE_STROKE_TIME = 500; - function GridFilterInputDate(props: GridFilterInputDateProps) { const { item, @@ -32,7 +31,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { disabled, ...other } = props; - const filterTimeout = React.useRef(); + const filterTimeout = useTimeout(); const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); const [applying, setIsApplying] = React.useState(false); const id = useId(); @@ -42,24 +41,17 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { (event: React.ChangeEvent) => { const value = event.target.value; - clearTimeout(filterTimeout.current); setFilterValueState(String(value)); setIsApplying(true); - filterTimeout.current = setTimeout(() => { + filterTimeout.start(rootProps.filterDebounceDelay, () => { applyValue({ ...item, value }); setIsApplying(false); - }, SUBMIT_FILTER_DATE_STROKE_TIME); + }); }, - [applyValue, item], + [applyValue, item, rootProps.filterDebounceDelay], ); - React.useEffect(() => { - return () => { - clearTimeout(filterTimeout.current); - }; - }, []); - React.useEffect(() => { const itemValue = item.value ?? ''; setFilterValueState(String(itemValue)); diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index 7689d0b06f26f..6e5f1f2a0271f 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -2,11 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/utils'; +import { useTimeout } from '../../../hooks/utils/useTimeout'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; -export const SUBMIT_FILTER_STROKE_TIME = 500; - export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & { type?: 'text' | 'number' | 'date' | 'datetime-local'; @@ -32,7 +31,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { InputProps, ...others } = props; - const filterTimeout = React.useRef(); + const filterTimeout = useTimeout(); const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); const [applying, setIsApplying] = React.useState(false); const id = useId(); @@ -41,24 +40,17 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { const onFilterChange = React.useCallback( (event: React.ChangeEvent) => { const { value } = event.target; - clearTimeout(filterTimeout.current); setFilterValueState(String(value)); setIsApplying(true); - filterTimeout.current = setTimeout(() => { + filterTimeout.start(rootProps.filterDebounceDelay, () => { applyValue({ ...item, value }); setIsApplying(false); - }, SUBMIT_FILTER_STROKE_TIME); + }); }, - [applyValue, item], + [applyValue, item, rootProps.filterDebounceDelay], ); - React.useEffect(() => { - return () => { - clearTimeout(filterTimeout.current); - }; - }, []); - React.useEffect(() => { const itemValue = item.value ?? ''; setFilterValueState(String(itemValue)); diff --git a/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts b/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts new file mode 100644 index 0000000000000..338a06ab5abc6 --- /dev/null +++ b/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { useLazyRef } from './useLazyRef'; + +class Timeout { + static create() { + return new Timeout(); + } + + currentId: number = 0; + + start(delay: number, fn: Function) { + this.clear(); + this.currentId = setTimeout(fn, delay); + } + + clear = () => { + if (this.currentId !== 0) { + clearTimeout(this.currentId); + this.currentId = 0; + } + }; + + disposeEffect = () => { + return this.clear; + }; +} + +const EMPTY = [] as any[]; + +export function useTimeout() { + const timeout = useLazyRef(Timeout.create).current; + + React.useEffect(timeout.disposeEffect, EMPTY); + + return timeout; +} diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index 7c75f078cfcd4..8a7d28f80ff87 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -224,6 +224,11 @@ export interface DataGridPropsWithDefaultValues { * @default "client" */ filterMode: GridFeatureMode; + /** + * The milliseconds delay to wait after a keystroke before triggering filtering. + * @default 50 + */ + filterDebounceDelay: number; /** * Sets the height in pixel of the column headers in the grid. * @default 56 diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 2111ef3f04884..54134deb290f6 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -610,8 +610,6 @@ { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "setupExcelExportWebWorker", "kind": "Function" }, { "name": "skSK", "kind": "Variable" }, - { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, - { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 320d9c134f2b8..ef16125ef20fa 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -562,8 +562,6 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "skSK", "kind": "Variable" }, - { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, - { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 53be35121489b..b3b61f59ae897 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -516,8 +516,6 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "skSK", "kind": "Variable" }, - { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, - { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, From 3bdf00c705e68725de0ae223af8f192a0ee7fbb6 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 17 Jul 2023 23:09:30 -0400 Subject: [PATCH 02/20] feat --- .../src/components/toolbar/GridToolbarQuickFilter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx index 70977a70b2469..6211c536d2eff 100644 --- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx +++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx @@ -62,7 +62,7 @@ export type GridToolbarQuickFilterProps = TextFieldProps & { quickFilterFormatter?: (values: NonNullable) => string; /** * The debounce time in milliseconds. - * @default 500 + * @default 50 */ debounceMs?: number; }; @@ -71,7 +71,7 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) { const { quickFilterParser = defaultSearchValueParser, quickFilterFormatter = defaultSearchValueFormatter, - debounceMs = 500, + debounceMs = 50, ...other } = props; From 97958605c6978802beea669eea71dfb7dac58a2a Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 17 Jul 2023 23:10:07 -0400 Subject: [PATCH 03/20] feat --- docs/data/data-grid/filtering/CustomMultiValueOperator.js | 2 +- docs/data/data-grid/filtering/CustomMultiValueOperator.tsx | 2 +- .../x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx | 2 +- packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts | 2 +- .../src/components/panel/filterPanel/GridFilterInputDate.tsx | 4 ++-- .../src/components/panel/filterPanel/GridFilterInputValue.tsx | 4 ++-- packages/grid/x-data-grid/src/models/props/DataGridProps.ts | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.js b/docs/data/data-grid/filtering/CustomMultiValueOperator.js index 07229db9ec8ed..75e3549d6a239 100644 --- a/docs/data/data-grid/filtering/CustomMultiValueOperator.js +++ b/docs/data/data-grid/filtering/CustomMultiValueOperator.js @@ -32,7 +32,7 @@ function InputNumberInterval(props) { filterTimeout.current = setTimeout(() => { setIsApplying(false); applyValue({ ...item, value: [lowerBound, upperBound] }); - }, rootProps.filterDebounceDelay); + }, rootProps.filterDebounceMs); }; const handleUpperFilterChange = (event) => { diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx b/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx index 2ee2fad4322c5..2532d64d3c881 100644 --- a/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx +++ b/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx @@ -41,7 +41,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) { filterTimeout.current = setTimeout(() => { setIsApplying(false); applyValue({ ...item, value: [lowerBound, upperBound] }); - }, rootProps.filterDebounceDelay); + }, rootProps.filterDebounceMs); }; const handleUpperFilterChange: TextFieldProps['onChange'] = (event) => { diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx index d0af947a15f07..6922d091c3099 100644 --- a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx @@ -21,7 +21,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; -const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PRO_PROPS_DEFAULT_VALUES.filterDebounceDelay; +const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PRO_PROPS_DEFAULT_VALUES.filterDebounceMs; const isJSDOM = /jsdom/.test(window.navigator.userAgent); diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts index 3be25f277dc15..069eaf387b91b 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -55,7 +55,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { disableVirtualization: false, editMode: GridEditModes.Cell, filterMode: 'client', - filterDebounceDelay: 50, + filterDebounceMs: 50, columnHeaderHeight: 56, hideFooter: false, hideFooterPagination: false, diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx index 7212cc5263763..05cc5a0d939cc 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx @@ -44,12 +44,12 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { setFilterValueState(String(value)); setIsApplying(true); - filterTimeout.start(rootProps.filterDebounceDelay, () => { + filterTimeout.start(rootProps.filterDebounceMs, () => { applyValue({ ...item, value }); setIsApplying(false); }); }, - [applyValue, item, rootProps.filterDebounceDelay], + [applyValue, item, rootProps.filterDebounceMs], ); React.useEffect(() => { diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index 6e5f1f2a0271f..e585f5aa3a3b1 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -43,12 +43,12 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { setFilterValueState(String(value)); setIsApplying(true); - filterTimeout.start(rootProps.filterDebounceDelay, () => { + filterTimeout.start(rootProps.filterDebounceMs, () => { applyValue({ ...item, value }); setIsApplying(false); }); }, - [applyValue, item, rootProps.filterDebounceDelay], + [applyValue, item, rootProps.filterDebounceMs], ); React.useEffect(() => { diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index 8a7d28f80ff87..84e65c23e25a0 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -228,7 +228,7 @@ export interface DataGridPropsWithDefaultValues { * The milliseconds delay to wait after a keystroke before triggering filtering. * @default 50 */ - filterDebounceDelay: number; + filterDebounceMs: number; /** * Sets the height in pixel of the column headers in the grid. * @default 56 From 0d8babc169893a6af983c6893d6c24ff603ee686 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 17 Jul 2023 23:18:53 -0400 Subject: [PATCH 04/20] lint --- .../src/components/panel/filterPanel/GridFilterInputDate.tsx | 2 +- .../src/components/panel/filterPanel/GridFilterInputValue.tsx | 2 +- packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx index 05cc5a0d939cc..7d3162acb40f6 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx @@ -49,7 +49,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) { setIsApplying(false); }); }, - [applyValue, item, rootProps.filterDebounceMs], + [applyValue, item, rootProps.filterDebounceMs, filterTimeout], ); React.useEffect(() => { diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index e585f5aa3a3b1..af28c845d2ead 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -48,7 +48,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { setIsApplying(false); }); }, - [applyValue, item, rootProps.filterDebounceMs], + [applyValue, item, rootProps.filterDebounceMs, filterTimeout], ); React.useEffect(() => { diff --git a/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts b/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts index 338a06ab5abc6..6dff53b5479c7 100644 --- a/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts +++ b/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts @@ -30,6 +30,7 @@ const EMPTY = [] as any[]; export function useTimeout() { const timeout = useLazyRef(Timeout.create).current; + // eslint-disable-next-line react-hooks/exhaustive-deps React.useEffect(timeout.disposeEffect, EMPTY); return timeout; From 776062d6c7b5180baaf2b8b8406a49960f8afdfd Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 17 Jul 2023 23:54:27 -0400 Subject: [PATCH 05/20] lint --- .../src/DataGridPremium/DataGridPremium.tsx | 5 +++++ .../grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 5 +++++ packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx | 5 +++++ .../src/components/toolbar/GridToolbarQuickFilter.tsx | 2 +- 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 1ae2d642a2425..b2a9e05c73528 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -290,6 +290,11 @@ DataGridPremiumRaw.propTypes = { lazyLoading: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, }), + /** + * The milliseconds delay to wait after a keystroke before triggering filtering. + * @default 50 + */ + filterDebounceMs: PropTypes.number, /** * Filtering can be processed on the server or client-side. * Set it to 'server' if you would like to handle filtering on the server-side. diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 2044cd537b006..109720290b40c 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -257,6 +257,11 @@ DataGridProRaw.propTypes = { lazyLoading: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, }), + /** + * The milliseconds delay to wait after a keystroke before triggering filtering. + * @default 50 + */ + filterDebounceMs: PropTypes.number, /** * Filtering can be processed on the server or client-side. * Set it to 'server' if you would like to handle filtering on the server-side. diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 99f00c3decfc9..7f644e2246135 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -185,6 +185,11 @@ DataGridRaw.propTypes = { columnGrouping: PropTypes.bool, warnIfFocusStateIsNotSynced: PropTypes.bool, }), + /** + * The milliseconds delay to wait after a keystroke before triggering filtering. + * @default 50 + */ + filterDebounceMs: PropTypes.number, /** * Filtering can be processed on the server or client-side. * Set it to 'server' if you would like to handle filtering on the server-side. diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx index 6211c536d2eff..3cab23b38d765 100644 --- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx +++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx @@ -165,7 +165,7 @@ GridToolbarQuickFilter.propTypes = { // ---------------------------------------------------------------------- /** * The debounce time in milliseconds. - * @default 500 + * @default 50 */ debounceMs: PropTypes.number, /** From 67fe5b47496c19a4240b68ddc99d471242802b80 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 18 Jul 2023 00:07:13 -0400 Subject: [PATCH 06/20] build: docs:api --- docs/pages/x/api/data-grid/data-grid-premium.json | 1 + docs/pages/x/api/data-grid/data-grid-pro.json | 1 + docs/pages/x/api/data-grid/data-grid.json | 1 + docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json | 2 +- docs/translations/api-docs/data-grid/data-grid-premium.json | 1 + docs/translations/api-docs/data-grid/data-grid-pro.json | 1 + docs/translations/api-docs/data-grid/data-grid.json | 1 + 7 files changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 8569313b7d0fe..ea4a7948bf974 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -82,6 +82,7 @@ "description": "{ clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, + "filterDebounceMs": { "type": { "name": "number" }, "default": "50" }, "filterMode": { "type": { "name": "custom", "description": "'client'
| 'server'" }, "default": "\"client\"" diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index b2b4a60f930d1..c450fb78f7fcb 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -70,6 +70,7 @@ "description": "{ columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, + "filterDebounceMs": { "type": { "name": "number" }, "default": "50" }, "filterMode": { "type": { "name": "custom", "description": "'client'
| 'server'" }, "default": "\"client\"" diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index e6a0ab828ef30..d07f5718717ae 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -51,6 +51,7 @@ "description": "{ columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, + "filterDebounceMs": { "type": { "name": "number" }, "default": "50" }, "filterMode": { "type": { "name": "enum", "description": "'client'
| 'server'" }, "default": "\"client\"" diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json index 70519e3f11c5e..668a3f64f1e89 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json @@ -1,6 +1,6 @@ { "props": { - "debounceMs": { "type": { "name": "number" }, "default": "500" }, + "debounceMs": { "type": { "name": "number" }, "default": "50" }, "quickFilterFormatter": { "type": { "name": "func" } }, "quickFilterParser": { "type": { "name": "func" } } }, diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 62328c3369538..a258eae7b76f6 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -43,6 +43,7 @@ "disableVirtualization": "If true, the virtualization is disabled.", "editMode": "Controls whether to use the cell or row editing.", "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, then the feature is fully disabled, and neither property nor method calls will have any effect.", + "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.", "filterMode": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", "filterModel": "Set the filter model of the grid.", "getAggregationPosition": "Determines the position of an aggregated value.

Signature:
function(groupNode: GridGroupNode) => GridAggregationPosition | null
groupNode: The current group.
returns (GridAggregationPosition | null): Position of the aggregated value (if null, the group isn't aggregated).", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index 6ed00e418dd25..c5c6e7982b098 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -37,6 +37,7 @@ "disableVirtualization": "If true, the virtualization is disabled.", "editMode": "Controls whether to use the cell or row editing.", "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect.", + "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.", "filterMode": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", "filterModel": "Set the filter model of the grid.", "getCellClassName": "Function that applies CSS classes dynamically on cells.

Signature:
function(params: GridCellParams) => string
params: With all properties from GridCellParams.
returns (string): The CSS class to apply to the cell.", diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 093527bec3aa8..c85a663efa696 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -26,6 +26,7 @@ "disableVirtualization": "If true, the virtualization is disabled.", "editMode": "Controls whether to use the cell or row editing.", "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect.", + "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.", "filterMode": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", "filterModel": "Set the filter model of the grid.", "getCellClassName": "Function that applies CSS classes dynamically on cells.

Signature:
function(params: GridCellParams) => string
params: With all properties from GridCellParams.
returns (string): The CSS class to apply to the cell.", From db2c5d9f1b4052e40008f89e759841d788691807 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 18 Jul 2023 16:56:31 -0400 Subject: [PATCH 07/20] refactor --- packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts b/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts index 6dff53b5479c7..79412fc43c404 100644 --- a/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts +++ b/packages/grid/x-data-grid/src/hooks/utils/useTimeout.ts @@ -1,5 +1,5 @@ -import * as React from 'react'; import { useLazyRef } from './useLazyRef'; +import { useOnMount } from './useOnMount'; class Timeout { static create() { @@ -25,13 +25,10 @@ class Timeout { }; } -const EMPTY = [] as any[]; - export function useTimeout() { const timeout = useLazyRef(Timeout.create).current; - // eslint-disable-next-line react-hooks/exhaustive-deps - React.useEffect(timeout.disposeEffect, EMPTY); + useOnMount(timeout.disposeEffect); return timeout; } From 8b6e63e2b8eb4972e7a84fac6c2ca65561c7d8a8 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 18 Jul 2023 17:04:42 -0400 Subject: [PATCH 08/20] lint --- .../panel/filterPanel/GridFilterInputDate.tsx | 7 +++++++ .../panel/filterPanel/GridFilterInputValue.tsx | 7 +++++++ .../src/components/toolbar/GridToolbarQuickFilter.tsx | 10 +++++----- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx index 7d3162acb40f6..9701d12a3c41e 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx @@ -5,6 +5,7 @@ import { unstable_useId as useId } from '@mui/utils'; import { useTimeout } from '../../../hooks/utils/useTimeout'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; +import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../DataGrid'; export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProps & { @@ -17,6 +18,12 @@ export type GridFilterInputDateProps = GridFilterInputValueProps & isFilterActive?: boolean; }; +/** + * Remove at v7 + * @deprecated + */ +export const SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs; + function GridFilterInputDate(props: GridFilterInputDateProps) { const { item, diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index af28c845d2ead..f99b9125f2d98 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -5,6 +5,7 @@ import { unstable_useId as useId } from '@mui/utils'; import { useTimeout } from '../../../hooks/utils/useTimeout'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; +import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../DataGrid'; export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & { @@ -17,6 +18,12 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps & isFilterActive?: boolean; }; +/** + * Remove at v7 + * @deprecated + */ +export const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs; + function GridFilterInputValue(props: GridTypeFilterInputValueProps) { const { item, diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx index 3cab23b38d765..476da86919a2c 100644 --- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx +++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx @@ -68,17 +68,17 @@ export type GridToolbarQuickFilterProps = TextFieldProps & { }; function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) { + const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector); + const { quickFilterParser = defaultSearchValueParser, quickFilterFormatter = defaultSearchValueFormatter, - debounceMs = 50, + debounceMs = rootProps.filterDebounceMs, ...other } = props; - const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector); - const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []), ); From 01f92ac6d0bbea6c523278e8fae5e6153e78b42d Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 18 Jul 2023 17:09:46 -0400 Subject: [PATCH 09/20] refactor --- docs/data/data-grid/demo/PopularFeaturesDemo.js | 2 +- docs/data/data-grid/demo/PopularFeaturesDemo.tsx | 2 +- docs/data/data-grid/filtering/QuickFilteringGrid.js | 1 - docs/data/data-grid/filtering/QuickFilteringGrid.tsx | 1 - docs/data/data-grid/filtering/QuickFilteringGrid.tsx.preview | 1 - docs/data/data-grid/filtering/QuickFilteringInitialize.js | 1 - docs/data/data-grid/filtering/QuickFilteringInitialize.tsx | 1 - packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts | 2 +- packages/grid/x-data-grid/src/models/props/DataGridProps.ts | 2 +- scripts/x-data-grid-premium.exports.json | 2 ++ scripts/x-data-grid-pro.exports.json | 2 ++ scripts/x-data-grid.exports.json | 2 ++ 12 files changed, 10 insertions(+), 9 deletions(-) diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js index 5934c43a7132e..8374403bef89f 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.js +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.js @@ -412,7 +412,7 @@ export default function PopularFeaturesDemo() { detailPanelCollapseIcon: ArrowUp, }} slotProps={{ - toolbar: { showQuickFilter: true, quickFilterProps: { debounceMs: 500 } }, + toolbar: { showQuickFilter: true }, }} getDetailPanelContent={getDetailPanelContent} getDetailPanelHeight={getDetailPanelHeight} diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx index 52d9f93f32cef..25efa193bff82 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx @@ -432,7 +432,7 @@ export default function PopularFeaturesDemo() { detailPanelCollapseIcon: ArrowUp, }} slotProps={{ - toolbar: { showQuickFilter: true, quickFilterProps: { debounceMs: 500 } }, + toolbar: { showQuickFilter: true }, }} getDetailPanelContent={getDetailPanelContent} getDetailPanelHeight={getDetailPanelHeight} diff --git a/docs/data/data-grid/filtering/QuickFilteringGrid.js b/docs/data/data-grid/filtering/QuickFilteringGrid.js index 3c7f54ba42468..c55663c35e259 100644 --- a/docs/data/data-grid/filtering/QuickFilteringGrid.js +++ b/docs/data/data-grid/filtering/QuickFilteringGrid.js @@ -30,7 +30,6 @@ export default function QuickFilteringGrid() { slotProps={{ toolbar: { showQuickFilter: true, - quickFilterProps: { debounceMs: 500 }, }, }} /> diff --git a/docs/data/data-grid/filtering/QuickFilteringGrid.tsx b/docs/data/data-grid/filtering/QuickFilteringGrid.tsx index 3c7f54ba42468..c55663c35e259 100644 --- a/docs/data/data-grid/filtering/QuickFilteringGrid.tsx +++ b/docs/data/data-grid/filtering/QuickFilteringGrid.tsx @@ -30,7 +30,6 @@ export default function QuickFilteringGrid() { slotProps={{ toolbar: { showQuickFilter: true, - quickFilterProps: { debounceMs: 500 }, }, }} /> diff --git a/docs/data/data-grid/filtering/QuickFilteringGrid.tsx.preview b/docs/data/data-grid/filtering/QuickFilteringGrid.tsx.preview index fa5d8058a574d..3c3e9101c1d6b 100644 --- a/docs/data/data-grid/filtering/QuickFilteringGrid.tsx.preview +++ b/docs/data/data-grid/filtering/QuickFilteringGrid.tsx.preview @@ -8,7 +8,6 @@ slotProps={{ toolbar: { showQuickFilter: true, - quickFilterProps: { debounceMs: 500 }, }, }} /> \ No newline at end of file diff --git a/docs/data/data-grid/filtering/QuickFilteringInitialize.js b/docs/data/data-grid/filtering/QuickFilteringInitialize.js index 5d6eb5e5fdf3f..d71f54958e77d 100644 --- a/docs/data/data-grid/filtering/QuickFilteringInitialize.js +++ b/docs/data/data-grid/filtering/QuickFilteringInitialize.js @@ -39,7 +39,6 @@ export default function QuickFilteringInitialize() { slotProps={{ toolbar: { showQuickFilter: true, - quickFilterProps: { debounceMs: 500 }, }, }} /> diff --git a/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx b/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx index 5d6eb5e5fdf3f..d71f54958e77d 100644 --- a/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx +++ b/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx @@ -39,7 +39,6 @@ export default function QuickFilteringInitialize() { slotProps={{ toolbar: { showQuickFilter: true, - quickFilterProps: { debounceMs: 500 }, }, }} /> diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts index 069eaf387b91b..79454bb420b28 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts +++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts @@ -55,7 +55,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { disableVirtualization: false, editMode: GridEditModes.Cell, filterMode: 'client', - filterDebounceMs: 50, + filterDebounceMs: 150, columnHeaderHeight: 56, hideFooter: false, hideFooterPagination: false, diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts index 84e65c23e25a0..606d2809b2f71 100644 --- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts @@ -226,7 +226,7 @@ export interface DataGridPropsWithDefaultValues { filterMode: GridFeatureMode; /** * The milliseconds delay to wait after a keystroke before triggering filtering. - * @default 50 + * @default 150 */ filterDebounceMs: number; /** diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 54134deb290f6..2111ef3f04884 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -610,6 +610,8 @@ { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "setupExcelExportWebWorker", "kind": "Function" }, { "name": "skSK", "kind": "Variable" }, + { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, + { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index ef16125ef20fa..320d9c134f2b8 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -562,6 +562,8 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "skSK", "kind": "Variable" }, + { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, + { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index b3b61f59ae897..53be35121489b 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -516,6 +516,8 @@ { "name": "selectedGridRowsSelector", "kind": "Variable" }, { "name": "selectedIdsLookupSelector", "kind": "Variable" }, { "name": "skSK", "kind": "Variable" }, + { "name": "SUBMIT_FILTER_DATE_STROKE_TIME", "kind": "Variable" }, + { "name": "SUBMIT_FILTER_STROKE_TIME", "kind": "Variable" }, { "name": "svSE", "kind": "Variable" }, { "name": "ToolbarPropsOverrides", "kind": "Interface" }, { "name": "trTR", "kind": "Variable" }, From 810a028bd2909b67709d41d05fbbb58e16adda10 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 18 Jul 2023 17:15:21 -0400 Subject: [PATCH 10/20] lint --- docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json index 668a3f64f1e89..0aa45d9a56e89 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json @@ -1,6 +1,6 @@ { "props": { - "debounceMs": { "type": { "name": "number" }, "default": "50" }, + "debounceMs": { "type": { "name": "number" }, "default": "150" }, "quickFilterFormatter": { "type": { "name": "func" } }, "quickFilterParser": { "type": { "name": "func" } } }, From 5d3c3957049d6d06c09a714a62f48cea10b600d7 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 18 Jul 2023 17:24:00 -0400 Subject: [PATCH 11/20] lint --- docs/pages/x/api/data-grid/data-grid-premium.json | 2 +- docs/pages/x/api/data-grid/data-grid-pro.json | 2 +- docs/pages/x/api/data-grid/data-grid.json | 2 +- docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json | 2 +- package.json | 2 +- .../src/DataGridPremium/DataGridPremium.tsx | 2 +- packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 2 +- packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx | 2 +- .../src/components/toolbar/GridToolbarQuickFilter.tsx | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index ea4a7948bf974..5bbd4767db192 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -82,7 +82,7 @@ "description": "{ clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, - "filterDebounceMs": { "type": { "name": "number" }, "default": "50" }, + "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, "filterMode": { "type": { "name": "custom", "description": "'client'
| 'server'" }, "default": "\"client\"" diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index c450fb78f7fcb..752871a6a0a74 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -70,7 +70,7 @@ "description": "{ columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, - "filterDebounceMs": { "type": { "name": "number" }, "default": "50" }, + "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, "filterMode": { "type": { "name": "custom", "description": "'client'
| 'server'" }, "default": "\"client\"" diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index d07f5718717ae..04e6628ad4987 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -51,7 +51,7 @@ "description": "{ columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }" } }, - "filterDebounceMs": { "type": { "name": "number" }, "default": "50" }, + "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, "filterMode": { "type": { "name": "enum", "description": "'client'
| 'server'" }, "default": "\"client\"" diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json index 0aa45d9a56e89..668a3f64f1e89 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json @@ -1,6 +1,6 @@ { "props": { - "debounceMs": { "type": { "name": "number" }, "default": "150" }, + "debounceMs": { "type": { "name": "number" }, "default": "50" }, "quickFilterFormatter": { "type": { "name": "func" } }, "quickFilterParser": { "type": { "name": "func" } } }, diff --git a/package.json b/package.json index a196c2e1816cd..abbe6088b53a3 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "release:publish": "lerna publish from-package --no-private --dist-tag latest --contents build", "release:publish:dry-run": "lerna publish from-package --dist-tag latest --contents build --registry=\"http://localhost:4873/\"", "release:tag": "node scripts/releaseTag.mjs", - "validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn docs:typescript:formatted\" \"yarn docs:api\"" + "validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn proptypes\" \"yarn docs:typescript:formatted\" \"yarn docs:api\"" }, "devDependencies": { "@argos-ci/core": "^0.9.0", diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index b2a9e05c73528..b95f5393509e7 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -292,7 +292,7 @@ DataGridPremiumRaw.propTypes = { }), /** * The milliseconds delay to wait after a keystroke before triggering filtering. - * @default 50 + * @default 150 */ filterDebounceMs: PropTypes.number, /** diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 109720290b40c..ea50be127b8f8 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -259,7 +259,7 @@ DataGridProRaw.propTypes = { }), /** * The milliseconds delay to wait after a keystroke before triggering filtering. - * @default 50 + * @default 150 */ filterDebounceMs: PropTypes.number, /** diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 7f644e2246135..4e6b42031befc 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -187,7 +187,7 @@ DataGridRaw.propTypes = { }), /** * The milliseconds delay to wait after a keystroke before triggering filtering. - * @default 50 + * @default 150 */ filterDebounceMs: PropTypes.number, /** diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx index 476da86919a2c..7198f31cb265d 100644 --- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx +++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx @@ -62,7 +62,7 @@ export type GridToolbarQuickFilterProps = TextFieldProps & { quickFilterFormatter?: (values: NonNullable) => string; /** * The debounce time in milliseconds. - * @default 50 + * @default 150 */ debounceMs?: number; }; @@ -165,7 +165,7 @@ GridToolbarQuickFilter.propTypes = { // ---------------------------------------------------------------------- /** * The debounce time in milliseconds. - * @default 50 + * @default 150 */ debounceMs: PropTypes.number, /** From 6fe923f73a6e8f4fc04b8bf64cc0f4bb91b8cfd0 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 18 Jul 2023 17:30:43 -0400 Subject: [PATCH 12/20] lint --- .../x/api/data-grid/grid-toolbar-quick-filter.json | 2 +- .../src/DataGridPremium/DataGrid.tsx | 2 ++ .../x-data-grid-pro/src/DataGridPro/DataGrid.tsx | 2 ++ .../grid/x-data-grid/src/DataGrid/DataGrid.tsx | 14 +++++++++++++- .../panel/filterPanel/GridFilterInputDate.tsx | 7 ------- .../panel/filterPanel/GridFilterInputValue.tsx | 7 ------- 6 files changed, 18 insertions(+), 16 deletions(-) diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json index 668a3f64f1e89..0aa45d9a56e89 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json @@ -1,6 +1,6 @@ { "props": { - "debounceMs": { "type": { "name": "number" }, "default": "50" }, + "debounceMs": { "type": { "name": "number" }, "default": "150" }, "quickFilterFormatter": { "type": { "name": "func" } }, "quickFilterParser": { "type": { "name": "func" } } }, diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx index d65e73b9fc43b..e8fa734546092 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx @@ -1,3 +1,5 @@ +export { SUBMIT_FILTER_STROKE_TIME, SUBMIT_FILTER_DATE_STROKE_TIME } from '@mui/x-data-grid'; + /** * @deprecated Import DataGridPremium instead. */ diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGrid.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGrid.tsx index 0dca9c1f41c1f..59f48be65ccc8 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGrid.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGrid.tsx @@ -1,3 +1,5 @@ +export { SUBMIT_FILTER_STROKE_TIME, SUBMIT_FILTER_DATE_STROKE_TIME } from '@mui/x-data-grid'; + /** * @deprecated Import DataGridPro instead. */ diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx index 4e6b42031befc..7bccbfc0c2142 100644 --- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx @@ -5,7 +5,7 @@ import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../compon import { DataGridProps } from '../models/props/DataGridProps'; import { GridContextProvider } from '../context/GridContextProvider'; import { useDataGridComponent } from './useDataGridComponent'; -import { useDataGridProps } from './useDataGridProps'; +import { useDataGridProps, DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps'; import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller'; import { GridValidRowModel } from '../models/gridRows'; @@ -42,6 +42,18 @@ interface DataGridComponent { export const DataGrid = React.memo(DataGridRaw) as DataGridComponent; +/** + * Remove at v7 + * @deprecated + */ +export const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs; + +/** + * Remove at v7 + * @deprecated + */ +export const SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs; + DataGridRaw.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx index 9701d12a3c41e..7d3162acb40f6 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx @@ -5,7 +5,6 @@ import { unstable_useId as useId } from '@mui/utils'; import { useTimeout } from '../../../hooks/utils/useTimeout'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; -import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../DataGrid'; export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProps & { @@ -18,12 +17,6 @@ export type GridFilterInputDateProps = GridFilterInputValueProps & isFilterActive?: boolean; }; -/** - * Remove at v7 - * @deprecated - */ -export const SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs; - function GridFilterInputDate(props: GridFilterInputDateProps) { const { item, diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index f99b9125f2d98..af28c845d2ead 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -5,7 +5,6 @@ import { unstable_useId as useId } from '@mui/utils'; import { useTimeout } from '../../../hooks/utils/useTimeout'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; -import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../DataGrid'; export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & { @@ -18,12 +17,6 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps & isFilterActive?: boolean; }; -/** - * Remove at v7 - * @deprecated - */ -export const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs; - function GridFilterInputValue(props: GridTypeFilterInputValueProps) { const { item, From 6a1ad56af534fcd5106825464cd215456ddc7e46 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 26 Jul 2023 02:46:47 -0400 Subject: [PATCH 13/20] fix: input re-type bug --- .../components/panel/filterPanel/GridFilterInputValue.tsx | 5 ----- .../src/components/panel/filterPanel/GridFilterPanel.tsx | 7 +------ 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index af28c845d2ead..59215632871c9 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -51,11 +51,6 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { [applyValue, item, rootProps.filterDebounceMs, filterTimeout], ); - React.useEffect(() => { - const itemValue = item.value ?? ''; - setFilterValueState(String(itemValue)); - }, [item.value]); - return ( ( ...other } = props; - const applyFilter = React.useCallback( - (item: GridFilterItem) => { - apiRef.current.upsertFilterItem(item); - }, - [apiRef], - ); + const applyFilter = apiRef.current.upsertFilterItem; const applyFilterLogicOperator = React.useCallback( (operator: GridLogicOperator) => { From a6cdda25945cf4bd5777c0540e5c6ea0aad0dc84 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 26 Jul 2023 03:07:50 -0400 Subject: [PATCH 14/20] ci: run From 9185ab277e8e552f00cedf53b69f564b84a0b6dd Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 26 Jul 2023 16:15:26 -0400 Subject: [PATCH 15/20] fix: add effect back --- .../components/panel/filterPanel/GridFilterInputValue.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index 59215632871c9..8430b7e949489 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -51,6 +51,13 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { [applyValue, item, rootProps.filterDebounceMs, filterTimeout], ); + React.useEffect(() => { + const modelItem = rootProps.filterModel?.items.find(i => i.id === item.id && i.field === item.field); + if (modelItem) { + setFilterValueState(String(modelItem.value ?? '')); + } + }, [rootProps.filterModel?.items]); + return ( Date: Wed, 26 Jul 2023 16:17:55 -0400 Subject: [PATCH 16/20] lint --- .../components/panel/filterPanel/GridFilterInputValue.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index 8430b7e949489..567a575ca1f93 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -52,11 +52,13 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { ); React.useEffect(() => { - const modelItem = rootProps.filterModel?.items.find(i => i.id === item.id && i.field === item.field); + const modelItem = rootProps.filterModel?.items.find( + (i) => i.id === item.id && i.field === item.field, + ); if (modelItem) { setFilterValueState(String(modelItem.value ?? '')); } - }, [rootProps.filterModel?.items]); + }, [rootProps.filterModel?.items, item.id, item.field]); return ( Date: Tue, 1 Aug 2023 03:51:54 -0400 Subject: [PATCH 17/20] build --- .../data-grid/grid-toolbar-quick-filter.json | 6 - .../api-docs/data-grid/data-grid-premium.json | 160 +----------------- .../api-docs/data-grid/data-grid-pro.json | 142 +--------------- .../api-docs/data-grid/data-grid.json | 109 +----------- 4 files changed, 15 insertions(+), 402 deletions(-) diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json index d2807cf2a7a2a..1b20d5c9f2a01 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json @@ -1,11 +1,6 @@ { "props": { -<<<<<<< HEAD "debounceMs": { "type": { "name": "number" }, "default": "150" }, - "quickFilterFormatter": { "type": { "name": "func" } }, - "quickFilterParser": { "type": { "name": "func" } } -======= - "debounceMs": { "type": { "name": "number" }, "default": "500" }, "quickFilterFormatter": { "type": { "name": "func" }, "signature": { @@ -22,7 +17,6 @@ "returned": "Array" } } ->>>>>>> master }, "slots": {}, "name": "GridToolbarQuickFilter", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json index 67d7d5072b77c..afdcc1d9a0e9e 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -1,160 +1,6 @@ { "componentDescription": "", "propDescriptions": { -<<<<<<< HEAD - "aggregationFunctions": "Aggregation functions available on the grid.", - "aggregationModel": "Set the aggregation model of the grid.", - "aggregationRowsScope": "Rows used to generate the aggregated value. If filtered, the aggregated values are generated using only the rows currently passing the filtering process. If all, the aggregated values are generated using all the rows.", - "apiRef": "The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().", - "aria-label": "The label of the grid.", - "aria-labelledby": "The id of the element containing a label for the grid.", - "autoHeight": "If true, the grid height is dynamic and follow the number of rows in the grid.", - "autoPageSize": "If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.", - "cellModesModel": "Controls the modes of the cells.", - "checkboxSelection": "If true, the grid get a first column with a checkbox that allows to select rows.", - "checkboxSelectionVisibleOnly": "If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled.", - "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", - "clipboardCopyCellDelimiter": "The character used to separate cell values when copying to the clipboard.", - "columnBuffer": "Number of extra columns to be rendered before/after the visible slice.", - "columnHeaderHeight": "Sets the height in pixel of the column headers in the grid.", - "columns": "Set of columns of type GridColDef[].", - "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", - "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overridable components.", - "componentsProps": "Overridable components props dynamically passed to the component at rendering.", - "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", - "density": "Set the density of the grid.", - "detailPanelExpandedRowIds": "The row ids to show the detail panel.", - "disableAggregation": "If true, aggregation is disabled.", - "disableChildrenFiltering": "If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.", - "disableChildrenSorting": "If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.", - "disableClipboardPaste": "If true, the clipboard paste is disabled.", - "disableColumnFilter": "If true, column filters are disabled.", - "disableColumnMenu": "If true, the column menu is disabled.", - "disableColumnPinning": "If true, the column pinning is disabled.", - "disableColumnReorder": "If true, reordering columns is disabled.", - "disableColumnResize": "If true, resizing columns is disabled.", - "disableColumnSelector": "If true, hiding/showing columns is disabled.", - "disableDensitySelector": "If true, the density selector is disabled.", - "disableMultipleColumnsFiltering": "If true, filtering with multiple columns is disabled.", - "disableMultipleColumnsSorting": "If true, sorting with multiple columns is disabled.", - "disableMultipleRowSelection": "If true, multiple selection using the Ctrl or CMD key is disabled.", - "disableRowGrouping": "If true, the row grouping is disabled.", - "disableRowSelectionOnClick": "If true, the selection on click on a row or cell is disabled.", - "disableVirtualization": "If true, the virtualization is disabled.", - "editMode": "Controls whether to use the cell or row editing.", - "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, then the feature is fully disabled, and neither property nor method calls will have any effect.", - "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.", - "filterMode": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", - "filterModel": "Set the filter model of the grid.", - "getAggregationPosition": "Determines the position of an aggregated value.

Signature:
function(groupNode: GridGroupNode) => GridAggregationPosition | null
groupNode: The current group.
returns (GridAggregationPosition | null): Position of the aggregated value (if null, the group isn't aggregated).", - "getCellClassName": "Function that applies CSS classes dynamically on cells.

Signature:
function(params: GridCellParams) => string
params: With all properties from GridCellParams.
returns (string): The CSS class to apply to the cell.", - "getDetailPanelContent": "Function that returns the element to render in row detail.

Signature:
function(params: GridRowParams) => JSX.Element
params: With all properties from GridRowParams.
returns (JSX.Element): The row detail element.", - "getDetailPanelHeight": "Function that returns the height of the row detail panel.

Signature:
function(params: GridRowParams) => number | string
params: With all properties from GridRowParams.
returns (number | string): The height in pixels or "auto" to use the content height.", - "getEstimatedRowHeight": "Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded.

Signature:
function(params: GridRowHeightParams) => number | null
params: With all properties from GridRowHeightParams.
returns (number | null): The estimated row height value. If null or undefined then the default row height, based on the density, is applied.", - "getRowClassName": "Function that applies CSS classes dynamically on rows.

Signature:
function(params: GridRowClassNameParams) => string
params: With all properties from GridRowClassNameParams.
returns (string): The CSS class to apply to the row.", - "getRowHeight": "Function that sets the row height per row.

Signature:
function(params: GridRowHeightParams) => GridRowHeightReturnValue
params: With all properties from GridRowHeightParams.
returns (GridRowHeightReturnValue): The row height value. If null or undefined then the default row height is applied. If "auto" then the row height is calculated based on the content.", - "getRowId": "Return the id of a given GridRowModel.", - "getRowSpacing": "Function that allows to specify the spacing between rows.

Signature:
function(params: GridRowSpacingParams) => GridRowSpacing
params: With all properties from GridRowSpacingParams.
returns (GridRowSpacing): The row spacing values.", - "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element.

Signature:
function(row: R) => Array<string>
row: The row from which we want the path.
returns (Array): The path to the row.", - "groupingColDef": "The grouping column used by the tree data.", - "hideFooter": "If true, the footer component is hidden.", - "hideFooterPagination": "If true, the pagination component in the footer is hidden.", - "hideFooterRowCount": "If true, the row count in the footer is hidden. It has no effect if the pagination is enabled.", - "hideFooterSelectedRowCount": "If true, the selected row count in the footer is hidden.", - "initialState": "The initial state of the DataGridPremium. The data in it is set in the state on initialization but isn't controlled. If one of the data in initialState is also being controlled, then the control state wins.", - "isCellEditable": "Callback fired when a cell is rendered, returns true if the cell is editable.

Signature:
function(params: GridCellParams) => boolean
params: With all properties from GridCellParams.
returns (boolean): A boolean indicating if the cell is editable.", - "isGroupExpandedByDefault": "Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.

Signature:
function(node: GridGroupNode) => boolean
node: The node of the group to test.
returns (boolean): A boolean indicating if the group is expanded.", - "isRowSelectable": "Determines if a row can be selected.

Signature:
function(params: GridRowParams) => boolean
params: With all properties from GridRowParams.
returns (boolean): A boolean indicating if the cell is selectable.", - "keepColumnPositionIfDraggedOutside": "If true, moving the mouse pointer outside the grid before releasing the mouse button in a column re-order action will not cause the column to jump back to its original position.", - "keepNonExistentRowsSelected": "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.", - "loading": "If true, a loading overlay is displayed.", - "localeText": "Set the locale text of the grid. You can find all the translation keys supported in the source in the GitHub repository.", - "logger": "Pass a custom logger in the components that implements the Logger interface.", - "logLevel": "Allows to pass the logging level or false to turn off logging.", - "nonce": "Nonce of the inline styles for Content Security Policy.", - "onAggregationModelChange": "Callback fired when the row grouping model changes.

Signature:
function(model: GridAggregationModel, details: GridCallbackDetails) => void
model: The aggregated columns.
details: Additional details for this callback.", - "onCellClick": "Callback fired when any cell is clicked.

Signature:
function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellDoubleClick": "Callback fired when a double click event comes from a cell element.

Signature:
function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellEditStart": "Callback fired when the cell turns to edit mode.

Signature:
function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent | React.MouseEvent>) => void
params: With all properties from GridCellParams.
event: The event that caused this prop to be called.", - "onCellEditStop": "Callback fired when the cell turns to view mode.

Signature:
function(params: GridCellParams, event: MuiEvent<MuiBaseEvent>) => void
params: With all properties from GridCellParams.
event: The event that caused this prop to be called.", - "onCellKeyDown": "Callback fired when a keydown event comes from a cell element.

Signature:
function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellModesModelChange": "Callback fired when the cellModesModel prop changes.

Signature:
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
cellModesModel: Object containing which cells are in "edit" mode.
details: Additional details for this callback.", - "onClipboardCopy": "Callback called when the data is copied to the clipboard.

Signature:
function(data: string) => void
data: The data copied to the clipboard.", - "onClipboardPasteEnd": "Callback fired when the clipboard paste operation ends.", - "onClipboardPasteStart": "Callback fired when the clipboard paste operation starts.", - "onColumnHeaderClick": "Callback fired when a click event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderDoubleClick": "Callback fired when a double click event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderEnter": "Callback fired when a mouse enter event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderLeave": "Callback fired when a mouse leave event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderOut": "Callback fired when a mouseout event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderOver": "Callback fired when a mouseover event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnOrderChange": "Callback fired when a column is reordered.

Signature:
function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridColumnOrderChangeParams.
event: The event object.
details: Additional details for this callback.", - "onColumnResize": "Callback fired while a column is being resized.

Signature:
function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnResizeParams.
event: The event object.
details: Additional details for this callback.", - "onColumnVisibilityModelChange": "Callback fired when the column visibility model changes.

Signature:
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
model: The new model.
details: Additional details for this callback.", - "onColumnWidthChange": "Callback fired when the width of a column is changed.

Signature:
function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnResizeParams.
event: The event object.
details: Additional details for this callback.", - "onDetailPanelExpandedRowIdsChange": "Callback fired when the detail panel of a row is opened or closed.

Signature:
function(ids: Array<GridRowId>, details: GridCallbackDetails) => void
ids: The ids of the rows which have the detail panel open.
details: Additional details for this callback.", - "onExcelExportStateChange": "Callback fired when the state of the Excel export changes.

Signature:
function(inProgress: string) => void
inProgress: Indicates if the task is in progress.", - "onFetchRows": "Callback fired when rowCount is set and the next batch of virtualized rows is rendered.

Signature:
function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridFetchRowsParams.
event: The event object.
details: Additional details for this callback.", - "onFilterModelChange": "Callback fired when the Filter model changes before the filters are applied.

Signature:
function(model: GridFilterModel, details: GridCallbackDetails) => void
model: With all properties from GridFilterModel.
details: Additional details for this callback.", - "onMenuClose": "Callback fired when the menu is closed.

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridMenuParams.
event: The event object.
details: Additional details for this callback.", - "onMenuOpen": "Callback fired when the menu is opened.

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridMenuParams.
event: The event object.
details: Additional details for this callback.", - "onPaginationModelChange": "Callback fired when the pagination model has changed.

Signature:
function(model: GridPaginationModel, details: GridCallbackDetails) => void
model: Updated pagination model.
details: Additional details for this callback.", - "onPinnedColumnsChange": "Callback fired when the pinned columns have changed.

Signature:
function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void
pinnedColumns: The changed pinned columns.
details: Additional details for this callback.", - "onPreferencePanelClose": "Callback fired when the preferences panel is closed.

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridPreferencePanelParams.
event: The event object.
details: Additional details for this callback.", - "onPreferencePanelOpen": "Callback fired when the preferences panel is opened.

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridPreferencePanelParams.
event: The event object.
details: Additional details for this callback.", - "onProcessRowUpdateError": "Callback called when processRowUpdate throws an error or rejects.

Signature:
function(error: any) => void
error: The error thrown.", - "onResize": "Callback fired when the grid is resized.

Signature:
function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
containerSize: With all properties from ElementSize.
event: The event object.
details: Additional details for this callback.", - "onRowClick": "Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.

Signature:
function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridRowParams.
event: The event object.
details: Additional details for this callback.", - "onRowDoubleClick": "Callback fired when a double click event comes from a row container element.

Signature:
function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from RowParams.
event: The event object.
details: Additional details for this callback.", - "onRowEditCommit": "Callback fired when the row changes are committed.

Signature:
function(id: GridRowId, event: MuiEvent<MuiBaseEvent>) => void
id: The row id.
event: The event that caused this prop to be called.", - "onRowEditStart": "Callback fired when the row turns to edit mode.

Signature:
function(params: GridRowParams, event: MuiEvent<React.KeyboardEvent | React.MouseEvent>) => void
params: With all properties from GridRowParams.
event: The event that caused this prop to be called.", - "onRowEditStop": "Callback fired when the row turns to view mode.

Signature:
function(params: GridRowParams, event: MuiEvent<MuiBaseEvent>) => void
params: With all properties from GridRowParams.
event: The event that caused this prop to be called.", - "onRowGroupingModelChange": "Callback fired when the row grouping model changes.

Signature:
function(model: GridRowGroupingModel, details: GridCallbackDetails) => void
model: Columns used as grouping criteria.
details: Additional details for this callback.", - "onRowModesModelChange": "Callback fired when the rowModesModel prop changes.

Signature:
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
rowModesModel: Object containing which rows are in "edit" mode.
details: Additional details for this callback.", - "onRowOrderChange": "Callback fired when a row is being reordered.

Signature:
function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridRowOrderChangeParams.
event: The event object.
details: Additional details for this callback.", - "onRowSelectionModelChange": "Callback fired when the selection state of one or multiple rows changes.

Signature:
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
rowSelectionModel: With all the row ids GridSelectionModel.
details: Additional details for this callback.", - "onRowsScrollEnd": "Callback fired when scrolling to the bottom of the grid viewport.

Signature:
function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridRowScrollEndParams.
event: The event object.
details: Additional details for this callback.", - "onSortModelChange": "Callback fired when the sort model changes before a column is sorted.

Signature:
function(model: GridSortModel, details: GridCallbackDetails) => void
model: With all properties from GridSortModel.
details: Additional details for this callback.", - "pageSizeOptions": "Select the pageSize dynamically using the component UI.", - "pagination": "If true, pagination is enabled.", - "paginationMode": "Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side.", - "paginationModel": "The pagination model of type GridPaginationModel which refers to current page and pageSize.", - "pinnedColumns": "The column fields to display pinned to left or right.", - "pinnedRows": "Rows data to pin on top or bottom.", - "processRowUpdate": "Callback called before updating a row with new values in the row and cell editing.

Signature:
function(newRow: R, oldRow: R) => Promise<R> | R
newRow: Row object with the new values.
oldRow: Row object with the old values.
returns (Promise | R): The final values to update the row.", - "rowBuffer": "Number of extra rows to be rendered before/after the visible slice.", - "rowCount": "Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.", - "rowGroupingColumnMode": "If single, all the columns that are grouped are represented in the same grid column. If multiple, each column that is grouped is represented in its own grid column.", - "rowGroupingModel": "Set the row grouping model of the grid.", - "rowHeight": "Sets the height in pixel of a row in the grid.", - "rowModesModel": "Controls the modes of the rows.", - "rowReordering": "If true, the reordering of rows is enabled.", - "rows": "Set of rows of type GridRowsProp.", - "rowSelection": "If false, the row selection mode is disabled.", - "rowSelectionModel": "Sets the row selection model of the grid.", - "rowsLoadingMode": "Loading rows can be processed on the server or client-side. Set it to 'client' if you would like enable infnite loading. Set it to 'server' if you would like to enable lazy loading. * @default "client"", - "rowSpacingType": "Sets the type of space between rows added by getRowSpacing.", - "rowThreshold": "Number of rows from the rowBuffer that can be visible before a new slice is rendered.", - "scrollbarSize": "Override the height/width of the grid inner scrollbar.", - "scrollEndThreshold": "Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.", - "showCellVerticalBorder": "If true, the vertical borders of the cells are displayed.", - "showColumnVerticalBorder": "If true, the right border of the column headers are displayed.", - "slotProps": "Overridable components props dynamically passed to the component at rendering.", - "slots": "Overridable components.", - "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", - "sortingOrder": "The order of the sorting sequence.", - "sortModel": "Set the sort model of the grid.", - "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", - "throttleRowsMs": "If positive, the Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.", - "treeData": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.", - "unstable_cellSelection": "If true, the cell selection mode is enabled.", - "unstable_cellSelectionModel": "Set the cell selection model of the grid.", - "unstable_headerFilters": "If true, enables the data grid filtering on header feature.", - "unstable_ignoreValueFormatterDuringExport": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.", - "unstable_onCellSelectionModelChange": "Callback fired when the selection state of one or multiple cells changes.

Signature:
function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => void
cellSelectionModel: Object in the shape of GridCellSelectionModel containing the selected cells.
details: Additional details for this callback.", - "unstable_splitClipboardPastedText": "The function is used to split the pasted text into rows and cells.

Signature:
function(text: string) => void
text: The text pasted from the clipboard." -======= "aggregationFunctions": { "description": "Aggregation functions available on the grid.", "deprecated": "", @@ -365,6 +211,11 @@ "deprecated": "", "typeDescriptions": {} }, + "filterDebounceMs": { + "description": "The milliseconds delay to wait after a keystroke before triggering filtering.", + "deprecated": "", + "typeDescriptions": {} + }, "filterMode": { "description": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", "deprecated": "", @@ -1085,7 +936,6 @@ "deprecated": "", "typeDescriptions": { "text": "The text pasted from the clipboard." } } ->>>>>>> master }, "classDescriptions": { "actionsCell": { diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json index a7dcf16ecc935..ab350364a349f 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -1,142 +1,6 @@ { "componentDescription": "", "propDescriptions": { -<<<<<<< HEAD - "apiRef": "The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().", - "aria-label": "The label of the grid.", - "aria-labelledby": "The id of the element containing a label for the grid.", - "autoHeight": "If true, the grid height is dynamic and follow the number of rows in the grid.", - "autoPageSize": "If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.", - "cellModesModel": "Controls the modes of the cells.", - "checkboxSelection": "If true, the grid get a first column with a checkbox that allows to select rows.", - "checkboxSelectionVisibleOnly": "If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled.", - "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", - "clipboardCopyCellDelimiter": "The character used to separate cell values when copying to the clipboard.", - "columnBuffer": "Number of extra columns to be rendered before/after the visible slice.", - "columnHeaderHeight": "Sets the height in pixel of the column headers in the grid.", - "columns": "Set of columns of type GridColDef[].", - "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", - "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overridable components.", - "componentsProps": "Overridable components props dynamically passed to the component at rendering.", - "defaultGroupingExpansionDepth": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", - "density": "Set the density of the grid.", - "detailPanelExpandedRowIds": "The row ids to show the detail panel.", - "disableChildrenFiltering": "If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.", - "disableChildrenSorting": "If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.", - "disableColumnFilter": "If true, column filters are disabled.", - "disableColumnMenu": "If true, the column menu is disabled.", - "disableColumnPinning": "If true, the column pinning is disabled.", - "disableColumnReorder": "If true, reordering columns is disabled.", - "disableColumnResize": "If true, resizing columns is disabled.", - "disableColumnSelector": "If true, hiding/showing columns is disabled.", - "disableDensitySelector": "If true, the density selector is disabled.", - "disableMultipleColumnsFiltering": "If true, filtering with multiple columns is disabled.", - "disableMultipleColumnsSorting": "If true, sorting with multiple columns is disabled.", - "disableMultipleRowSelection": "If true, multiple selection using the Ctrl or CMD key is disabled.", - "disableRowSelectionOnClick": "If true, the selection on click on a row or cell is disabled.", - "disableVirtualization": "If true, the virtualization is disabled.", - "editMode": "Controls whether to use the cell or row editing.", - "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect.", - "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.", - "filterMode": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", - "filterModel": "Set the filter model of the grid.", - "getCellClassName": "Function that applies CSS classes dynamically on cells.

Signature:
function(params: GridCellParams) => string
params: With all properties from GridCellParams.
returns (string): The CSS class to apply to the cell.", - "getDetailPanelContent": "Function that returns the element to render in row detail.

Signature:
function(params: GridRowParams) => JSX.Element
params: With all properties from GridRowParams.
returns (JSX.Element): The row detail element.", - "getDetailPanelHeight": "Function that returns the height of the row detail panel.

Signature:
function(params: GridRowParams) => number | string
params: With all properties from GridRowParams.
returns (number | string): The height in pixels or "auto" to use the content height.", - "getEstimatedRowHeight": "Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded.

Signature:
function(params: GridRowHeightParams) => number | null
params: With all properties from GridRowHeightParams.
returns (number | null): The estimated row height value. If null or undefined then the default row height, based on the density, is applied.", - "getRowClassName": "Function that applies CSS classes dynamically on rows.

Signature:
function(params: GridRowClassNameParams) => string
params: With all properties from GridRowClassNameParams.
returns (string): The CSS class to apply to the row.", - "getRowHeight": "Function that sets the row height per row.

Signature:
function(params: GridRowHeightParams) => GridRowHeightReturnValue
params: With all properties from GridRowHeightParams.
returns (GridRowHeightReturnValue): The row height value. If null or undefined then the default row height is applied. If "auto" then the row height is calculated based on the content.", - "getRowId": "Return the id of a given GridRowModel.", - "getRowSpacing": "Function that allows to specify the spacing between rows.

Signature:
function(params: GridRowSpacingParams) => GridRowSpacing
params: With all properties from GridRowSpacingParams.
returns (GridRowSpacing): The row spacing values.", - "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element.

Signature:
function(row: R) => Array<string>
row: The row from which we want the path.
returns (Array): The path to the row.", - "groupingColDef": "The grouping column used by the tree data.", - "hideFooter": "If true, the footer component is hidden.", - "hideFooterPagination": "If true, the pagination component in the footer is hidden.", - "hideFooterRowCount": "If true, the row count in the footer is hidden. It has no effect if the pagination is enabled.", - "hideFooterSelectedRowCount": "If true, the selected row count in the footer is hidden.", - "initialState": "The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.", - "isCellEditable": "Callback fired when a cell is rendered, returns true if the cell is editable.

Signature:
function(params: GridCellParams) => boolean
params: With all properties from GridCellParams.
returns (boolean): A boolean indicating if the cell is editable.", - "isGroupExpandedByDefault": "Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.

Signature:
function(node: GridGroupNode) => boolean
node: The node of the group to test.
returns (boolean): A boolean indicating if the group is expanded.", - "isRowSelectable": "Determines if a row can be selected.

Signature:
function(params: GridRowParams) => boolean
params: With all properties from GridRowParams.
returns (boolean): A boolean indicating if the cell is selectable.", - "keepColumnPositionIfDraggedOutside": "If true, moving the mouse pointer outside the grid before releasing the mouse button in a column re-order action will not cause the column to jump back to its original position.", - "keepNonExistentRowsSelected": "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.", - "loading": "If true, a loading overlay is displayed.", - "localeText": "Set the locale text of the grid. You can find all the translation keys supported in the source in the GitHub repository.", - "logger": "Pass a custom logger in the components that implements the Logger interface.", - "logLevel": "Allows to pass the logging level or false to turn off logging.", - "nonce": "Nonce of the inline styles for Content Security Policy.", - "onCellClick": "Callback fired when any cell is clicked.

Signature:
function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellDoubleClick": "Callback fired when a double click event comes from a cell element.

Signature:
function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellEditStart": "Callback fired when the cell turns to edit mode.

Signature:
function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent | React.MouseEvent>) => void
params: With all properties from GridCellParams.
event: The event that caused this prop to be called.", - "onCellEditStop": "Callback fired when the cell turns to view mode.

Signature:
function(params: GridCellParams, event: MuiEvent<MuiBaseEvent>) => void
params: With all properties from GridCellParams.
event: The event that caused this prop to be called.", - "onCellKeyDown": "Callback fired when a keydown event comes from a cell element.

Signature:
function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellModesModelChange": "Callback fired when the cellModesModel prop changes.

Signature:
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
cellModesModel: Object containing which cells are in "edit" mode.
details: Additional details for this callback.", - "onClipboardCopy": "Callback called when the data is copied to the clipboard.

Signature:
function(data: string) => void
data: The data copied to the clipboard.", - "onColumnHeaderClick": "Callback fired when a click event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderDoubleClick": "Callback fired when a double click event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderEnter": "Callback fired when a mouse enter event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderLeave": "Callback fired when a mouse leave event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderOut": "Callback fired when a mouseout event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderOver": "Callback fired when a mouseover event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnOrderChange": "Callback fired when a column is reordered.

Signature:
function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridColumnOrderChangeParams.
event: The event object.
details: Additional details for this callback.", - "onColumnResize": "Callback fired while a column is being resized.

Signature:
function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnResizeParams.
event: The event object.
details: Additional details for this callback.", - "onColumnVisibilityModelChange": "Callback fired when the column visibility model changes.

Signature:
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
model: The new model.
details: Additional details for this callback.", - "onColumnWidthChange": "Callback fired when the width of a column is changed.

Signature:
function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnResizeParams.
event: The event object.
details: Additional details for this callback.", - "onDetailPanelExpandedRowIdsChange": "Callback fired when the detail panel of a row is opened or closed.

Signature:
function(ids: Array<GridRowId>, details: GridCallbackDetails) => void
ids: The ids of the rows which have the detail panel open.
details: Additional details for this callback.", - "onFetchRows": "Callback fired when rowCount is set and the next batch of virtualized rows is rendered.

Signature:
function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridFetchRowsParams.
event: The event object.
details: Additional details for this callback.", - "onFilterModelChange": "Callback fired when the Filter model changes before the filters are applied.

Signature:
function(model: GridFilterModel, details: GridCallbackDetails) => void
model: With all properties from GridFilterModel.
details: Additional details for this callback.", - "onMenuClose": "Callback fired when the menu is closed.

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridMenuParams.
event: The event object.
details: Additional details for this callback.", - "onMenuOpen": "Callback fired when the menu is opened.

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridMenuParams.
event: The event object.
details: Additional details for this callback.", - "onPaginationModelChange": "Callback fired when the pagination model has changed.

Signature:
function(model: GridPaginationModel, details: GridCallbackDetails) => void
model: Updated pagination model.
details: Additional details for this callback.", - "onPinnedColumnsChange": "Callback fired when the pinned columns have changed.

Signature:
function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void
pinnedColumns: The changed pinned columns.
details: Additional details for this callback.", - "onPreferencePanelClose": "Callback fired when the preferences panel is closed.

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridPreferencePanelParams.
event: The event object.
details: Additional details for this callback.", - "onPreferencePanelOpen": "Callback fired when the preferences panel is opened.

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridPreferencePanelParams.
event: The event object.
details: Additional details for this callback.", - "onProcessRowUpdateError": "Callback called when processRowUpdate throws an error or rejects.

Signature:
function(error: any) => void
error: The error thrown.", - "onResize": "Callback fired when the grid is resized.

Signature:
function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
containerSize: With all properties from ElementSize.
event: The event object.
details: Additional details for this callback.", - "onRowClick": "Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.

Signature:
function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridRowParams.
event: The event object.
details: Additional details for this callback.", - "onRowDoubleClick": "Callback fired when a double click event comes from a row container element.

Signature:
function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from RowParams.
event: The event object.
details: Additional details for this callback.", - "onRowEditCommit": "Callback fired when the row changes are committed.

Signature:
function(id: GridRowId, event: MuiEvent<MuiBaseEvent>) => void
id: The row id.
event: The event that caused this prop to be called.", - "onRowEditStart": "Callback fired when the row turns to edit mode.

Signature:
function(params: GridRowParams, event: MuiEvent<React.KeyboardEvent | React.MouseEvent>) => void
params: With all properties from GridRowParams.
event: The event that caused this prop to be called.", - "onRowEditStop": "Callback fired when the row turns to view mode.

Signature:
function(params: GridRowParams, event: MuiEvent<MuiBaseEvent>) => void
params: With all properties from GridRowParams.
event: The event that caused this prop to be called.", - "onRowModesModelChange": "Callback fired when the rowModesModel prop changes.

Signature:
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
rowModesModel: Object containing which rows are in "edit" mode.
details: Additional details for this callback.", - "onRowOrderChange": "Callback fired when a row is being reordered.

Signature:
function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridRowOrderChangeParams.
event: The event object.
details: Additional details for this callback.", - "onRowSelectionModelChange": "Callback fired when the selection state of one or multiple rows changes.

Signature:
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
rowSelectionModel: With all the row ids GridSelectionModel.
details: Additional details for this callback.", - "onRowsScrollEnd": "Callback fired when scrolling to the bottom of the grid viewport.

Signature:
function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridRowScrollEndParams.
event: The event object.
details: Additional details for this callback.", - "onSortModelChange": "Callback fired when the sort model changes before a column is sorted.

Signature:
function(model: GridSortModel, details: GridCallbackDetails) => void
model: With all properties from GridSortModel.
details: Additional details for this callback.", - "pageSizeOptions": "Select the pageSize dynamically using the component UI.", - "pagination": "If true, pagination is enabled.", - "paginationMode": "Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side.", - "paginationModel": "The pagination model of type GridPaginationModel which refers to current page and pageSize.", - "pinnedColumns": "The column fields to display pinned to left or right.", - "pinnedRows": "Rows data to pin on top or bottom.", - "processRowUpdate": "Callback called before updating a row with new values in the row and cell editing.

Signature:
function(newRow: R, oldRow: R) => Promise<R> | R
newRow: Row object with the new values.
oldRow: Row object with the old values.
returns (Promise | R): The final values to update the row.", - "rowBuffer": "Number of extra rows to be rendered before/after the visible slice.", - "rowCount": "Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.", - "rowHeight": "Sets the height in pixel of a row in the grid.", - "rowModesModel": "Controls the modes of the rows.", - "rowReordering": "If true, the reordering of rows is enabled.", - "rows": "Set of rows of type GridRowsProp.", - "rowSelection": "If false, the row selection mode is disabled.", - "rowSelectionModel": "Sets the row selection model of the grid.", - "rowsLoadingMode": "Loading rows can be processed on the server or client-side. Set it to 'client' if you would like enable infnite loading. Set it to 'server' if you would like to enable lazy loading. * @default "client"", - "rowSpacingType": "Sets the type of space between rows added by getRowSpacing.", - "rowThreshold": "Number of rows from the rowBuffer that can be visible before a new slice is rendered.", - "scrollbarSize": "Override the height/width of the grid inner scrollbar.", - "scrollEndThreshold": "Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.", - "showCellVerticalBorder": "If true, the vertical borders of the cells are displayed.", - "showColumnVerticalBorder": "If true, the right border of the column headers are displayed.", - "slotProps": "Overridable components props dynamically passed to the component at rendering.", - "slots": "Overridable components.", - "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", - "sortingOrder": "The order of the sorting sequence.", - "sortModel": "Set the sort model of the grid.", - "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", - "throttleRowsMs": "If positive, the Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.", - "treeData": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.", - "unstable_headerFilters": "If true, enables the data grid filtering on header feature.", - "unstable_ignoreValueFormatterDuringExport": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export." -======= "apiRef": { "description": "The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().", "deprecated": "", @@ -317,6 +181,11 @@ "deprecated": "", "typeDescriptions": {} }, + "filterDebounceMs": { + "description": "The milliseconds delay to wait after a keystroke before triggering filtering.", + "deprecated": "", + "typeDescriptions": {} + }, "filterMode": { "description": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", "deprecated": "", @@ -965,7 +834,6 @@ "deprecated": "", "typeDescriptions": {} } ->>>>>>> master }, "classDescriptions": { "actionsCell": { diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json index 77c1d5e93ede9..ac8899850eb5e 100644 --- a/docs/translations/api-docs/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid.json @@ -1,109 +1,6 @@ { "componentDescription": "", "propDescriptions": { -<<<<<<< HEAD - "apiRef": "The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().", - "aria-label": "The label of the grid.", - "aria-labelledby": "The id of the element containing a label for the grid.", - "autoHeight": "If true, the grid height is dynamic and follow the number of rows in the grid.", - "autoPageSize": "If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.", - "cellModesModel": "Controls the modes of the cells.", - "checkboxSelection": "If true, the grid get a first column with a checkbox that allows to select rows.", - "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", - "clipboardCopyCellDelimiter": "The character used to separate cell values when copying to the clipboard.", - "columnBuffer": "Number of extra columns to be rendered before/after the visible slice.", - "columnHeaderHeight": "Sets the height in pixel of the column headers in the grid.", - "columns": "Set of columns of type GridColDef[].", - "columnThreshold": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", - "columnVisibilityModel": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", - "components": "Overridable components.", - "componentsProps": "Overridable components props dynamically passed to the component at rendering.", - "density": "Set the density of the grid.", - "disableColumnFilter": "If true, column filters are disabled.", - "disableColumnMenu": "If true, the column menu is disabled.", - "disableColumnSelector": "If true, hiding/showing columns is disabled.", - "disableDensitySelector": "If true, the density selector is disabled.", - "disableRowSelectionOnClick": "If true, the selection on click on a row or cell is disabled.", - "disableVirtualization": "If true, the virtualization is disabled.", - "editMode": "Controls whether to use the cell or row editing.", - "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect.", - "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.", - "filterMode": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", - "filterModel": "Set the filter model of the grid.", - "getCellClassName": "Function that applies CSS classes dynamically on cells.

Signature:
function(params: GridCellParams) => string
params: With all properties from GridCellParams.
returns (string): The CSS class to apply to the cell.", - "getDetailPanelContent": "Function that returns the element to render in row detail.

Signature:
function(params: GridRowParams) => JSX.Element
params: With all properties from GridRowParams.
returns (JSX.Element): The row detail element.", - "getEstimatedRowHeight": "Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded.

Signature:
function(params: GridRowHeightParams) => number | null
params: With all properties from GridRowHeightParams.
returns (number | null): The estimated row height value. If null or undefined then the default row height, based on the density, is applied.", - "getRowClassName": "Function that applies CSS classes dynamically on rows.

Signature:
function(params: GridRowClassNameParams) => string
params: With all properties from GridRowClassNameParams.
returns (string): The CSS class to apply to the row.", - "getRowHeight": "Function that sets the row height per row.

Signature:
function(params: GridRowHeightParams) => GridRowHeightReturnValue
params: With all properties from GridRowHeightParams.
returns (GridRowHeightReturnValue): The row height value. If null or undefined then the default row height is applied. If "auto" then the row height is calculated based on the content.", - "getRowId": "Return the id of a given GridRowModel.", - "getRowSpacing": "Function that allows to specify the spacing between rows.

Signature:
function(params: GridRowSpacingParams) => GridRowSpacing
params: With all properties from GridRowSpacingParams.
returns (GridRowSpacing): The row spacing values.", - "hideFooter": "If true, the footer component is hidden.", - "hideFooterPagination": "If true, the pagination component in the footer is hidden.", - "hideFooterSelectedRowCount": "If true, the selected row count in the footer is hidden.", - "initialState": "The initial state of the DataGrid. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.", - "isCellEditable": "Callback fired when a cell is rendered, returns true if the cell is editable.

Signature:
function(params: GridCellParams) => boolean
params: With all properties from GridCellParams.
returns (boolean): A boolean indicating if the cell is editable.", - "isRowSelectable": "Determines if a row can be selected.

Signature:
function(params: GridRowParams) => boolean
params: With all properties from GridRowParams.
returns (boolean): A boolean indicating if the cell is selectable.", - "keepNonExistentRowsSelected": "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.", - "loading": "If true, a loading overlay is displayed.", - "localeText": "Set the locale text of the grid. You can find all the translation keys supported in the source in the GitHub repository.", - "logger": "Pass a custom logger in the components that implements the Logger interface.", - "logLevel": "Allows to pass the logging level or false to turn off logging.", - "nonce": "Nonce of the inline styles for Content Security Policy.", - "onCellClick": "Callback fired when any cell is clicked.

Signature:
function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellDoubleClick": "Callback fired when a double click event comes from a cell element.

Signature:
function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellEditStart": "Callback fired when the cell turns to edit mode.

Signature:
function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent | React.MouseEvent>) => void
params: With all properties from GridCellParams.
event: The event that caused this prop to be called.", - "onCellEditStop": "Callback fired when the cell turns to view mode.

Signature:
function(params: GridCellParams, event: MuiEvent<MuiBaseEvent>) => void
params: With all properties from GridCellParams.
event: The event that caused this prop to be called.", - "onCellKeyDown": "Callback fired when a keydown event comes from a cell element.

Signature:
function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.", - "onCellModesModelChange": "Callback fired when the cellModesModel prop changes.

Signature:
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
cellModesModel: Object containing which cells are in "edit" mode.
details: Additional details for this callback.", - "onClipboardCopy": "Callback called when the data is copied to the clipboard.

Signature:
function(data: string) => void
data: The data copied to the clipboard.", - "onColumnHeaderClick": "Callback fired when a click event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderDoubleClick": "Callback fired when a double click event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderEnter": "Callback fired when a mouse enter event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderLeave": "Callback fired when a mouse leave event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderOut": "Callback fired when a mouseout event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnHeaderOver": "Callback fired when a mouseover event comes from a column header element.

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.", - "onColumnOrderChange": "Callback fired when a column is reordered.

Signature:
function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridColumnOrderChangeParams.
event: The event object.
details: Additional details for this callback.", - "onColumnVisibilityModelChange": "Callback fired when the column visibility model changes.

Signature:
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
model: The new model.
details: Additional details for this callback.", - "onFilterModelChange": "Callback fired when the Filter model changes before the filters are applied.

Signature:
function(model: GridFilterModel, details: GridCallbackDetails) => void
model: With all properties from GridFilterModel.
details: Additional details for this callback.", - "onMenuClose": "Callback fired when the menu is closed.

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridMenuParams.
event: The event object.
details: Additional details for this callback.", - "onMenuOpen": "Callback fired when the menu is opened.

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridMenuParams.
event: The event object.
details: Additional details for this callback.", - "onPaginationModelChange": "Callback fired when the pagination model has changed.

Signature:
function(model: GridPaginationModel, details: GridCallbackDetails) => void
model: Updated pagination model.
details: Additional details for this callback.", - "onPreferencePanelClose": "Callback fired when the preferences panel is closed.

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridPreferencePanelParams.
event: The event object.
details: Additional details for this callback.", - "onPreferencePanelOpen": "Callback fired when the preferences panel is opened.

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridPreferencePanelParams.
event: The event object.
details: Additional details for this callback.", - "onProcessRowUpdateError": "Callback called when processRowUpdate throws an error or rejects.

Signature:
function(error: any) => void
error: The error thrown.", - "onResize": "Callback fired when the grid is resized.

Signature:
function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
containerSize: With all properties from ElementSize.
event: The event object.
details: Additional details for this callback.", - "onRowClick": "Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.

Signature:
function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridRowParams.
event: The event object.
details: Additional details for this callback.", - "onRowDoubleClick": "Callback fired when a double click event comes from a row container element.

Signature:
function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from RowParams.
event: The event object.
details: Additional details for this callback.", - "onRowEditCommit": "Callback fired when the row changes are committed.

Signature:
function(id: GridRowId, event: MuiEvent<MuiBaseEvent>) => void
id: The row id.
event: The event that caused this prop to be called.", - "onRowEditStart": "Callback fired when the row turns to edit mode.

Signature:
function(params: GridRowParams, event: MuiEvent<React.KeyboardEvent | React.MouseEvent>) => void
params: With all properties from GridRowParams.
event: The event that caused this prop to be called.", - "onRowEditStop": "Callback fired when the row turns to view mode.

Signature:
function(params: GridRowParams, event: MuiEvent<MuiBaseEvent>) => void
params: With all properties from GridRowParams.
event: The event that caused this prop to be called.", - "onRowModesModelChange": "Callback fired when the rowModesModel prop changes.

Signature:
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
rowModesModel: Object containing which rows are in "edit" mode.
details: Additional details for this callback.", - "onRowSelectionModelChange": "Callback fired when the selection state of one or multiple rows changes.

Signature:
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
rowSelectionModel: With all the row ids GridSelectionModel.
details: Additional details for this callback.", - "onSortModelChange": "Callback fired when the sort model changes before a column is sorted.

Signature:
function(model: GridSortModel, details: GridCallbackDetails) => void
model: With all properties from GridSortModel.
details: Additional details for this callback.", - "pageSizeOptions": "Select the pageSize dynamically using the component UI.", - "paginationMode": "Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side.", - "paginationModel": "The pagination model of type GridPaginationModel which refers to current page and pageSize.", - "processRowUpdate": "Callback called before updating a row with new values in the row and cell editing.

Signature:
function(newRow: R, oldRow: R) => Promise<R> | R
newRow: Row object with the new values.
oldRow: Row object with the old values.
returns (Promise | R): The final values to update the row.", - "rowBuffer": "Number of extra rows to be rendered before/after the visible slice.", - "rowCount": "Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.", - "rowHeight": "Sets the height in pixel of a row in the grid.", - "rowModesModel": "Controls the modes of the rows.", - "rows": "Set of rows of type GridRowsProp.", - "rowSelection": "If false, the row selection mode is disabled.", - "rowSelectionModel": "Sets the row selection model of the grid.", - "rowSpacingType": "Sets the type of space between rows added by getRowSpacing.", - "rowThreshold": "Number of rows from the rowBuffer that can be visible before a new slice is rendered.", - "scrollbarSize": "Override the height/width of the grid inner scrollbar.", - "showCellVerticalBorder": "If true, the vertical borders of the cells are displayed.", - "showColumnVerticalBorder": "If true, the right border of the column headers are displayed.", - "slotProps": "Overridable components props dynamically passed to the component at rendering.", - "slots": "Overridable components.", - "sortingMode": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", - "sortingOrder": "The order of the sorting sequence.", - "sortModel": "Set the sort model of the grid.", - "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", - "unstable_ignoreValueFormatterDuringExport": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export." -======= "apiRef": { "description": "The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().", "deprecated": "", @@ -229,6 +126,11 @@ "deprecated": "", "typeDescriptions": {} }, + "filterDebounceMs": { + "description": "The milliseconds delay to wait after a keystroke before triggering filtering.", + "deprecated": "", + "typeDescriptions": {} + }, "filterMode": { "description": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", "deprecated": "", @@ -732,7 +634,6 @@ "deprecated": "", "typeDescriptions": {} } ->>>>>>> master }, "classDescriptions": { "actionsCell": { From a42ae12299fcde697e57cbfbae04f195fef8f74c Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Thu, 3 Aug 2023 19:45:47 -0400 Subject: [PATCH 18/20] fix: filter panel re-type bug --- .../panel/filterPanel/GridFilterInputValue.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index 567a575ca1f93..4444c175aa112 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { TextFieldProps } from '@mui/material/TextField'; import { unstable_useId as useId } from '@mui/utils'; import { useTimeout } from '../../../hooks/utils/useTimeout'; +import { GridFilterItem } from '../../../models/gridFilterItem'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; @@ -17,6 +18,8 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps & isFilterActive?: boolean; }; +type ItemPlusTag = GridFilterItem & { fromInput?: boolean }; + function GridFilterInputValue(props: GridTypeFilterInputValueProps) { const { item, @@ -44,7 +47,8 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { setIsApplying(true); filterTimeout.start(rootProps.filterDebounceMs, () => { - applyValue({ ...item, value }); + const newItem = { ...item, value, fromInput: true }; + applyValue(newItem); setIsApplying(false); }); }, @@ -52,13 +56,11 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { ); React.useEffect(() => { - const modelItem = rootProps.filterModel?.items.find( - (i) => i.id === item.id && i.field === item.field, - ); - if (modelItem) { - setFilterValueState(String(modelItem.value ?? '')); + const itemPlusTag = item as ItemPlusTag; + if (!itemPlusTag.fromInput) { + setFilterValueState(String(item.value ?? '')); } - }, [rootProps.filterModel?.items, item.id, item.field]); + }, [item]); return ( Date: Fri, 11 Aug 2023 14:37:37 -0400 Subject: [PATCH 19/20] fix --- .../components/panel/filterPanel/GridFilterInputValue.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index 4444c175aa112..48295d47cd35f 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -18,7 +18,7 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps & isFilterActive?: boolean; }; -type ItemPlusTag = GridFilterItem & { fromInput?: boolean }; +type ItemPlusTag = GridFilterItem & { fromInput?: string }; function GridFilterInputValue(props: GridTypeFilterInputValueProps) { const { @@ -47,7 +47,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { setIsApplying(true); filterTimeout.start(rootProps.filterDebounceMs, () => { - const newItem = { ...item, value, fromInput: true }; + const newItem = { ...item, value, fromInput: id! }; applyValue(newItem); setIsApplying(false); }); @@ -57,7 +57,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { React.useEffect(() => { const itemPlusTag = item as ItemPlusTag; - if (!itemPlusTag.fromInput) { + if (itemPlusTag.fromInput !== id) { setFilterValueState(String(item.value ?? '')); } }, [item]); From e6abe96fbfec17ffe9da4bb99289307785d00bc1 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 14 Aug 2023 08:55:15 -0400 Subject: [PATCH 20/20] lint --- .../src/components/panel/filterPanel/GridFilterInputValue.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx index 48295d47cd35f..670bfc7fbc3fa 100644 --- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx +++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx @@ -52,7 +52,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { setIsApplying(false); }); }, - [applyValue, item, rootProps.filterDebounceMs, filterTimeout], + [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout], ); React.useEffect(() => { @@ -60,7 +60,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) { if (itemPlusTag.fromInput !== id) { setFilterValueState(String(item.value ?? '')); } - }, [item]); + }, [id, item]); return (