[DataGrid] Fix ElementType usage (@cherniavskii) (#12505)

Co-authored-by: Andrew Cherniavskii <andrew@mui.com>
mui · Mar 19, 2024 · fc57c27 · fc57c27
1 parent 511bb3e
commit fc57c27
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 104 deletions.
diff --git a/packages/grid/x-data-grid/src/components/GridPagination.tsx b/packages/grid/x-data-grid/src/components/GridPagination.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import TablePagination, {
   tablePaginationClasses,
   TablePaginationProps,
@@ -30,93 +31,112 @@ const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({
 
 type MutableArray<A> = A extends readonly (infer T)[] ? T[] : never;
 
-export const GridPagination = React.forwardRef<unknown, Partial<TablePaginationProps>>(
-  function GridPagination(props, ref) {
-    const apiRef = useGridApiContext();
-    const rootProps = useGridRootProps();
-    const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
-    const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
-
-    const rowCount = React.useMemo(
-      () => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0,
-      [rootProps.rowCount, visibleTopLevelRowCount],
-    );
-
-    const lastPage = React.useMemo(
-      () => Math.floor(rowCount / (paginationModel.pageSize || 1)),
-      [rowCount, paginationModel.pageSize],
-    );
-
-    const handlePageSizeChange = React.useCallback(
-      (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
-        const pageSize = Number(event.target.value);
-        apiRef.current.setPageSize(pageSize);
-      },
-      [apiRef],
-    );
-
-    const handlePageChange = React.useCallback<TablePaginationProps['onPageChange']>(
-      (_, page) => {
-        apiRef.current.setPage(page);
-      },
-      [apiRef],
-    );
-
-    const isPageSizeIncludedInPageSizeOptions = (pageSize: number) => {
-      for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
-        const option = rootProps.pageSizeOptions[i];
-        if (typeof option === 'number') {
-          if (option === pageSize) {
-            return true;
-          }
-        } else if (option.value === pageSize) {
+interface GridPaginationOwnProps {
+  component?: React.ElementType;
+}
+
+const GridPagination = React.forwardRef<
+  unknown,
+  Partial<
+    // See https://github.com/mui/material-ui/issues/40427
+    Omit<TablePaginationProps, 'component'>
+  > &
+    GridPaginationOwnProps
+>(function GridPagination(props, ref) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+
+  const rowCount = React.useMemo(
+    () => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0,
+    [rootProps.rowCount, visibleTopLevelRowCount],
+  );
+
+  const lastPage = React.useMemo(
+    () => Math.floor(rowCount / (paginationModel.pageSize || 1)),
+    [rowCount, paginationModel.pageSize],
+  );
+
+  const handlePageSizeChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+      const pageSize = Number(event.target.value);
+      apiRef.current.setPageSize(pageSize);
+    },
+    [apiRef],
+  );
+
+  const handlePageChange = React.useCallback<TablePaginationProps['onPageChange']>(
+    (_, page) => {
+      apiRef.current.setPage(page);
+    },
+    [apiRef],
+  );
+
+  const isPageSizeIncludedInPageSizeOptions = (pageSize: number) => {
+    for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      const option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
           return true;
         }
-      }
-      return false;
-    };
-
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const warnedOnceMissingInPageSizeOptions = React.useRef(false);
-
-      const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
-      if (
-        !warnedOnceMissingInPageSizeOptions.current &&
-        !rootProps.autoPageSize &&
-        !isPageSizeIncludedInPageSizeOptions(pageSize)
-      ) {
-        console.warn(
-          [
-            `MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``,
-            `Add it to show the pagination select.`,
-          ].join('\n'),
-        );
-
-        warnedOnceMissingInPageSizeOptions.current = true;
+      } else if (option.value === pageSize) {
+        return true;
       }
     }
+    return false;
+  };
 
-    const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize)
-      ? rootProps.pageSizeOptions
-      : [];
-
-    return (
-      <GridPaginationRoot
-        ref={ref}
-        component="div"
-        count={rowCount}
-        page={paginationModel.page <= lastPage ? paginationModel.page : lastPage}
-        // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
-        // for x-data-grid is past the fix.
-        // Note that Material UI will not mutate the array, so this is safe.
-        rowsPerPageOptions={pageSizeOptions as MutableArray<typeof pageSizeOptions>}
-        rowsPerPage={paginationModel.pageSize}
-        onPageChange={handlePageChange}
-        onRowsPerPageChange={handlePageSizeChange}
-        {...apiRef.current.getLocaleText('MuiTablePagination')}
-        {...props}
-      />
-    );
-  },
-);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const warnedOnceMissingInPageSizeOptions = React.useRef(false);
+
+    const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
+    if (
+      !warnedOnceMissingInPageSizeOptions.current &&
+      !rootProps.autoPageSize &&
+      !isPageSizeIncludedInPageSizeOptions(pageSize)
+    ) {
+      console.warn(
+        [
+          `MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`,
+          `Add it to show the pagination select.`,
+        ].join('\n'),
+      );
+
+      warnedOnceMissingInPageSizeOptions.current = true;
+    }
+  }
+
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize)
+    ? rootProps.pageSizeOptions
+    : [];
+
+  return (
+    <GridPaginationRoot
+      ref={ref}
+      component="div"
+      count={rowCount}
+      page={paginationModel.page <= lastPage ? paginationModel.page : lastPage}
+      // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
+      // for x-data-grid is past the fix.
+      // Note that Material UI will not mutate the array, so this is safe.
+      rowsPerPageOptions={pageSizeOptions as MutableArray<typeof pageSizeOptions>}
+      rowsPerPage={paginationModel.pageSize}
+      onPageChange={handlePageChange}
+      onRowsPerPageChange={handlePageSizeChange}
+      {...apiRef.current.getLocaleText('MuiTablePagination')}
+      {...props}
+    />
+  );
+});
+
+GridPagination.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  component: PropTypes.elementType,
+} as any;
+
+export { GridPagination };
diff --git a/packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx
@@ -5,23 +5,26 @@ import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-export type GridActionsCellItemProps = {
+interface GridActionsCellItemCommonProps {
   label: string;
   icon?: React.ReactElement;
   /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
   component?: React.ElementType;
-} & (
-  | ({ showInMenu?: false; icon: React.ReactElement } & IconButtonProps)
-  | ({
-      showInMenu: true;
-      /**
-       * If false, the menu will not close when this item is clicked.
-       * @default true
-       */
-      closeMenuOnClick?: boolean;
-      closeMenu?: () => void;
-    } & MenuItemProps)
-);
+}
+
+export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
+  (
+    | ({ showInMenu?: false; icon: React.ReactElement } & Omit<IconButtonProps, 'component'>)
+    | ({
+        showInMenu: true;
+        /**
+         * If false, the menu will not close when this item is clicked.
+         * @default true
+         */
+        closeMenuOnClick?: boolean;
+        closeMenu?: () => void;
+      } & Omit<MenuItemProps, 'component'>)
+  );
 
 const GridActionsCellItem = React.forwardRef<HTMLElement, GridActionsCellItemProps>(
   (props, ref) => {
@@ -80,6 +83,10 @@ GridActionsCellItem.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
+  component: PropTypes.elementType,
   icon: PropTypes.element,
   label: PropTypes.string.isRequired,
   showInMenu: PropTypes.bool,

diff --git a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx
@@ -322,8 +322,8 @@ describe('<DataGrid /> - Pagination', () => {
           />,
         );
       }).toWarnDev([
-        `MUI: The page size \`${pageSize}\` is not preset in the \`pageSizeOptions\``,
-        `MUI: The page size \`${pageSize}\` is not preset in the \`pageSizeOptions\``,
+        `MUI X: The page size \`${pageSize}\` is not preset in the \`pageSizeOptions\``,
+        `MUI X: The page size \`${pageSize}\` is not preset in the \`pageSizeOptions\``,
       ]);
     });
 
@@ -350,17 +350,17 @@ describe('<DataGrid /> - Pagination', () => {
       expect(() => {
         render(<BaselineTestCase paginationModel={{ pageSize, page: 0 }} />);
       }).toWarnDev([
-        `MUI: The page size \`${pageSize}\` is not preset in the \`pageSizeOptions\``,
-        `MUI: The page size \`${pageSize}\` is not preset in the \`pageSizeOptions\``,
+        `MUI X: The page size \`${pageSize}\` is not preset in the \`pageSizeOptions\``,
+        `MUI X: The page size \`${pageSize}\` is not preset in the \`pageSizeOptions\``,
       ]);
     });
 
     it('should display a warning if the default pageSize given as props is not in the prop pageSizeOptions', () => {
       expect(() => {
         render(<BaselineTestCase pageSizeOptions={[25, 50]} />);
       }).toWarnDev([
-        `MUI: The page size \`100\` is not preset in the \`pageSizeOptions\``,
-        `MUI: The page size \`100\` is not preset in the \`pageSizeOptions\``,
+        `MUI X: The page size \`100\` is not preset in the \`pageSizeOptions\``,
+        `MUI X: The page size \`100\` is not preset in the \`pageSizeOptions\``,
       ]);
     });