[DataGrid] Grid depends on side effects

packages/grid/_modules_/grid/GridComponent.tsx

@@ -202,7 +202,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
                           !!gridState.options.pagination &&
                           gridState.pagination.pageSize != null &&
                           !gridState.options.hideFooterPagination &&
-                          (customComponents.paginationComponent || <Pagination />)
+                          (customComponents.paginationComponent || <Pagination apiRef={apiRef} />)
                         }
                       />
                     )}

packages/grid/_modules_/grid/components/column-headers.tsx

@@ -7,7 +7,7 @@ import { ColumnHeaderItem } from './column-header-item';
 import { ApiContext } from './api-context';
 import { LeftEmptyCell, RightEmptyCell } from './cell';
 import { GridColumnHeaderMenu } from './menu/columnMenu/GridColumnHeaderMenu';
-import { PreferencesPanel } from './tools/Preferences';
+import { PreferencesPanel } from './tools/PreferencesPanel';
 import { containerSizesSelector } from './viewport';
 import { OptionsContext } from './options-context';
 import { ScrollArea } from './ScrollArea';
@@ -57,8 +57,10 @@ export const ColumnHeaderItemCollection: React.FC<ColumnHeadersItemCollectionPro
 
   return (
     <React.Fragment>
-      <GridColumnHeaderMenu />
-      <PreferencesPanel />
+      {/* apiRef deopt for plugin-transform-react-constant-elements */}
+      <GridColumnHeaderMenu apiRef={apiRef} />
+      {/* apiRef deopt for plugin-transform-react-constant-elements */}
+      <PreferencesPanel apiRef={apiRef} />
       {items}
     </React.Fragment>
   );

packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnHeaderMenu.tsx

@@ -2,17 +2,21 @@ import * as React from 'react';
 import { ColumnMenuState } from '../../../hooks/features/columnMenu/columnMenuState';
 import { GridState } from '../../../hooks/features/core/gridState';
 import { useGridSelector } from '../../../hooks/features/core/useGridSelector';
+import { ApiRef } from '../../../models/api/apiRef';
 import { findHeaderElementFromField } from '../../../utils/domUtils';
-import { ApiContext } from '../../api-context';
 import { GridMenu } from '../GridMenu';
 import { FilterMenuItem } from './FilterMenuItem';
 import { HideColMenuItem } from './HideColMenuItem';
 import { SortMenuItems } from './SortMenuItems';
 
 const columnMenuStateSelector = (state: GridState) => state.columnMenu;
 
-export const GridColumnHeaderMenu: React.FC<{}> = () => {
-  const apiRef = React.useContext(ApiContext);
+interface GridColumnHeaderMenuProps {
+  apiRef?: ApiRef;
+}
+
+export function GridColumnHeaderMenu(props: GridColumnHeaderMenuProps) {
+  const { apiRef } = props;
   const columnMenuState = useGridSelector(apiRef!, columnMenuStateSelector);
   const currentColumn = columnMenuState.field
     ? apiRef?.current.getColumnFromField(columnMenuState.field)
@@ -74,4 +78,4 @@ export const GridColumnHeaderMenu: React.FC<{}> = () => {
       <HideColMenuItem onClick={hideMenu} column={currentColumn!} />
     </GridMenu>
   );
-};
+}

packages/grid/_modules_/grid/components/pagination.tsx

@@ -4,7 +4,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import { useGridSelector } from '../hooks/features/core/useGridSelector';
 import { paginationSelector } from '../hooks/features/pagination/paginationSelector';
 import { optionsSelector } from '../hooks/utils/useOptionsProp';
