From f2d8112ca8221d6eccbf5c51ef8695ed76bd8eba Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 29 Nov 2023 21:34:44 +0500 Subject: [PATCH 1/5] [DataGridPro] Make header filters stable --- .../CustomHeaderFilterDataGridPro.js | 2 +- .../CustomHeaderFilterDataGridPro.tsx | 2 +- .../CustomHeaderFilterDataGridPro.tsx.preview | 2 +- .../CustomHeaderFilterOperatorDataGridPro.js | 2 +- .../CustomHeaderFilterOperatorDataGridPro.tsx | 2 +- ...eaderFilterOperatorDataGridPro.tsx.preview | 2 +- .../CustomHeaderFilterSingleDataGridPro.js | 7 +----- .../CustomHeaderFilterSingleDataGridPro.tsx | 7 +----- ...mHeaderFilterSingleDataGridPro.tsx.preview | 7 +----- .../filtering/HeaderFilteringDataGridPro.js | 2 +- .../filtering/HeaderFilteringDataGridPro.tsx | 2 +- .../HeaderFilteringDataGridPro.tsx.preview | 2 +- .../SimpleHeaderFilteringDataGridPro.js | 2 +- .../SimpleHeaderFilteringDataGridPro.tsx | 2 +- .../data-grid/filtering/header-filters.md | 5 ---- docs/pages/x/api/data-grid/selectors.json | 24 +++++++++---------- .../src/DataGridPro/useDataGridProProps.ts | 2 +- .../columnHeaders/useGridColumnHeaders.tsx | 13 ++++------ .../src/models/dataGridProProps.ts | 2 +- .../src/tests/filtering.DataGridPro.test.tsx | 14 +++++------ .../features/focus/gridFocusStateSelector.ts | 6 ++--- .../useGridKeyboardNavigation.ts | 2 +- scripts/x-data-grid-premium.exports.json | 4 ++-- scripts/x-data-grid-pro.exports.json | 4 ++-- scripts/x-data-grid.exports.json | 4 ++-- 25 files changed, 49 insertions(+), 74 deletions(-) diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js index 8b6d8b7ecaeb..7ccaf3f7296e 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js +++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js @@ -107,7 +107,7 @@ export default function CustomHeaderFilterDataGridPro() { slots={{ headerFilterCell: CustomHeaderFilter, }} - unstable_headerFilters + headerFilters /> ); diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx index 650530d8c00a..bb8adba5d7b3 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx +++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx @@ -114,7 +114,7 @@ export default function CustomHeaderFilterDataGridPro() { slots={{ headerFilterCell: CustomHeaderFilter, }} - unstable_headerFilters + headerFilters /> ); diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx.preview b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx.preview index 1ecb83419ceb..13a9d9130376 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx.preview +++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx.preview @@ -12,5 +12,5 @@ slots={{ headerFilterCell: CustomHeaderFilter, }} - unstable_headerFilters + headerFilters /> \ No newline at end of file diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js index 58f0e59d299f..0d6fc444dc6e 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js +++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js @@ -80,7 +80,7 @@ export default function CustomHeaderFilterOperatorDataGridPro() { return (
- +
); } diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx index 0e63e03f112d..b936b84cbbc2 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx +++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx @@ -89,7 +89,7 @@ export default function CustomHeaderFilterOperatorDataGridPro() { return (
- +
); } diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx.preview b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx.preview index a5bedcee0fbe..5742bdcb3329 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx.preview +++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js index f136c917e967..ede0923b1ce0 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js +++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js @@ -89,12 +89,7 @@ export default function CustomHeaderFilterSingleDataGridPro() { return (
- +
); } diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx index 50f6cd763722..6c737e3f1953 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx +++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx @@ -92,12 +92,7 @@ export default function CustomHeaderFilterSingleDataGridPro() { return (
- +
); } diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx.preview b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx.preview index 2135ac914486..747656ecf931 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx.preview +++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx.preview @@ -1,6 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.js b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.js index 49ac53c1e49c..4c36b10d23e0 100644 --- a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.js +++ b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.js @@ -21,7 +21,7 @@ export default function HeaderFilteringDataGridPro() { }, }, }} - unstable_headerFilters + headerFilters /> ); diff --git a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx index 49ac53c1e49c..4c36b10d23e0 100644 --- a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx +++ b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx @@ -21,7 +21,7 @@ export default function HeaderFilteringDataGridPro() { }, }, }} - unstable_headerFilters + headerFilters /> ); diff --git a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx.preview b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx.preview index 922deeb4056f..e9abc597c530 100644 --- a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx.preview +++ b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx.preview @@ -9,5 +9,5 @@ }, }, }} - unstable_headerFilters + headerFilters /> \ No newline at end of file diff --git a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js index 5b6d07fbca90..62a72bd34011 100644 --- a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js +++ b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js @@ -22,7 +22,7 @@ export default function SimpleHeaderFilteringDataGridPro() { }, }} disableColumnFilter - unstable_headerFilters + headerFilters slots={{ headerFilterMenu: null, }} diff --git a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx index 5b6d07fbca90..62a72bd34011 100644 --- a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx +++ b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx @@ -22,7 +22,7 @@ export default function SimpleHeaderFilteringDataGridPro() { }, }} disableColumnFilter - unstable_headerFilters + headerFilters slots={{ headerFilterMenu: null, }} diff --git a/docs/data/data-grid/filtering/header-filters.md b/docs/data/data-grid/filtering/header-filters.md index 81664d4114b1..4022fffdfdd7 100644 --- a/docs/data/data-grid/filtering/header-filters.md +++ b/docs/data/data-grid/filtering/header-filters.md @@ -7,11 +7,6 @@ title: Data Grid - Header filters

