From 370cd60d6e31abe08f9dd63e6fa842b2a80fce4a Mon Sep 17 00:00:00 2001
From: John Betancur <johnnyazee@gmail.com>
Date: Wed, 30 May 2018 17:04:21 -0400
Subject: [PATCH] bug fixes | add fixedHeader feature

---
 README.md                                     |   3 +-
 package.json                                  |  10 +-
 src/DataTable/DataTable.js                    |  42 ++-
 src/DataTable/DataTablePropTypes.js           |   2 +
 src/DataTable/ResponsiveWrapper.js            |   5 +-
 src/DataTable/Table.js                        |   4 +-
 src/DataTable/TableBody.js                    |   7 +-
 src/DataTable/TableRow.js                     |   1 +
 src/DataTable/TableWrapper.js                 |   2 +
 src/DataTable/__tests__/DataTable.test.js     |  43 +++
 .../__snapshots__/DataTable.test.js.snap      | 286 ++++++++++++++++++
 .../ResponsiveWrapper.test.js.snap            |   4 +
 .../__snapshots__/Table.test.js.snap          |  18 +-
 .../__snapshots__/TableRow.test.js.snap       |   7 +
 .../__snapshots__/TableWrapper.test.js.snap   |   2 +
 src/DataTable/statemgmt.js                    |   2 +-
 yarn.lock                                     | 284 +++++++++++++----
 17 files changed, 637 insertions(+), 85 deletions(-)

diff --git a/README.md b/README.md
index 7256ef97..930c9d3d 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Creating yet another React table library came out of nescessity while developing
 
 If you want to achieve balance with the force and want a simple, sortable, and flexible table library give React Data Table Component a chance. If you want an Excel clone and need to pivot large data sets then this is not the React table library you are looking for 👋
   
-React Data Table Component is not yet Feature Complete and still under **Development** - though I do not anticpate the API to change.
+React Data Table Component is not yet Feature Complete and still under **Development** - though I do not anticpate the existing API to change.
 
 ## Initial features available:
 
