feat(tabs): Allow for higher order components (#196)

* Allow for higher order components

* Added tests with higher order components.

* Test if solution works with hoist-non-react-statics

Author: karevn

.eslintrc

@@ -17,9 +17,12 @@
     "react/forbid-prop-types": "off",
     "react/sort-comp": "off",
     "jsx-a11y/no-static-element-interactions": "off",
-    "import/no-extraneous-dependencies": ["error", {
-      "devDependencies": ["**/__tests__/*-test.js"],
-      "optionalDependencies": false
-    }]
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": ["**/__tests__/**/*"],
+        "optionalDependencies": false
+      }
+    ]
   }
 }

package.json

@@ -62,6 +62,7 @@
     "eslint-plugin-jsx-a11y": "^5.0.3",
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "^7.0.1",
+    "hoist-non-react-statics": "^2.3.1",
     "husky": "^0.14.3",
     "jest-cli": "^20.0.0",
     "lint-staged": "^4.0.4",
@@ -84,7 +85,8 @@
   "jest": {
     "roots": [
       "src"
-    ]
+    ],
+    "testRegex": "/__tests__/.+-test\\.js$"
   },
   "lint-staged": {
     "src/**/*.js": [

src/components/Tab.js

@@ -80,3 +80,5 @@ export default class Tab extends Component {
     );
   }
 }
+
+Tab.tabsRole = 'Tab';

src/components/TabList.js

@@ -22,3 +22,5 @@ export default class TabList extends Component {
     );
   }
 }
+
+TabList.tabsRole = 'TabList';

src/components/TabPanel.js

@@ -49,3 +49,5 @@ export default class TabPanel extends Component {
     );
   }
 }
+
+TabPanel.tabsRole = 'TabPanel';

src/components/Tabs.js

@@ -106,3 +106,5 @@ For more information about controlled and uncontrolled mode of react-tabs see th
     return <UncontrolledTabs {...props}>{children}</UncontrolledTabs>;
   }
 }
+
+Tabs.tabsRole = 'Tabs';

src/components/UncontrolledTabs.js

@@ -3,11 +3,9 @@ import React, { cloneElement, Component } from 'react';
 import cx from 'classnames';
 import uuid from '../helpers/uuid';
 import { childrenPropType } from '../helpers/propTypes';
-import Tab from './Tab';
-import TabList from './TabList';
-import TabPanel from './TabPanel';
 import { getPanelsCount, getTabsCount } from '../helpers/count';
 import { deepMap } from '../helpers/childrenDeepMap';
+import { isTabList, isTabPanel, isTab } from '../helpers/elementTypes';
 
 // Determine if a node from event.target is a Tab element
 function isTabNode(node) {
@@ -145,7 +143,7 @@ export default class UncontrolledTabs extends Component {
       let result = child;
 
       // Clone TabList and Tab components to have refs
-      if (child.type === TabList) {
+      if (isTabList(child)) {
         let listIndex = 0;
 
         // Figure out if the current focus in the DOM is set on a Tab
@@ -155,7 +153,7 @@ export default class UncontrolledTabs extends Component {
         if (canUseActiveElement) {
           wasTabFocused = React.Children
             .toArray(child.props.children)
-            .filter(tab => tab.type === Tab)
+            .filter(isTab)
             .some((tab, i) => document.activeElement === this.getTab(i));
         }
 
@@ -182,7 +180,7 @@ export default class UncontrolledTabs extends Component {
             return cloneElement(tab, props);
           }),
         });
-      } else if (child.type === TabPanel) {
+      } else if (isTabPanel(child)) {
         const props = {
           id: this.panelIds[index],
           tabId: this.tabIds[index],

src/components/__tests__/Tab-test.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Tab from '../Tab';
+import { TabWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
@@ -51,4 +52,8 @@ describe('<Tab />', () => {
     // eslint-disable-next-line jsx-a11y/aria-role
     expectToMatchSnapshot(<Tab role="micro-tab" />);
   });
+
+  it('should allow to be wrapped in higher-order-component', () => {
+    expectToMatchSnapshot(<TabWrapper />);
+  });
 });

src/components/__tests__/TabList-test.js

@@ -5,6 +5,7 @@ import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
+import { TabListWrapper, TabWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
@@ -77,4 +78,17 @@ describe('<TabList />', () => {
       </Tabs>,
     );
   });
+
+  it('should allow for higher order components', () => {
+    expectToMatchSnapshot(
+      <Tabs>
+        <TabListWrapper>
+          <TabWrapper>Foo</TabWrapper>
+          <TabWrapper>Bar</TabWrapper>
+        </TabListWrapper>
+        <TabPanel>Foo</TabPanel>
+        <TabPanel>Bar</TabPanel>
+      </Tabs>,
+    );
+  });
 });

