@targetprocess/tabs/TabInner.jsx

import React from 'react'
import PropTypes from 'prop-types'

function onTabClick(selected, onClick, originalKey) {
  return () => !selected && onClick(originalKey)
}

export default class TabInner extends React.Component {
  static propTypes = {
    children: PropTypes.node,
    disabled: PropTypes.bool,

    // generic props
    panelId: PropTypes.string.isRequired,
    selected: PropTypes.bool.isRequired,
    onClick: PropTypes.func.isRequired,
    getOnFocusCallback: PropTypes.func.isRequired,
    onBlur: PropTypes.func.isRequired,
    id: PropTypes.string.isRequired,
    originalKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
    classNames: PropTypes.string.isRequired
  }

  static defaultProps = {
    children: null,
    disabled: false
  }

  shouldComponentUpdate(nextProps) {
    return (
      this.props.children !== nextProps.children ||
      this.props.selected !== nextProps.selected ||
      this.props.classNames !== nextProps.classNames
    )
  }

  blurHandler = () => {
    window.requestAnimationFrame(() => {
      if (this.tab) {
        this.tab.blur()
      }
    })
  }

  renderTab = () => {
    const {children} = this.props

    return children
  }

  render() {
    const {
      id,
      selected,
      disabled,
      panelId,
      onClick,
      getOnFocusCallback,
      onBlur,
      originalKey,
      classNames
    } = this.props

    return (
      <div
        ref={tab => (this.tab = tab)}
        role="tab"
        id={id}
        className={classNames}
        aria-selected={selected}
        aria-expanded={selected}
        aria-disabled={disabled}
        aria-controls={panelId}
        tabIndex="0"
        onClick={onTabClick(selected, onClick, originalKey)}
        onFocus={getOnFocusCallback(originalKey)}
        onBlur={onBlur}
        onMouseLeave={this.blurHandler}
        onMouseUp={this.blurHandler}
      >
        <div>{this.renderTab()}</div>
      </div>
    )
  }
}