fix: resolve React 18 key spreading warnings and update deprecated MUI v5 props

Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>

Author: YASHMAHAKAL

examples/custom-components/index.js

@@ -9,19 +9,18 @@ import TableViewCol from './TableViewCol';
 const CustomChip = (props) => {
   const { label, onDelete, columnNames, className, index } = props;
   return (<Chip
-      className={className}
-      variant="outlined"
-      color={columnNames[index].name === 'Company' ? 'secondary' : 'primary'}
-      label={label}
-      onDelete={onDelete}
+    className={className}
+    variant="outlined"
+    color={columnNames[index].name === 'Company' ? 'secondary' : 'primary'}
+    label={label}
+    onDelete={onDelete}
   />);
 };
 
 const CustomTooltip = (props) => {
   return (
-    <MuiTooltip 
-      title={props.title} 
-      interactive={true} 
+    <MuiTooltip
+      title={props.title}
       TransitionComponent={Fade}
       TransitionProps={{ timeout: 250 }}
       leaveDelay={250}>{props.children}</MuiTooltip>
@@ -72,31 +71,31 @@ class Example extends React.Component {
               return false;
             },
             display: (filterList, onChange, index, column) => (
-                <Select
-                    onChange={event => {
-                      filterList[index][0] = event.target.value;
-                      onChange(filterList[index], index, column);
-                    }}
-                    value={filterList[index]}
-                >
-                  <MenuItem value="Test Corp">{'Test Corp'}</MenuItem>
-                  <MenuItem value="Other Corp">{'Other Corp'}</MenuItem>
-                </Select>
+              <Select
+                onChange={event => {
+                  filterList[index][0] = event.target.value;
+                  onChange(filterList[index], index, column);
+                }}
+                value={filterList[index]}
+              >
+                <MenuItem value="Test Corp">{'Test Corp'}</MenuItem>
+                <MenuItem value="Other Corp">{'Other Corp'}</MenuItem>
+              </Select>
             )
           },
         },
       },
       { name: 'City', label: 'City Label', options: { filterList: ['Dallas'] } },
       { name: 'State' },
-      { 
-        name: 'Empty', 
-        options: { 
-          empty: true, 
-          filterType: 'checkbox', 
+      {
+        name: 'Empty',
+        options: {
+          empty: true,
+          filterType: 'checkbox',
           filterOptions: {
             renderValue: (val) => (val ? val : '(Empty)')
           }
-        } 
+        }
       },
     ];
     const data = [
@@ -116,16 +115,16 @@ class Example extends React.Component {
 
     return (
       <MUIDataTable
-          title={"ACME Employee list"}
-          data={data}
-          columns={columns}
-          options={options}
-          components={{
-            TableFilterList: CustomFilterList,
-            Tooltip: CustomTooltip,
-            Checkbox: CustomCheckbox,
-            TableViewCol: TableViewCol
-          }}
+        title={"ACME Employee list"}
+        data={data}
+        columns={columns}
+        options={options}
+        components={{
+          TableFilterList: CustomFilterList,
+          Tooltip: CustomTooltip,
+          Checkbox: CustomCheckbox,
+          TableViewCol: TableViewCol
+        }}
       />
     );
 

examples/customize-footer/CustomFooter.js

@@ -44,8 +44,8 @@ class CustomFooter extends React.Component {
                 'aria-label': textLabels.next,
               }}
               rowsPerPageOptions={[10,20,100]}
-              onChangePage={this.handlePageChange}
-              onChangeRowsPerPage={this.handleRowChange}
+              onPageChange={this.handlePageChange}
+              onRowsPerPageChange={this.handleRowChange}
             />
           </TableCell>
         </TableRow>

examples/customize-styling/index.js

@@ -192,7 +192,7 @@ class Example extends React.Component {
       },
       setTableProps: () => {
         return {
-          padding: this.state.denseTable ? 'none' : 'default',
+          padding: this.state.denseTable ? 'none' : 'normal',
 
           // material ui v4 only
           size: this.state.denseTable ? 'small' : 'medium',

src/components/Popover.js

@@ -45,7 +45,6 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
   };
 
   const triggerProps = {
-    key: 'content',
     onClick: (event) => {
       if (trigger.props.onClick) trigger.props.onClick();
       handleClick(event);
@@ -54,7 +53,9 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
 
   return (
     <>
-      <span {...triggerProps}>{trigger}</span>
+      <span key="content" {...triggerProps}>
+        {trigger}
+      </span>
       <MuiPopover
         elevation={2}
         open={isOpen}