From e989491622d1c69802b7a4bbb3d88312b26368c8 Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <daniel@tschinder.de>
Date: Thu, 5 Oct 2017 12:54:39 +0200
Subject: [PATCH] feat(Tabs): Add `domRef` prop for getting the ref to the tabs
 DOM node (#213)

---
 README.md                             |  6 ++++++
 src/components/Tabs.js                |  1 +
 src/components/UncontrolledTabs.js    |  3 +++
 src/components/__tests__/Tabs-test.js | 14 ++++++++++++++
 4 files changed, 24 insertions(+)

diff --git a/README.md b/README.md
index c750c2b4fa..4d3256adc6 100644
--- a/README.md
+++ b/README.md
@@ -102,6 +102,12 @@ Provide a custom class name for disabled tabs.
 
 > This option can also be set directly at the `<Tab />` component.
 
+#### domRef: `(node: ?HTMLElement) => void`
+
+> default: `null`
+
+Register a callback that will receive the underlying DOM node for every mount. It will also receive null on unmount.
+
 #### forceRenderTabPanel: `boolean`
 
 > default: `false`
diff --git a/src/components/Tabs.js b/src/components/Tabs.js
index 8a330eb9ad..36eba6820d 100644
--- a/src/components/Tabs.js
+++ b/src/components/Tabs.js
@@ -18,6 +18,7 @@ export default class Tabs extends Component {
     defaultFocus: PropTypes.bool,
     defaultIndex: PropTypes.number,
     disabledTabClassName: PropTypes.string,
+    domRef: PropTypes.func,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: onSelectPropType,
     selectedIndex: selectedIndexPropType,
diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js
index 69bc67ca6d..527b95cb2e 100644
--- a/src/components/UncontrolledTabs.js
+++ b/src/components/UncontrolledTabs.js
@@ -41,6 +41,7 @@ export default class UncontrolledTabs extends Component {
     children: childrenPropType,
     className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     disabledTabClassName: PropTypes.string,
+    domRef: PropTypes.func,
     focus: PropTypes.bool,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: PropTypes.func.isRequired,
@@ -283,6 +284,7 @@ export default class UncontrolledTabs extends Component {
       children, // unused
       className,
       disabledTabClassName, // unused
+      domRef,
       focus, // unused
       forceRenderTabPanel, // unused
       onSelect, // unused
@@ -300,6 +302,7 @@ export default class UncontrolledTabs extends Component {
         onKeyDown={this.handleKeyDown}
         ref={node => {
           this.node = node;
+          if (domRef) domRef(node);
         }}
         data-tabs
       >
diff --git a/src/components/__tests__/Tabs-test.js b/src/components/__tests__/Tabs-test.js
index 4a853da5ee..0e8b53cc71 100644
--- a/src/components/__tests__/Tabs-test.js
+++ b/src/components/__tests__/Tabs-test.js
@@ -90,6 +90,20 @@ describe('<Tabs />', () => {
     test('should accept className', () => {
       expectToMatchSnapshot(createTabs({ className: 'foobar' }));
     });
+
+    test('should accept domRef', () => {
+      let domNode;
+      mount(
+        createTabs({
+          domRef: node => {
+            domNode = node;
+          },
+        }),
+      );
+
+      expect(domNode).not.toBeUndefined();
+      expect(domNode.className).toBe('react-tabs');
+    });
   });
 
   describe('child props', () => {