-import { ApiContext } from './api-context';
+import { ApiRef } from '../models/api/apiRef';
 
 // Used to hide the drop down select from the TablePaginagion
 const useStyles = makeStyles((theme: Theme) => ({
@@ -25,9 +25,13 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-export function Pagination() {
+interface PaginationProps {
+  apiRef?: ApiRef;
+}
+
+export function Pagination(props: PaginationProps) {
   const classes = useStyles();
-  const apiRef = React.useContext(ApiContext);
+  const { apiRef } = props;
   const paginationState = useGridSelector(apiRef, paginationSelector);
   const options = useGridSelector(apiRef, optionsSelector);
 

packages/grid/_modules_/grid/components/tools/ColumnsPanel.tsx

@@ -9,31 +9,37 @@ import { makeStyles } from '@material-ui/core/styles';
 import { allColumnsSelector } from '../../hooks/features/columns/columnsSelector';
 import { useGridSelector } from '../../hooks/features/core/useGridSelector';
 import { optionsSelector } from '../../hooks/utils/useOptionsProp';
-import { ApiContext } from '../api-context';
+import { ApiRef } from '../../models/api/apiRef';
 import { DragIcon } from '../icons/index';
 
-const useStyles = makeStyles(() => ({
-  columnsListContainer: {
-    paddingTop: 8,
-    paddingLeft: 12,
-  },
-  column: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '2px 4px',
-  },
-  switch: {
-    marginRight: 4,
-  },
-  dragIconRoot: {
-    justifyContent: 'flex-end',
+const useStyles = makeStyles(
+  {
+    columnsListContainer: {
+      paddingTop: 8,
+      paddingLeft: 12,
+    },
+    column: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '2px 4px',
+    },
+    switch: {
+      marginRight: 4,
+    },
+    dragIconRoot: {
+      justifyContent: 'flex-end',
+    },
   },
-}));
+  { name: 'MuiDataGridColumnsPanel' },
+);
 
-export const ColumnsPanel: React.FC<{}> = () => {
-  const classes = useStyles();
+interface ColumnsPanelProps {
+  apiRef?: ApiRef;
+}
 
-  const apiRef = React.useContext(ApiContext);
+export function ColumnsPanel(props: ColumnsPanelProps) {
+  const classes = useStyles();
+  const { apiRef } = props;
   const searchInputRef = React.useRef<HTMLInputElement>(null);
   const columns = useGridSelector(apiRef, allColumnsSelector);
   const { disableColumnReorder } = useGridSelector(apiRef, optionsSelector);
@@ -139,4 +145,4 @@ export const ColumnsPanel: React.FC<{}> = () => {
       </div>
     </React.Fragment>
   );
-};
+}

packages/grid/_modules_/grid/components/tools/FilterForm.tsx

@@ -23,39 +23,43 @@ export interface FilterFormProps {
   deleteFilter: (item: FilterItem) => void;
 }
 
-const useStyles = makeStyles(() => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'space-around',
-    padding: 8,
-  },
-  linkOperatorSelect: {
-    width: 60,
-  },
-  columnSelect: {
-    width: 150,
-  },
-  operatorSelect: {
-    width: 120,
-  },
-  filterValueInput: {
-    width: 190,
-  },
-  closeIconRoot: {
-    justifyContent: 'flex-end',
-  },
-}));
+const useStyles = makeStyles(
+  () => ({
+    root: {
+      display: 'flex',
+      justifyContent: 'space-around',
+      padding: 8,
+    },
+    linkOperatorSelect: {
+      width: 60,
+    },
+    columnSelect: {
+      width: 150,
+    },
+    operatorSelect: {
+      width: 120,
+    },
+    filterValueInput: {
+      width: 190,
+    },
+    closeIconRoot: {
+      justifyContent: 'flex-end',
+    },
+  }),
+  { name: 'MuiDataGridFilterForm' },
+);
 
-export const FilterForm: React.FC<FilterFormProps> = ({
-  item,
-  hasMultipleFilters,
-  deleteFilter,
-  applyFilterChanges,
-  multiFilterOperator,
-  showMultiFilterOperators,
-  disableMultiFilterOperator,
-  applyMultiFilterOperatorChanges,
-}) => {
+export function FilterForm(props: FilterFormProps) {
+  const {
+    item,
+    hasMultipleFilters,
+    deleteFilter,
+    applyFilterChanges,
+    multiFilterOperator,
+    showMultiFilterOperators,
+    disableMultiFilterOperator,
+    applyMultiFilterOperatorChanges,
+  } = props;
   const classes = useStyles();
   const apiRef = React.useContext(ApiContext);
   const filterableColumns = useGridSelector(apiRef, filterableColumnsSelector);
@@ -198,4 +202,4 @@ export const FilterForm: React.FC<FilterFormProps> = ({
       </FormControl>
     </div>
   );
-};
+}

packages/grid/_modules_/grid/components/tools/FilterInputValue.tsx

@@ -9,11 +9,8 @@ export interface TypeFilterInputValueProps extends FilterInputValueProps {
   type?: 'text' | 'number' | 'date' | 'datetime-local';
 }
 
-export const FilterInputValue: React.FC<TypeFilterInputValueProps> = ({
-  item,
-  applyValue,
-  type,
-}) => {
+export function FilterInputValue(props: TypeFilterInputValueProps) {
+  const { item, applyValue, type } = props;
   const filterTimeout = React.useRef<any>();
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const [applying, setIsApplying] = React.useState(false);
@@ -57,4 +54,4 @@ export const FilterInputValue: React.FC<TypeFilterInputValueProps> = ({
       }}
     />
   );
-};
+}

packages/grid/_modules_/grid/components/tools/FilterPanel.tsx

@@ -4,12 +4,16 @@ import { useGridSelector } from '../../hooks/features/core/useGridSelector';
 import { useGridState } from '../../hooks/features/core/useGridState';
 import { optionsSelector } from '../../hooks/utils/useOptionsProp';
 import { FilterItem, LinkOperator } from '../../models/filterItem';
-import { ApiContext } from '../api-context';
+import { ApiRef } from '../../models/api/apiRef';
 import { AddIcon } from '../icons/index';
 import { FilterForm } from './FilterForm';
 
-export const FilterPanel: React.FC<{}> = () => {
-  const apiRef = React.useContext(ApiContext);
+interface FilterPanelProps {
+  apiRef?: ApiRef;
+}
+
+export function FilterPanel(props: FilterPanelProps) {
+  const { apiRef } = props;
   const [gridState] = useGridState(apiRef!);
   const { disableMultipleColumnsFiltering } = useGridSelector(apiRef, optionsSelector);
 
@@ -74,4 +78,4 @@ export const FilterPanel: React.FC<{}> = () => {
       )}
     </React.Fragment>
   );
-};
+}