Quickly accessible per-column filters on grid header.

:::warning -This feature is unstable, it needs to be explicitly activated using the `unstable_headerFilters` prop. - -```tsx - -``` To use header filters, you need to upgrade to the [Pro plan](/x/introduction/licensing/#pro-plan) or above. diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json index ed03b0af5172..38702dff9682 100644 --- a/docs/pages/x/api/data-grid/selectors.json +++ b/docs/pages/x/api/data-grid/selectors.json @@ -221,6 +221,12 @@ "description": "", "supportsApiRef": true }, + { + "name": "gridFocusColumnHeaderFilterSelector", + "returnType": "GridColumnIdentifier | null", + "description": "", + "supportsApiRef": true + }, { "name": "gridFocusColumnHeaderSelector", "returnType": "GridColumnIdentifier | null", @@ -406,6 +412,12 @@ "description": "", "supportsApiRef": true }, + { + "name": "gridTabIndexColumnHeaderFilterSelector", + "returnType": "GridColumnIdentifier | null", + "description": "", + "supportsApiRef": true + }, { "name": "gridTabIndexColumnHeaderSelector", "returnType": "GridColumnIdentifier | null", @@ -483,12 +495,6 @@ "description": "", "supportsApiRef": true }, - { - "name": "unstable_gridFocusColumnHeaderFilterSelector", - "returnType": "GridColumnIdentifier | null", - "description": "", - "supportsApiRef": true - }, { "name": "unstable_gridHeaderFilteringEditFieldSelector", "returnType": "string | null", @@ -512,11 +518,5 @@ "returnType": "GridColumnGroupIdentifier | null", "description": "", "supportsApiRef": true - }, - { - "name": "unstable_gridTabIndexColumnHeaderFilterSelector", - "returnType": "GridColumnIdentifier | null", - "description": "", - "supportsApiRef": true } ] diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts index 37fef66bce59..df8ec99b7d04 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts @@ -31,7 +31,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES: DataGridProPropsWithDefaultValu rowReordering: false, rowsLoadingMode: 'client', getDetailPanelHeight: () => 500, - unstable_headerFilters: false, + headerFilters: false, }; const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index 81b851f87613..8e85d7c80d5f 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { - unstable_gridFocusColumnHeaderFilterSelector, + gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, - unstable_gridTabIndexColumnHeaderFilterSelector, + gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridFilterItem, } from '@mui/x-data-grid'; @@ -49,7 +49,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const { headerGroupingMaxDepth, hasOtherElementInTabSequence } = props; const columnHeaderFilterTabIndexState = useGridSelector( apiRef, - unstable_gridTabIndexColumnHeaderFilterSelector, + gridTabIndexColumnHeaderFilterSelector, ); const { getColumnsToRender, getRootProps, ...otherProps } = useGridColumnHeadersCommunity({ ...props, @@ -63,17 +63,14 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const headerFilterMenuRef = React.useRef(null); const rootProps = useGridRootProps(); const classes = useUtilityClasses(rootProps); - const disableHeaderFiltering = !rootProps.unstable_headerFilters; + const disableHeaderFiltering = !rootProps.headerFilters; const headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor); const filterModel = useGridSelector(apiRef, gridFilterModelSelector); const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight); - const columnHeaderFilterFocus = useGridSelector( - apiRef, - unstable_gridFocusColumnHeaderFilterSelector, - ); + const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector); const getFilterItem = React.useCallback( (colDef: GridStateColDef) => { diff --git a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts index 4cb4260a3063..470de284a17c 100644 --- a/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/grid/x-data-grid-pro/src/models/dataGridProProps.ts @@ -151,7 +151,7 @@ export interface DataGridProPropsWithDefaultValue extends DataGridPropsWithDefau * If `true`, enables the data grid filtering on header feature. * @default false */ - unstable_headerFilters: boolean; + headerFilters: boolean; } export interface DataGridProPropsWithoutDefaultValue 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 b28cea80f742..0e837228980e 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 @@ -869,7 +869,7 @@ describe(' - Filter', () => { describe('Header filters', () => { it('should reflect the `filterModel` prop in header filters correctly', () => { - render(); + render(); expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']); const filterCellInput = getColumnHeaderCell(0, 1).querySelector('input'); @@ -877,7 +877,7 @@ describe(' - Filter', () => { }); it('should apply filters on type when the focus is on cell', () => { - render(); + render(); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); const filterCell = getColumnHeaderCell(0, 1); @@ -892,7 +892,7 @@ describe(' - Filter', () => { it('should call `onFilterModelChange` when filters are updated', () => { const onFilterModelChange = spy(); - render(); + render(); const filterCell = getColumnHeaderCell(0, 1); const filterCellInput = filterCell.querySelector('input')!; @@ -920,7 +920,7 @@ describe(' - Filter', () => { }, }} onFilterModelChange={onFilterModelChange} - unstable_headerFilters + headerFilters />, ); expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']); @@ -952,7 +952,7 @@ describe(' - Filter', () => { }, }, }} - unstable_headerFilters + headerFilters />, ); @@ -967,7 +967,7 @@ describe(' - Filter', () => { columns={[ { field: 'brand', headerName: 'Brand', renderHeaderFilter: () => 'Custom Filter Cell' }, ]} - unstable_headerFilters + headerFilters />, ); @@ -990,7 +990,7 @@ describe(' - Filter', () => { ], }, ]} - unstable_headerFilters + headerFilters />, ); diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts b/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts index fbaec55fd587..a3d789df8608 100644 --- a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts +++ b/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts @@ -14,8 +14,7 @@ export const gridFocusColumnHeaderSelector = createSelector( (focusState: GridFocusState) => focusState.columnHeader, ); -// eslint-disable-next-line @typescript-eslint/naming-convention -export const unstable_gridFocusColumnHeaderFilterSelector = createSelector( +export const gridFocusColumnHeaderFilterSelector = createSelector( gridFocusStateSelector, (focusState: GridFocusState) => focusState.columnHeaderFilter, ); @@ -38,8 +37,7 @@ export const gridTabIndexColumnHeaderSelector = createSelector( (state: GridTabIndexState) => state.columnHeader, ); -// eslint-disable-next-line @typescript-eslint/naming-convention -export const unstable_gridTabIndexColumnHeaderFilterSelector = createSelector( +export const gridTabIndexColumnHeaderFilterSelector = createSelector( gridTabIndexStateSelector, (state: GridTabIndexState) => state.columnHeaderFilter, ); diff --git a/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts index 43807d56a0ca..a7d988aab106 100644 --- a/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts +++ b/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts @@ -107,7 +107,7 @@ export const useGridKeyboardNavigation = ( const headerFilteringEnabled = // @ts-expect-error // TODO move relevant code to the `DataGridPro` - props.signature !== 'DataGrid' && props.unstable_headerFilters; + props.signature !== 'DataGrid' && props.headerFilters; /** * @param {number} colIndex Index of the column to focus diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index bd254604115c..1f32b2827469 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -338,6 +338,7 @@ { "name": "GridFilterState", "kind": "Interface" }, { "name": "GridFocusApi", "kind": "Interface" }, { "name": "gridFocusCellSelector", "kind": "Variable" }, + { "name": "gridFocusColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "gridFocusColumnHeaderSelector", "kind": "Variable" }, { "name": "GridFocusState", "kind": "Interface" }, { "name": "gridFocusStateSelector", "kind": "Variable" }, @@ -540,6 +541,7 @@ { "name": "GridStatePersistenceApi", "kind": "Interface" }, { "name": "gridStringOrNumberComparator", "kind": "Variable" }, { "name": "gridTabIndexCellSelector", "kind": "Variable" }, + { "name": "gridTabIndexColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "gridTabIndexColumnHeaderSelector", "kind": "Variable" }, { "name": "GridTabIndexState", "kind": "Interface" }, { "name": "gridTabIndexStateSelector", "kind": "Variable" }, @@ -627,12 +629,10 @@ { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "unstable_gridFocusColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridFocusColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringMenuSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "unstable_gridTabIndexColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridTabIndexColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "urPK", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 89a194995316..7246c8bd46e1 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -307,6 +307,7 @@ { "name": "GridFilterState", "kind": "Interface" }, { "name": "GridFocusApi", "kind": "Interface" }, { "name": "gridFocusCellSelector", "kind": "Variable" }, + { "name": "gridFocusColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "gridFocusColumnHeaderSelector", "kind": "Variable" }, { "name": "GridFocusState", "kind": "Interface" }, { "name": "gridFocusStateSelector", "kind": "Variable" }, @@ -495,6 +496,7 @@ { "name": "GridStatePersistenceApi", "kind": "Interface" }, { "name": "gridStringOrNumberComparator", "kind": "Variable" }, { "name": "gridTabIndexCellSelector", "kind": "Variable" }, + { "name": "gridTabIndexColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "gridTabIndexColumnHeaderSelector", "kind": "Variable" }, { "name": "GridTabIndexState", "kind": "Interface" }, { "name": "gridTabIndexStateSelector", "kind": "Variable" }, @@ -579,12 +581,10 @@ { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "unstable_gridFocusColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridFocusColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringMenuSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "unstable_gridTabIndexColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridTabIndexColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "urPK", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 716607a078e8..1b2d2631ab60 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -278,6 +278,7 @@ { "name": "GridFilterState", "kind": "Interface" }, { "name": "GridFocusApi", "kind": "Interface" }, { "name": "gridFocusCellSelector", "kind": "Variable" }, + { "name": "gridFocusColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "gridFocusColumnHeaderSelector", "kind": "Variable" }, { "name": "GridFocusState", "kind": "Interface" }, { "name": "gridFocusStateSelector", "kind": "Variable" }, @@ -446,6 +447,7 @@ { "name": "GridStatePersistenceApi", "kind": "Interface" }, { "name": "gridStringOrNumberComparator", "kind": "Variable" }, { "name": "gridTabIndexCellSelector", "kind": "Variable" }, + { "name": "gridTabIndexColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "gridTabIndexColumnHeaderSelector", "kind": "Variable" }, { "name": "GridTabIndexState", "kind": "Interface" }, { "name": "gridTabIndexStateSelector", "kind": "Variable" }, @@ -528,12 +530,10 @@ { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "unstable_gridFocusColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridFocusColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringMenuSelector", "kind": "Variable" }, { "name": "unstable_gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "unstable_gridTabIndexColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridTabIndexColumnHeaderFilterSelector", "kind": "Variable" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "urPK", "kind": "Variable" }, { "name": "useFirstRender", "kind": "Variable" }, From a5c6b78312e76b6f2b7f4a4f8c92df477d4c9fa8 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 29 Nov 2023 22:25:38 +0500 Subject: [PATCH 2/5] Regenerate API docs --- docs/pages/x/api/data-grid/data-grid-premium.json | 2 +- docs/pages/x/api/data-grid/data-grid-pro.json | 2 +- .../api-docs/data-grid/data-grid-premium.json | 10 +++++----- .../translations/api-docs/data-grid/data-grid-pro.json | 10 +++++----- .../src/DataGridPremium/DataGridPremium.tsx | 10 +++++----- .../x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 10 +++++----- 6 files changed, 22 insertions(+), 22 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 39a83e2ccbc8..89ff1a07fc9e 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -167,6 +167,7 @@ } }, "groupingColDef": { "type": { "name": "union", "description": "func
| object" } }, + "headerFilters": { "type": { "name": "bool" } }, "hideFooter": { "type": { "name": "bool" } }, "hideFooterPagination": { "type": { "name": "bool" } }, "hideFooterRowCount": { @@ -594,7 +595,6 @@ "treeData": { "type": { "name": "bool" } }, "unstable_cellSelection": { "type": { "name": "bool" } }, "unstable_cellSelectionModel": { "type": { "name": "object" } }, - "unstable_headerFilters": { "type": { "name": "bool" } }, "unstable_ignoreValueFormatterDuringExport": { "type": { "name": "union", 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 dbd999b6ea7d..cd8689612f85 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -146,6 +146,7 @@ } }, "groupingColDef": { "type": { "name": "union", "description": "func
| object" } }, + "headerFilters": { "type": { "name": "bool" } }, "hideFooter": { "type": { "name": "bool" } }, "hideFooterPagination": { "type": { "name": "bool" } }, "hideFooterRowCount": { @@ -543,7 +544,6 @@ }, "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, "treeData": { "type": { "name": "bool" } }, - "unstable_headerFilters": { "type": { "name": "bool" } }, "unstable_ignoreValueFormatterDuringExport": { "type": { "name": "union", 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 74a35ca351c2..c4f20aa4f908 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -313,6 +313,11 @@ "deprecated": "", "typeDescriptions": {} }, + "headerFilters": { + "description": "If true, enables the data grid filtering on header feature.", + "deprecated": "", + "typeDescriptions": {} + }, "hideFooter": { "description": "If true, the footer component is hidden.", "deprecated": "", @@ -928,11 +933,6 @@ "deprecated": "", "typeDescriptions": {} }, - "unstable_headerFilters": { - "description": "If true, enables the data grid filtering on header feature.", - "deprecated": "", - "typeDescriptions": {} - }, "unstable_ignoreValueFormatterDuringExport": { "description": "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.", "deprecated": "", 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 933cbc386bae..5497a66ed9eb 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro.json @@ -275,6 +275,11 @@ "deprecated": "", "typeDescriptions": {} }, + "headerFilters": { + "description": "If true, enables the data grid filtering on header feature.", + "deprecated": "", + "typeDescriptions": {} + }, "hideFooter": { "description": "If true, the footer component is hidden.", "deprecated": "", @@ -839,11 +844,6 @@ "deprecated": "", "typeDescriptions": {} }, - "unstable_headerFilters": { - "description": "If true, enables the data grid filtering on header feature.", - "deprecated": "", - "typeDescriptions": {} - }, "unstable_ignoreValueFormatterDuringExport": { "description": "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.", "deprecated": "", 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 72a84ab08ee1..2e88a59f8684 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -423,6 +423,11 @@ DataGridPremiumRaw.propTypes = { * The grouping column used by the tree data. */ groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + /** + * If `true`, enables the data grid filtering on header feature. + * @default false + */ + headerFilters: PropTypes.bool, /** * If `true`, the footer component is hidden. * @default false @@ -1010,11 +1015,6 @@ DataGridPremiumRaw.propTypes = { * Set the cell selection model of the grid. */ unstable_cellSelectionModel: PropTypes.object, - /** - * If `true`, enables the data grid filtering on header feature. - * @default false - */ - unstable_headerFilters: PropTypes.bool, /** * 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. 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 39e2e4fdab1e..c8bacacef76d 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -383,6 +383,11 @@ DataGridProRaw.propTypes = { * The grouping column used by the tree data. */ groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + /** + * If `true`, enables the data grid filtering on header feature. + * @default false + */ + headerFilters: PropTypes.bool, /** * If `true`, the footer component is hidden. * @default false @@ -926,11 +931,6 @@ DataGridProRaw.propTypes = { * @default false */ treeData: PropTypes.bool, - /** - * If `true`, enables the data grid filtering on header feature. - * @default false - */ - unstable_headerFilters: PropTypes.bool, /** * 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. From d255a7424e26931716edcbb36c3979383342a322 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 29 Nov 2023 22:32:24 +0500 Subject: [PATCH 3/5] Rename remaining exports --- docs/pages/x/api/data-grid/selectors.json | 36 +++++++++---------- .../GridHeaderFilterMenuContainer.tsx | 4 +-- .../gridHeaderFilteringSelectors.ts | 11 +++--- .../useGridKeyboardNavigation.ts | 8 ++--- .../grid/x-data-grid/src/internals/index.ts | 4 +-- scripts/x-data-grid-premium.exports.json | 6 ++-- scripts/x-data-grid-pro.exports.json | 6 ++-- scripts/x-data-grid.exports.json | 6 ++-- 8 files changed, 40 insertions(+), 41 deletions(-) diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json index 38702dff9682..d8ac05a379a5 100644 --- a/docs/pages/x/api/data-grid/selectors.json +++ b/docs/pages/x/api/data-grid/selectors.json @@ -239,6 +239,24 @@ "description": "", "supportsApiRef": false }, + { + "name": "gridHeaderFilteringEditFieldSelector", + "returnType": "string | null", + "description": "", + "supportsApiRef": true + }, + { + "name": "gridHeaderFilteringMenuSelector", + "returnType": "string | null", + "description": "", + "supportsApiRef": true + }, + { + "name": "gridHeaderFilteringStateSelector", + "returnType": "GridHeaderFilteringState", + "description": "", + "supportsApiRef": false + }, { "name": "gridPageCountSelector", "returnType": "number", @@ -495,24 +513,6 @@ "description": "", "supportsApiRef": true }, - { - "name": "unstable_gridHeaderFilteringEditFieldSelector", - "returnType": "string | null", - "description": "", - "supportsApiRef": true - }, - { - "name": "unstable_gridHeaderFilteringMenuSelector", - "returnType": "string | null", - "description": "", - "supportsApiRef": true - }, - { - "name": "unstable_gridHeaderFilteringStateSelector", - "returnType": "GridHeaderFilteringState", - "description": "", - "supportsApiRef": false - }, { "name": "unstable_gridTabIndexColumnGroupHeaderSelector", "returnType": "GridColumnGroupIdentifier | null", diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx index 4ce23b8f79b6..07b3b9dd5c6f 100644 --- a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx +++ b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx @@ -7,7 +7,7 @@ import { GridColDef, } from '@mui/x-data-grid'; import { refType, unstable_useId as useId } from '@mui/utils'; -import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals'; +import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; const sx = { @@ -32,7 +32,7 @@ function GridHeaderFilterMenuContainer(props: { const rootProps = useGridRootProps(); const apiRef = useGridApiContext(); const open = Boolean( - unstable_gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current, + gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current, ); const handleClick = (event: React.MouseEvent) => { diff --git a/packages/grid/x-data-grid/src/hooks/features/headerFiltering/gridHeaderFilteringSelectors.ts b/packages/grid/x-data-grid/src/hooks/features/headerFiltering/gridHeaderFilteringSelectors.ts index f1c276166cd9..58572b2ec63c 100644 --- a/packages/grid/x-data-grid/src/hooks/features/headerFiltering/gridHeaderFilteringSelectors.ts +++ b/packages/grid/x-data-grid/src/hooks/features/headerFiltering/gridHeaderFilteringSelectors.ts @@ -1,16 +1,15 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import { createSelector } from '../../../utils/createSelector'; import { GridStateCommunity } from '../../../models/gridStateCommunity'; -export const unstable_gridHeaderFilteringStateSelector = (state: GridStateCommunity) => +export const gridHeaderFilteringStateSelector = (state: GridStateCommunity) => state.headerFiltering; -export const unstable_gridHeaderFilteringEditFieldSelector = createSelector( - unstable_gridHeaderFilteringStateSelector, +export const gridHeaderFilteringEditFieldSelector = createSelector( + gridHeaderFilteringStateSelector, (headerFilteringState) => headerFilteringState.editing, ); -export const unstable_gridHeaderFilteringMenuSelector = createSelector( - unstable_gridHeaderFilteringStateSelector, +export const gridHeaderFilteringMenuSelector = createSelector( + gridHeaderFilteringStateSelector, (headerFilteringState) => headerFilteringState.menuOpen, ); diff --git a/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts index a7d988aab106..8b0274af881f 100644 --- a/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts +++ b/packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts @@ -19,8 +19,8 @@ import { gridPinnedRowsSelector } from '../rows/gridRowsSelector'; import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus'; import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector'; import { - unstable_gridHeaderFilteringEditFieldSelector, - unstable_gridHeaderFilteringMenuSelector, + gridHeaderFilteringEditFieldSelector, + gridHeaderFilteringMenuSelector, } from '../headerFiltering/gridHeaderFilteringSelectors'; import { GridPipeProcessor, useGridRegisterPipeProcessor } from '../../core/pipeProcessing'; import { isEventTargetInPortal } from '../../../utils/domUtils'; @@ -315,8 +315,8 @@ export const useGridKeyboardNavigation = ( return; } - const isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === params.field; - const isHeaderMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === params.field; + const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field; + const isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field; if (isEditing || isHeaderMenuOpen || !isNavigationKey(event.key)) { return; diff --git a/packages/grid/x-data-grid/src/internals/index.ts b/packages/grid/x-data-grid/src/internals/index.ts index e4ee3f3aa4ba..02fa5ea739ec 100644 --- a/packages/grid/x-data-grid/src/internals/index.ts +++ b/packages/grid/x-data-grid/src/internals/index.ts @@ -24,8 +24,8 @@ export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization'; export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard'; export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders'; export { - unstable_gridHeaderFilteringEditFieldSelector, - unstable_gridHeaderFilteringMenuSelector, + gridHeaderFilteringEditFieldSelector, + gridHeaderFilteringMenuSelector, } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors'; export type { GridSlotsComponentsProps } from '../models/gridSlotsComponentsProps'; export type { diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 1f32b2827469..10d56e288944 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -363,6 +363,9 @@ { "name": "GridHeaderFilterCell", "kind": "Variable" }, { "name": "GridHeaderFilterCellProps", "kind": "Interface" }, { "name": "GridHeaderFilterEventLookup", "kind": "Interface" }, + { "name": "gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, + { "name": "gridHeaderFilteringMenuSelector", "kind": "Variable" }, + { "name": "gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "GridHeaderFilterMenu", "kind": "Function" }, { "name": "GridHeaderFilterMenuContainer", "kind": "Function" }, { "name": "GridHeaderSelectionCheckboxParams", "kind": "Interface" }, @@ -629,9 +632,6 @@ { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "unstable_gridFocusColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringMenuSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "unstable_gridTabIndexColumnGroupHeaderSelector", "kind": "Variable" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "urPK", "kind": "Variable" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 7246c8bd46e1..d880793be770 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -327,6 +327,9 @@ { "name": "GridHeaderFilterCell", "kind": "Variable" }, { "name": "GridHeaderFilterCellProps", "kind": "Interface" }, { "name": "GridHeaderFilterEventLookup", "kind": "Interface" }, + { "name": "gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, + { "name": "gridHeaderFilteringMenuSelector", "kind": "Variable" }, + { "name": "gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "GridHeaderFilterMenu", "kind": "Function" }, { "name": "GridHeaderFilterMenuContainer", "kind": "Function" }, { "name": "GridHeaderSelectionCheckboxParams", "kind": "Interface" }, @@ -581,9 +584,6 @@ { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "unstable_gridFocusColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringMenuSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "unstable_gridTabIndexColumnGroupHeaderSelector", "kind": "Variable" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "urPK", "kind": "Variable" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 1b2d2631ab60..c267349d6c78 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -294,6 +294,9 @@ { "name": "GridHeader", "kind": "Function" }, { "name": "GridHeaderCheckbox", "kind": "Variable" }, { "name": "GridHeaderFilterEventLookup", "kind": "Interface" }, + { "name": "gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, + { "name": "gridHeaderFilteringMenuSelector", "kind": "Variable" }, + { "name": "gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "GridHeaderSelectionCheckboxParams", "kind": "Interface" }, { "name": "GridIconSlotsComponent", "kind": "Interface" }, { "name": "GridInitialState", "kind": "TypeAlias" }, @@ -530,9 +533,6 @@ { "name": "trTR", "kind": "Variable" }, { "name": "ukUA", "kind": "Variable" }, { "name": "unstable_gridFocusColumnGroupHeaderSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringEditFieldSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringMenuSelector", "kind": "Variable" }, - { "name": "unstable_gridHeaderFilteringStateSelector", "kind": "Variable" }, { "name": "unstable_gridTabIndexColumnGroupHeaderSelector", "kind": "Variable" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "urPK", "kind": "Variable" }, From ef30bd0dabf752354ba66faa2b7c9064270aecaf Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Wed, 29 Nov 2023 23:14:23 +0500 Subject: [PATCH 4/5] Fix imports --- .../components/headerFiltering/GridHeaderFilterCell.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx index d49930dc7b1e..5cb84a07d210 100644 --- a/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx +++ b/packages/grid/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx @@ -17,8 +17,8 @@ import { import { GridStateColDef, useGridPrivateApiContext, - unstable_gridHeaderFilteringEditFieldSelector, - unstable_gridHeaderFilteringMenuSelector, + gridHeaderFilteringEditFieldSelector, + gridHeaderFilteringMenuSelector, isNavigationKey, } from '@mui/x-data-grid/internals'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; @@ -89,8 +89,8 @@ const GridHeaderFilterCell = React.forwardRef(null); const buttonRef = React.useRef(null); - const isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field; - const isMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === colDef.field; + const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field; + const isMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === colDef.field; const currentOperator = filterOperators![0]; From 7647845c8011ce8994a2c150f53758ac498f0be4 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 30 Nov 2023 11:39:28 +0500 Subject: [PATCH 5/5] Add to migration guide --- .../migration-data-grid-v6/migration-data-grid-v6.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index cec0e8910fd9..5a1e486270ed 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -153,6 +153,16 @@ Below are described the steps you need to make to migrate from v6 to v7. - The Quick Filter now ignores hidden columns by default. See [Including hidden columns](/x/react-data-grid/filtering/quick-filter/#including-hidden-columns) section for more details. +- The header filters feature is now stable. `unstable_` prefix is removed from prop `headerFilters` and the following exports. + + | Old name | New name | + | :------------------------------------------------ | :--------------------------------------- | + | `unstable_gridFocusColumnHeaderFilterSelector` | `gridFocusColumnHeaderFilterSelector` | + | `unstable_gridHeaderFilteringEditFieldSelector` | `gridHeaderFilteringEditFieldSelector` | + | `unstable_gridHeaderFilteringMenuSelector` | `gridHeaderFilteringMenuSelector` | + | `unstable_gridHeaderFilteringStateSelector` | `gridHeaderFilteringStateSelector` | + | `unstable_gridTabIndexColumnHeaderFilterSelector` | `gridTabIndexColumnHeaderFilterSelector` | +