[TablePagination] Add SelectProps property

pages/api/table-pagination.md

@@ -19,12 +19,13 @@ A `TableCell` based component for placing inside `TableFooter` for pagination.
 | <span class="prop-name required">count *</span> | <span class="prop-type">number |  | The total number of rows. |
 | <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func | <span class="prop-default">({ from, to, count }) => `${from}-${to} of ${count}`</span> | Useful to customize the displayed rows label. |
 | <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">node | <span class="prop-default">'Rows per page:'</span> | Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }` object. |
-| <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object |  | Properties applied to the next arrow `IconButton` component. |
+| <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object |  | Properties applied to the next arrow `IconButton` element. |
 | <span class="prop-name required">onChangePage *</span> | <span class="prop-type">func |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback<br>*page:* The page selected |
 | <span class="prop-name">onChangeRowsPerPage</span> | <span class="prop-type">func |  | Callback fired when the number of rows per page is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name required">page *</span> | <span class="prop-type">number |  | The zero-based index of the current page. |
 | <span class="prop-name required">rowsPerPage *</span> | <span class="prop-type">number |  | The number of rows per page. |
 | <span class="prop-name">rowsPerPageOptions</span> | <span class="prop-type">array | <span class="prop-default">[5, 10, 25]</span> | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. |
+| <span class="prop-name">SelectProps</span> | <span class="prop-type">object |  | Properties applied to the rows per page `Select` element. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

src/Table/TablePagination.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { TableCellProps, TableCellClassKey } from './TableCell.d';
 import { IconButtonProps } from '../IconButton/IconButton';
+import { SelectProps } from '../Select/Select';
 
 export interface LabelDisplayedRowsArgs {
   from: number;
@@ -24,6 +25,7 @@ export interface TablePaginationProps
   page: number;
   rowsPerPage: number;
   rowsPerPageOptions?: number[];
+  SelectProps?: Partial<SelectProps>;
 }
 
 export type TablePaginationBaseProps = TableCellProps;

src/Table/TablePagination.js

@@ -80,6 +80,7 @@ class TablePagination extends React.Component {
       page,
       rowsPerPage,
       rowsPerPageOptions,
+      SelectProps,
       ...other
     } = this.props;
 
@@ -108,6 +109,7 @@ class TablePagination extends React.Component {
               input={<Input className={classes.input} disableUnderline />}
               value={rowsPerPage}
               onChange={onChangeRowsPerPage}
+              {...SelectProps}
             >
               {rowsPerPageOptions.map(rowsPerPageOption => (
                 <MenuItem key={rowsPerPageOption} value={rowsPerPageOption}>
@@ -175,7 +177,7 @@ TablePagination.propTypes = {
    */
   labelRowsPerPage: PropTypes.node,
   /**
-   * Properties applied to the next arrow `IconButton` component.
+   * Properties applied to the next arrow `IconButton` element.
    */
   nextIconButtonProps: PropTypes.object,
   /**
@@ -204,6 +206,10 @@ TablePagination.propTypes = {
    * available, no select field will be displayed.
    */
   rowsPerPageOptions: PropTypes.array,
+  /**
+   * Properties applied to the rows per page `Select` element.
+   */
+  SelectProps: PropTypes.object,
 };
 
 TablePagination.defaultProps = {

src/Table/TablePaginationActions.js

@@ -61,7 +61,7 @@ class TablePaginationActions extends React.Component {
 
 TablePaginationActions.propTypes = {
   /**
-   * Properties applied to the back arrow `IconButton` component.
+   * Properties applied to the back arrow `IconButton` element.
    */
   backIconButtonProps: PropTypes.object,
   /**
@@ -73,7 +73,7 @@ TablePaginationActions.propTypes = {
    */
   count: PropTypes.number.isRequired,
   /**
-   * Properties applied to the next arrow `IconButton` component.
+   * Properties applied to the next arrow `IconButton` element.
    */
   nextIconButtonProps: PropTypes.object,
   /**