packages/grid/_modules_/grid/components/tools/Panel.tsx

@@ -37,10 +37,12 @@ const useStyles = makeStyles(
 );
 
 export interface PanelProps {
+  children?: React.ReactNode;
   open: boolean;
 }
 
-export const Panel: React.FC<PanelProps> = ({ children, open }) => {
+export function Panel(props: PanelProps) {
+  const { children, open } = props;
   const classes = useStyles();
   const apiRef = React.useContext(ApiContext);
   const viewportSizes = useGridSelector(apiRef, viewportSizeStateSelector);
@@ -80,4 +82,4 @@ export const Panel: React.FC<PanelProps> = ({ children, open }) => {
       </ClickAwayListener>
     </Popper>
   );
-};
+}

packages/grid/_modules_/grid/components/tools/Preferences.tsx → packages/grid/_modules_/grid/components/tools/PreferencesPanel.tsx

@@ -4,13 +4,17 @@ import { useGridSelector } from '../../hooks/features/core/useGridSelector';
 import { preferencePanelStateSelector } from '../../hooks/features/preferencesPanel/preferencePanelSelector';
 import { PreferencePanelsValue } from '../../hooks/features/preferencesPanel/preferencesPanelValue';
 import { optionsSelector } from '../../hooks/utils/useOptionsProp';
-import { ApiContext } from '../api-context';
+import { ApiRef } from '../../models/api/apiRef';
 import { ColumnsPanel } from './ColumnsPanel';
 import { FilterPanel } from './FilterPanel';
 import { Panel } from './Panel';
 
-export function PreferencesPanel() {
-  const apiRef = React.useContext(ApiContext);
+interface PreferencesPanelProps {
+  apiRef?: ApiRef;
+}
+
+export function PreferencesPanel(props: PreferencesPanelProps) {
+  const { apiRef } = props;
   const columns = useGridSelector(apiRef, allColumnsSelector);
   const options = useGridSelector(apiRef, optionsSelector);
   const preferencePanelState = useGridSelector(apiRef, preferencePanelStateSelector);
@@ -20,8 +24,10 @@ export function PreferencesPanel() {
 
   return (
     <Panel open={columns.length > 0 && preferencePanelState.open}>
-      {!options.disableColumnSelector && isColumnsTabOpen && <ColumnsPanel />}
-      {!options.disableColumnFilter && isFiltersTabOpen && <FilterPanel />}
+      {/* apiRef deopt for plugin-transform-react-constant-elements */}
+      {!options.disableColumnSelector && isColumnsTabOpen && <ColumnsPanel apiRef={apiRef} />}
+      {/* apiRef deopt for plugin-transform-react-constant-elements */}
+      {!options.disableColumnFilter && isFiltersTabOpen && <FilterPanel apiRef={apiRef} />}
     </Panel>
   );
 }

packages/grid/_modules_/grid/components/tools/index.ts

@@ -4,4 +4,4 @@ export * from './FilterInputValue';
 export * from './FilterInputValueProps';
 export * from './FilterPanel';
 export * from './Panel';
-export * from './Preferences';
+export * from './PreferencesPanel';