[core] Batch small changes

docs/package.json

@@ -39,7 +39,7 @@
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "clean-css": "^4.1.11",
-    "clipboard-copy": "^4.0.1",
+    "clipboard-copy": "^3.0.0",
     "clsx": "^1.0.4",
     "core-js": "^2.6.11",
     "cross-env": "^7.0.0",

docs/scripts/buildApi.js

@@ -122,8 +122,8 @@ async function annotateComponentDefinition(component, api) {
       }
 
       const { leadingComments = [] } = node;
-      const [jsdocBlock, ...rest] = leadingComments;
-      if (rest.length > 0) {
+      const [jsdocBlock, ...other] = leadingComments;
+      if (other.length > 0) {
         throw new Error('Should only have a single leading jsdoc block');
       }
       if (jsdocBlock !== undefined) {

docs/src/pages/components/data-grid/pagination/pagination.md

@@ -48,6 +48,18 @@ Finally, you need to handle the `onPageChange` callback to load the rows for the
 
 {{"demo": "pages/components/data-grid/pagination/ServerPaginationGrid.js", "bg": "inline"}}
 
+## Rendering
+
+You can customize the rendered of the pagination following [this section](/components/data-grid/rendering/#footer) of the documentation.
+
+## Paginate > 100 rows [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
+
+The `DataGrid` component can display up to 100 rows per page.
+The `XGrid` component removes this limitation.
+The following demo displays 200 rows per page:
+
+{{"demo": "pages/components/data-grid/pagination/200PaginationGrid.js", "disableAd": true, "bg": "inline"}}
+
 ## apiRef [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
 
 The grid exposes a set of methods that enables all of these features using the imperative apiRef.
@@ -62,11 +74,3 @@ The grid exposes a set of methods that enables all of these features using the i
 Below is an example of how you can reset the page using the imperative `setPage` method.
 
 {{"demo": "pages/components/data-grid/pagination/ApiRefPaginationGrid.js", "bg": "inline"}}
-
-## Paginate > 100 rows [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
-
-The `DataGrid` component can display up to 100 rows per page.
-The `XGrid` component removes this limitation.
-The following demo displays 200 rows per page:
-
-{{"demo": "pages/components/data-grid/pagination/200PaginationGrid.js", "disableAd": true, "bg": "inline"}}

docs/src/pages/components/data-grid/rows/ApiRefRowsGrid.js

@@ -6,7 +6,7 @@ import { randomInt, randomUserName } from '@material-ui/x-grid-data-generator';
 const columns = [
   { field: 'id' },
   { field: 'username', width: 150 },
-  { field: 'age', width: 80 },
+  { field: 'age', width: 80, type: 'number' },
 ];
 
 const rows = [

docs/src/pages/components/data-grid/rows/ApiRefRowsGrid.tsx

@@ -6,8 +6,9 @@ import { randomInt, randomUserName } from '@material-ui/x-grid-data-generator';
 const columns = [
   { field: 'id' },
   { field: 'username', width: 150 },
-  { field: 'age', width: 80 },
+  { field: 'age', width: 80, type: 'number' },
 ];
+
 const rows = [
   { id: 1, username: randomUserName(), age: randomInt(10, 80) },
   { id: 2, username: randomUserName(), age: randomInt(10, 80) },

docs/src/pages/components/data-grid/rows/rows.md

@@ -28,7 +28,7 @@ It replaces the previous values. This approach has some drawbacks:
 - You need to provide all the rows.
 - You might create a performance bottleneck when preparing the rows array to provide to the grid.
 
-### The apiRef
+### apiRef [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
 
 The second way to update rows is to use the apiRef.
 This is an imperative API that is designed to solve the previous two limitations of the declarative `rows` prop. `apiRef.current.updateRows()`, updates the rows to the grid. It **merges** the new rows with the previous ones.
@@ -108,16 +108,6 @@ Then you need to handle the `onSortModelChange` callback, sort the rows on the s
 
 {{"demo": "pages/components/data-grid/rows/ServerSortingGrid.js", "bg": "inline"}}
 
-### apiRef [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
-
-The grid exposes a set of methods that enables all of these features using the imperative apiRef.
-
-> ⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.
-
-- `getSortModel`: Get the sort model currently applied to the grid.
-- `setSortModel`: Set the sort model and trigger the sorting of rows.
-- `onSortModelChange`: Callback fired when the column sorting changed before the grid has sorted its rows.
-
 ### Multi-column sorting [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
 
 You can sort by multiple columns at the same time using `XGrid`.
@@ -138,6 +128,16 @@ const sortModel = [
 
 {{"demo": "pages/components/data-grid/rows/MultiSortingGrid.js", "disableAd": true, "bg": "inline"}}
 
+### apiRef [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
+
+The grid exposes a set of methods that enables all of these features using the imperative apiRef.
+
+> ⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.
+
+- `getSortModel`: Get the sort model currently applied to the grid.
+- `setSortModel`: Set the sort model and trigger the sorting of rows.
+- `onSortModelChange`: Callback fired when the column sorting changed before the grid has sorted its rows.
+
 ## Row height
 
 By default, the rows have a height of 52 pixels.

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

@@ -1,7 +1,7 @@
+import * as React from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
 import Tooltip from '@material-ui/core/Tooltip';
-import * as React from 'react';
 import { useGridSelector } from '../../hooks/features/core/useGridSelector';
 import { preferencePanelStateSelector } from '../../hooks/features/preferencesPanel/preferencePanelSelector';
 import { PreferencePanelsValue } from '../../hooks/features/preferencesPanel/preferencesPanelValue';
@@ -13,7 +13,7 @@ export interface ColumnHeaderFilterIconProps {
   counter?: number;
 }
 
-export const ColumnHeaderFilterIcon: React.FC<ColumnHeaderFilterIconProps> = (props) => {
+export function ColumnHeaderFilterIcon(props: ColumnHeaderFilterIconProps) {
   const { counter } = props;
   const apiRef = React.useContext(ApiContext);
   const options = useGridSelector(apiRef, optionsSelector);
@@ -62,4 +62,4 @@ export const ColumnHeaderFilterIcon: React.FC<ColumnHeaderFilterIconProps> = (pr
       </div>
     </Tooltip>
   );
-};
+}

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

@@ -142,7 +142,6 @@ export const ColumnHeaderItem = ({
     >
       <div className="MuiDataGrid-colCell-draggable" {...dragConfig}>
         {!disableColumnMenu && isColumnNumeric && !column.disableColumnMenu && columnMenuIconButton}
-
         <div className="MuiDataGrid-colCellTitleContainer">
           {isColumnNumeric && columnTitleIconButtons}
           {headerComponent || (
@@ -154,13 +153,11 @@ export const ColumnHeaderItem = ({
           )}
           {!isColumnNumeric && columnTitleIconButtons}
         </div>
-
         {!isColumnNumeric &&
           !disableColumnMenu &&
           !column.disableColumnMenu &&
           columnMenuIconButton}
       </div>
-
       <ColumnHeaderSeparator
         resizable={!disableColumnResize && !!column.resizable}
         resizing={isResizing}
@@ -169,4 +166,3 @@ export const ColumnHeaderItem = ({
     </div>
   );
 };
-ColumnHeaderItem.displayName = 'ColumnHeaderItem';

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

@@ -12,7 +12,8 @@ export interface ColumnHeaderFilterIconProps {
   column: ColDef;
 }
 
-export const ColumnHeaderMenuIcon: React.FC<ColumnHeaderFilterIconProps> = ({ column }) => {
+export function ColumnHeaderMenuIcon(props: ColumnHeaderFilterIconProps) {
+  const { column } = props;
   const icons = useIcons();
   const apiRef = React.useContext(ApiContext);
   const columnMenuState = useGridSelector(apiRef, columnMenuStateSelector);
@@ -32,9 +33,9 @@ export const ColumnHeaderMenuIcon: React.FC<ColumnHeaderFilterIconProps> = ({ co
     [apiRef, column.field],
   );
 
-  const isOpen = columnMenuState.open && columnMenuState.field === column.field;
+  const open = columnMenuState.open && columnMenuState.field === column.field;
   return (
-    <div className={classnames('MuiDataGrid-menuIcon', { 'MuiDataGrid-menuOpen': isOpen })}>
+    <div className={classnames('MuiDataGrid-menuIcon', { 'MuiDataGrid-menuOpen': open })}>
       <IconButton
         className={'MuiDataGrid-menuIconButton'}
         aria-label="Menu"
@@ -45,4 +46,4 @@ export const ColumnHeaderMenuIcon: React.FC<ColumnHeaderFilterIconProps> = ({ co
       </IconButton>
     </div>
   );
-};
+}

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

@@ -15,32 +15,32 @@ function getIcon(icons: IconsOptions, direction: SortDirection) {
   return <Icon className="MuiDataGrid-sortIcon" />;
 }
 
-export const ColumnHeaderSortIcon: React.FC<ColumnHeaderSortIconProps> = React.memo(
-  ({ direction, index, hide }) => {
-    const icons = useIcons();
+export const ColumnHeaderSortIcon = React.memo(function ColumnHeaderSortIcon(
+  props: ColumnHeaderSortIconProps,
+) {
+  const { direction, index, hide } = props;
+  const icons = useIcons();
 
-    if (hide || direction == null) {
-      return null;
-    }
+  if (hide || direction == null) {
+    return null;
+  }
 
-    return (
-      <div className="MuiDataGrid-iconButtonContainer">
-        <div>
-          {index != null && (
-            <Badge badgeContent={index} color="default">
-              <IconButton aria-label="Sort" size="small">
-                {getIcon(icons, direction)}
-              </IconButton>
-            </Badge>
-          )}
-          {index == null && (
-            <IconButton aria-label="Sort" size="small">
+  return (
+    <div className="MuiDataGrid-iconButtonContainer">
+      <div>
+        {index != null && (
+          <Badge badgeContent={index} color="default">
+            <IconButton aria-label="Sort" title="Sort" size="small">
               {getIcon(icons, direction)}
             </IconButton>
-          )}
-        </div>
+          </Badge>
+        )}
+        {index == null && (
+          <IconButton aria-label="Sort" title="Sort" size="small">
+            {getIcon(icons, direction)}
+          </IconButton>
+        )}
       </div>
-    );
-  },
-);
-ColumnHeaderSortIcon.displayName = 'ColumnHeaderSortIcon';
+    </div>
+  );
+});

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

@@ -15,61 +15,62 @@ export interface ColumnsHeaderProps {
   renderCtx: Partial<RenderContextProps> | null;
 }
 
-export const ColumnsHeader = React.forwardRef<HTMLDivElement, ColumnsHeaderProps>((props, ref) => {
-  const { columns, hasScrollX, renderCtx, separatorProps } = props;
-  const wrapperCssClasses = `MuiDataGrid-colCellWrapper ${hasScrollX ? 'scroll' : ''}`;
-  const api = React.useContext(ApiContext);
-  const { disableColumnReorder } = React.useContext(OptionsContext);
-  const containerSizes = useGridSelector(api, containerSizesSelector);
+export const ColumnsHeader = React.forwardRef<HTMLDivElement, ColumnsHeaderProps>(
+  function ColumnsHeader(props, ref) {
+    const { columns, hasScrollX, renderCtx, separatorProps } = props;
+    const wrapperCssClasses = `MuiDataGrid-colCellWrapper ${hasScrollX ? 'scroll' : ''}`;
+    const api = React.useContext(ApiContext);
+    const { disableColumnReorder } = React.useContext(OptionsContext);
+    const containerSizes = useGridSelector(api, containerSizesSelector);
 
-  if (!api) {
-    throw new Error('Material-UI: ApiRef was not found in context.');
-  }
-  const lastRenderedColIndexes = React.useRef({
-    first: renderCtx?.firstColIdx,
-    last: renderCtx?.lastColIdx,
-  });
-  const [renderedCols, setRenderedCols] = React.useState(columns);
+    if (!api) {
+      throw new Error('Material-UI: ApiRef was not found in context.');
+    }
+    const lastRenderedColIndexes = React.useRef({
+      first: renderCtx?.firstColIdx,
+      last: renderCtx?.lastColIdx,
+    });
+    const [renderedCols, setRenderedCols] = React.useState(columns);
 
-  React.useEffect(() => {
-    if (renderCtx && renderCtx.firstColIdx != null && renderCtx.lastColIdx != null) {
-      setRenderedCols(columns.slice(renderCtx.firstColIdx, renderCtx.lastColIdx + 1));
+    React.useEffect(() => {
+      if (renderCtx && renderCtx.firstColIdx != null && renderCtx.lastColIdx != null) {
+        setRenderedCols(columns.slice(renderCtx.firstColIdx, renderCtx.lastColIdx + 1));
 
-      if (
-        lastRenderedColIndexes.current.first !== renderCtx.firstColIdx ||
-        lastRenderedColIndexes.current.last !== renderCtx.lastColIdx
-      ) {
-        lastRenderedColIndexes.current = {
-          first: renderCtx.firstColIdx,
-          last: renderCtx.lastColIdx,
-        };
+        if (
+          lastRenderedColIndexes.current.first !== renderCtx.firstColIdx ||
+          lastRenderedColIndexes.current.last !== renderCtx.lastColIdx
+        ) {
+          lastRenderedColIndexes.current = {
+            first: renderCtx.firstColIdx,
+            last: renderCtx.lastColIdx,
+          };
+        }
       }
-    }
-  }, [renderCtx, columns]);
+    }, [renderCtx, columns]);
 
-  const handleDragOver = !disableColumnReorder
-    ? (event) => api.current.onColHeaderDragOver(event, ref as React.RefObject<HTMLElement>)
-    : undefined;
+    const handleDragOver = !disableColumnReorder
+      ? (event) => api.current.onColHeaderDragOver(event, ref as React.RefObject<HTMLElement>)
+      : undefined;
 
-  return (
-    <React.Fragment>
-      <ScrollArea scrollDirection="left" />
-      {/* Header row isn't interactive, cells are, event delegation */}
-      {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
-      <div
-        ref={ref}
-        className={wrapperCssClasses}
-        aria-rowindex={1}
-        role="row"
-        style={{ minWidth: containerSizes?.totalSizes?.width }}
-        onDragOver={handleDragOver}
-      >
-        <LeftEmptyCell width={renderCtx?.leftEmptyWidth} />
-        <ColumnHeaderItemCollection columns={renderedCols} separatorProps={separatorProps} />
-        <RightEmptyCell width={renderCtx?.rightEmptyWidth} />
-      </div>
-      <ScrollArea scrollDirection="right" />
-    </React.Fragment>
-  );
-});
-ColumnsHeader.displayName = 'GridColumnsHeader';
+    return (
+      <React.Fragment>
+        <ScrollArea scrollDirection="left" />
+        {/* Header row isn't interactive, cells are, event delegation */}
+        {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
+        <div
+          ref={ref}
+          className={wrapperCssClasses}
+          aria-rowindex={1}
+          role="row"
+          style={{ minWidth: containerSizes?.totalSizes?.width }}
+          onDragOver={handleDragOver}
+        >
+          <LeftEmptyCell width={renderCtx?.leftEmptyWidth} />
+          <ColumnHeaderItemCollection columns={renderedCols} separatorProps={separatorProps} />
+          <RightEmptyCell width={renderCtx?.rightEmptyWidth} />
+        </div>
+        <ScrollArea scrollDirection="right" />
+      </React.Fragment>
+    );
+  },
+);

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

@@ -17,10 +17,8 @@ export interface ColumnHeadersItemCollectionProps {
   separatorProps: React.HTMLAttributes<HTMLDivElement>;
 }
 
-export const ColumnHeaderItemCollection: React.FC<ColumnHeadersItemCollectionProps> = ({
-  separatorProps,
-  columns,
-}) => {
+export function ColumnHeaderItemCollection(props: ColumnHeadersItemCollectionProps) {
+  const { separatorProps, columns } = props;
   const [resizingColField, setResizingColField] = React.useState('');
   const apiRef = React.useContext(ApiContext);
   const options = useGridSelector(apiRef, optionsSelector);
@@ -60,4 +58,4 @@ export const ColumnHeaderItemCollection: React.FC<ColumnHeadersItemCollectionPro
       {items}
     </React.Fragment>
   );
-};
+}

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

@@ -1,5 +1,5 @@
-import MenuItem from '@material-ui/core/MenuItem';
 import * as React from 'react';
+import MenuItem from '@material-ui/core/MenuItem';
 import { useGridSelector } from '../../../hooks/features/core/useGridSelector';
 import { PreferencePanelsValue } from '../../../hooks/features/preferencesPanel/preferencesPanelValue';
 import { optionsSelector } from '../../../hooks/utils/useOptionsProp';