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/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 0a1d618185a2..1aec9af49556 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 @@ -180,6 +180,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` | + 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 7222120dedd9..b332c3eb7ae4 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -169,6 +169,7 @@ } }, "groupingColDef": { "type": { "name": "union", "description": "func
| object" } }, + "headerFilters": { "type": { "name": "bool" } }, "hideFooter": { "type": { "name": "bool" } }, "hideFooterPagination": { "type": { "name": "bool" } }, "hideFooterRowCount": { @@ -611,8 +612,7 @@ "additionalInfo": { "sx": true } }, "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, - "treeData": { "type": { "name": "bool" } }, - "unstable_headerFilters": { "type": { "name": "bool" } } + "treeData": { "type": { "name": "bool" } } }, "slots": [ { 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 38d8bab4d316..c9b6fcbfa138 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": { @@ -549,8 +550,7 @@ "additionalInfo": { "sx": true } }, "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, - "treeData": { "type": { "name": "bool" } }, - "unstable_headerFilters": { "type": { "name": "bool" } } + "treeData": { "type": { "name": "bool" } } }, "slots": [ { diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json index ed03b0af5172..d8ac05a379a5 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", @@ -233,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", @@ -406,6 +430,12 @@ "description": "", "supportsApiRef": true }, + { + "name": "gridTabIndexColumnHeaderFilterSelector", + "returnType": "GridColumnIdentifier | null", + "description": "", + "supportsApiRef": true + }, { "name": "gridTabIndexColumnHeaderSelector", "returnType": "GridColumnIdentifier | null", @@ -483,40 +513,10 @@ "description": "", "supportsApiRef": true }, - { - "name": "unstable_gridFocusColumnHeaderFilterSelector", - "returnType": "GridColumnIdentifier | null", - "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", "description": "", "supportsApiRef": true - }, - { - "name": "unstable_gridTabIndexColumnHeaderFilterSelector", - "returnType": "GridColumnIdentifier | null", - "description": "", - "supportsApiRef": true } ] 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 a311b0f99019..ff2fdb5e3b9e 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium.json @@ -323,6 +323,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": "", @@ -945,11 +950,6 @@ "description": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.", "deprecated": "", "typeDescriptions": {} - }, - "unstable_headerFilters": { - "description": "If true, enables the data grid filtering on header feature.", - "deprecated": "", - "typeDescriptions": {} } }, "classDescriptions": { 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 71042703b0e0..9aa81edac0c3 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": "", @@ -843,11 +848,6 @@ "description": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.", "deprecated": "", "typeDescriptions": {} - }, - "unstable_headerFilters": { - "description": "If true, enables the data grid filtering on header feature.", - "deprecated": "", - "typeDescriptions": {} } }, "classDescriptions": { 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 a9748de8707b..820ad2290ac3 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -431,6 +431,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 @@ -1034,9 +1039,4 @@ DataGridPremiumRaw.propTypes = { * @default false */ treeData: PropTypes.bool, - /** - * If `true`, enables the data grid filtering on header feature. - * @default false - */ - unstable_headerFilters: PropTypes.bool, } as any; 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 cc26d836eee2..63ab047f87ea 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 @@ -938,9 +943,4 @@ DataGridProRaw.propTypes = { * @default false */ treeData: PropTypes.bool, - /** - * If `true`, enables the data grid filtering on header feature. - * @default false - */ - unstable_headerFilters: PropTypes.bool, } as any; 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/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]; 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-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/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 43807d56a0ca..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'; @@ -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 @@ -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 db1ef8490ca1..7b116792ec54 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" }, @@ -362,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" }, @@ -540,6 +544,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" }, @@ -625,12 +630,7 @@ { "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 0f9c730ad9f3..6362ebfaa31e 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" }, @@ -326,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" }, @@ -495,6 +499,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" }, @@ -577,12 +582,7 @@ { "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 8fb1a526c544..ea5b263c45b6 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" }, @@ -293,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" }, @@ -446,6 +450,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" }, @@ -526,12 +531,7 @@ { "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" },