[Tabs] Add action property (#9780)

pages/api/tabs.md

@@ -12,6 +12,7 @@ filename: /src/Tabs/Tabs.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| action | func |  | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updateIndicator() action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all posible actions that can be triggered programmatically. |
 | buttonClassName | string |  | The CSS class name of the scroll button elements. |
 | centered | bool | false | If `true`, the tabs will be centered. This property is intended for large views. |
 | children | node |  | The content of the component. |

src/Popover/Popover.d.ts

@@ -18,6 +18,7 @@ export type PopoverReference = 'anchorEl' | 'anchorPosition';
 
 export interface PopoverProps
   extends StandardProps<ModalProps & Partial<TransitionHandlers>, PopoverClassKey, 'children'> {
+  action?: (actions: object) => void;
   anchorEl?: HTMLElement;
   anchorOrigin?: PopoverOrigin;
   anchorPosition?: PopoverPosition;

src/Popover/Popover.js

@@ -235,7 +235,7 @@ class Popover extends React.Component {
   };
 
   handleResize = debounce(() => {
-    const element: any = ReactDOM.findDOMNode(this.transitionEl);
+    const element = ReactDOM.findDOMNode(this.transitionEl);
     this.setPositioningStyles(element);
   }, 166);
 

src/Tabs/Tabs.d.ts

@@ -3,6 +3,7 @@ import { StandardProps } from '..';
 import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase/ButtonBase';
 
 export interface TabsProps extends StandardProps<ButtonBaseProps, TabsClassKey, 'onChange'> {
+  action?: (actions: object) => void;
   buttonClassName?: string;
   centered?: boolean;
   children?: React.ReactNode;

src/Tabs/Tabs.js

@@ -59,6 +59,12 @@ class Tabs extends React.Component {
     this.setState({ mounted: true });
     this.updateIndicatorState(this.props);
     this.updateScrollButtonState();
+
+    if (this.props.action) {
+      this.props.action({
+        updateIndicator: this.handleResize,
+      });
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -278,6 +284,7 @@ class Tabs extends React.Component {
 
   render() {
     const {
+      action,
       buttonClassName,
       centered,
       children: childrenProp,
@@ -363,6 +370,15 @@ class Tabs extends React.Component {
 }
 
 Tabs.propTypes = {
+  /**
+   * This is callback property. It's called by the component on mount.
+   * This is useful when you want to trigger an action programmatically.
+   * It currently only supports updateIndicator() action.
+   *
+   * @param {object} actions This object contains all posible actions
+   * that can be triggered programmatically.
+   */
+  action: PropTypes.func,
   /**
    * The CSS class name of the scroll button elements.
    */

src/Tabs/Tabs.spec.js

@@ -52,6 +52,33 @@ describe('<Tabs />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 
+  describe('prop: action', () => {
+    it('should be able to access updateIndicator function', () => {
+      let tabsActions = {};
+      mount(
+        <Tabs
+          width="md"
+          onChange={noop}
+          value={0}
+          className="woofTabs"
+          action={actions => {
+            tabsActions = actions;
+          }}
+        >
+          <Tab />
+          <Tab />
+        </Tabs>,
+      );
+
+      assert.strictEqual(
+        typeof tabsActions.updateIndicator === 'function',
+        true,
+        'Should be a function.',
+      );
+      tabsActions.updateIndicator();
+    });
+  });
+
   describe('prop: className', () => {
     it('should render with the user and root classes', () => {
       const wrapper = shallow(