[core] Remove use of getState

CHANGELOG.md

@@ -203,7 +203,7 @@ Big thanks to the 11 contributors who made this release possible. Here are some
 
   ```diff
   -const filterState = apiRef.current.getState('filter');
-  +const filterState = apiRef.current.getState().filter;
+  +const filterState = apiRef.current.state.filter;
   ```
 
 - [DataGrid] Improve controllable sorting (#2095) @dtassone

packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx

@@ -21,9 +21,7 @@ export function ColumnHeaderFilterIcon(props: ColumnHeaderFilterIconProps) {
       event.preventDefault();
       event.stopPropagation();
 
-      const { open, openedPanelValue } = gridPreferencePanelStateSelector(
-        apiRef!.current.getState(),
-      );
+      const { open, openedPanelValue } = gridPreferencePanelStateSelector(apiRef!.current.state);
 
       if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
         apiRef!.current.hideFilterPanel();

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -176,7 +176,7 @@ export function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
   );
 
   React.useLayoutEffect(() => {
-    const columnMenuState = apiRef!.current.getState().columnMenu;
+    const columnMenuState = apiRef!.current.state.columnMenu;
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current!.querySelector(
         '[tabindex="0"]',

packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx

@@ -30,8 +30,8 @@ export const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnH
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const checked = event.target.checked;
       const rowsToBeSelected = options.checkboxSelectionVisibleOnly
-        ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.getState())
-        : visibleSortedGridRowIdsSelector(apiRef.current.getState());
+        ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state)
+        : visibleSortedGridRowIdsSelector(apiRef.current.state);
       apiRef!.current.selectRows(rowsToBeSelected, checked, !event.target.indeterminate);
     };
 

packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts

@@ -203,7 +203,7 @@ export function useGridColumns(
       logger.debug('updating GridColumns with new state');
 
       // Avoid dependency on gridState to avoid infinite loop
-      const refGridState = apiRef.current.getState();
+      const refGridState = apiRef.current.state;
       const newColumns: GridColumns = newState.all.map((field) => newState.lookup[field]);
       const updatedCols = getStateColumns(newColumns, refGridState.viewportSizes.width);
 
@@ -220,7 +220,7 @@ export function useGridColumns(
   const updateColumns = React.useCallback(
     (cols: GridColDef[]) => {
       // Avoid dependency on gridState to avoid infinite loop
-      const newState = upsertColumnsState(cols, apiRef.current.getState().columns);
+      const newState = upsertColumnsState(cols, apiRef.current.state.columns);
       setColumnsState(newState, false);
     },
     [apiRef, setColumnsState],
@@ -340,7 +340,7 @@ export function useGridColumns(
       `GridColumns gridState.viewportSizes.width, changed ${gridState.viewportSizes.width}`,
     );
     // Avoid dependency on gridState as I only want to update cols when viewport size changed.
-    const currentColumns = allGridColumnsSelector(apiRef.current.getState());
+    const currentColumns = allGridColumnsSelector(apiRef.current.state);
 
     apiRef.current.updateColumns(currentColumns);
   }, [apiRef, gridState.viewportSizes.width, logger]);

packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts

@@ -284,7 +284,7 @@ export const useGridFilter = (
 
   const onColUpdated = React.useCallback(() => {
     logger.debug('onColUpdated - GridColumns changed, applying filters');
-    const filterState = apiRef.current.getState().filter;
+    const filterState = apiRef.current.state.filter;
     const columnsIds = filterableGridColumnsIdsSelector(apiRef.current.state);
     logger.debug('GridColumns changed, applying filters');
 

packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts

@@ -41,7 +41,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
 
   const setColumnHeaderFocus = React.useCallback(
     (field: string, event?: React.SyntheticEvent) => {
-      const { cell } = apiRef.current.getState().focus;
+      const { cell } = apiRef.current.state.focus;
       if (cell) {
         apiRef.current.publishEvent(
           GRID_CELL_FOCUS_OUT,
@@ -92,7 +92,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
 
   const handleCellMouseUp = React.useCallback(
     (params: GridCellParams) => {
-      const { cell } = apiRef.current.getState().focus;
+      const { cell } = apiRef.current.state.focus;
       if (!cell) {
         return;
       }
@@ -109,7 +109,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
       const isInsideFocusedCell = insideFocusedCell.current;
       insideFocusedCell.current = false;
 
-      const { cell } = apiRef.current.getState().focus;
+      const { cell } = apiRef.current.state.focus;
       if (!cell || isInsideFocusedCell) {
         return;
       }
@@ -138,7 +138,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
       if (params.cellMode === 'view') {
         return;
       }
-      const { cell } = apiRef.current.getState().focus;
+      const { cell } = apiRef.current.state.focus;
       if (cell?.id !== params.id || cell?.field !== params.field) {
         apiRef.current.setCellFocus(params.id, params.field);
       }
@@ -156,7 +156,7 @@ export const useGridFocus = (apiRef: GridApiRef, props: Pick<GridComponentProps,
   );
 
   React.useEffect(() => {
-    const { cell } = apiRef.current.getState().focus;
+    const { cell } = apiRef.current.state.focus;
 
     if (cell) {
       const updatedRow = apiRef.current.getRow(cell.id);

packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts

@@ -44,7 +44,7 @@ export const useGridKeyboard = (apiRef: GridApiRef): void => {
 
       apiRef.current.publishEvent(GRID_CELL_NAVIGATION_KEY_DOWN, params, event);
 
-      const focusCell = apiRef.current.getState().focus.cell!;
+      const focusCell = apiRef.current.state.focus.cell!;
       const rowIndex = apiRef.current.getRowIndex(focusCell.id);
       // We select the rows in between
       const rowIds = Array(Math.abs(rowIndex - selectionFromRowIndex) + 1).fill(

packages/grid/_modules_/grid/hooks/features/pagination/useGridPageSize.ts

@@ -46,7 +46,7 @@ export const useGridPageSize = (
 
   React.useEffect(() => {
     const autoPageSize = containerSizes?.viewportPageSize;
-    const prevPageSize = apiRef.current.getState().pagination.pageSize;
+    const prevPageSize = apiRef.current.state.pagination.pageSize;
 
     let pageSize = prevPageSize;
 

packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts

@@ -64,7 +64,7 @@ export function useGridEditRows(
   );
 
   const handleColumnHeaderDragStart = useEventCallback((nativeEvent) => {
-    const { cell } = apiRef.current.getState().focus;
+    const { cell } = apiRef.current.state.focus;
     if (!cell) {
       return;
     }
@@ -106,7 +106,7 @@ export function useGridEditRows(
 
   const getCellMode = React.useCallback(
     (id, field) => {
-      const editState = apiRef.current.getState().editRows;
+      const editState = apiRef.current.state.editRows;
       const isEditing = editState[id] && editState[id][field];
       return isEditing ? 'edit' : 'view';
     },
@@ -172,7 +172,7 @@ export function useGridEditRows(
   );
 
   const getEditRowsModel = React.useCallback(
-    (): GridEditRowsModel => apiRef.current.getState().editRows,
+    (): GridEditRowsModel => apiRef.current.state.editRows,
     [apiRef],
   );
 

packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts

@@ -40,7 +40,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps):
     options;
 
   const getSelectedRows = React.useCallback(
-    () => selectedGridRowsSelector(apiRef.current.getState()),
+    () => selectedGridRowsSelector(apiRef.current.state),
     [apiRef],
   );
 
@@ -153,7 +153,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps):
 
   const setSelectionModel = React.useCallback<GridSelectionApi['setSelectionModel']>(
     (model) => {
-      const currentModel = apiRef.current.getState().selection;
+      const currentModel = apiRef.current.state.selection;
       if (currentModel !== model) {
         setGridState((state) => ({ ...state, selection: model }));
       }

packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts

@@ -159,7 +159,7 @@ export const useGridSorting = (
       return;
     }
 
-    const sortModel = apiRef.current.getState().sorting.sortModel;
+    const sortModel = apiRef.current.state.sorting.sortModel;
 
     if (sortModel.length > 0) {
       const comparatorList = buildComparatorList(sortModel);

packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualRows.ts

@@ -134,7 +134,7 @@ export const useGridVirtualRows = (apiRef: GridApiRef): void => {
 
   const updateViewport = React.useCallback(
     (forceReRender = false) => {
-      const lastState = apiRef.current.getState();
+      const lastState = apiRef.current.state;
       const containerProps = lastState.containerSizes;
       if (!windowRef || !windowRef.current || !containerProps) {
         return;
@@ -302,7 +302,7 @@ export const useGridVirtualRows = (apiRef: GridApiRef): void => {
   );
 
   const getScrollPosition = React.useCallback(
-    () => scrollStateSelector(apiRef.current.getState()),
+    () => scrollStateSelector(apiRef.current.state),
     [apiRef],
   );
 

packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts

@@ -20,7 +20,7 @@ export function useResizeContainer(
     gridLogger.debug(`resizing...`);
 
     apiRef.current.publishEvent(GRID_DEBOUNCED_RESIZE, {
-      containerSize: apiRef.current.getState().containerSizes?.windowSizes,
+      containerSize: apiRef.current.state.containerSizes?.windowSizes,
     });
   }, [apiRef, gridLogger]);
 

packages/grid/_modules_/grid/models/api/gridStateApi.ts

@@ -8,8 +8,7 @@ export interface GridStateApi {
   state: GridState;
   /**
    * Returns the state of the grid.
-   * @param {string} stateId The part of the state to be returned.
-   * @returns {any} The state of the grid.
+   * @returns {GridState} The state of the grid.
    */
   getState: () => GridState;
   /**

packages/grid/_modules_/grid/models/colDef/gridCheckboxSelection.tsx

@@ -16,7 +16,7 @@ export const gridCheckboxSelectionColDef: GridColDef = {
   disableColumnMenu: true,
   disableReorder: true,
   valueGetter: (params) => {
-    const selectionLookup = selectedIdsLookupSelector(params.api.getState());
+    const selectionLookup = selectedIdsLookupSelector(params.api.state);
     return selectionLookup[params.id] !== undefined;
   },
   renderHeader: (params) => <GridHeaderCheckbox {...params} />,

packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx

@@ -253,7 +253,7 @@ describe('<XGrid /> - Filter', () => {
     render(<TestCase checkboxSelection filterModel={newModel} />);
     const checkAllCell = getColumnHeaderCell(0).querySelector('input');
     fireEvent.click(checkAllCell);
-    expect(apiRef.current.getState().selection).to.deep.equal([1]);
+    expect(apiRef.current.state.selection).to.deep.equal([1]);
   });
 
   it('should allow to clear filters by passing an empty filter model', () => {

packages/grid/x-grid/src/tests/rows.XGrid.test.tsx

@@ -322,7 +322,7 @@ describe('<XGrid /> - Rows', () => {
         />,
       );
 
-      const isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+      const isVirtualized = apiRef!.current!.state.containerSizes!.isVirtualized;
       expect(isVirtualized).to.equal(false);
     });
 
@@ -339,7 +339,7 @@ describe('<XGrid /> - Rows', () => {
         />,
       );
 
-      let isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+      let isVirtualized = apiRef!.current!.state.containerSizes!.isVirtualized;
       expect(isVirtualized).to.equal(false);
 
       render(
@@ -351,13 +351,13 @@ describe('<XGrid /> - Rows', () => {
         />,
       );
 
-      isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+      isVirtualized = apiRef!.current!.state.containerSizes!.isVirtualized;
       expect(isVirtualized).to.equal(true);
     });
 
     it('should render last row when scrolling to the bottom', () => {
       render(<TestCaseVirtualization nbRows={996} hideFooter height={600} />);
-      const totalHeight = apiRef!.current!.getState().containerSizes?.totalSizes.height!;
+      const totalHeight = apiRef!.current!.state.containerSizes?.totalSizes.height!;
 
       const gridWindow = document.querySelector('.MuiDataGrid-window')!;
       const renderingZone = document.querySelector('.MuiDataGrid-renderingZone')! as HTMLElement;
@@ -374,14 +374,14 @@ describe('<XGrid /> - Rows', () => {
     it('Rows should not be virtualized when the grid is in pagination autoPageSize', () => {
       render(<TestCaseVirtualization autoPageSize pagination />);
 
-      const isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+      const isVirtualized = apiRef!.current!.state.containerSizes!.isVirtualized;
       expect(isVirtualized).to.equal(false);
     });
 
     it('Rows should not be virtualized when the grid is in autoHeight', () => {
       render(<TestCaseVirtualization autoHeight />);
 
-      const isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+      const isVirtualized = apiRef!.current!.state.containerSizes!.isVirtualized;
       expect(isVirtualized).to.equal(false);
     });
 
@@ -395,7 +395,7 @@ describe('<XGrid /> - Rows', () => {
       let lastCell = document.querySelector('[role="row"]:last-child [role="cell"]:first-child')!;
       expect(lastCell).to.have.text('995');
 
-      let virtualPage = apiRef!.current!.getState().rendering!.virtualPage;
+      let virtualPage = apiRef!.current!.state.rendering!.virtualPage;
       expect(virtualPage).to.equal(98);
 
       setProps({ nbRows: 9 });
@@ -406,10 +406,10 @@ describe('<XGrid /> - Rows', () => {
       const renderingZone = document.querySelector('.MuiDataGrid-renderingZone')! as HTMLElement;
       expect(renderingZone.children.length).to.equal(9);
 
-      virtualPage = apiRef!.current!.getState().rendering!.virtualPage;
+      virtualPage = apiRef!.current!.state.rendering!.virtualPage;
       expect(virtualPage).to.equal(0);
 
-      const isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+      const isVirtualized = apiRef!.current!.state.containerSizes!.isVirtualized;
       expect(isVirtualized).to.equal(false);
     });
 
@@ -424,7 +424,7 @@ describe('<XGrid /> - Rows', () => {
           '[role="row"]:last-child [role="cell"]:first-child',
         )!;
         expect(lastCell).to.have.text('31');
-        const totalHeight = apiRef!.current!.getState().containerSizes?.totalSizes.height!;
+        const totalHeight = apiRef!.current!.state.containerSizes?.totalSizes.height!;
         expect(gridWindow.scrollHeight).to.equal(totalHeight);
       });
 
@@ -449,9 +449,9 @@ describe('<XGrid /> - Rows', () => {
         expect(gridWindow.scrollTop).to.equal(0);
         expect(gridWindow.scrollHeight).to.equal(gridWindow.clientHeight);
 
-        const isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+        const isVirtualized = apiRef!.current!.state.containerSizes!.isVirtualized;
         expect(isVirtualized).to.equal(false);
-        const virtualRowsCount = apiRef!.current!.getState().containerSizes!.virtualRowsCount;
+        const virtualRowsCount = apiRef!.current!.state.containerSizes!.virtualRowsCount;
         expect(virtualRowsCount).to.equal(4);
       });
 
@@ -471,9 +471,9 @@ describe('<XGrid /> - Rows', () => {
         expect(gridWindow.scrollTop).to.equal(0);
         expect(gridWindow.scrollHeight).to.equal(gridWindow.clientHeight);
 
-        const isVirtualized = apiRef!.current!.getState().containerSizes!.isVirtualized;
+        const isVirtualized = apiRef!.current!.state.containerSizes!.isVirtualized;
         expect(isVirtualized).to.equal(false);
-        const virtualRowsCount = apiRef!.current!.getState().containerSizes!.virtualRowsCount;
+        const virtualRowsCount = apiRef!.current!.state.containerSizes!.virtualRowsCount;
         expect(virtualRowsCount).to.equal(7);
       });
     });
@@ -608,7 +608,7 @@ describe('<XGrid /> - Rows', () => {
       render(<TestCase rows={baselineProps.rows} />);
 
       fireEvent.click(getCell(0, 0));
-      expect(apiRef.current.getState().focus.cell).to.deep.equal({
+      expect(apiRef.current.state.focus.cell).to.deep.equal({
         id: baselineProps.rows[0].id,
         field: baselineProps.columns[0].field,
       });
@@ -619,15 +619,15 @@ describe('<XGrid /> - Rows', () => {
 
       fireEvent.click(getCell(0, 0));
       setProps({ rows: baselineProps.rows.slice(1) });
-      expect(apiRef.current.getState().focus.cell).to.equal(null);
+      expect(apiRef.current.state.focus.cell).to.equal(null);
     });
 
     it('should not reset focus when removing a row not containing the focus cell', () => {
       const { setProps } = render(<TestCase rows={baselineProps.rows} />);
 
       fireEvent.click(getCell(1, 0));
       setProps({ rows: baselineProps.rows.slice(1) });
-      expect(apiRef.current.getState().focus.cell).to.deep.equal({
+      expect(apiRef.current.state.focus.cell).to.deep.equal({
         id: baselineProps.rows[1].id,
         field: baselineProps.columns[0].field,
       });