diff --git a/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx index a1880f3e70857..ab02705eecc86 100644 --- a/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx +++ b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx @@ -50,7 +50,7 @@ export default function ColumnSizingPersistWidthOrder() { } const useColumnsState = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, columns: GridColDef[], ) => { const [widths, setWidths] = React.useState>( diff --git a/docs/data/data-grid/components/CustomColumnsPanel.tsx b/docs/data/data-grid/components/CustomColumnsPanel.tsx index 1516ba3e1cf7b..0d42eb3be4509 100644 --- a/docs/data/data-grid/components/CustomColumnsPanel.tsx +++ b/docs/data/data-grid/components/CustomColumnsPanel.tsx @@ -43,7 +43,7 @@ function ColumnGroup({ }: { group: GridColumnGroup; columnLookup: GridColumnLookup; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; columnVisibilityModel: GridColumnVisibilityModel; }) { const leaves = React.useMemo(() => { diff --git a/docs/data/data-grid/export/CustomExport.tsx b/docs/data/data-grid/export/CustomExport.tsx index eef4ed05cd01e..22800b00cdb61 100644 --- a/docs/data/data-grid/export/CustomExport.tsx +++ b/docs/data/data-grid/export/CustomExport.tsx @@ -16,7 +16,7 @@ import { import MenuItem from '@mui/material/MenuItem'; import { ButtonProps } from '@mui/material/Button'; -const getJson = (apiRef: React.MutableRefObject) => { +const getJson = (apiRef: React.RefObject) => { // Select rows and columns const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef); const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); diff --git a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx index d1b931e524a69..4e357096df17f 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx @@ -96,7 +96,7 @@ import { import { useGridClipboardImport } from '../hooks/features/clipboard/useGridClipboardImport'; export const useDataGridPremiumComponent = ( - inputApiRef: React.MutableRefObject | undefined, + inputApiRef: React.RefObject | undefined, props: DataGridPremiumProcessedProps, ) => { const apiRef = useGridInitialization(inputApiRef, props); diff --git a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx index a9e17d5517881..232ef2aeeb21a 100644 --- a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx +++ b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx @@ -38,7 +38,7 @@ interface GridGroupingCriteriaCellIconProps } function GridGroupingCriteriaCellIcon(props: GridGroupingCriteriaCellIconProps) { - const apiRef = useGridPrivateApiContext() as React.MutableRefObject; + const apiRef = useGridPrivateApiContext() as React.RefObject; const rootProps = useGridRootProps(); const classes = useUtilityClasses(rootProps); const { rowNode, id, field, descendantCount } = props; diff --git a/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx b/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx index 7f08363cb4141..e9302ca121187 100644 --- a/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx +++ b/packages/x-data-grid-premium/src/components/promptControl/GridToolbarPromptControl.tsx @@ -46,7 +46,7 @@ const GridToolbarPromptControlRoot = styled('div', { flexDirection: 'row', }); -function sampleData(apiRef: React.MutableRefObject) { +function sampleData(apiRef: React.RefObject) { const columns = gridColumnDefinitionsSelector(apiRef); const rows = Object.values(gridRowsLookupSelector(apiRef)); const columnExamples: Record = {}; @@ -65,7 +65,7 @@ function sampleData(apiRef: React.MutableRefObject) { } function generateContext( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, examples?: Record, ) { const columns = gridColumnDefinitionsSelector(apiRef); diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts index 1a8b81c3585fd..26fb252e56750 100644 --- a/packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts +++ b/packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts @@ -22,7 +22,7 @@ import { gridAggregationModelSelector } from './gridAggregationSelectors'; const getGroupAggregatedValue = ( groupId: GridRowId, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, aggregationRowsScope: DataGridPremiumProcessedProps['aggregationRowsScope'], aggregatedFields: string[], aggregationRules: GridAggregationRules, @@ -98,7 +98,7 @@ const getGroupAggregatedValue = ( const getGroupAggregatedValueDataSource = ( groupId: GridRowId, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, aggregatedFields: string[], position: GridAggregationPosition, ) => { @@ -123,7 +123,7 @@ export const createAggregationLookup = ({ getAggregationPosition, isDataSource, }: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; aggregationFunctions: | Record | Record; diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts index 408b7e1950d6d..d7389dd70aea7 100644 --- a/packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts +++ b/packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts @@ -140,7 +140,7 @@ interface AddFooterRowsParams { * If `true`, there are some aggregation rules to apply */ hasAggregationRule: boolean; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; } /** @@ -265,7 +265,7 @@ export const getAggregationFunctionLabel = ({ apiRef, aggregationRule, }: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; aggregationRule: GridAggregationRule; }): string => { if (aggregationRule.aggregationFunction.label != null) { diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts index 345f9b718509f..9dad437736300 100644 --- a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts +++ b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts @@ -38,7 +38,7 @@ export const aggregationStateInitializer: GridStateInitializer< }; export const useGridAggregation = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridPremiumProcessedProps, | 'onAggregationModelChange' diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx index b40cfb1ac99b6..27a28150dbbf4 100644 --- a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx @@ -22,7 +22,7 @@ import { GridInitialStatePremium } from '../../../models/gridStatePremium'; import { GridAggregationRules } from './gridAggregationInterfaces'; export const useGridAggregationPreProcessors = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridPremiumProcessedProps, | 'aggregationFunctions' diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx b/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx index e025f256f5b4c..18c5bb6bf2936 100644 --- a/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx @@ -31,7 +31,7 @@ interface GridColDefWithAggregationWrappers extends GridBaseColDef { } type ColumnPropertyWrapper

= (params: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; value: GridBaseColDef[P]; colDef: GridBaseColDef; aggregationRule: GridAggregationRule; @@ -188,7 +188,7 @@ export const wrapColumnWithAggregationValue = ({ aggregationRule, }: { column: GridBaseColDef; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; aggregationRule: GridAggregationRule; }): GridBaseColDef => { const getCellAggregationResult = ( diff --git a/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts b/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts index 8b20678940d7d..bf6f2648cf4a9 100644 --- a/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts +++ b/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts @@ -89,7 +89,7 @@ class CellValueUpdater { updateRow: (row: GridRowModel) => void; options: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; processRowUpdate: DataGridPremiumProcessedProps['processRowUpdate']; onProcessRowUpdateError: DataGridPremiumProcessedProps['onProcessRowUpdateError']; getRowId: DataGridPremiumProcessedProps['getRowId']; @@ -212,7 +212,7 @@ function defaultPasteResolver({ paginationMode, }: { pastedData: string[][]; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; updateCell: CellValueUpdater['updateCell']; pagination: DataGridPremiumProcessedProps['pagination']; paginationMode: DataGridPremiumProcessedProps['paginationMode']; @@ -321,7 +321,7 @@ function defaultPasteResolver({ } export const useGridClipboardImport = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridPremiumProcessedProps, | 'pagination' diff --git a/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx b/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx index 09bfb1d025279..36c58e2c8df90 100644 --- a/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx @@ -28,7 +28,7 @@ const options = { }; export const useGridDataSourcePremium = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: DataGridPremiumProcessedProps, ) => { const { api, strategyProcessor, events } = useGridDataSourceBase( diff --git a/packages/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts b/packages/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts index 61dba42a4ab75..62d0660ab63d5 100644 --- a/packages/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts +++ b/packages/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts @@ -66,7 +66,7 @@ interface SerializedRow { export const serializeRowUnsafe = ( id: GridRowId, columns: GridStateColDef[], - apiRef: React.MutableRefObject, + apiRef: React.RefObject, defaultValueOptionsFormulae: { [field: string]: { address: string } }, options: Pick, ): SerializedRow => { @@ -403,7 +403,7 @@ interface BuildExcelOptions export async function buildExcel( options: BuildExcelOptions, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ): Promise { const { columns, diff --git a/packages/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx b/packages/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx index 93286e45fc4fe..639d53f941666 100644 --- a/packages/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx @@ -36,7 +36,7 @@ import { GridExcelExportMenuItem } from '../../../components'; * @requires useGridParamsApi (method) */ export const useGridExcelExport = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: DataGridPremiumProps, ): void => { const logger = useGridLogger(apiRef, 'useGridExcelExport'); diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx index 172821242fdeb..926668d9da258 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx @@ -264,7 +264,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({ }; interface CreateGroupingColDefSeveralCriteriaParams { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; columnsLookup: GridColumnRawLookup; /** * The fields from which we are grouping the rows. diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts index 353b51936bd4a..08f01b8a59d78 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts @@ -54,7 +54,7 @@ interface FilterRowTreeFromTreeDataParams { rowTree: GridRowTreeConfig; isRowMatchingFilters: GridAggregatedFilterItemApplier | null; filterModel: GridFilterModel; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; } /** @@ -196,7 +196,7 @@ export const mergeStateWithRowGroupingModel = }); export const setStrategyAvailability = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, disableRowGrouping: boolean, dataSource?: GridDataSource, ) => { @@ -224,7 +224,7 @@ export const getCellGroupingCriteria = ({ row: GridRowModel; colDef: GridColDef; groupingRule: GridGroupingRule; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; }) => { let key: GridKeyValue | null | undefined; if (groupingRule.groupingValueGetter) { diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts index 07ad4690d0594..0a088c6549b4b 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts @@ -16,7 +16,7 @@ import { GridPrivateApiPremium } from '../../../models/gridApiPremium'; import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector'; export const useGridDataSourceRowGroupingPreProcessors = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridPremiumProcessedProps, | 'disableRowGrouping' diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index b8b6779f14016..2dcbed058bb09 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx @@ -51,7 +51,7 @@ export const rowGroupingStateInitializer: GridStateInitializer< * @requires useGridParamsApi (method) - can be after, async only */ export const useGridRowGrouping = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridPremiumProcessedProps, | 'initialState' diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts index 435ac1ca1a7eb..6d7efbb141039 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts @@ -40,7 +40,7 @@ import { import { GridPrivateApiPremium } from '../../../models/gridApiPremium'; export const useGridRowGroupingPreProcessors = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridPremiumProcessedProps, | 'disableRowGrouping' diff --git a/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts b/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts index f0781bba037fd..3c8514b8f1cbb 100644 --- a/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts +++ b/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts @@ -36,7 +36,7 @@ const updateColumnVisibilityModel = ( */ export const useKeepGroupedColumnsHidden = ( props: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; } & Pick, ) => { const initialProps = React.useRef(props); diff --git a/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts index da879f08ed001..f67b06907710a 100644 --- a/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts +++ b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts @@ -129,7 +129,7 @@ export interface DataGridPremiumPropsWithoutDefaultValue; + apiRef?: React.RefObject; /** * The initial state of the DataGridPremium. * The data in it is set in the state on initialization but isn't controlled. diff --git a/packages/x-data-grid-premium/src/models/gridGroupingValueGetter.ts b/packages/x-data-grid-premium/src/models/gridGroupingValueGetter.ts index aaa20b7f73a13..bd23ac1de2ef4 100644 --- a/packages/x-data-grid-premium/src/models/gridGroupingValueGetter.ts +++ b/packages/x-data-grid-premium/src/models/gridGroupingValueGetter.ts @@ -8,5 +8,5 @@ export type GridGroupingValueGetter< value: TValue, row: R, column: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => GridKeyValue | null | undefined; diff --git a/packages/x-data-grid-premium/src/models/gridPastedValueParser.ts b/packages/x-data-grid-premium/src/models/gridPastedValueParser.ts index e20efa8a0c530..34d5f5c03655e 100644 --- a/packages/x-data-grid-premium/src/models/gridPastedValueParser.ts +++ b/packages/x-data-grid-premium/src/models/gridPastedValueParser.ts @@ -9,5 +9,5 @@ export type GridPastedValueParser< value: string, row: R, column: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => V | undefined; diff --git a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx index 789a91a953f10..3678e4c1ca3d7 100644 --- a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx @@ -35,7 +35,7 @@ describe(' - Quick filter', () => { columns: [{ field: 'brand' }], }; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx index a397d549e0377..3384b2c47a916 100644 --- a/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx @@ -46,7 +46,7 @@ const baselineProps: DataGridPremiumProps = { describe(' - Aggregation', () => { const { render, clock } = createRenderer({ clock: 'fake' }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx index e96d4f09ff8af..4949c71649394 100644 --- a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx @@ -17,7 +17,7 @@ import { isJSDOM, describeSkipIf } from 'test/utils/skipIf'; describe(' - Cell selection', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestDataGridSelection({ rowLength = 4, diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx index 775b8155bb023..40d6ba2736c8b 100644 --- a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx @@ -17,7 +17,7 @@ import { isJSDOM, describeSkipIf } from 'test/utils/skipIf'; describe(' - Clipboard', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test({ rowLength = 4, diff --git a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx index f5cd1c40ee08d..63f7c44bee3f0 100644 --- a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx @@ -20,7 +20,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Data source aggregation', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; let getRowsSpy: SinonSpy; let mockServer: ReturnType; diff --git a/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx index 7cb9dc712a09e..28c072060e207 100644 --- a/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx @@ -19,7 +19,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Export Excel', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const columns: GridColDef[] = [{ field: 'id' }, { field: 'brand', headerName: 'Brand' }]; const rows = [ diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 6a0979cff342c..c25c327b78456 100644 --- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -78,7 +78,7 @@ const baselineProps: BaselineProps = { describe(' - Row grouping', () => { const { render, clock } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx index ae9a23cdbdbe3..65513481901c3 100644 --- a/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx @@ -47,7 +47,7 @@ describe(' - Row selection', () => { const { render } = createRenderer(); describe('props: rowSelectionPropagation = { descendants: true, parents: true }', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx index bb2c28cfb1a53..40359742c5601 100644 --- a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx +++ b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx @@ -47,7 +47,7 @@ interface GridTreeDataGroupingCellIconProps } function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps) { - const apiRef = useGridPrivateApiContext() as React.MutableRefObject; + const apiRef = useGridPrivateApiContext() as React.RefObject; const rootProps = useGridRootProps(); const classes = useUtilityClasses(rootProps); const { rowNode, id, field, descendantCount } = props; diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx index 657e2effad511..e87ba097dd178 100644 --- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx +++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx @@ -51,7 +51,7 @@ export interface GridHeaderFilterCellProps extends Pick; + headerFilterMenuRef: React.RefObject; item: GridFilterItem; showClearIcon?: boolean; InputComponentProps: GridFilterOperator['InputComponentProps']; diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx index 89b2cc023f00d..c50440d8aac0f 100644 --- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx +++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx @@ -22,7 +22,7 @@ function GridHeaderFilterMenuContainer(props: { field: GridColDef['field']; item: GridFilterItem; applyFilterChanges: (item: GridFilterItem) => void; - headerFilterMenuRef: React.MutableRefObject; + headerFilterMenuRef: React.RefObject; buttonRef: React.Ref; disabled?: boolean; }) { diff --git a/packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx b/packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx index d64f7916d68fd..e341324360005 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx @@ -47,7 +47,7 @@ export const columnPinningStateInitializer: GridStateInitializer< }; export const useGridColumnPinning = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProProcessedProps, | 'disableColumnPinning' @@ -336,10 +336,7 @@ export const useGridColumnPinning = ( }, [apiRef, props.pinnedColumns]); }; -function setState( - apiRef: React.MutableRefObject, - model: GridPinnedColumnFields, -) { +function setState(apiRef: React.RefObject, model: GridPinnedColumnFields) { apiRef.current.setState((state) => ({ ...state, pinnedColumns: model, diff --git a/packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinningPreProcessors.ts b/packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinningPreProcessors.ts index 310644dcd678f..4763340502ab5 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinningPreProcessors.ts +++ b/packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinningPreProcessors.ts @@ -11,7 +11,7 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; import { GridPrivateApiPro } from '../../../models/gridApiPro'; export const useGridColumnPinningPreProcessors = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: DataGridProProcessedProps, ) => { const { disableColumnPinning } = props; diff --git a/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx index 0dc4f05c7c384..2659dc75b970a 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx @@ -54,7 +54,7 @@ export const columnReorderStateInitializer: GridStateInitializer = (state) => ({ * @requires useGridColumns (method) */ export const useGridColumnReorder = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProProcessedProps, | 'disableColumnReorder' diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts index d98f319e7b2b1..a4c5414da3ebe 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts @@ -57,7 +57,7 @@ export const dataSourceStateInitializer: GridStateInitializer = (state) => { }; export const useGridDataSourceBase = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProProcessedProps, | 'unstable_dataSource' diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourcePro.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourcePro.ts index 5b3ee2b7c4c3d..d8ff23e87ce32 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourcePro.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourcePro.ts @@ -10,7 +10,7 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; import { useGridDataSourceBase } from './useGridDataSourceBase'; export const useGridDataSourcePro = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: DataGridProProcessedProps, ) => { const { api, strategyProcessor, events } = useGridDataSourceBase(apiRef, props); diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts index d542538f584da..4bafda69754da 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/utils.ts @@ -39,7 +39,7 @@ export class NestedDataManager { private maxConcurrentRequests: number; constructor( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS, ) { this.api = privateApiRef.current; diff --git a/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts index 6cf77ff71c9ca..c0ab0b3301336 100644 --- a/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts +++ b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts @@ -48,7 +48,7 @@ export const detailPanelStateInitializer: GridStateInitializer< }; function cacheContentAndHeight( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, getDetailPanelContent: DataGridProProcessedProps['getDetailPanelContent'], getDetailPanelHeight: DataGridProProcessedProps['getDetailPanelHeight'], previousHeightCache: GridDetailPanelState['heightCache'], @@ -82,7 +82,7 @@ function cacheContentAndHeight( } export const useGridDetailPanel = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProProcessedProps, | 'getDetailPanelContent' diff --git a/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts index 35f67561fbdea..5f4f3e06daca1 100644 --- a/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts +++ b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts @@ -10,7 +10,7 @@ import { GridPrivateApiPro } from '../../../models/gridApiPro'; import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector'; export const useGridDetailPanelPreProcessors = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, props: DataGridProProcessedProps, ) => { const addToggleColumn = React.useCallback>( diff --git a/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx b/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx index 0996a53562300..7046838702601 100644 --- a/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx @@ -30,7 +30,7 @@ const InfiniteLoadingTriggerElement = styled('div')({ * @requires useGridScroll (method */ export const useGridInfiniteLoader = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProProcessedProps, 'onRowsScrollEnd' | 'pagination' | 'paginationMode' | 'rowsLoadingMode' | 'scrollEndThreshold' diff --git a/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts index 2041a6f6b4854..7eba4b70cf034 100644 --- a/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts +++ b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts @@ -21,7 +21,7 @@ import { findSkeletonRowsSection } from './utils'; * @requires useGridScroll (method */ export const useGridLazyLoader = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, props: Pick< DataGridProProcessedProps, 'onFetchRows' | 'rowsLoadingMode' | 'pagination' | 'paginationMode' | 'experimentalFeatures' diff --git a/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.tsx index b6b5bf3359d81..4717099c1dbbc 100644 --- a/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.tsx @@ -9,7 +9,7 @@ export const GRID_SKELETON_ROW_ROOT_ID = 'auto-generated-skeleton-row-root'; const getSkeletonRowId = (index: number) => `${GRID_SKELETON_ROW_ROOT_ID}-${index}`; export const useGridLazyLoaderPreProcessors = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, props: Pick, ) => { const addSkeletonRows = React.useCallback>( diff --git a/packages/x-data-grid-pro/src/hooks/features/lazyLoader/utils.ts b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/utils.ts index 584d3696d17ae..9c2b30dc7f102 100644 --- a/packages/x-data-grid-pro/src/hooks/features/lazyLoader/utils.ts +++ b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/utils.ts @@ -6,7 +6,7 @@ export const findSkeletonRowsSection = ({ visibleRows, range, }: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; visibleRows: GridRowEntry[]; range: { firstRowIndex: number; lastRowIndex: number }; }) => { diff --git a/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts b/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts index ed6f6890b349b..39605d3a6f459 100644 --- a/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts +++ b/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts @@ -56,7 +56,7 @@ export const rowPinningStateInitializer: GridStateInitializer< }; export const useGridRowPinning = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const setPinnedRows = React.useCallback( diff --git a/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts b/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts index 3025976bf538a..85b1c2039dadd 100644 --- a/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts +++ b/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts @@ -30,7 +30,7 @@ export function addPinnedRow({ rowModel: GridRowModel; rowId: GridRowId; position: GridPinnedRowPosition; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; isAutoGenerated: boolean; }) { const dataRowIdToModelLookup = { ...groupingParams.dataRowIdToModelLookup }; @@ -84,9 +84,7 @@ export function addPinnedRow({ }; } -export const useGridRowPinningPreProcessors = ( - apiRef: React.MutableRefObject, -) => { +export const useGridRowPinningPreProcessors = (apiRef: React.RefObject) => { const prevPinnedRowsCacheRef = React.useRef(null); const addPinnedRows = React.useCallback>( diff --git a/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx index 6e906e370cae9..ea8d17de8713e 100644 --- a/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx @@ -54,7 +54,7 @@ const useUtilityClasses = (ownerState: OwnerState) => { * @requires useGridRows (method) */ export const useGridRowReorder = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const logger = useGridLogger(apiRef, 'useGridRowReorder'); diff --git a/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts index 39907eeb8b7a6..5f252c4789e43 100644 --- a/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts +++ b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts @@ -22,7 +22,7 @@ const useUtilityClasses = (ownerState: OwnerState) => { }; export const useGridRowReorderPreProcessors = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, props: DataGridProProcessedProps, ) => { const ownerState = { classes: props.classes }; diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts index d6f0b1d800f57..8a995c9f4cea1 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts +++ b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts @@ -47,7 +47,7 @@ const getSkeletonRowId = (index: number) => `${GRID_SKELETON_ROW_ROOT_ID}-${inde * @requires useGridScroll (method */ export const useGridDataSourceLazyLoader = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, props: Pick< DataGridProProcessedProps, | 'pagination' diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx index f2bc190bade4a..9a74749be813f 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx @@ -38,7 +38,7 @@ import { getVisibleRowsLookup } from '../../../utils/tree/utils'; import { TreeDataStrategy } from '../treeData/gridTreeDataUtils'; export const useGridDataSourceTreeDataPreProcessors = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, props: Pick< DataGridProProcessedProps, | 'treeData' diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts b/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts index 6161b317a4274..6f1a585d7f630 100644 --- a/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts +++ b/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts @@ -17,7 +17,7 @@ interface FilterRowTreeFromTreeDataParams { disableChildrenFiltering: boolean; isRowMatchingFilters: GridAggregatedFilterItemApplier | null; filterModel: GridFilterModel; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; } export enum TreeDataStrategy { diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx index b98528fb36935..1d66b31f10db2 100644 --- a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx @@ -6,7 +6,7 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; import { GRID_TREE_DATA_GROUPING_FIELD } from './gridTreeDataGroupColDef'; export const useGridTreeData = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ) => { /** diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx index 82ae012ad8512..8afd444f97003 100644 --- a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx @@ -37,7 +37,7 @@ import { updateRowTree } from '../../../utils/tree/updateRowTree'; import { getVisibleRowsLookup } from '../../../utils/tree/utils'; export const useGridTreeDataPreProcessors = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, props: Pick< DataGridProProcessedProps, | 'treeData' diff --git a/packages/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/x-data-grid-pro/src/models/dataGridProProps.ts index a81cd6c6d702f..3eb7eb53771b3 100644 --- a/packages/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/x-data-grid-pro/src/models/dataGridProProps.ts @@ -186,7 +186,7 @@ export interface DataGridProPropsWithoutDefaultValue; + apiRef?: React.RefObject; /** * The initial state of the DataGridPro. * The data in it will be set in the state on initialization but will not be controlled. diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx index a0bcce7ee09d3..98bb566d9d0c8 100644 --- a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx @@ -20,7 +20,7 @@ import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Cell editing', () => { const { render, clock } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const defaultData = getBasicGridData(4, 2); diff --git a/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx index e7be578601969..eefdfc197f00b 100644 --- a/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx @@ -17,7 +17,7 @@ describe(' - Clipboard', () => { const columns = [{ field: 'id' }, { field: 'brand', headerName: 'Brand' }]; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index dbdb502302df3..8d9fae1501d78 100644 --- a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -40,7 +40,7 @@ function createDragOverEvent(target: ChildNode) { describe(' - Column pinning', () => { const { render, clock } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase({ nbCols = 20, ...other }: Partial & { nbCols?: number }) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx index 82340efbe43e2..0397d1df3f317 100644 --- a/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx @@ -96,7 +96,7 @@ describe(' - Columns reorder', () => { }); it('should allow to reorder columns by dropping outside the header row', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; @@ -127,7 +127,7 @@ describe(' - Columns reorder', () => { }); it('should cancel the reordering when dropping the column outside the grid', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; @@ -158,7 +158,7 @@ describe(' - Columns reorder', () => { }); it('should keep the order of the columns when dragStart is fired and disableColumnReorder=true', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; @@ -181,7 +181,7 @@ describe(' - Columns reorder', () => { }); it('should keep the order of the columns when dragEnd is fired and disableColumnReorder=true', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; @@ -205,7 +205,7 @@ describe(' - Columns reorder', () => { it('should call onColumnOrderChange after the column has been reordered', () => { const onColumnOrderChange = spy(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); const data = useBasicDemoData(1, 3); @@ -239,7 +239,7 @@ describe(' - Columns reorder', () => { describe('column - disableReorder', () => { it('should not allow to start dragging a column with disableReorder=true', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [ { field: 'brand' }, @@ -278,7 +278,7 @@ describe(' - Columns reorder', () => { }); it('should not allow to drag left of first visible column if it has disableReorder=true', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [ { field: 'brand', disableReorder: true }, @@ -313,7 +313,7 @@ describe(' - Columns reorder', () => { }); it('should not allow to drag right of last visible column if it has disableReorder=true', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [ { field: 'brand' }, @@ -385,7 +385,7 @@ describe(' - Columns reorder', () => { const handleDragEnter = spy(); const handleDragOver = spy(); const handleDragEnd = spy(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); const data = useBasicDemoData(3, 3); diff --git a/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx index 9ced5fb067465..1abe80533d781 100644 --- a/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx @@ -85,7 +85,7 @@ describe(' - Column spanning', () => { ]; it('should work after column reordering', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); @@ -108,7 +108,7 @@ describe(' - Column spanning', () => { }); it('should recalculate cells after column reordering', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); @@ -185,7 +185,7 @@ describe(' - Column spanning', () => { { field: 'rating' }, ]; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index d3fad6f040384..50917bb550238 100644 --- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -19,7 +19,7 @@ import { describeSkipIf, testSkipIf, isJSDOM } from 'test/utils/skipIf'; describe(' - Columns', () => { const { clock, render } = createRenderer({ clock: 'fake' }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const baselineProps = { autoHeight: isJSDOM, diff --git a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index 07d621dcb81c7..eddd01f73e722 100644 --- a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -24,7 +24,7 @@ const columns: GridColDef[] = [{ field: 'id' }, { field: 'idBis' }]; describe(' - Columns visibility', () => { const { render } = createRenderer({ clock: 'fake' }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestDataGridPro( props: Omit & diff --git a/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx index b7379576783cc..60dace6d796cb 100644 --- a/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx @@ -15,7 +15,7 @@ import { getCell, getRow } from 'test/utils/helperFn'; describe(' - Components', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index ec14b20f1daa2..dba5820e8cc1e 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -28,7 +28,7 @@ const testCache: GridDataSourceCache = { describeSkipIf(isJSDOM)(' - Data source', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; let fetchRowsSpy: SinonSpy; let mockServer: ReturnType; diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 9cab47e58440a..2ce40abef7255 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -21,7 +21,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { const defaultTransformGetRowsResponse = (response: GridGetRowsResponse) => response; let transformGetRowsResponse: (response: GridGetRowsResponse) => GridGetRowsResponse; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; let fetchRowsSpy: SinonSpy; let mockServer: ReturnType; diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index a0c883655b2ae..ee062c6272d09 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -30,7 +30,7 @@ const serverOptions = { minDelay: 0, maxDelay: 0, verbose: false }; describeSkipIf(isJSDOM)(' - Data source tree data', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; let fetchRowsSpy: SinonSpy; let mockServer: ReturnType; diff --git a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index 4d59cc70f476d..9621ae57b9c13 100644 --- a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx @@ -26,7 +26,7 @@ import { testSkipIf, isJSDOM } from 'test/utils/skipIf'; describe(' - Detail panel', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase({ nbRows = 20, ...other }: Partial & { nbRows?: number }) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx index 09a10b8652fad..64136e8b024bc 100644 --- a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx @@ -41,7 +41,7 @@ const generateDate = ( describe(' - Edit components', () => { const { render, clock } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const defaultData: Pick = { columns: [], rows: [] }; diff --git a/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx index 2ebe119234e60..2e543585d2b65 100644 --- a/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx @@ -52,7 +52,7 @@ describe(' - Events params', () => { ], }; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestEvents(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx index 883c1c1409c5c..b75564052030b 100644 --- a/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx @@ -18,7 +18,7 @@ describe(' - Export', () => { autoHeight: isJSDOM, }; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const columns: GridColDef[] = [{ field: 'id' }, { field: 'brand', headerName: 'Brand' }]; diff --git a/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx index 1a924b004b820..6130e81da8705 100644 --- a/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx @@ -21,7 +21,7 @@ describe(' - Filter panel', () => { columns: [{ field: 'brand' }], }; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx index 48ec0795c263e..1750df815a92d 100644 --- a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx @@ -30,7 +30,7 @@ const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PRO_PROPS_DEFAULT_VALUES.filterDebou describe(' - Filter', () => { const { clock, render } = createRenderer({ clock: 'fake' }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const baselineProps = { autoHeight: isJSDOM, diff --git a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx index ea343ab78f6c6..d83b6ba6c9101 100644 --- a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx @@ -78,7 +78,7 @@ describeSkipIf(isJSDOM)(' - Layout', () => { describe('columns width', () => { it('should resize flex: 1 column when changing column visibility to avoid exceeding grid width (apiRef setColumnVisibility method call)', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Omit) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx index a253711b1e62a..156154fae22d1 100644 --- a/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx @@ -37,7 +37,7 @@ describe(' - Lazy loader', () => { columns: [{ field: 'id' }, { field: 'first' }], }; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestLazyLoader(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx index 1b4b0ee4f1041..10651116a5960 100644 --- a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx @@ -11,7 +11,7 @@ describe(' - Pagination', () => { describe('setPage', () => { it('should apply valid value', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function GridTest() { const basicData = useBasicDemoData(20, 2); @@ -40,7 +40,7 @@ describe(' - Pagination', () => { }); it('should apply last page if trying to go to a non-existing page', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function GridTest() { const basicData = useBasicDemoData(20, 2); apiRef = useGridApiRef(); @@ -70,7 +70,7 @@ describe(' - Pagination', () => { describe('setPageSize', () => { it('should apply value', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function GridTest() { const basicData = useBasicDemoData(20, 2); apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx b/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx index 3b81cec4544f1..ab6a3d0346dca 100644 --- a/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx +++ b/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx @@ -16,7 +16,7 @@ describe(' - Print export', () => { const NB_ROWS = 2; const defaultData = getBasicGridData(NB_ROWS, 2); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const baselineProps = { ...defaultData, diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx index b63b6c91820b1..41096f7287995 100644 --- a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx @@ -20,7 +20,7 @@ import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Row editing', () => { const { render, clock } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const defaultData = getBasicGridData(4, 4); diff --git a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx index 39a790cacec97..18c1ade7b6926 100644 --- a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx @@ -479,7 +479,7 @@ describe(' - Row pinning', () => { // Needs layouting testSkipIf(isJSDOM)('should work with variable row height', () => { - let apiRef!: React.MutableRefObject; + let apiRef!: React.RefObject; function TestCase() { apiRef = useGridApiRef(); return ( @@ -510,7 +510,7 @@ describe(' - Row pinning', () => { testSkipIf(isJSDOM)('should always update on `rowHeight` change', async () => { const defaultRowHeight = 52; - let apiRef!: React.MutableRefObject; + let apiRef!: React.RefObject; function TestCase({ rowHeight }: { rowHeight?: number }) { apiRef = useGridApiRef(); return ( @@ -679,7 +679,7 @@ describe(' - Row pinning', () => { }); it('should not be selectable', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase() { apiRef = useGridApiRef(); @@ -700,7 +700,7 @@ describe(' - Row pinning', () => { }); it('should export pinned rows to CSV', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase() { apiRef = useGridApiRef(); @@ -812,7 +812,7 @@ describe(' - Row pinning', () => { it('should support `updateRows`', async () => { const columns: GridColDef[] = [{ field: 'id' }, { field: 'name', editable: true }]; - let apiRef!: React.MutableRefObject; + let apiRef!: React.RefObject; function TestCase() { apiRef = useGridApiRef(); return ( diff --git a/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx index 83d587752c507..20eee7853e90c 100644 --- a/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx @@ -29,7 +29,7 @@ describe(' - Row reorder', () => { const { render } = createRenderer(); it('should cancel the reordering when dropping the row outside the grid', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, @@ -65,7 +65,7 @@ describe(' - Row reorder', () => { }); it('should keep the order of the rows when dragStart is fired and rowReordering=false', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, @@ -91,7 +91,7 @@ describe(' - Row reorder', () => { }); it('should keep the order of the rows when dragEnd is fired and rowReordering=false', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, @@ -119,7 +119,7 @@ describe(' - Row reorder', () => { it('should call onRowOrderChange after the row stops being dragged', () => { const handleOnRowOrderChange = spy(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); const rows = [ @@ -165,7 +165,7 @@ describe(' - Row reorder', () => { const handleDragEnter = spy(); const handleDragOver = spy(); const handleDragEnd = spy(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); const data = useBasicDemoData(3, 3); @@ -202,7 +202,7 @@ describe(' - Row reorder', () => { }); it('should reorder rows correctly on any page when pagination is enabled', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index fe2efabca606c..6d8c380a57351 100644 --- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -29,7 +29,7 @@ function getSelectedRowIds() { describe(' - Row selection', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestDataGridSelection({ rowLength = 4, diff --git a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx index 3bb0c605830fb..4ad1d9c594371 100644 --- a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx @@ -73,7 +73,7 @@ describe(' - Rows', () => { }); it('should allow to switch between cell mode', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const editableProps = { ...baselineProps }; editableProps.columns = editableProps.columns.map((col) => ({ ...col, editable: true })); const getRowId: DataGridProProps['getRowId'] = (row) => `${row.clientId}`; @@ -102,7 +102,7 @@ describe(' - Rows', () => { it('should not clone the row', () => { const getRowId: DataGridProProps['getRowId'] = (row) => `${row.clientId}`; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); return ( @@ -164,7 +164,7 @@ describe(' - Rows', () => { }; }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -340,7 +340,7 @@ describe(' - Rows', () => { }; }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -397,7 +397,7 @@ describe(' - Rows', () => { // Need layouting describeSkipIf(isJSDOM)('virtualization', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCaseVirtualization( props: Partial & { nbRows?: number; @@ -679,7 +679,7 @@ describe(' - Rows', () => { }); describe('no virtualization', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial & { nbRows?: number; nbCols?: number }) { apiRef = useGridApiRef(); @@ -720,7 +720,7 @@ describe(' - Rows', () => { }); describe('Cell focus', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx index f50357fb4dd7c..9813ef3ad6051 100644 --- a/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx @@ -38,7 +38,7 @@ describe(' - Sorting', () => { const { render } = createRenderer({ clock: 'fake' }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { const { rows, ...other } = props; diff --git a/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx index d191168207925..8c2b4668c99e9 100644 --- a/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx @@ -30,7 +30,7 @@ describe(' - State', () => { it('should trigger on state change and pass the correct params', () => { let onStateParams; - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx index 2fb247eaabcb9..393fc11382ee8 100644 --- a/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx @@ -85,7 +85,7 @@ const FULL_INITIAL_STATE: GridInitialState = { describe(' - State persistence', () => { const { render, clock } = createRenderer({ clock: 'fake' }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Omit) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx index 8ba96004f2253..ee06da883c593 100644 --- a/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx @@ -61,7 +61,7 @@ const baselineProps: DataGridProProps = { describe(' - Tree data', () => { const { render, clock } = createRenderer({ clock: 'fake' }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts index 2d31a7f3889f4..cb8eb6f95395d 100644 --- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValueProps.ts @@ -8,6 +8,6 @@ export type GridFilterInputValueProps void; // Is any because if typed as GridApiRef a dep cycle occurs. Same happens if ApiContext is used. - apiRef: React.MutableRefObject; + apiRef: React.RefObject; focusElementRef?: React.Ref; } & Pick; diff --git a/packages/x-data-grid/src/context/GridContextProvider.tsx b/packages/x-data-grid/src/context/GridContextProvider.tsx index d5557231ffcd3..93e9a00b2eb3a 100644 --- a/packages/x-data-grid/src/context/GridContextProvider.tsx +++ b/packages/x-data-grid/src/context/GridContextProvider.tsx @@ -7,7 +7,7 @@ import { GridConfiguration } from '../models/configuration/gridConfiguration'; import { GridConfigurationContext } from '../components/GridConfigurationContext'; type GridContextProviderProps = { - privateApiRef: React.MutableRefObject; + privateApiRef: React.RefObject; configuration: GridConfiguration; props: {}; children: React.ReactNode; diff --git a/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts index 75659f4926a62..5bf75ebeceaec 100644 --- a/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts +++ b/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts @@ -74,7 +74,7 @@ function createPrivateAPI( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, ): Api { const publicApi = { get state() { diff --git a/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts b/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts index 274be843d9f35..2b488ad023f74 100644 --- a/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts +++ b/packages/x-data-grid/src/hooks/features/clipboard/useGridClipboard.ts @@ -59,7 +59,7 @@ function hasNativeSelection(element: HTMLInputElement) { * @requires useGridSelection (method) */ export const useGridClipboard = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, 'ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter' diff --git a/packages/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts b/packages/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts index 8e155dae08928..85c2a1ecaff6d 100644 --- a/packages/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts +++ b/packages/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts @@ -88,7 +88,7 @@ export const columnGroupsStateInitializer: GridStateInitializer< * @requires useGridParamsApi (method) */ export const useGridColumnGrouping = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ) => { /** diff --git a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts index b5fc41fb3641e..918fa8e57a4b5 100644 --- a/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts +++ b/packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts @@ -19,9 +19,7 @@ export const columnMenuStateInitializer: GridStateInitializer = (state) => ({ * @requires useGridColumnResize (event) * @requires useGridInfiniteLoader (event) */ -export const useGridColumnMenu = ( - apiRef: React.MutableRefObject, -): void => { +export const useGridColumnMenu = (apiRef: React.RefObject): void => { const logger = useGridLogger(apiRef, 'useGridColumnMenu'); /** diff --git a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index 7c2d327c52db8..ae7073ddb7ce4 100644 --- a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -313,7 +313,7 @@ export const createColumnsState = ({ initialState: GridColumnsInitialState | undefined; columnVisibilityModel?: GridColumnVisibilityModel; keepOnlyColumnsToUpsert: boolean; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; }) => { const isInsideStateInitializer = !apiRef.current.state.columns; @@ -415,7 +415,7 @@ export function getFirstNonSpannedColumnToRender({ visibleRows, }: { firstColumnToRender: number; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; firstRowToRender: number; lastRowToRender: number; visibleRows: GridRowEntry[]; @@ -439,7 +439,7 @@ export function getFirstNonSpannedColumnToRender({ } export function getTotalHeaderHeight( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight' diff --git a/packages/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts b/packages/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts index 2c7d8f97684a9..2a5c9808d3f03 100644 --- a/packages/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts +++ b/packages/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts @@ -16,7 +16,7 @@ type ColSpanLookup = Record) => { +export const useGridColumnSpanning = (apiRef: React.RefObject) => { const lookup = React.useRef({}); const getCellColSpanInfo: GridColumnSpanningApi['unstable_getCellColSpanInfo'] = ( @@ -67,7 +67,7 @@ export const useGridColumnSpanning = (apiRef: React.MutableRefObject; + apiRef: React.RefObject; lookup: ColSpanLookup; columnIndex: number; rowId: GridRowId; diff --git a/packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx b/packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx index 852597ec48924..d2d1991381618 100644 --- a/packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx +++ b/packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx @@ -65,7 +65,7 @@ export const columnsStateInitializer: GridStateInitializer< * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns */ export function useGridColumns( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'initialState' diff --git a/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx b/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx index 0d21ec3a071c4..54811b1e41906 100644 --- a/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx +++ b/packages/x-data-grid/src/hooks/features/density/useGridDensity.tsx @@ -17,7 +17,7 @@ export const densityStateInitializer: GridStateInitializer< }); export const useGridDensity = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const logger = useGridLogger(apiRef, 'useDensity'); diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts index c29918e30bbf7..185373d3fefe3 100644 --- a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts +++ b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts @@ -86,7 +86,7 @@ export const dimensionsStateInitializer: GridStateInitializer = (stat }; export function useGridDimensions( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: RootProps, ) { const logger = useGridLogger(apiRef, 'useResizeContainer'); diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts index 189c13fc82bfd..dd7cc255cb51b 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts @@ -42,7 +42,7 @@ import { import { getDefaultCellValue } from './utils'; export const useGridCellEditing = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'editMode' diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridEditing.ts index 1f5351ab67d45..89fe2d2a9b08c 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridEditing.ts @@ -22,7 +22,7 @@ export const editingStateInitializer: GridStateInitializer = (state) => ({ }); export const useGridEditing = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ) => { useGridCellEditing(apiRef, props); diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts index 726343813ed30..d824283b7e458 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts @@ -49,7 +49,7 @@ import { GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef'; import { getDefaultCellValue } from './utils'; export const useGridRowEditing = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'editMode' diff --git a/packages/x-data-grid/src/hooks/features/events/useGridEvents.ts b/packages/x-data-grid/src/hooks/features/events/useGridEvents.ts index c146675378834..3bb12a838e0b2 100644 --- a/packages/x-data-grid/src/hooks/features/events/useGridEvents.ts +++ b/packages/x-data-grid/src/hooks/features/events/useGridEvents.ts @@ -8,7 +8,7 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; * @requires useGridColumns (event) - can be after, async only */ export function useGridEvents( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'onColumnHeaderClick' diff --git a/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts b/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts index 60f01a2288b79..e7e2e36642882 100644 --- a/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts +++ b/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts @@ -142,7 +142,7 @@ interface BuildCSVOptions { > >; ignoreValueFormatter: boolean; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; } export function buildCSV(options: BuildCSVOptions): string { diff --git a/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx index 7aafdc5580bc7..7dd761585ed5d 100644 --- a/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx +++ b/packages/x-data-grid/src/hooks/features/export/useGridCsvExport.tsx @@ -19,7 +19,7 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps * @requires useGridParamsApi (method) */ export const useGridCsvExport = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const logger = useGridLogger(apiRef, 'useGridCsvExport'); diff --git a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index bc07bd7bc5592..0a08ce03a2d90 100644 --- a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -61,7 +61,7 @@ function buildPrintWindow(title?: string): HTMLIFrameElement { * @requires useGridParamsApi (method) */ export const useGridPrintExport = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const hasRootReference = apiRef.current.rootElementRef.current !== null; diff --git a/packages/x-data-grid/src/hooks/features/export/utils.ts b/packages/x-data-grid/src/hooks/features/export/utils.ts index 8077b77a9f42f..26bc4a4835551 100644 --- a/packages/x-data-grid/src/hooks/features/export/utils.ts +++ b/packages/x-data-grid/src/hooks/features/export/utils.ts @@ -11,7 +11,7 @@ interface GridGetColumnsToExportParams { /** * The API of the grid. */ - apiRef: React.MutableRefObject; + apiRef: React.RefObject; options: GridExportOptions; } diff --git a/packages/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts b/packages/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts index 61dbc100f867b..945e54c51bf15 100644 --- a/packages/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts +++ b/packages/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts @@ -51,13 +51,13 @@ type GridFilterItemApplierNotAggregated = ( /** * Adds default values to the optional fields of a filter items. * @param {GridFilterItem} item The raw filter item. - * @param {React.MutableRefObject} apiRef The API of the grid. + * @param {React.RefObject} apiRef The API of the grid. * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator. * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem. */ export const cleanFilterItem = ( item: GridFilterItem, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => { const cleanItem: GridFilterItem = { ...item }; @@ -78,7 +78,7 @@ export const cleanFilterItem = ( export const sanitizeFilterModel = ( model: GridFilterModel, disableMultipleColumnsFiltering: boolean, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => { const hasSeveralItems = model.items.length > 1; @@ -140,7 +140,7 @@ export const mergeStateWithFilterModel = ( filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => (filteringState: GridStateCommunity['filter']): GridStateCommunity['filter'] => ({ ...filteringState, @@ -156,7 +156,7 @@ export const removeDiacritics = (value: unknown) => { const getFilterCallbackFromItem = ( filterItem: GridFilterItem, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ): GridFilterItemApplier | null => { if (!filterItem.field || !filterItem.operator) { return null; @@ -222,12 +222,12 @@ let filterItemsApplierId = 1; /** * Generates a method to easily check if a row is matching the current filter model. * @param {GridFilterModel} filterModel The model with which we want to filter the rows. - * @param {React.MutableRefObject} apiRef The API of the grid. + * @param {React.RefObject} apiRef The API of the grid. * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters. */ const buildAggregatedFilterItemsApplier = ( filterModel: GridFilterModel, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, disableEval: boolean, ): GridFilterItemApplierNotAggregated | null => { const { items } = filterModel; @@ -300,12 +300,12 @@ export const shouldQuickFilterExcludeHiddenColumns = (filterModel: GridFilterMod /** * Generates a method to easily check if a row is matching the current quick filter. * @param {any[]} filterModel The model with which we want to filter the rows. - * @param {React.MutableRefObject} apiRef The API of the grid. + * @param {React.RefObject} apiRef The API of the grid. * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters. */ const buildAggregatedQuickFilterApplier = ( filterModel: GridFilterModel, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ): GridFilterItemApplierNotAggregated | null => { const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? []; if (quickFilterValues.length === 0) { @@ -383,7 +383,7 @@ const buildAggregatedQuickFilterApplier = ( export const buildAggregatedFilterApplier = ( filterModel: GridFilterModel, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, disableEval: boolean, ): GridAggregatedFilterItemApplier => { const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier( @@ -407,7 +407,7 @@ type FilterCache = { const filterModelItems = ( cache: FilterCache, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, items: GridFilterItem[], ) => { if (!cache.cleanedFilterItems) { @@ -422,7 +422,7 @@ export const passFilterLogic = ( allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, cache: FilterCache, ): boolean => { const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items); diff --git a/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx index c22707e172f8f..1167d63fa44a9 100644 --- a/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx +++ b/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx @@ -59,7 +59,7 @@ const getVisibleRowsLookup: GridStrategyProcessor<'visibleRowsLookupCreation'> = }; function getVisibleRowsLookupState( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, state: GridStateCommunity, ) { return apiRef.current.applyStrategyProcessor('visibleRowsLookupCreation', { @@ -78,7 +78,7 @@ function createMemoizedValues() { * @requires useGridRows (event) */ export const useGridFilter = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'rows' diff --git a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts index 3990d6ca8c6c0..7d03f70afc34b 100644 --- a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts +++ b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts @@ -37,7 +37,7 @@ export const focusStateInitializer: GridStateInitializer = (state) => ({ * @requires useGridEditing (event) */ export const useGridFocus = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const logger = useGridLogger(apiRef, 'useGridFocus'); diff --git a/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts b/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts index dae3a8542487a..0c269f1158f7b 100644 --- a/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts +++ b/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts @@ -24,7 +24,7 @@ export const headerFilteringStateInitializer: GridStateInitializer = ( }); export const useGridHeaderFiltering = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ) => { const logger = useGridLogger(apiRef, 'useGridHeaderFiltering'); diff --git a/packages/x-data-grid/src/hooks/features/keyboardNavigation/utils.ts b/packages/x-data-grid/src/hooks/features/keyboardNavigation/utils.ts index 3db6b0302e3f7..17fd01c901509 100644 --- a/packages/x-data-grid/src/hooks/features/keyboardNavigation/utils.ts +++ b/packages/x-data-grid/src/hooks/features/keyboardNavigation/utils.ts @@ -6,7 +6,7 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity'; import { gridPinnedRowsSelector } from '../rows/gridRowsSelector'; export function enrichPageRowsWithPinnedRows( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, rows: GridRowEntry[], ) { const pinnedRows = gridPinnedRowsSelector(apiRef) || {}; @@ -61,7 +61,7 @@ export const getRightColumnIndex = ({ }; export function findNonRowSpannedCell( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, rowId: GridRowId, field: GridColDef['field'], rowSpanScanDirection: 'up' | 'down', diff --git a/packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx b/packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx index 2468927241489..5e66dbc00d6f7 100644 --- a/packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx +++ b/packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx @@ -20,7 +20,7 @@ export const listViewStateInitializer: GridStateInitializer< }); export function useGridListView( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ) { /* @@ -83,6 +83,6 @@ export function useGridListView( }, [props.unstable_listView, props.unstable_listColumn]); } -function getListColumnWidth(apiRef: React.MutableRefObject) { +function getListColumnWidth(apiRef: React.RefObject) { return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width; } diff --git a/packages/x-data-grid/src/hooks/features/pagination/useGridPagination.ts b/packages/x-data-grid/src/hooks/features/pagination/useGridPagination.ts index 50524ac4e656e..d8aa0b927dd28 100644 --- a/packages/x-data-grid/src/hooks/features/pagination/useGridPagination.ts +++ b/packages/x-data-grid/src/hooks/features/pagination/useGridPagination.ts @@ -46,7 +46,7 @@ export const paginationStateInitializer: GridStateInitializer< * @requires useGridDimensions (event) - can be after */ export const useGridPagination = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: DataGridProcessedProps, ) => { useGridPaginationMeta(apiRef, props); diff --git a/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationMeta.ts b/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationMeta.ts index c87aa8ea63228..c146d70bbcec8 100644 --- a/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationMeta.ts +++ b/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationMeta.ts @@ -7,7 +7,7 @@ import { GridPipeProcessor, useGridRegisterPipeProcessor } from '../../core/pipe import { gridPaginationMetaSelector } from './gridPaginationSelector'; export const useGridPaginationMeta = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, 'paginationMeta' | 'initialState' | 'paginationMode' | 'onPaginationMetaChange' diff --git a/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts b/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts index 98a015f156127..11d42b99e79a8 100644 --- a/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts +++ b/packages/x-data-grid/src/hooks/features/pagination/useGridPaginationModel.ts @@ -55,7 +55,7 @@ export const getDerivedPaginationModel = ( * @requires useGridDimensions (event) - can be after */ export const useGridPaginationModel = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'paginationModel' diff --git a/packages/x-data-grid/src/hooks/features/pagination/useGridRowCount.ts b/packages/x-data-grid/src/hooks/features/pagination/useGridRowCount.ts index 39f950032ade2..dd9366d4b4b81 100644 --- a/packages/x-data-grid/src/hooks/features/pagination/useGridRowCount.ts +++ b/packages/x-data-grid/src/hooks/features/pagination/useGridRowCount.ts @@ -18,7 +18,7 @@ import { } from './gridPaginationSelector'; export const useGridRowCount = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, 'rowCount' | 'initialState' | 'paginationMode' | 'onRowCountChange' diff --git a/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts b/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts index 8461272804d26..1daa3d896e279 100644 --- a/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts +++ b/packages/x-data-grid/src/hooks/features/preferencesPanel/useGridPreferencesPanel.ts @@ -19,7 +19,7 @@ export const preferencePanelStateInitializer: GridStateInitializer< * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState` */ export const useGridPreferencesPanel = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const logger = useGridLogger(apiRef, 'useGridPreferencesPanel'); diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts index 27350229009cc..8bca273a3c2b7 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts +++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts @@ -73,7 +73,7 @@ export const rowSelectionStateInitializer: GridStateInitializer< * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it) */ export const useGridRowSelection = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'checkboxSelection' diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts b/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts index 99aa33d01b89e..297ed970735b0 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts +++ b/packages/x-data-grid/src/hooks/features/rowSelection/utils.ts @@ -19,7 +19,7 @@ export const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation = { }; function getGridRowGroupSelectableDescendants( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, groupId: GridRowId, ) { const rowTree = gridRowTreeSelector(apiRef); @@ -148,7 +148,7 @@ const getFilteredRowNodeSiblings = ( }; export const findRowsToSelect = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, tree: GridRowTreeConfig, selectedRow: GridRowId, autoSelectDescendants: boolean, @@ -208,7 +208,7 @@ export const findRowsToSelect = ( }; export const findRowsToDeselect = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, tree: GridRowTreeConfig, deselectedRow: GridRowId, autoSelectDescendants: boolean, diff --git a/packages/x-data-grid/src/hooks/features/rows/gridRowSpanningUtils.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowSpanningUtils.ts index 6720ed4bd3374..05a617e2cbad8 100644 --- a/packages/x-data-grid/src/hooks/features/rows/gridRowSpanningUtils.ts +++ b/packages/x-data-grid/src/hooks/features/rows/gridRowSpanningUtils.ts @@ -50,7 +50,7 @@ export function isRowRangeUpdated(range1: RowRange, range2: RowRange) { export const getCellValue = ( row: GridValidRowModel, colDef: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => { if (!row) { return null; diff --git a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts index a56b68bddcdba..fe4cef7d600ab 100644 --- a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts @@ -132,7 +132,7 @@ export const getRowsStateFromCache = ({ GridRowTreeCreationParams, 'previousTree' | 'previousTreeDepths' | 'previousGroupsToFetch' > & { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; rowCountProp: number | undefined; loadingProp: boolean | undefined; }): GridRowsState => { @@ -370,7 +370,7 @@ export const updateCacheWithNewRows = ({ }; }; -export function calculatePinnedRowsHeight(apiRef: React.MutableRefObject) { +export function calculatePinnedRowsHeight(apiRef: React.RefObject) { const pinnedRows = gridPinnedRowsSelector(apiRef); const topPinnedRowsHeight = pinnedRows?.top?.reduce((acc, value) => { @@ -393,7 +393,7 @@ export function calculatePinnedRowsHeight(apiRef: React.MutableRefObject, + apiRef: React.RefObject, updates: GridRowModelUpdate[], getRowId: DataGridProcessedProps['getRowId'], ) { diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts index 0b37235679826..ef2ffda2cb6d3 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts @@ -25,7 +25,7 @@ export class MissingRowIdError extends Error {} * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi */ export function useGridParamsApi( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ) { const getColumnHeaderParams = React.useCallback( diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts index 2953e81904d8a..886034963af5b 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts @@ -221,7 +221,7 @@ export const rowSpanningStateInitializer: GridStateInitializer = (state, props, }; export const useGridRowSpanning = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const processedRange = useLazyRef(() => { diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts index e6780834a5564..2c700e864e872 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts @@ -63,7 +63,7 @@ export const rowsStateInitializer: GridStateInitializer< }; export const useGridRows = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'rows' diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts index ac882db677273..49011c06d1e50 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts @@ -41,7 +41,7 @@ export const rowsMetaStateInitializer: GridStateInitializer = (state, props, api * @requires useGridPage (method) */ export const useGridRowsMeta = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'getRowHeight' diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts index edd401c720900..505e586cad180 100644 --- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts +++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts @@ -53,7 +53,7 @@ function scrollIntoView(dimensions: { * @requires useGridColumnSpanning (method) */ export const useGridScroll = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick, ): void => { const isRtl = useRtl(); diff --git a/packages/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts b/packages/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts index 743eb2f281131..fe0c627b56249 100644 --- a/packages/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts +++ b/packages/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts @@ -54,12 +54,12 @@ const isDesc = (direction: GridSortDirection) => direction === 'desc'; /** * Transform an item of the sorting model into a method comparing two rows. * @param {GridSortItem} sortItem The sort item we want to apply. - * @param {React.MutableRefObject} apiRef The API of the grid. + * @param {React.RefObject} apiRef The API of the grid. * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid. */ const parseSortItem = ( sortItem: GridSortItem, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ): GridParsedSortItem | null => { const column = apiRef.current.getColumn(sortItem.field); if (!column || sortItem.sort === null) { @@ -129,12 +129,12 @@ const compareRows = ( /** * Generates a method to easily sort a list of rows according to the current sort model. * @param {GridSortModel} sortModel The model with which we want to sort the rows. - * @param {React.MutableRefObject} apiRef The API of the grid. + * @param {React.RefObject} apiRef The API of the grid. * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided. */ export const buildAggregatedSortingApplier = ( sortModel: GridSortModel, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ): GridSortingModelApplier | null => { const comparatorList = sortModel .map((item) => parseSortItem(item, apiRef)) diff --git a/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts b/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts index ee80de8a0b523..9d89a9f80b191 100644 --- a/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts +++ b/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts @@ -52,7 +52,7 @@ export const sortingStateInitializer: GridStateInitializer< * @requires useGridColumns (event) */ export const useGridSorting = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProcessedProps, | 'initialState' diff --git a/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts b/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts index ad8c936cc7742..00738fe86714f 100644 --- a/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts +++ b/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts @@ -4,9 +4,7 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { GridStatePersistenceApi } from './gridStatePersistenceInterface'; import { useGridApiMethod } from '../../utils'; -export const useGridStatePersistence = ( - apiRef: React.MutableRefObject, -) => { +export const useGridStatePersistence = (apiRef: React.RefObject) => { const exportState = React.useCallback< GridStatePersistenceApi['exportState'] >( diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 0b1b5919c8430..8e98187609e8d 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -676,7 +676,7 @@ export const useGridVirtualScroller = () => { type RenderContextInputs = { enabledForRows: boolean; enabledForColumns: boolean; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; autoHeight: boolean; rowBufferPx: number; columnBufferPx: number; @@ -698,7 +698,7 @@ type RenderContextInputs = { }; function inputsSelector( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, rootProps: ReturnType, enabledForRows: boolean, enabledForColumns: boolean, diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx index 48d1c26365956..eb4f765b77998 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx @@ -38,7 +38,7 @@ export const virtualizationStateInitializer: GridStateInitializer = ( }; export function useGridVirtualization( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: RootProps, ): void { /* diff --git a/packages/x-data-grid/src/hooks/utils/useGridApiContext.ts b/packages/x-data-grid/src/hooks/utils/useGridApiContext.ts index 188d3d78ecff1..565bca96185a2 100644 --- a/packages/x-data-grid/src/hooks/utils/useGridApiContext.ts +++ b/packages/x-data-grid/src/hooks/utils/useGridApiContext.ts @@ -5,7 +5,7 @@ import { GridApiCommunity } from '../../models/api/gridApiCommunity'; export function useGridApiContext< Api extends GridApiCommon = GridApiCommunity, ->(): React.MutableRefObject { +>(): React.RefObject { const apiRef = React.useContext(GridApiContext); if (apiRef === undefined) { @@ -18,5 +18,5 @@ export function useGridApiContext< ); } - return apiRef as React.MutableRefObject; + return apiRef as React.RefObject; } diff --git a/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts b/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts index 26ad34bf45d0f..c89261212cb44 100644 --- a/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts +++ b/packages/x-data-grid/src/hooks/utils/useGridApiEventHandler.ts @@ -29,7 +29,7 @@ export function createUseGridApiEventHandler(registryContainer: RegistryContaine let cleanupTokensCounter = 0; return function useGridApiEventHandler( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, eventName: E, handler?: GridEventListener, options?: EventListenerOptions, @@ -118,7 +118,7 @@ export const useGridApiEventHandler = createUseGridApiEventHandler(registryConta const optionsSubscriberOptions: EventListenerOptions = { isFirst: true }; export function useGridApiOptionHandler( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, eventName: E, handler?: GridEventListener, ) { diff --git a/packages/x-data-grid/src/hooks/utils/useGridNativeEventListener.ts b/packages/x-data-grid/src/hooks/utils/useGridNativeEventListener.ts index 84cddedd45ef2..48a30adab5f7f 100644 --- a/packages/x-data-grid/src/hooks/utils/useGridNativeEventListener.ts +++ b/packages/x-data-grid/src/hooks/utils/useGridNativeEventListener.ts @@ -7,8 +7,8 @@ export const useGridNativeEventListener = < PrivateApi extends GridPrivateApiCommon, K extends keyof HTMLElementEventMap, >( - apiRef: React.MutableRefObject, - ref: React.MutableRefObject | (() => HTMLElement | undefined | null), + apiRef: React.RefObject, + ref: React.RefObject | (() => HTMLElement | undefined | null), eventName: K, handler?: (event: HTMLElementEventMap[K]) => any, options?: AddEventListenerOptions, diff --git a/packages/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts b/packages/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts index 0863a4169d056..c5568a282d9c0 100644 --- a/packages/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts +++ b/packages/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts @@ -10,7 +10,7 @@ if (process.env.NODE_ENV !== 'production') { export function useGridPrivateApiContext< PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity, ->(): React.MutableRefObject { +>(): React.RefObject { const privateApiRef = React.useContext(GridPrivateApiContext); if (privateApiRef === undefined) { @@ -23,5 +23,5 @@ export function useGridPrivateApiContext< ); } - return privateApiRef as React.MutableRefObject; + return privateApiRef as React.RefObject; } diff --git a/packages/x-data-grid/src/hooks/utils/useGridSelector.ts b/packages/x-data-grid/src/hooks/utils/useGridSelector.ts index ca902079c37bc..452c2e2b04bdc 100644 --- a/packages/x-data-grid/src/hooks/utils/useGridSelector.ts +++ b/packages/x-data-grid/src/hooks/utils/useGridSelector.ts @@ -18,7 +18,7 @@ type Selector = | OutputSelector; function applySelector( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, selector: Selector, args: Args, instanceId: GridCoreApi['instanceId'], @@ -52,7 +52,7 @@ export const argsEqual = (prev: any, curr: any) => { const createRefs = () => ({ state: null, equals: null, selector: null, args: null }) as any; export const useGridSelector = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, selector: Selector, args: Args = undefined as Args, equals: (a: U, b: U) => boolean = defaultCompare, diff --git a/packages/x-data-grid/src/models/colDef/gridColDef.ts b/packages/x-data-grid/src/models/colDef/gridColDef.ts index 9d7c3950284c6..70029b3f9b01a 100644 --- a/packages/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/x-data-grid/src/models/colDef/gridColDef.ts @@ -32,13 +32,13 @@ export type GridApplyQuickFilter, + apiRef: React.RefObject, ) => boolean; export type GetApplyQuickFilterFn = ( value: any, colDef: GridStateColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => null | GridApplyQuickFilter; export type GridValueGetter< @@ -50,7 +50,7 @@ export type GridValueGetter< value: TValue, row: R, column: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => V; export type GridValueFormatter< @@ -62,28 +62,28 @@ export type GridValueFormatter< value: TValue, row: R, column: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => F; export type GridValueSetter = ( value: V, row: R, column: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => R; export type GridValueParser = ( value: F | undefined, row: R | undefined, column: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => V; export type GridColSpanFn = ( value: V, row: R, column: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => number | undefined; /** @@ -274,7 +274,7 @@ export interface GridBaseColDef} apiRef Deprecated: The API of the grid. + * @param {React.RefObject} apiRef Deprecated: The API of the grid. * @returns {null | GridApplyQuickFilter} The function to call to check if a row pass this filter value or not. */ getApplyQuickFilterFn?: GetApplyQuickFilterFn; diff --git a/packages/x-data-grid/src/models/gridExport.ts b/packages/x-data-grid/src/models/gridExport.ts index a0a628b4b38c0..9035af4f2f1b9 100644 --- a/packages/x-data-grid/src/models/gridExport.ts +++ b/packages/x-data-grid/src/models/gridExport.ts @@ -53,7 +53,7 @@ export interface GridGetRowsToExportParams; + apiRef: React.RefObject; } export interface GridCsvGetRowsToExportParams diff --git a/packages/x-data-grid/src/models/gridFilterOperator.ts b/packages/x-data-grid/src/models/gridFilterOperator.ts index d74fe2c2ec786..24693bf7d7a64 100644 --- a/packages/x-data-grid/src/models/gridFilterOperator.ts +++ b/packages/x-data-grid/src/models/gridFilterOperator.ts @@ -8,7 +8,7 @@ type ApplyFilterFn = ( value: V, row: R, column: GridColDef, - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) => boolean; export type GetApplyFilterFn = ( diff --git a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx index 41b19f9ba4d46..ef89faf8e4264 100644 --- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -701,7 +701,7 @@ describe(' - Layout & warnings', () => { const columnHeaderHeight = 40; const rowHeight = 30; - let apiRef!: React.MutableRefObject; + let apiRef!: React.RefObject; function Test() { apiRef = useGridApiRef(); return ( @@ -807,7 +807,7 @@ describe(' - Layout & warnings', () => { const columnHeaderHeight = 40; const height = 300; const border = 1; - let apiRef!: React.MutableRefObject; + let apiRef!: React.RefObject; function Test() { apiRef = useGridApiRef(); return ( diff --git a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx index c75469ee6f451..75c767919d903 100644 --- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -257,7 +257,7 @@ describe(' - Pagination', () => { }); it('should throw if pageSize exceeds 100', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase() { apiRef = useGridApiRef(); return ( diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index 6e172932a004d..c3499fa851b65 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -898,7 +898,7 @@ describe(' - Row selection', () => { }); it('should throw if rowSelectionModel contains more than 1 row', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function ControlCase() { apiRef = useGridApiRef(); return ; @@ -911,7 +911,7 @@ describe(' - Row selection', () => { }); it('should not throw if rowSelectionModel contains more than 1 item with checkbox selection', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function ControlCase() { apiRef = useGridApiRef(); return ; diff --git a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx index 65cfd5f2b6970..39008c671cd61 100644 --- a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx @@ -9,7 +9,7 @@ import { testSkipIf, isJSDOM } from 'test/utils/skipIf'; describe(' - Row spanning', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const baselineProps: DataGridProps = { rowSpanning: true, columns: [ diff --git a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx index 12dee0a5416c5..5c447f2ed24cd 100644 --- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -44,7 +44,7 @@ import { COMPACT_DENSITY_FACTOR } from '../hooks/features/density/densitySelecto describe(' - Rows', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const baselineProps = { autoHeight: isJSDOM, diff --git a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx index 5779fa9a59ccf..91319c51a4a60 100644 --- a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx @@ -90,7 +90,7 @@ describe(' - Sorting', () => { }); it('should allow sorting using `apiRef` for unsortable columns', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase() { apiRef = useGridApiRef(); const cols = [{ field: 'id', sortable: false }]; @@ -120,7 +120,7 @@ describe(' - Sorting', () => { }); it('should allow clearing the current sorting using `sortColumn` idempotently', async () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase() { apiRef = useGridApiRef(); const cols = [{ field: 'id' }]; @@ -152,7 +152,7 @@ describe(' - Sorting', () => { // See https://github.com/mui/mui-x/issues/12271 it('should not keep the sort item with `item.sort = null`', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const onSortModelChange = spy(); function TestCase() { apiRef = useGridApiRef(); @@ -667,7 +667,7 @@ describe(' - Sorting', () => { }); it('should apply the sortModel prop correctly on GridApiRef update row data', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase() { apiRef = useGridApiRef(); diff --git a/packages/x-data-grid/src/utils/createSelector.spec.ts b/packages/x-data-grid/src/utils/createSelector.spec.ts index cdd9c8da122f3..cd1961ca4e745 100644 --- a/packages/x-data-grid/src/utils/createSelector.spec.ts +++ b/packages/x-data-grid/src/utils/createSelector.spec.ts @@ -28,7 +28,7 @@ createSelector( createSelector( (state: GridStateCommunity) => state.columns.orderedFields, (fields) => fields, -)({} as React.MutableRefObject); +)({} as React.RefObject); createSelector( (state: GridStateCommunity) => state.columns.orderedFields, diff --git a/packages/x-data-grid/src/utils/createSelector.test.ts b/packages/x-data-grid/src/utils/createSelector.test.ts index bfdee6c93cdfc..7b7625daa21ba 100644 --- a/packages/x-data-grid/src/utils/createSelector.test.ts +++ b/packages/x-data-grid/src/utils/createSelector.test.ts @@ -55,10 +55,10 @@ describe('createSelector', () => { >; const apiRef1 = { current: { state: {}, instanceId: { id: 0 } }, - } as React.MutableRefObject; + } as React.RefObject; const apiRef2 = { current: { state: {}, instanceId: { id: 1 } }, - } as React.MutableRefObject; + } as React.RefObject; expect(selector(apiRef1)).not.to.equal(selector(apiRef2)); }); @@ -70,10 +70,10 @@ describe('createSelector', () => { >; const apiRef1 = { current: { state: {}, instanceId: { id: 0 } }, - } as React.MutableRefObject; + } as React.RefObject; const apiRef2 = { current: { state: {}, instanceId: { id: 1 } }, - } as React.MutableRefObject; + } as React.RefObject; const value1 = selector(apiRef1); selector(apiRef2); const value2 = selector(apiRef1); diff --git a/packages/x-data-grid/src/utils/createSelector.ts b/packages/x-data-grid/src/utils/createSelector.ts index a574c2e80ae07..6f7e755c291a6 100644 --- a/packages/x-data-grid/src/utils/createSelector.ts +++ b/packages/x-data-grid/src/utils/createSelector.ts @@ -20,7 +20,7 @@ type GridCreateSelectorFunction = ReturnType & { export interface OutputSelector { ( - apiRef: React.MutableRefObject<{ state: State; instanceId: GridCoreApi['instanceId'] }>, + apiRef: React.RefObject<{ state: State; instanceId: GridCoreApi['instanceId'] }>, args?: Args, ): Result; (state: State, args?: Args, instanceId?: GridCoreApi['instanceId']): Result; diff --git a/packages/x-data-grid/src/utils/getPublicApiRef.ts b/packages/x-data-grid/src/utils/getPublicApiRef.ts index 0f1a980ad93ba..6baceba10e9fa 100644 --- a/packages/x-data-grid/src/utils/getPublicApiRef.ts +++ b/packages/x-data-grid/src/utils/getPublicApiRef.ts @@ -1,9 +1,9 @@ import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity'; export function getPublicApiRef( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, ) { - return { current: apiRef.current.getPublicApi() } as React.MutableRefObject< + return { current: apiRef.current.getPublicApi() } as React.RefObject< ReturnType >; } diff --git a/packages/x-internals/src/useResizeObserver/useResizeObserver.ts b/packages/x-internals/src/useResizeObserver/useResizeObserver.ts index 477294f312dbb..19e4d5bb89a19 100644 --- a/packages/x-internals/src/useResizeObserver/useResizeObserver.ts +++ b/packages/x-internals/src/useResizeObserver/useResizeObserver.ts @@ -6,7 +6,7 @@ const isDevEnvironment = process.env.NODE_ENV === 'development'; const noop = () => {}; export function useResizeObserver( - ref: React.MutableRefObject, + ref: React.RefObject, fn: (entries: ResizeObserverEntry[]) => void, enabled?: boolean, ) { diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.types.ts b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.types.ts index cb42b0bf9d877..56a8e91f9e248 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.types.ts +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.types.ts @@ -30,7 +30,7 @@ export interface RichTreeViewProSlotProps>; } -export type RichTreeViewProApiRef = React.MutableRefObject< +export type RichTreeViewProApiRef = React.RefObject< TreeViewPublicAPI | undefined >; diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts b/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts index 3baf080333ab7..eb2a3cede4c18 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts @@ -29,7 +29,7 @@ export interface RichTreeViewSlotProps>; } -export type RichTreeViewApiRef = React.MutableRefObject< +export type RichTreeViewApiRef = React.RefObject< TreeViewPublicAPI | undefined >; diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.types.ts b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.types.ts index da45e4c1e3785..1c916bfc90dfb 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.types.ts +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.types.ts @@ -23,7 +23,7 @@ export interface SimpleTreeViewSlotProps extends SimpleTreeViewPluginSlotProps { root?: SlotComponentProps<'ul', {}, {}>; } -export type SimpleTreeViewApiRef = React.MutableRefObject< +export type SimpleTreeViewApiRef = React.RefObject< TreeViewPublicAPI | undefined >; diff --git a/packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx b/packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx index f36ed0c4eacd9..7012107b5cc7f 100644 --- a/packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx +++ b/packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx @@ -8,5 +8,4 @@ import { RichTreeViewPluginSignatures } from '../RichTreeView/RichTreeView.plugi */ export const useTreeViewApiRef = < TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures, ->() => - React.useRef(undefined) as React.MutableRefObject | undefined>; +>() => React.useRef(undefined) as React.RefObject | undefined>; diff --git a/packages/x-tree-view/src/internals/models/itemPlugin.ts b/packages/x-tree-view/src/internals/models/itemPlugin.ts index 3a8289c8041b0..d5f2529cb9ade 100644 --- a/packages/x-tree-view/src/internals/models/itemPlugin.ts +++ b/packages/x-tree-view/src/internals/models/itemPlugin.ts @@ -12,8 +12,8 @@ import type { UseTreeItemInteractions } from '../../hooks/useTreeItemUtils/useTr import type { TreeItemProps } from '../../TreeItem/TreeItem.types'; export interface TreeViewItemPluginSlotPropsEnhancerParams { - rootRefObject: React.MutableRefObject; - contentRefObject: React.MutableRefObject; + rootRefObject: React.RefObject; + contentRefObject: React.RefObject; externalEventHandlers: EventHandlers; interactions: UseTreeItemInteractions; status: UseTreeItemStatus; diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts index 682b9dcfea041..f13d024ea230f 100644 --- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts +++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts @@ -22,9 +22,9 @@ import { useTreeViewBuildContext } from './useTreeViewBuildContext'; import { TreeViewStore } from '../utils/TreeViewStore'; export function useTreeViewApiInitialization( - inputApiRef: React.MutableRefObject | undefined, + inputApiRef: React.RefObject | undefined, ): T { - const fallbackPublicApiRef = React.useRef({}) as React.MutableRefObject; + const fallbackPublicApiRef = React.useRef({}) as React.RefObject; if (inputApiRef) { if (inputApiRef.current == null) { diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.types.ts b/packages/x-tree-view/src/internals/useTreeView/useTreeView.types.ts index a5d65c828593f..044060d2a1eda 100644 --- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.types.ts +++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.types.ts @@ -19,7 +19,7 @@ export interface UseTreeViewParameters< } export interface UseTreeViewBaseProps { - apiRef: React.MutableRefObject | undefined> | undefined; + apiRef: React.RefObject | undefined> | undefined; slots: MergeSignaturesProperty; slotProps: MergeSignaturesProperty; experimentalFeatures: TreeViewExperimentalFeatures;