src/components/__tests__/TabPanel-test.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import TabPanel from '../TabPanel';
+import { TabPanelWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
@@ -55,4 +56,8 @@ describe('<TabPanel />', () => {
     // eslint-disable-next-line jsx-a11y/aria-role
     expectToMatchSnapshot(<TabPanel role="micro-tab" />);
   });
+
+  it('should allow for higher-order components', () => {
+    expectToMatchSnapshot(<TabPanelWrapper />);
+  });
 });

src/components/__tests__/Tabs-test.js

@@ -8,6 +8,7 @@ import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
 import { reset as resetIdCounter } from '../../helpers/uuid';
+import { TabListWrapper, TabWrapper, TabPanelWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
@@ -483,4 +484,17 @@ describe('<Tabs />', () => {
       .simulate('click');
     assertTabSelected(wrapper, 2);
   });
+
+  it('should allow for higher order components', () => {
+    expectToMatchSnapshot(
+      <Tabs>
+        <TabListWrapper>
+          <TabWrapper>Foo</TabWrapper>
+          <TabWrapper>Bar</TabWrapper>
+        </TabListWrapper>
+        <TabPanelWrapper>Foo</TabPanelWrapper>
+        <TabPanelWrapper>Bar</TabPanelWrapper>
+      </Tabs>,
+    );
+  });
 });

src/components/__tests__/__snapshots__/Tab-test.js.snap

@@ -12,6 +12,18 @@ exports[`<Tab /> should accept className 1`] = `
 />
 `;
 
+exports[`<Tab /> should allow to be wrapped in higher-order-component 1`] = `
+<li
+  aria-controls={null}
+  aria-disabled="false"
+  aria-selected="false"
+  className="react-tabs__tab"
+  id={null}
+  role="tab"
+  tabIndex={null}
+/>
+`;
+
 exports[`<Tab /> should have sane defaults 1`] = `
 <li
   aria-controls={null}

src/components/__tests__/__snapshots__/TabList-test.js.snap

@@ -7,6 +7,59 @@ exports[`<TabList /> should accept className 1`] = `
 />
 `;
 
+exports[`<TabList /> should allow for higher order components 1`] = `
+<div
+  className="react-tabs"
+  data-tabs={true}
+  onClick={[Function]}
+  onKeyDown={[Function]}
+>
+  <ul
+    className="react-tabs__tab-list"
+    role="tablist"
+  >
+    <li
+      aria-controls="react-tabs-13"
+      aria-disabled="false"
+      aria-selected="true"
+      className="react-tabs__tab react-tabs__tab--selected"
+      id="react-tabs-12"
+      role="tab"
+      tabIndex="0"
+    >
+      Foo
+    </li>
+    <li
+      aria-controls="react-tabs-15"
+      aria-disabled="false"
+      aria-selected="false"
+      className="react-tabs__tab"
+      id="react-tabs-14"
+      role="tab"
+      tabIndex={null}
+    >
+      Bar
+    </li>
+  </ul>
+  <div
+    aria-labelledby="react-tabs-12"
+    className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+    id="react-tabs-13"
+    role="tabpanel"
+    style={Object {}}
+  >
+    Foo
+  </div>
+  <div
+    aria-labelledby="react-tabs-14"
+    className="react-tabs__tab-panel"
+    id="react-tabs-15"
+    role="tabpanel"
+    style={Object {}}
+  />
+</div>
+`;
+
 exports[`<TabList /> should display the custom classnames for selected and disabled tab 1`] = `
 <div
   className="react-tabs"

