added jsx-a11y to eslint. material-ui upgraded to 1.0.0.beta.26. now …

…injecting MUIPopover with container

.eslintrc

@@ -27,14 +27,21 @@
     "mocha": true,
     "node": true
   },
+  "extends": [
+   "plugin:jsx-a11y/recommended"
+  ],
   "rules": {
     "no-console": "off",
     "semi": 2,
     "no-tabs": 2,
+    "jsx-a11y/no-autofocus": [ 2, {
+      "ignoreNonDOM": true
+    }]
   },
   "plugins": [
     "import",
     "react",
+    "jsx-a11y",
     "filenames"
   ]
 }

package.json

@@ -48,9 +48,10 @@
     "cross-env": "^5.1.1",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
-    "eslint": "^4.13.1",
+    "eslint": "^4.14.0",
     "eslint-plugin-filenames": "^1.2.0",
     "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.5.1",
     "ignore-styles": "^5.0.1",
     "jsdom": "^11.5.1",
@@ -77,7 +78,7 @@
     "lodash.get": "^4.4.2",
     "lodash.memoize": "^4.1.2",
     "lodash.merge": "^4.6.0",
-    "material-ui": "^1.0.0-beta.22",
+    "material-ui": "^1.0.0-beta.26",
     "material-ui-icons": "^1.0.0-beta.17",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",

src/MUIDataTable.js

@@ -7,7 +7,6 @@ import MUIDataTableFilterList from "./MUIDataTableFilterList";
 import MUIDataTableBody from "./MUIDataTableBody";
 import MUIDataTableHead from "./MUIDataTableHead";
 import MUIDataTablePagination from "./MUIDataTablePagination";
-import debounce from "lodash.debounce";
 import { getStyle, DataStyles } from "./DataStyles";
 
 const defaultTableStyles = {

src/MUIDataTableFilter.js

@@ -50,9 +50,9 @@ class MUIDataTableFilter extends React.Component {
               })}>
               FILTERS
             </Typography>
-            <a className={filterStyles.resetLink} tabIndex={0} aria-label="Reset Filters" onClick={onFilterReset}>
+            <button className={filterStyles.resetLink} tabIndex={0} aria-label="Reset Filters" onClick={onFilterReset}>
               RESET
-            </a>
+            </button>
           </div>
           <div className={filterStyles.filtersSelected} />
         </div>

src/MUIDataTableHeadCell.js

@@ -67,7 +67,7 @@ class MUIDataTableHeadCell extends React.Component {
             </span>
           </Tooltip>
         ) : (
-          <span tabIndex={0}>{children}</span>
+          children
         )}
       </TableCell>
     );

src/MUIDataTableToolbar.js

@@ -142,6 +142,7 @@ export const defaultFilterStyles = {
     marginLeft: "24px",
     fontSize: "12px",
     cursor: "pointer",
+    border: "none",
     "&:hover": {
       color: "#FF0000",
     },
@@ -282,6 +283,7 @@ class MUIDataTableToolbar extends React.Component {
       searchTextUpdate,
       toggleViewColumn,
       title,
+      tableRef,
     } = this.props;
 
     const { showSearch } = this.state;
@@ -345,7 +347,7 @@ class MUIDataTableToolbar extends React.Component {
                   name="MUIDataTableViewCol"
                   styles={getStyle(options, "viewColumns")}>
                   {viewColStyles => (
-                    <MUIPopover refExit={this.setActiveIcon.bind(null)}>
+                    <MUIPopover refExit={this.setActiveIcon.bind(null)} container={tableRef}>
                       <MUIPopoverTarget>
                         <Tooltip title="View Columns">
                           <IconButton
@@ -377,7 +379,7 @@ class MUIDataTableToolbar extends React.Component {
                   name="MUIDataTableFilter"
                   styles={getStyle(options, "filterView")}>
                   {filterStyles => (
-                    <MUIPopover refExit={this.setActiveIcon.bind(null)}>
+                    <MUIPopover refExit={this.setActiveIcon.bind(null)} container={tableRef}>
                       <MUIPopoverTarget>
                         <Tooltip title="Filter Table">
                           <IconButton

src/MUIPopover/MUIPopover.js

@@ -68,7 +68,9 @@ class MUIPopover extends React.Component {
   render() {
     let popoverRender = [];
 
-    React.Children.map(this.props.children, (child, index) => {
+    const { className, placement, refClose, refExit, children, ...providedProps } = this.props;
+
+    React.Children.map(children, (child, index) => {
       if (child.type === MUIPopoverContent) {
         const transformOriginSpecs = {
           vertical: "top",
@@ -90,7 +92,8 @@ class MUIPopover extends React.Component {
             anchorEl={this.anchorEl}
             ref={el => this.popoverEl}
             anchorOrigin={anchorOriginSpecs}
-            transformOrigin={transformOriginSpecs}>
+            transformOrigin={transformOriginSpecs}
+            {...providedProps}>
             {child}
           </Popover>
         );