From 2df43ffdab4612cf311cbe8c1e85640ae7fbf68a Mon Sep 17 00:00:00 2001 From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Date: Fri, 10 Jan 2025 14:53:45 +0100 Subject: [PATCH] [core] Type all references as `RefObject` (#16125) --- .../ColumnSizingPersistWidthOrder.tsx | 2 +- .../components/CustomColumnsPanel.tsx | 2 +- docs/data/data-grid/export/CustomExport.tsx | 2 +- .../useDataGridPremiumComponent.tsx | 2 +- .../GridDataSourceGroupingCriteriaCell.tsx | 2 +- .../aggregation/createAggregationLookup.ts | 6 ++--- .../aggregation/gridAggregationUtils.ts | 4 ++-- .../aggregation/useGridAggregation.ts | 2 +- .../useGridAggregationPreProcessors.tsx | 2 +- .../aggregation/wrapColumnWithAggregation.tsx | 4 ++-- .../clipboard/useGridClipboardImport.ts | 6 ++--- .../export/serializer/excelSerializer.ts | 4 ++-- .../features/export/useGridExcelExport.tsx | 2 +- .../rowGrouping/createGroupingColDef.tsx | 2 +- .../rowGrouping/gridRowGroupingUtils.ts | 6 ++--- ...eGridDataSourceRowGroupingPreProcessors.ts | 2 +- .../rowGrouping/useGridRowGrouping.tsx | 2 +- .../useGridRowGroupingPreProcessors.ts | 2 +- .../utils/useKeepGroupedColumnsHidden.ts | 2 +- .../src/models/dataGridPremiumProps.ts | 2 +- .../src/models/gridGroupingValueGetter.ts | 2 +- .../src/models/gridPastedValueParser.ts | 2 +- .../src/tests/DataGridPremium.test.tsx | 2 +- .../aggregation.DataGridPremium.test.tsx | 2 +- .../cellSelection.DataGridPremium.test.tsx | 2 +- .../tests/clipboard.DataGridPremium.test.tsx | 2 +- .../exportExcel.DataGridPremium.test.tsx | 2 +- .../rowGrouping.DataGridPremium.test.tsx | 2 +- .../rowSelection.DataGridPremium.test.tsx | 2 +- .../GridDataSourceTreeDataGroupingCell.tsx | 2 +- .../headerFiltering/GridHeaderFilterCell.tsx | 2 +- .../GridHeaderFilterMenuContainer.tsx | 2 +- .../columnPinning/useGridColumnPinning.tsx | 7 ++---- .../useGridColumnPinningPreProcessors.ts | 2 +- .../columnReorder/useGridColumnReorder.tsx | 2 +- .../features/dataSource/useGridDataSource.ts | 2 +- .../src/hooks/features/dataSource/utils.ts | 2 +- .../detailPanel/useGridDetailPanel.ts | 4 ++-- .../useGridDetailPanelPreProcessors.ts | 2 +- .../infiniteLoader/useGridInfiniteLoader.tsx | 2 +- .../features/lazyLoader/useGridLazyLoader.ts | 4 ++-- .../useGridLazyLoaderPreProcessors.tsx | 2 +- .../features/rowPinning/useGridRowPinning.ts | 2 +- .../useGridRowPinningPreProcessors.ts | 6 ++--- .../features/rowReorder/useGridRowReorder.tsx | 2 +- .../useGridRowReorderPreProcessors.ts | 2 +- ...useGridDataSourceTreeDataPreProcessors.tsx | 2 +- .../features/treeData/gridTreeDataUtils.ts | 2 +- .../features/treeData/useGridTreeData.tsx | 2 +- .../treeData/useGridTreeDataPreProcessors.tsx | 2 +- .../src/models/dataGridProProps.ts | 2 +- .../tests/cellEditing.DataGridPro.test.tsx | 2 +- .../src/tests/clipboard.DataGridPro.test.tsx | 2 +- .../tests/columnPinning.DataGridPro.test.tsx | 2 +- .../tests/columnReorder.DataGridPro.test.tsx | 18 +++++++------- .../tests/columnSpanning.DataGridPro.test.tsx | 6 ++--- .../src/tests/columns.DataGridPro.test.tsx | 2 +- .../columnsVisibility.DataGridPro.test.tsx | 2 +- .../src/tests/components.DataGridPro.test.tsx | 2 +- .../tests/detailPanel.DataGridPro.test.tsx | 2 +- .../tests/editComponents.DataGridPro.test.tsx | 2 +- .../src/tests/events.DataGridPro.test.tsx | 2 +- .../src/tests/export.DataGridPro.test.tsx | 2 +- .../tests/filterPanel.DataGridPro.test.tsx | 2 +- .../src/tests/filtering.DataGridPro.test.tsx | 2 +- .../src/tests/layout.DataGridPro.test.tsx | 2 +- .../src/tests/lazyLoader.DataGridPro.test.tsx | 2 +- .../src/tests/pagination.DataGridPro.test.tsx | 6 ++--- .../src/tests/printExport.DataGrid.test.tsx | 2 +- .../src/tests/rowEditing.DataGridPro.test.tsx | 2 +- .../src/tests/rowPinning.DataGridPro.test.tsx | 10 ++++---- .../src/tests/rowReorder.DataGridPro.test.tsx | 12 +++++----- .../tests/rowSelection.DataGridPro.test.tsx | 2 +- .../src/tests/rows.DataGridPro.test.tsx | 14 +++++------ .../src/tests/sorting.DataGridPro.test.tsx | 2 +- .../src/tests/state.DataGridPro.test.tsx | 2 +- .../statePersistence.DataGridPro.test.tsx | 2 +- .../src/tests/treeData.DataGridPro.test.tsx | 2 +- .../filterPanel/GridFilterInputValueProps.ts | 2 +- .../src/context/GridContextProvider.tsx | 2 +- .../hooks/core/useGridApiInitialization.ts | 2 +- .../features/clipboard/useGridClipboard.ts | 2 +- .../columnGrouping/useGridColumnGrouping.ts | 2 +- .../features/columnMenu/useGridColumnMenu.ts | 4 +--- .../features/columns/gridColumnsUtils.ts | 6 ++--- .../features/columns/useGridColumnSpanning.ts | 4 ++-- .../hooks/features/columns/useGridColumns.tsx | 2 +- .../hooks/features/density/useGridDensity.tsx | 2 +- .../features/dimensions/useGridDimensions.ts | 2 +- .../features/editing/useGridCellEditing.ts | 2 +- .../hooks/features/editing/useGridEditing.ts | 2 +- .../features/editing/useGridRowEditing.ts | 2 +- .../hooks/features/events/useGridEvents.ts | 2 +- .../export/serializers/csvSerializer.ts | 2 +- .../features/export/useGridCsvExport.tsx | 2 +- .../features/export/useGridPrintExport.tsx | 2 +- .../src/hooks/features/export/utils.ts | 2 +- .../hooks/features/filter/gridFilterUtils.ts | 24 +++++++++---------- .../hooks/features/filter/useGridFilter.tsx | 4 ++-- .../src/hooks/features/focus/useGridFocus.ts | 2 +- .../headerFiltering/useGridHeaderFiltering.ts | 2 +- .../features/keyboardNavigation/utils.ts | 4 ++-- .../features/listView/useGridListView.tsx | 4 ++-- .../features/pagination/useGridPagination.ts | 2 +- .../pagination/useGridPaginationMeta.ts | 2 +- .../pagination/useGridPaginationModel.ts | 2 +- .../features/pagination/useGridRowCount.ts | 2 +- .../useGridPreferencesPanel.ts | 2 +- .../rowSelection/useGridRowSelection.ts | 2 +- .../src/hooks/features/rowSelection/utils.ts | 6 ++--- .../features/rows/gridRowSpanningUtils.ts | 2 +- .../src/hooks/features/rows/gridRowsUtils.ts | 6 ++--- .../hooks/features/rows/useGridParamsApi.ts | 2 +- .../hooks/features/rows/useGridRowSpanning.ts | 2 +- .../src/hooks/features/rows/useGridRows.ts | 2 +- .../hooks/features/rows/useGridRowsMeta.ts | 2 +- .../hooks/features/scroll/useGridScroll.ts | 2 +- .../features/sorting/gridSortingUtils.ts | 8 +++---- .../hooks/features/sorting/useGridSorting.ts | 2 +- .../useGridStatePersistence.ts | 4 +--- .../virtualization/useGridVirtualScroller.tsx | 4 ++-- .../virtualization/useGridVirtualization.tsx | 2 +- .../src/hooks/utils/useGridApiContext.ts | 4 ++-- .../src/hooks/utils/useGridApiEventHandler.ts | 4 ++-- .../hooks/utils/useGridNativeEventListener.ts | 4 ++-- .../hooks/utils/useGridPrivateApiContext.ts | 4 ++-- .../src/hooks/utils/useGridSelector.ts | 8 +++---- .../src/models/colDef/gridColDef.ts | 16 ++++++------- packages/x-data-grid/src/models/gridExport.ts | 2 +- .../src/models/gridFilterOperator.ts | 2 +- .../src/tests/layout.DataGrid.test.tsx | 4 ++-- .../src/tests/pagination.DataGrid.test.tsx | 2 +- .../src/tests/rowSelection.DataGrid.test.tsx | 4 ++-- .../src/tests/rowSpanning.DataGrid.test.tsx | 2 +- .../src/tests/rows.DataGrid.test.tsx | 2 +- .../src/tests/sorting.DataGrid.test.tsx | 8 +++---- .../src/utils/createSelector.spec.ts | 2 +- .../src/utils/createSelector.test.ts | 8 +++---- .../x-data-grid/src/utils/createSelector.ts | 4 ++-- .../x-data-grid/src/utils/getPublicApiRef.ts | 4 ++-- .../useResizeObserver/useResizeObserver.ts | 2 +- .../RichTreeViewPro/RichTreeViewPro.types.ts | 2 +- .../src/RichTreeView/RichTreeView.types.ts | 2 +- .../SimpleTreeView/SimpleTreeView.types.ts | 2 +- .../src/hooks/useTreeViewApiRef.tsx | 3 +-- .../src/internals/models/itemPlugin.ts | 4 ++-- .../src/internals/useTreeView/useTreeView.ts | 4 ++-- .../useTreeView/useTreeView.types.ts | 2 +- 148 files changed, 239 insertions(+), 249 deletions(-) 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 46c76914dda78..41df2266a88af 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx @@ -95,7 +95,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 0f7f159ee84c8..f0a400f370b61 100644 --- a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx +++ b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx @@ -39,7 +39,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/hooks/features/aggregation/createAggregationLookup.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts index 0e91f89ecee6a..f25247ef58d0e 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 @@ -26,7 +26,7 @@ const getAggregationCellValue = ({ aggregationFunction, aggregationRowsScope, }: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; groupId: GridRowId; field: string; aggregationFunction: GridAggregationFunction; @@ -77,7 +77,7 @@ const getGroupAggregatedValue = ({ position, }: { groupId: GridRowId; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; aggregationRowsScope: DataGridPremiumProcessedProps['aggregationRowsScope']; aggregatedFields: string[]; aggregationRules: GridAggregationRules; @@ -110,7 +110,7 @@ export const createAggregationLookup = ({ aggregationRowsScope, getAggregationPosition, }: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; aggregationFunctions: Record; aggregationRowsScope: DataGridPremiumProcessedProps['aggregationRowsScope']; getAggregationPosition: DataGridPremiumProcessedProps['getAggregationPosition']; 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 0f15aa74136b4..fecc44d527e89 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 @@ -123,7 +123,7 @@ interface AddFooterRowsParams { * If `true`, there are some aggregation rules to apply */ hasAggregationRule: boolean; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; } /** @@ -248,7 +248,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 2a9e12601509a..6de22ea93e086 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 @@ -34,7 +34,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 b0f1ab6933ae0..f282643311765 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' | 'disableAggregation' | 'getAggregationPosition' | 'slotProps' | 'slots' 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/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 a56f6a8bbc02f..bb3ad6d829989 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 @@ -267,7 +267,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 0310fb7b338d6..c636ed663e6e6 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 @@ -53,7 +53,7 @@ interface FilterRowTreeFromTreeDataParams { rowTree: GridRowTreeConfig; isRowMatchingFilters: GridAggregatedFilterItemApplier | null; filterModel: GridFilterModel; - apiRef: React.MutableRefObject; + apiRef: React.RefObject; } /** @@ -195,7 +195,7 @@ export const mergeStateWithRowGroupingModel = }); export const setStrategyAvailability = ( - privateApiRef: React.MutableRefObject, + privateApiRef: React.RefObject, disableRowGrouping: boolean, dataSource?: GridDataSource, ) => { @@ -223,7 +223,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 fe562ab900c3e..70f383191a08e 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 @@ -50,7 +50,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 ff1540e70ae43..6ce0ab40f4b65 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 4d8604f27d128..86057ff5f75f7 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 @@ -16,7 +16,7 @@ import { fireUserEvent } from 'test/utils/fireUserEvent'; 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 3b4c67048c675..58f8313189de0 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 @@ -16,7 +16,7 @@ import { getBasicGridData } from '@mui/x-data-grid-generator'; 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/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 24d3422a08fd3..82353a35cfa2a 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 d5ee7aa79ab5f..fabf43a8d47a1 100644 --- a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx +++ b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx @@ -49,7 +49,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 a09f307355e91..08c17c2344d04 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/useGridDataSource.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts index 92b19b032d030..4db48e9dcd12a 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts @@ -43,7 +43,7 @@ export const dataSourceStateInitializer: GridStateInitializer = (state) => { }; export const useGridDataSource = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, props: Pick< DataGridProProcessedProps, | 'unstable_dataSource' 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 dafc6d9783f21..4df0dec6a7c2e 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 @@ -33,7 +33,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 bb79fec8650ed..6fa90a376fe96 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 @@ -45,7 +45,7 @@ export const detailPanelStateInitializer: GridStateInitializer< }; function cacheContentAndHeight( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, getDetailPanelContent: DataGridProProcessedProps['getDetailPanelContent'], getDetailPanelHeight: DataGridProProcessedProps['getDetailPanelHeight'], previousHeightCache: GridDetailPanelState['heightCache'], @@ -81,7 +81,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 4fb594b672b84..299db0e3a6883 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 0ced8d346ae75..94e419daa2845 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 @@ -19,7 +19,7 @@ function findSkeletonRowsSection({ visibleRows, range, }: { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; visibleRows: GridRowEntry[]; range: { firstRowIndex: number; lastRowIndex: number }; }) { @@ -65,7 +65,7 @@ function findSkeletonRowsSection({ * @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/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 586e4f2f4f4a7..64db9d013da9d 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 }; @@ -89,9 +89,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/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.tsx index 0c6b841f939d8..6023fdb533d8e 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 @@ -37,7 +37,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 6a5753c9eb60f..32b6bd52595f4 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 @@ -36,7 +36,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 d2e2c490600d3..2fac11f812574 100644 --- a/packages/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/x-data-grid-pro/src/models/dataGridProProps.ts @@ -173,7 +173,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 66a6efd68d318..afe4fbabf2ef7 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 @@ -41,7 +41,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); 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 4c13b9fb6cbf7..70b1be7182bc8 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 @@ -87,7 +87,7 @@ describe(' - Column spanning', () => { ]; it('should work after column reordering', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); @@ -110,7 +110,7 @@ describe(' - Column spanning', () => { }); it('should recalculate cells after column reordering', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function Test() { apiRef = useGridApiRef(); @@ -191,7 +191,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 6fadd1a23e5dc..4bd7bece7b4d4 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 @@ -20,7 +20,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); 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/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index 2bfa9c25a0a71..f689d2c7a3b1f 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 @@ -27,7 +27,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); 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 9a3625a655090..62c1eaeea65d2 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 @@ -53,7 +53,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 9e1116c6e5c16..6aa263045891c 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 @@ -31,7 +31,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); 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 34c8e9ded21ff..a0f529a8626dc 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 @@ -84,7 +84,7 @@ describe(' - 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 1f2dbac26b937..ccfa552f524f0 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 @@ -38,7 +38,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 dea9277b0605a..69ace0af14181 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 @@ -492,7 +492,7 @@ describe(' - Row pinning', () => { this.skip(); } - let apiRef!: React.MutableRefObject; + let apiRef!: React.RefObject; function TestCase() { apiRef = useGridApiRef(); return ( @@ -527,7 +527,7 @@ describe(' - Row pinning', () => { const defaultRowHeight = 52; - let apiRef!: React.MutableRefObject; + let apiRef!: React.RefObject; function TestCase({ rowHeight }: { rowHeight?: number }) { apiRef = useGridApiRef(); return ( @@ -704,7 +704,7 @@ describe(' - Row pinning', () => { }); it('should not be selectable', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase() { apiRef = useGridApiRef(); @@ -725,7 +725,7 @@ describe(' - Row pinning', () => { }); it('should export pinned rows to CSV', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase() { apiRef = useGridApiRef(); @@ -843,7 +843,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 8eb9f3c11e4eb..55ee6e65e6a88 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 ba199d341d218..fc30d1ec500a5 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 @@ -74,7 +74,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}`; @@ -103,7 +103,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 ( @@ -165,7 +165,7 @@ describe(' - Rows', () => { }; }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -341,7 +341,7 @@ describe(' - Rows', () => { }; }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -404,7 +404,7 @@ describe(' - Rows', () => { } }); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCaseVirtualization( props: Partial & { nbRows?: number; @@ -686,7 +686,7 @@ describe(' - Rows', () => { }); describe('no virtualization', () => { - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; function TestCase(props: Partial & { nbRows?: number; nbCols?: number }) { apiRef = useGridApiRef(); @@ -727,7 +727,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 f2778ad7cd932..4b6bd9fcccc9c 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 @@ -39,7 +39,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 40b589dd71863..d05d23f2a3030 100644 --- a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts +++ b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts @@ -87,7 +87,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 92dfa83d8ddc2..c940e2fffc832 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 d2a015cbde00a..d63720ebd659e 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 b97aaf7fe71d6..842d3abd551b4 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 2b67af5958ab7..4ab975a990a25 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 6084acb11686b..cfc2be798979e 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 86be1ee376470..e5fb6ab49b712 100644 --- a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts @@ -136,7 +136,7 @@ export const getRowsStateFromCache = ({ GridRowTreeCreationParams, 'previousTree' | 'previousTreeDepths' | 'previousGroupsToFetch' > & { - apiRef: React.MutableRefObject; + apiRef: React.RefObject; rowCountProp: number | undefined; loadingProp: boolean | undefined; }): GridRowsState => { @@ -380,7 +380,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) => { @@ -403,7 +403,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 ebb6cdc5c3b37..4bb244086527e 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 { range, rows: visibleRows } = useGridVisibleRows(apiRef, props); 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 bd89c281f7292..047000f828435 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 501b8690a7102..eeb33d8a0e373 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 427306cff45fa..6c1386fb3b0df 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 013b904447ee9..899e98f8c6f94 100644 --- a/packages/x-data-grid/src/hooks/utils/useGridSelector.ts +++ b/packages/x-data-grid/src/hooks/utils/useGridSelector.ts @@ -19,7 +19,7 @@ type Selector = // TODO v8: Remove this function function applySelector( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, selector: ((state: Api['state']) => T) | OutputSelector, ) { if (isOutputSelector(selector)) { @@ -30,7 +30,7 @@ function applySelector( // TODO v8: Rename this function to `applySelector` function applySelectorV8( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, selector: Selector, args: Args, instanceId: GridCoreApi['instanceId'], @@ -65,7 +65,7 @@ const createRefs = () => ({ state: null, equals: null, selector: null, args: nul // TODO v8: Remove this function export const useGridSelector = ( - apiRef: React.MutableRefObject, + apiRef: React.RefObject, selector: ((state: Api['state']) => T) | OutputSelector, equals: (a: T, b: T) => boolean = defaultCompare, ) => { @@ -112,7 +112,7 @@ export const useGridSelector = ( // TODO v8: Rename this function to `useGridSelector` export const useGridSelectorV8 = ( - 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 d0adec4028fc7..944d4c70d2994 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 c07c07fd3791f..7a12b6cd6a70d 100644 --- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -707,7 +707,7 @@ describe(' - Layout & warnings', () => { const columnHeaderHeight = 40; const rowHeight = 30; - let apiRef!: React.MutableRefObject; + let apiRef!: React.RefObject; function Test() { apiRef = useGridApiRef(); return ( @@ -812,7 +812,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 002a0d18ccad8..7c89e2cd0fc56 100644 --- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -264,7 +264,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 3ee2e6e1ae245..1b8dc3ce7ef95 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -916,7 +916,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 ; @@ -929,7 +929,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 7177c84715467..5700a912c2c1b 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 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Row spanning', () => { const { render } = createRenderer(); - let apiRef: React.MutableRefObject; + let apiRef: React.RefObject; const baselineProps: DataGridProps = { unstable_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 e3dbe06d56f85..bf430095a3ffd 100644 --- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -43,7 +43,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); 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 3d0883901fa1d..467e3e35fa7ec 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 b77cde1019a4c..af0e8898f22fd 100644 --- a/packages/x-data-grid/src/utils/createSelector.test.ts +++ b/packages/x-data-grid/src/utils/createSelector.test.ts @@ -52,10 +52,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)); }); @@ -66,10 +66,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 ec6c0bf352de6..627ed02c5a9b6 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 & { // TODO v8: Remove this type export interface OutputSelector { - (apiRef: React.MutableRefObject<{ state: State; instanceId: GridCoreApi['instanceId'] }>): Result; + (apiRef: React.RefObject<{ state: State; instanceId: GridCoreApi['instanceId'] }>): Result; (state: State, instanceId: GridCoreApi['instanceId']): Result; acceptsApiRef: boolean; } @@ -28,7 +28,7 @@ export interface OutputSelector { // TODO v8: Rename this type to `OutputSelector` export interface OutputSelectorV8 { ( - apiRef: React.MutableRefObject<{ state: State; instanceId: GridCoreApi['instanceId'] }>, + apiRef: React.RefObject<{ state: State; instanceId: GridCoreApi['instanceId'] }>, args?: Args, ): Result; (state: State, 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 81b1eeac87825..a77a1c2f0778b 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.types.ts +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.types.ts @@ -38,7 +38,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 d229ed9842158..a9a37722bd84b 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts @@ -46,7 +46,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 563b73fb67c1e..4fb6344786915 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 c0858f84d9604..abf65645a070e 100644 --- a/packages/x-tree-view/src/internals/models/itemPlugin.ts +++ b/packages/x-tree-view/src/internals/models/itemPlugin.ts @@ -9,8 +9,8 @@ import type { import type { UseTreeItem2Interactions } from '../../hooks/useTreeItem2Utils/useTreeItem2Utils'; export interface TreeViewItemPluginSlotPropsEnhancerParams { - rootRefObject: React.MutableRefObject; - contentRefObject: React.MutableRefObject; + rootRefObject: React.RefObject; + contentRefObject: React.RefObject; externalEventHandlers: EventHandlers; // TODO v9: Remove "Pick" once the old TreeItem is removed. interactions: Pick< diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts index 4fccb37a93d12..c3cfd1a5fa8f0 100644 --- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts +++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.ts @@ -21,9 +21,9 @@ import { extractPluginParamsFromProps } from './extractPluginParamsFromProps'; import { useTreeViewBuildContext } from './useTreeViewBuildContext'; 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 d4ebb91b39c47..1e0343067572b 100644 --- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.types.ts +++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.types.ts @@ -20,7 +20,7 @@ export interface UseTreeViewParameters< } export interface UseTreeViewBaseProps { - apiRef: React.MutableRefObject | undefined> | undefined; + apiRef: React.RefObject | undefined> | undefined; slots: MergeSignaturesProperty; slotProps: MergeSignaturesProperty; experimentalFeatures: TreeViewExperimentalFeatures;