src/components/__tests__/__snapshots__/TabPanel-test.js.snap

@@ -10,6 +10,16 @@ exports[`<TabPanel /> should accept className 1`] = `
 />
 `;
 
+exports[`<TabPanel /> should allow for higher-order components 1`] = `
+<div
+  aria-labelledby={undefined}
+  className="react-tabs__tab-panel"
+  id={undefined}
+  role="tabpanel"
+  style={Object {}}
+/>
+`;
+
 exports[`<TabPanel /> should have sane defaults 1`] = `
 <div
   aria-labelledby={undefined}

src/components/__tests__/__snapshots__/Tabs-test.js.snap

@@ -641,6 +641,59 @@ exports[`<Tabs /> props should honor positive defaultIndex prop 1`] = `
 </div>
 `;
 
+exports[`<Tabs /> should allow for higher order components 1`] = `
+<div
+  className="react-tabs"
+  data-tabs={true}
+  onClick={[Function]}
+  onKeyDown={[Function]}
+>
+  <ul
+    className="react-tabs__tab-list"
+    role="tablist"
+  >
+    <li
+      aria-controls="react-tabs-1"
+      aria-disabled="false"
+      aria-selected="true"
+      className="react-tabs__tab react-tabs__tab--selected"
+      id="react-tabs-0"
+      role="tab"
+      tabIndex="0"
+    >
+      Foo
+    </li>
+    <li
+      aria-controls="react-tabs-3"
+      aria-disabled="false"
+      aria-selected="false"
+      className="react-tabs__tab"
+      id="react-tabs-2"
+      role="tab"
+      tabIndex={null}
+    >
+      Bar
+    </li>
+  </ul>
+  <div
+    aria-labelledby="react-tabs-0"
+    className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+    id="react-tabs-1"
+    role="tabpanel"
+    style={Object {}}
+  >
+    Foo
+  </div>
+  <div
+    aria-labelledby="react-tabs-2"
+    className="react-tabs__tab-panel"
+    id="react-tabs-3"
+    role="tabpanel"
+    style={Object {}}
+  />
+</div>
+`;
+
 exports[`<Tabs /> should not add known props to dom 1`] = `
 <div
   className="react-tabs"

src/components/__tests__/helpers/higherOrder/TabListWrapper.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import hoist from 'hoist-non-react-statics';
+import TabList from '../../../../components/TabList';
+
+function TabListWrapper(props) {
+  return <TabList {...props} />;
+}
+
+export default hoist(TabListWrapper, TabList);

src/components/__tests__/helpers/higherOrder/TabPanelWrapper.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import hoist from 'hoist-non-react-statics';
+import TabPanel from '../../../../components/TabPanel';
+
+function TabPanelWrapper(props) {
+  return <TabPanel {...props} />;
+}
+
+export default hoist(TabPanelWrapper, TabPanel);

src/components/__tests__/helpers/higherOrder/TabWrapper.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import hoist from 'hoist-non-react-statics';
+import Tab from '../../../../components/Tab';
+
+function TabWrapper(props) {
+  return <Tab {...props} />;
+}
+
+export default hoist(TabWrapper, Tab);

src/components/__tests__/helpers/higherOrder/index.js

@@ -0,0 +1,5 @@
+import TabWrapper from './TabWrapper';
+import TabListWrapper from './TabListWrapper';
+import TabPanelWrapper from './TabPanelWrapper';
+
+export { TabWrapper, TabListWrapper, TabPanelWrapper };