@@ -105,6 +105,7 @@ Nothing new here - we are using an array of object literals and properties to de
 | customTheme | object | no |  | Override the [default theme](https://github.com/jbetancur/react-data-table-component/blob/master/src/themes/default.js), by overriding specifc props. Your changes will be merged. [See Theming](#theming) for more information |
 | disabled | bool | no | false | disables the Table section |
 | noHeader | bool | no | false | removes the table header. `title`, `contextTitle` and `contextActions` will be ignored |
+| fixedHeader | bool | no | false | makes the table header fixed allowing you to scroll the table body |
 
 #### Advanced Selectable Component Options
 Sometimes 3rd party checkbox components have their own way of handling indeterminate state. We don't want React Data Table hardcoded to a specific ui lib or custom component, so instead a "hook" is provided to allow you to pass a function that will be resolved by React Data Table's internal `Checkbox` for use with `indeterminate` functionality.
diff --git a/package.json b/package.json
index a657ca2f..c2d15e1d 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@storybook/addon-links": "^3.3.15",
     "@storybook/react": "^3.3.15",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.3",
     "babel-jest": "^22.4.3",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-module-resolver": "^3.1.1",
@@ -81,10 +81,10 @@
     "eslint-config-react-app": "^2.1.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
     "eslint-plugin-flowtype": "^2.46.1",
-    "eslint-plugin-import": "^2.10.0",
-    "eslint-plugin-jest": "^21.15.0",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-jest": "^21.17.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react": "^7.8.2",
     "flow-bin": "^0.67.1",
     "flow-typed": "2.3.0",
     "jest": "^22.4.3",
@@ -100,7 +100,7 @@
     "rollup-plugin-scss": "^0.4.0",
     "rollup-plugin-uglify": "^3.0.0",
     "styled-components": "^3.2.5",
-    "stylelint": "^9.1.3",
+    "stylelint": "^9.2.1",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.3.1",
diff --git a/src/DataTable/DataTable.js b/src/DataTable/DataTable.js
index d2a21e00..a92428b3 100644
--- a/src/DataTable/DataTable.js
+++ b/src/DataTable/DataTable.js
@@ -18,23 +18,30 @@ import TableWrapper from './TableWrapper';
 import NoData from './NoData';
 import { propTypes, defaultProps } from './DataTablePropTypes';
 import { decorateColumns, getSortDirection, calcFirstCellIndex } from './util';
-import { handleSelectAll, handleRowChecked, toggleExpand, handleSort, clearSelectedRows } from './statemgmt';
+import { handleSelectAll, handleRowChecked, toggleExpand, handleSort, clearSelected } from './statemgmt';
 import defaultTheme from '../themes/default';
 
+const recalculateRows = ({ defaultSortAsc, defaultSortField, data }) => {
+  const sortDirection = getSortDirection(defaultSortAsc);
+
+  return defaultSortField ? orderBy(data, defaultSortField, sortDirection) : data;
+};
+
 class DataTable extends Component {
   static propTypes = propTypes;
   static defaultProps = defaultProps;
 
   static getDerivedStateFromProps(props, state) {
-    // allow clearing of rows via passed clearSelectedRows prop
+    // allow clearing of rows via passed clearSelectedRows toggle prop
     if (props.clearSelectedRows !== state.clearSelectedRows) {
-      return clearSelectedRows(props.clearSelectedRows);
+      return clearSelected(props.clearSelectedRows);
     }
 
     // Keep data state in sync if it changes
-    if (props.data !== state.rows) {
+    if (props.data !== state.data) {
       return {
-        rows: orderBy(props.data, state.sortColumn, state.sortDirection),
+        data: props.data,
+        rows: recalculateRows(props),
       };
     }
 
@@ -60,10 +67,14 @@ class DataTable extends Component {
       selectedRows: [],
       sortColumn: props.defaultSortField,
       sortDirection,
-      rows: props.defaultSortField ? orderBy(props.data, props.defaultSortField, sortDirection) : props.data,
+      rows: recalculateRows(props),
       clearSelectedRows: false,
+      // eslint-disable-next-line react/no-unused-state
       defaultSortAsc: props.defaultSortAsc,
+      // eslint-disable-next-line react/no-unused-state
       defaultSortField: props.defaultSortField,
+      // eslint-disable-next-line react/no-unused-state
+      data: props.data,
     };
   }
 
@@ -73,7 +84,17 @@ class DataTable extends Component {
       || prevState.sortDirection !== this.state.sortDirection
       || prevState.sortColumn !== this.state.sortColumn)
     ) {
-      this.props.onTableUpdate(this.state);
+      const { allSelected, selectedCount, selectedRows, rows, sortColumn, sortDirection, clearSelectedRows } = this.state;
+
+      this.props.onTableUpdate({
+        allSelected,
+        selectedCount,
+        selectedRows,
+        rows,
+        sortColumn,
+        sortDirection,
+        clearSelectedRows,
+      });
     }
   }
 
@@ -247,6 +268,7 @@ class DataTable extends Component {
       noDataComponent,
       disabled,
       noHeader,
+      fixedHeader,
     } = this.props;
 
     const {
@@ -288,7 +310,11 @@ class DataTable extends Component {
               <Table disabled={disabled}>
                 {this.renderTableHead()}
 
-                <TableBody>
+                <TableBody
+                  fixedHeader={fixedHeader}
+                  hasOffset={overflowY}
+                  offset={overflowYOffset}
+                >
                   {this.renderRows()}
                 </TableBody>
               </Table>}
diff --git a/src/DataTable/DataTablePropTypes.js b/src/DataTable/DataTablePropTypes.js
index dc45f5ba..ef15cfff 100644
--- a/src/DataTable/DataTablePropTypes.js
+++ b/src/DataTable/DataTablePropTypes.js
@@ -56,6 +56,7 @@ export const propTypes = {
   disabled: PropTypes.bool,
   noHeader: PropTypes.bool,
   onRowClicked: PropTypes.func,
+  fixedHeader: PropTypes.bool,
 };
 
 export const defaultProps = {
@@ -93,4 +94,5 @@ export const defaultProps = {
   disabled: false,
   noHeader: false,
   onRowClicked: null,
+  fixedHeader: false,
 };
diff --git a/src/DataTable/ResponsiveWrapper.js b/src/DataTable/ResponsiveWrapper.js
index 451e3b94..4f1b7842 100644
--- a/src/DataTable/ResponsiveWrapper.js
+++ b/src/DataTable/ResponsiveWrapper.js
@@ -6,8 +6,9 @@ import styled, { css } from 'styled-components';
   https://www.brunildo.org/test/Overflowxy2.html
 */
 
-const TableWrapper = styled.div`
+const ResponsiveWrapper = styled.div`
   position: relative;
+  width: 100%;
   ${props => props.responsive && 'overflow-x: auto'};
   ${props => props.overflowY && props.responsive && props.overflowYOffset && css`
     padding-bottom: ${props.overflowYOffset};
@@ -15,4 +16,4 @@ const TableWrapper = styled.div`
   `};
 `;
 
-export default TableWrapper;
+export default ResponsiveWrapper;
diff --git a/src/DataTable/Table.js b/src/DataTable/Table.js
index e4d7ff40..976c4e29 100644
--- a/src/DataTable/Table.js
+++ b/src/DataTable/Table.js
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
 const TableStyle = styled.div`
-  display: table;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   max-width: 100%;
-  border-collapse: collapse;
   ${props => props.disabled && 'pointer-events: none'};
   ${props => props.disabled && 'opacity: 0.4'};
 `;
diff --git a/src/DataTable/TableBody.js b/src/DataTable/TableBody.js
index 3219d11a..98c00986 100644
--- a/src/DataTable/TableBody.js
+++ b/src/DataTable/TableBody.js
@@ -1,7 +1,10 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const TableBody = styled.div`
-  /* future styling */
+  ${props => props.fixedHeader && css`
+    max-height: ${props.hasOffset ? `calc(100vh - ${props.offset || 0})` : '100vh'};
+    overflow: scroll;
+  `};
 `;
 
 export default TableBody;
diff --git a/src/DataTable/TableRow.js b/src/DataTable/TableRow.js
index d08ae024..65f46180 100644
--- a/src/DataTable/TableRow.js
+++ b/src/DataTable/TableRow.js
@@ -8,6 +8,7 @@ import { determineExpanderRowIdentifier, isExpandedRow } from './util';
 
 const TableRowStyle = styled.div`
   display: flex;
+  width: 100%;
   border-top: 1px solid ${props => props.theme.rows.borderColor};
   ${props => props.striped && css`
       &:nth-child(odd) {
diff --git a/src/DataTable/TableWrapper.js b/src/DataTable/TableWrapper.js
index db9c746b..24091086 100644
--- a/src/DataTable/TableWrapper.js
+++ b/src/DataTable/TableWrapper.js
@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 
 const TableWrapper = styled.div`
+  display: table;
   position: relative;
   height: 100%;
+  width: 100%;
 `;
 
 export default TableWrapper;
diff --git a/src/DataTable/__tests__/DataTable.test.js b/src/DataTable/__tests__/DataTable.test.js
index 27ad361b..cdbdf8aa 100644
--- a/src/DataTable/__tests__/DataTable.test.js
+++ b/src/DataTable/__tests__/DataTable.test.js
@@ -5,8 +5,51 @@ import { shallow } from 'enzyme';
 
 import DataTable from '../DataTable';
 
+// eslint-disable-next-line arrow-body-style
+jest.mock('shortid', () => {
+  return {
+    generate: jest.fn(() => 1),
+  };
+});
+
+// eslint-disable-next-line arrow-body-style
+const dataMock = () => {
+  return {
+    columns: [{ name: 'Test', selector: 'some.name' }],
+    data: [{ id: 1, some: { name: 'Henry the 8th' } }],
+  };
+};
+
 test('component <DataTable /> should render correctly', () => {
   const wrapper = shallow(<DataTable data={[]} columns={[]} />);
 
   expect(wrapper.dive().dive()).toMatchSnapshot();
 });
+
+test('component <DataTable /> should render correctly with columns/data', () => {
+  const mock = dataMock();
+  const wrapper = shallow(<DataTable data={mock.data} columns={mock.columns} />);
+
+  expect(wrapper.dive().dive()).toMatchSnapshot();
+});
+
+test('component <DataTable /> should render correctly if the keyField is overriden', () => {
+  const mock = dataMock();
+  const data = [{ uuid: 1, some: { name: 'Henry the 8th' } }];
+  const wrapper = shallow(<DataTable data={data} columns={mock.columns} keyField="uuid" />);
+
+  expect(wrapper.dive().dive()).toMatchSnapshot();
+});
+
+
+test('component <DataTable /> should render correctly with a default sort field', () => {
+  const mock = dataMock();
+  const wrapper = shallow(<DataTable
+    data={mock.data}
+    columns={mock.columns}
+    defaultSortField="some.name"
+  />);
+
+  expect(wrapper.dive().dive()).toMatchSnapshot();
+});
+
diff --git a/src/DataTable/__tests__/__snapshots__/DataTable.test.js.snap b/src/DataTable/__tests__/__snapshots__/DataTable.test.js.snap
index f100c732..13bbf044 100644
--- a/src/DataTable/__tests__/__snapshots__/DataTable.test.js.snap
+++ b/src/DataTable/__tests__/__snapshots__/DataTable.test.js.snap
@@ -3,6 +3,7 @@
 exports[`component <DataTable /> should render correctly 1`] = `
 .c0 {
   position: relative;
+  width: 100%;
   overflow-x: auto;
 }
 
@@ -23,3 +24,288 @@ exports[`component <DataTable /> should render correctly 1`] = `
   </TableWrapper>
 </div>
 `;
+
+exports[`component <DataTable /> should render correctly if the keyField is overriden 1`] = `
+.c0 {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+}
+
+<div
+  className="c0"
+  style={Object {}}
+>
+  <WithTheme(TableHeader)
+    contextActions={Array []}
+    contextTitle="0 item selected"
+    showContextMenu={false}
+    title=""
+  />
+  <TableWrapper>
+    <Table__TableStyle
+      disabled={false}
+    >
+      <WithTheme(TableHead)>
+        <TableHeadRow>
+          <WithTheme(TableCol)
+            column={
+              Object {
+                "id": 1,
+                "name": "Test",
+                "selector": "some.name",
+              }
+            }
+            firstCellIndex={0}
+            key="1"
+            onColumnClick={[Function]}
+            sortDirection="asc"
+            sortField={null}
+            sortIcon={false}
+          />
+        </TableHeadRow>
+      </WithTheme(TableHead)>
+      <TableBody
+        fixedHeader={false}
+        hasOffset={false}
+        offset="250px"
+      >
+        <WithTheme(TableRow)
+          checkboxComponent="input"
+          checkboxComponentOptions={Object {}}
+          columns={
+            Array [
+              Object {
+                "id": 1,
+                "name": "Test",
+                "selector": "some.name",
+              },
+            ]
+          }
+          expandableRows={false}
+          firstCellIndex={0}
+          highlightOnHover={false}
+          index={0}
+          key="1"
+          keyField="uuid"
+          onRowClicked={[Function]}
+          onRowSelected={[Function]}
+          onToggled={[Function]}
+          pointerOnHover={false}
+          row={
+            Object {
+              "some": Object {
+                "name": "Henry the 8th",
+              },
+              "uuid": 1,
+            }
+          }
+          rows={
+            Array [
+              Object {
+                "some": Object {
+                  "name": "Henry the 8th",
+                },
+                "uuid": 1,
+              },
+            ]
+          }
+          selectableRows={false}
+          selectedRows={Array []}
+          striped={false}
+        />
+      </TableBody>
+    </Table__TableStyle>
+  </TableWrapper>
+</div>
+`;
+
+exports[`component <DataTable /> should render correctly with a default sort field 1`] = `
+.c0 {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+}
+
+<div
+  className="c0"
+  style={Object {}}
+>
+  <WithTheme(TableHeader)
+    contextActions={Array []}
+    contextTitle="0 item selected"
+    showContextMenu={false}
+    title=""
+  />
+  <TableWrapper>
+    <Table__TableStyle
+      disabled={false}
+    >
+      <WithTheme(TableHead)>
+        <TableHeadRow>
+          <WithTheme(TableCol)
+            column={
+              Object {
+                "id": 1,
+                "name": "Test",
+                "selector": "some.name",
+              }
+            }
+            firstCellIndex={0}
+            key="1"
+            onColumnClick={[Function]}
+            sortDirection="asc"
+            sortField="some.name"
+            sortIcon={false}
+          />
+        </TableHeadRow>
+      </WithTheme(TableHead)>
+      <TableBody
+        fixedHeader={false}
+        hasOffset={false}
+        offset="250px"
+      >
+        <WithTheme(TableRow)
+          checkboxComponent="input"
+          checkboxComponentOptions={Object {}}
+          columns={
+            Array [
+              Object {
+                "id": 1,
+                "name": "Test",
+                "selector": "some.name",
+              },
+            ]
+          }
+          expandableRows={false}
+          firstCellIndex={0}
+          highlightOnHover={false}
+          index={0}
+          key="1"
+          keyField="id"
+          onRowClicked={[Function]}
+          onRowSelected={[Function]}
+          onToggled={[Function]}
+          pointerOnHover={false}
+          row={
+            Object {
+              "id": 1,
+              "some": Object {
+                "name": "Henry the 8th",
+              },
+            }
+          }
+          rows={
+            Array [
+              Object {
+                "id": 1,
+                "some": Object {
+                  "name": "Henry the 8th",
+                },
+              },
+            ]
+          }
+          selectableRows={false}
+          selectedRows={Array []}
+          striped={false}
+        />
+      </TableBody>
+    </Table__TableStyle>
+  </TableWrapper>
+</div>
+`;
+
+exports[`component <DataTable /> should render correctly with columns/data 1`] = `
+.c0 {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+}
+
+<div
+  className="c0"
+  style={Object {}}
+>
+  <WithTheme(TableHeader)
+    contextActions={Array []}
+    contextTitle="0 item selected"
+    showContextMenu={false}
+    title=""
+  />
+  <TableWrapper>
+    <Table__TableStyle
+      disabled={false}
+    >
+      <WithTheme(TableHead)>
+        <TableHeadRow>
+          <WithTheme(TableCol)
+            column={
+              Object {
+                "id": 1,
+                "name": "Test",
+                "selector": "some.name",
+              }
+            }
+            firstCellIndex={0}
+            key="1"
+            onColumnClick={[Function]}
+            sortDirection="asc"
+            sortField={null}
+            sortIcon={false}
+          />
+        </TableHeadRow>
+      </WithTheme(TableHead)>
+      <TableBody
+        fixedHeader={false}
+        hasOffset={false}
+        offset="250px"
+      >
+        <WithTheme(TableRow)
+          checkboxComponent="input"
+          checkboxComponentOptions={Object {}}
+          columns={
+            Array [
+              Object {
+                "id": 1,
+                "name": "Test",
+                "selector": "some.name",
+              },
+            ]
+          }
+          expandableRows={false}
+          firstCellIndex={0}
+          highlightOnHover={false}
+          index={0}
+          key="1"
+          keyField="id"
+          onRowClicked={[Function]}
+          onRowSelected={[Function]}
+          onToggled={[Function]}
+          pointerOnHover={false}
+          row={
+            Object {
+              "id": 1,
+              "some": Object {
+                "name": "Henry the 8th",
+              },
+            }
+          }
+          rows={
+            Array [
+              Object {
+                "id": 1,
+                "some": Object {
+                  "name": "Henry the 8th",
+                },
+              },
+            ]
+          }
+          selectableRows={false}
+          selectedRows={Array []}
+          striped={false}
+        />
+      </TableBody>
+    </Table__TableStyle>
+  </TableWrapper>
+</div>
+`;
diff --git a/src/DataTable/__tests__/__snapshots__/ResponsiveWrapper.test.js.snap b/src/DataTable/__tests__/__snapshots__/ResponsiveWrapper.test.js.snap
index 08b77758..e524b86e 100644
--- a/src/DataTable/__tests__/__snapshots__/ResponsiveWrapper.test.js.snap
+++ b/src/DataTable/__tests__/__snapshots__/ResponsiveWrapper.test.js.snap
@@ -3,6 +3,7 @@
 exports[`component <ResponsiveWrapper /> should render correctly 1`] = `
 .c0 {
   position: relative;
+  width: 100%;
 }
 
 <div
@@ -13,6 +14,7 @@ exports[`component <ResponsiveWrapper /> should render correctly 1`] = `
 exports[`component <ResponsiveWrapper overflowY /> should not apply overFlowY without an overflowYOffset or not responsive  1`] = `
 .c0 {
   position: relative;
+  width: 100%;
 }
 
 <div
@@ -23,6 +25,7 @@ exports[`component <ResponsiveWrapper overflowY /> should not apply overFlowY wi
 exports[`component <ResponsiveWrapper responsive /> should render correctly  1`] = `
 .c0 {
   position: relative;
+  width: 100%;
   overflow-x: auto;
 }
 
@@ -34,6 +37,7 @@ exports[`component <ResponsiveWrapper responsive /> should render correctly  1`]
 exports[`component <ResponsiveWrapper responsive overflowY overflowYOffset="250px" /> should render correctly when overflowYOffset is provided  1`] = `
 .c0 {
   position: relative;
+  width: 100%;
   overflow-x: auto;
   padding-bottom: 250px;
   margin-bottom: -250px;
diff --git a/src/DataTable/__tests__/__snapshots__/Table.test.js.snap b/src/DataTable/__tests__/__snapshots__/Table.test.js.snap
index d459a7a1..dac87bf8 100644
--- a/src/DataTable/__tests__/__snapshots__/Table.test.js.snap
+++ b/src/DataTable/__tests__/__snapshots__/Table.test.js.snap
@@ -2,11 +2,16 @@
 
 exports[`component <Table /> should render correctly 1`] = `
 .c0 {
-  display: table;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   max-width: 100%;
-  border-collapse: collapse;
 }
 
 <div
@@ -16,11 +21,16 @@ exports[`component <Table /> should render correctly 1`] = `
 
 exports[`component <Table disabled={true} /> should render correctly  1`] = `
 .c0 {
-  display: table;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   max-width: 100%;
-  border-collapse: collapse;
   pointer-events: none;
   opacity: 0.4;
 }
diff --git a/src/DataTable/__tests__/__snapshots__/TableRow.test.js.snap b/src/DataTable/__tests__/__snapshots__/TableRow.test.js.snap
index 69227dbe..3879df5a 100644
--- a/src/DataTable/__tests__/__snapshots__/TableRow.test.js.snap
+++ b/src/DataTable/__tests__/__snapshots__/TableRow.test.js.snap
@@ -6,6 +6,7 @@ exports[`component <TableRow /> should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   border-top: 1px solid rgba(0,0,0,.12);
 }
 
@@ -40,6 +41,7 @@ exports[`component <TableRow /> with children should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   border-top: 1px solid rgba(0,0,0,.12);
 }
 
@@ -74,6 +76,7 @@ exports[`component <TableRow /> with columns should render correctly if a row do
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   border-top: 1px solid rgba(0,0,0,.12);
 }
 
@@ -108,6 +111,7 @@ exports[`component <TableRow /> with columns should render correctly if a row ha
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   border-top: 1px solid rgba(0,0,0,.12);
 }
 
@@ -142,6 +146,7 @@ exports[`component <TableRow highlightOnHover /> should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   border-top: 1px solid rgba(0,0,0,.12);
 }
 
@@ -176,6 +181,7 @@ exports[`component <TableRow pointerOnHover /> should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   border-top: 1px solid rgba(0,0,0,.12);
 }
 
@@ -210,6 +216,7 @@ exports[`component <TableRow striped /> should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   border-top: 1px solid rgba(0,0,0,.12);
 }
 
diff --git a/src/DataTable/__tests__/__snapshots__/TableWrapper.test.js.snap b/src/DataTable/__tests__/__snapshots__/TableWrapper.test.js.snap
index 0e44641b..0915df4e 100644
--- a/src/DataTable/__tests__/__snapshots__/TableWrapper.test.js.snap
+++ b/src/DataTable/__tests__/__snapshots__/TableWrapper.test.js.snap
@@ -2,8 +2,10 @@
 
 exports[`component <TableWrapper /> should render correctly 1`] = `
 .c0 {
+  display: table;
   position: relative;
   height: 100%;
+  width: 100%;
 }
 
 <div
diff --git a/src/DataTable/statemgmt.js b/src/DataTable/statemgmt.js
index 7840c85f..1f8d7fe4 100644
--- a/src/DataTable/statemgmt.js
+++ b/src/DataTable/statemgmt.js
@@ -74,7 +74,7 @@ export const handleSort = ({ expandableRows, expanderStateField }, selector, sor
   return { ...state };
 };
 
-export const clearSelectedRows = clearedRowsFlag => ({
+export const clearSelected = clearedRowsFlag => ({
   allSelected: false,
   selectedCount: 0,
   selectedRows: [],
diff --git a/yarn.lock b/yarn.lock
index 72beac3c..e6fa3902 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,12 +2,18 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@7.0.0-beta.40", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.0.0-beta.40":
+"@babel/code-frame@7.0.0-beta.40", "@babel/code-frame@^7.0.0-beta.35":
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.40.tgz#37e2b0cf7c56026b4b21d3927cadf81adec32ac6"
   dependencies:
     "@babel/highlight" "7.0.0-beta.40"
 
+"@babel/code-frame@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
+  dependencies:
+    "@babel/highlight" "7.0.0-beta.44"
+
 "@babel/generator@7.0.0-beta.40":
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.40.tgz#ab61f9556f4f71dbd1138949c795bb9a21e302ea"
@@ -18,6 +24,16 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+    jsesc "^2.5.1"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0-beta.37":
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.40.tgz#095dd4c70b231eba17ebf61c3434e6f9d71bd574"
@@ -32,12 +48,32 @@
     "@babel/template" "7.0.0-beta.40"
     "@babel/types" "7.0.0-beta.40"
 
+"@babel/helper-function-name@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.44"
+    "@babel/template" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+
 "@babel/helper-get-function-arity@7.0.0-beta.40":
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.40.tgz#ac0419cf067b0ec16453e1274f03878195791c6e"
   dependencies:
     "@babel/types" "7.0.0-beta.40"
 
+"@babel/helper-get-function-arity@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+
+"@babel/helper-split-export-declaration@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+
 "@babel/highlight@7.0.0-beta.40":
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.40.tgz#b43d67d76bf46e1d10d227f68cddcd263786b255"
@@ -46,6 +82,14 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/highlight@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
 "@babel/template@7.0.0-beta.40":
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.40.tgz#034988c6424eb5c3268fe6a608626de1f4410fc8"
@@ -55,6 +99,30 @@
     babylon "7.0.0-beta.40"
     lodash "^4.2.0"
 
+"@babel/template@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    lodash "^4.2.0"
+
+"@babel/traverse@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/generator" "7.0.0-beta.44"
+    "@babel/helper-function-name" "7.0.0-beta.44"
+    "@babel/helper-split-export-declaration" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
 "@babel/traverse@^7.0.0-beta.40":
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.40.tgz#d140e449b2e093ef9fe1a2eecc28421ffb4e521e"
@@ -69,7 +137,7 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-"@babel/types@7.0.0-beta.40", "@babel/types@^7.0.0-beta.40":
+"@babel/types@7.0.0-beta.40":
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.40.tgz#25c3d7aae14126abe05fcb098c65a66b6d6b8c14"
   dependencies:
@@ -77,6 +145,25 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
+"@mrmlnc/readdir-enhanced@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+  dependencies:
+    call-me-maybe "^1.0.1"
+    glob-to-regexp "^0.3.0"
+
+"@nodelib/fs.stat@^1.0.1":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.0.tgz#50c1e2260ac0ed9439a181de3725a0168d59c48a"
+
 "@storybook/addon-actions@^3.3.15":
   version "3.3.15"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.15.tgz#2831e52947dc258208dd17804b479f7acc62d859"
@@ -739,14 +826,14 @@ babel-core@^6.0.0, babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.6"
 
-babel-eslint@^8.2.2:
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.2.tgz#1102273354c6f0b29b4ea28a65f97d122296b68b"
+babel-eslint@^8.2.3:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.3.tgz#1a2e6681cc9bc4473c32899e59915e19cd6733cf"
   dependencies:
-    "@babel/code-frame" "^7.0.0-beta.40"
-    "@babel/traverse" "^7.0.0-beta.40"
-    "@babel/types" "^7.0.0-beta.40"
-    babylon "^7.0.0-beta.40"
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/traverse" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
     eslint-scope "~3.7.1"
     eslint-visitor-keys "^1.0.0"
 
@@ -1680,6 +1767,10 @@ babylon@7.0.0-beta.40, babylon@^7.0.0-beta.40:
   version "7.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.40.tgz#91fc8cd56d5eb98b28e6fde41045f2957779940a"
 
+babylon@7.0.0-beta.44:
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
+
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -1944,7 +2035,7 @@ buffers@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb"
 
-builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
@@ -1992,6 +2083,10 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+call-me-maybe@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -2118,6 +2213,14 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 character-entities-html4@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.1.tgz#359a2a4a0f7e29d3dc2ac99bdbe21ee39438ea50"
@@ -2479,14 +2582,13 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     parse-json "^2.2.0"
     require-from-string "^1.1.0"
 
-cosmiconfig@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
+cosmiconfig@^5.0.0:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.5.tgz#a809e3c2306891ce17ab70359dc8bdf661fe2cd0"
   dependencies:
     is-directory "^0.3.1"
     js-yaml "^3.9.0"
     parse-json "^4.0.0"
-    require-from-string "^2.0.1"
 
 create-ecdh@^4.0.0:
   version "4.0.0"
@@ -3294,11 +3396,10 @@ eslint-plugin-flowtype@^2.46.1:
   dependencies:
     lodash "^4.15.0"
 
-eslint-plugin-import@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.10.0.tgz#fa09083d5a75288df9c6c7d09fe12255985655e7"
+eslint-plugin-import@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.12.0.tgz#dad31781292d6664b25317fd049d2e2b2f02205d"
   dependencies:
-    builtin-modules "^1.1.1"
     contains-path "^0.1.0"
     debug "^2.6.8"
     doctrine "1.5.0"
@@ -3308,10 +3409,11 @@ eslint-plugin-import@^2.10.0:
     lodash "^4.17.4"
     minimatch "^3.0.3"
     read-pkg-up "^2.0.0"
+    resolve "^1.6.0"
 
-eslint-plugin-jest@^21.15.0:
-  version "21.15.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.15.0.tgz#645a3f560d3e61d99611b215adc80b4f31e6d896"
+eslint-plugin-jest@^21.17.0:
+  version "21.17.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.17.0.tgz#fdb00e2f9ff16987d6ebcf2c75c7add105760bbb"
 
 eslint-plugin-jsx-a11y@^6.0.3:
   version "6.0.3"
@@ -3325,9 +3427,9 @@ eslint-plugin-jsx-a11y@^6.0.3:
     emoji-regex "^6.1.0"
     jsx-ast-utils "^2.0.0"
 
-eslint-plugin-react@^7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz#f606c719dbd8a1a2b3d25c16299813878cca0160"
+eslint-plugin-react@^7.8.2:
+  version "7.8.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.8.2.tgz#e95c9c47fece55d2303d1a67c9d01b930b88a51d"
   dependencies:
     doctrine "^2.0.2"
     has "^1.0.1"
@@ -3627,6 +3729,17 @@ fast-deep-equal@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
 
+fast-glob@^2.0.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.2.tgz#71723338ac9b4e0e2fff1d6748a2a13d5ed352bf"
+  dependencies:
+    "@mrmlnc/readdir-enhanced" "^2.2.1"
+    "@nodelib/fs.stat" "^1.0.1"
+    glob-parent "^3.1.0"
+    is-glob "^4.0.0"
+    merge2 "^1.2.1"
+    micromatch "^3.1.10"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -3968,9 +4081,9 @@ get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
-get-stdin@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
 
 get-stream@^3.0.0:
   version "3.0.0"
@@ -4034,6 +4147,10 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-to-regexp@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
+
 glob@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
@@ -4081,12 +4198,13 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-globby@^7.0.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+globby@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.1.tgz#b5ad48b8aa80b35b814fc1281ecc851f1d2b5b50"
   dependencies:
     array-union "^1.0.1"
     dir-glob "^2.0.0"
+    fast-glob "^2.0.2"
     glob "^7.1.2"
     ignore "^3.3.5"
     pify "^3.0.0"
@@ -4473,6 +4591,10 @@ immutable@^3.8.1:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
 
+import-lazy@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-3.1.0.tgz#891279202c8a2280fdbd6674dbd8da1a1dfc67cc"
+
 import-local@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
@@ -5832,19 +5954,19 @@ meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
-meow@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-4.0.0.tgz#fd5855dd008db5b92c552082db1c307cba20b29d"
+meow@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
   dependencies:
     camelcase-keys "^4.0.0"
     decamelize-keys "^1.0.0"
     loud-rejection "^1.0.0"
-    minimist "^1.1.3"
     minimist-options "^3.0.1"
     normalize-package-data "^2.3.4"
     read-pkg-up "^3.0.0"
     redent "^2.0.0"
     trim-newlines "^2.0.0"
+    yargs-parser "^10.0.0"
 
 merge-descriptors@1.0.1:
   version "1.0.1"
@@ -5856,6 +5978,10 @@ merge-stream@^1.0.1:
   dependencies:
     readable-stream "^2.0.1"
 
+merge2@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.2.tgz#03212e3da8d86c4d8523cebd6318193414f94e34"
+
 merge@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
@@ -5882,6 +6008,24 @@ micromatch@^2.1.5, micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
+micromatch@^3.1.10:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
 micromatch@^3.1.4:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.9.tgz#15dc93175ae39e52e93087847096effc73efcf89"
@@ -6758,17 +6902,15 @@ postcss-flexbugs-fixes@^3.2.0:
   dependencies:
     postcss "^6.0.1"
 
-postcss-html@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.15.0.tgz#11ba3c07c817d0816f091fe40817a8ecd861300f"
+postcss-html@^0.23.6:
+  version "0.23.7"
+  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.23.7.tgz#47146c15e21b9c00746c40115dcff8270c439f32"
   dependencies:
     htmlparser2 "^3.9.2"
-    remark "^9.0.0"
-    unist-util-find-all-after "^1.0.1"
 
-postcss-less@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.3.tgz#6930525271bfe38d5793d33ac09c1a546b87bb51"
+postcss-less@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.5.tgz#a6f0ce180cf3797eeee1d4adc0e9e6d6db665609"
   dependencies:
     postcss "^5.2.16"
 
@@ -6804,6 +6946,13 @@ postcss-loader@^2.0.9:
     postcss-load-config "^1.2.0"
     schema-utils "^0.4.0"
 
+postcss-markdown@^0.23.6:
+  version "0.23.7"
+  resolved "https://registry.yarnpkg.com/postcss-markdown/-/postcss-markdown-0.23.7.tgz#7e3a398794295c425e51e4f0abdee6d13ad3d134"
+  dependencies:
+    remark "^9.0.0"
+    unist-util-find-all-after "^1.0.2"
+
 postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
@@ -6996,6 +7145,10 @@ postcss-svgo@^2.1.1:
     postcss-value-parser "^3.2.3"
     svgo "^0.7.0"
 
+postcss-syntax@^0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.9.1.tgz#5dbd90af1631ab8805b8f594bef2c2e8002d3758"
+
 postcss-unique-selectors@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
@@ -7808,10 +7961,6 @@ require-from-string@^1.1.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
 
-require-from-string@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.1.tgz#c545233e9d7da6616e9d59adfb39fc9f588676ff"
-
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -7863,6 +8012,12 @@ resolve@^1.1.6, resolve@^1.4.0, resolve@^1.5.0:
   dependencies:
     path-parse "^1.0.5"
 
+resolve@^1.6.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  dependencies:
+    path-parse "^1.0.5"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -8601,34 +8756,36 @@ stylelint-processor-styled-components@^1.3.1:
     babylon "^7.0.0-beta.40"
     postcss "^6.0.14"
 
-stylelint@^9.1.3:
-  version "9.1.3"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.1.3.tgz#8260f2a221b98e4afafd9b2b8a785d2e38cbb8a4"
+stylelint@^9.2.1:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.2.1.tgz#fe63c169f6cd3bc81e77f0e3c6443df3267ec211"
   dependencies:
     autoprefixer "^8.0.0"
     balanced-match "^1.0.0"
-    chalk "^2.0.1"
-    cosmiconfig "^4.0.0"
+    chalk "^2.4.1"
+    cosmiconfig "^5.0.0"
     debug "^3.0.0"
     execall "^1.0.0"
     file-entry-cache "^2.0.0"
-    get-stdin "^5.0.1"
-    globby "^7.0.0"
+    get-stdin "^6.0.0"
+    globby "^8.0.0"
     globjoin "^0.1.4"
     html-tags "^2.0.0"
     ignore "^3.3.3"
+    import-lazy "^3.1.0"
     imurmurhash "^0.1.4"
     known-css-properties "^0.6.0"
     lodash "^4.17.4"
     log-symbols "^2.0.0"
     mathml-tag-names "^2.0.1"
-    meow "^4.0.0"
+    meow "^5.0.0"
     micromatch "^2.3.11"
     normalize-selector "^0.2.0"
     pify "^3.0.0"
     postcss "^6.0.16"
-    postcss-html "^0.15.0"
-    postcss-less "^1.1.0"
+    postcss-html "^0.23.6"
+    postcss-less "^1.1.5"
+    postcss-markdown "^0.23.6"
     postcss-media-query-parser "^0.2.3"
     postcss-reporter "^5.0.0"
     postcss-resolve-nested-selector "^0.1.1"
@@ -8636,6 +8793,7 @@ stylelint@^9.1.3:
     postcss-sass "^0.3.0"
     postcss-scss "^1.0.2"
     postcss-selector-parser "^3.1.0"
+    postcss-syntax "^0.9.0"
     postcss-value-parser "^3.3.0"
     resolve-from "^4.0.0"
     signal-exit "^3.0.2"
@@ -8839,7 +8997,7 @@ to-regex-range@^2.1.0:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
-to-regex@^3.0.1:
+to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
   dependencies:
@@ -9053,9 +9211,9 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
-unist-util-find-all-after@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.1.tgz#4e5512abfef7e0616781aecf7b1ed751c00af908"
+unist-util-find-all-after@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.2.tgz#9be49cfbae5ca1566b27536670a92836bf2f8d6d"
   dependencies:
     unist-util-is "^2.0.0"
 
@@ -9499,6 +9657,12 @@ yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
 
+yargs-parser@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.0.0.tgz#c737c93de2567657750cb1f2c00be639fd19c994"
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs-parser@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"