@massds/mayflower-react/dist/TabContainer/index.mjs

React versions of Mayflower design system UI components

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * TabContainer module.
 * @module @massds/mayflower-react/TabContainer
 * @requires module:@massds/mayflower-assets/scss/03-organisms/tab-container
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import nanoid from "nanoid";
import is from "is";
import TabContext from "./context";

let TabContainer = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(TabContainer, _React$Component);

  function TabContainer(props) {
    var _this;

    _this = _React$Component.call(this, props) || this; // Allows Tab to interact directly with the tab body div through context.

    _defineProperty(_assertThisInitialized(_this), "setActiveTab", tabId => {
      const state = {
        activeTab: tabId
      };

      _this.setState(state, () => {
        if (is.fn(_this.props.onTabChange)) {
          _this.props.onTabChange(_this.state.tabRefs[tabId], tabId);
        }
      });

      if (_this.state.tabRefs[tabId].current.focus) {
        _this.state.tabRefs[tabId].current.focus();
      }
    });

    _this.tabBodyRef = /*#__PURE__*/React.createRef(); // When false, runs key down code for nested containers.

    _this.preventBodyKeyDown = false;
    const tabIds = new Map(); // This only works for class components because it is not re-generated on every render.

    _this.spanId = nanoid();

    _this.focusOnTabBody = () => {
      _this.tabBodyRef.current.setAttribute('tabindex', '0');

      _this.tabBodyRef.current.focus();
    };

    const tabRefs = {};
    let activeTab = null;
    React.Children.forEach(props.children, (child, index) => {
      const id = nanoid();
      tabIds.set(index, id);
      tabRefs[tabIds.get(index)] = /*#__PURE__*/React.createRef();

      if (index === props.defaultTab) {
        activeTab = id;
      }
    });
    _this.state = {
      activeTab: activeTab,
      // eslint-disable-next-line react/no-unused-state
      setActiveTab: _this.setActiveTab,
      // eslint-disable-next-line react/no-unused-state
      focusOnTabBody: _this.focusOnTabBody,
      tabIds: tabIds,
      tabRefs: tabRefs,
      tabContainerId: nanoid(),
      tabContainerBodyId: nanoid(),
      // eslint-disable-next-line react/no-unused-state
      tabBodyRef: _this.tabBodyRef
    };
    return _this;
  }

  var _proto = TabContainer.prototype;

  _proto.componentDidMount = function componentDidMount() {
    // React hydration ignores any differences in attributes for performance
    // reasons. So, it's not able to fix an ID mismatch and we see different
    // IDs in the DOM and in the state. As a temporary workaround, we push
    // different IDs to the state. This triggers a re-rendering and fixes the
    // mismatch.
    // @see https://reactjs.org/docs/react-dom.html#hydrate
    // @todo This component needs a revamp in order to properly support SSR,
    //   because right now it only renders the tabs, but not the tab body. The
    //   workaround below adds another round of re-rendering. It's a performance
    //   issue and could be avoided with a consistent ID generator or something
    //   like the useId() hook introduced in React 18.
    this.setState({
      tabContainerId: nanoid(),
      tabContainerBodyId: nanoid()
    });
  };

  _proto.render = function render() {
    const classes = classNames({
      'ma__tab-container': true,
      'ma__tab-container--nested': this.props.nested
    });
    const ulClasses = classNames({
      'ma__tab-container-head': true,
      'ma__tab-container-head--nested': this.props.nested,
      'ma__tab-container-head--parent': !this.props.nested
    }); // eslint-disable-next-line react/prop-types

    const children = this.props.children;
    const childrenWithProps = React.Children.map(children, (child, index) => {
      const newProps = {
        active: this.state.activeTab === this.state.tabIds.get(index),
        tabIdent: this.state.tabIds.get(index),
        tabRef: this.state.tabRefs[this.state.tabIds.get(index)]
      };
      return /*#__PURE__*/React.cloneElement(child, newProps, child.props.children);
    });
    return /*#__PURE__*/React.createElement(TabContext.Provider, {
      value: this.state
    }, /*#__PURE__*/React.createElement("div", {
      className: classes
    }, /*#__PURE__*/React.createElement("ul", {
      className: ulClasses,
      id: this.state.tabContainerId,
      role: "tablist"
    }, /*#__PURE__*/React.createElement("span", {
      id: this.spanId,
      className: "ma__visually-hidden"
    }, "Use left and right arrows to navigate between tabs, up and down arrows to navigate between active tab and its content."), childrenWithProps), /*#__PURE__*/React.createElement("div", {
      "aria-labelledby": this.state.activeTab,
      className: "ma__tab-container-body",
      tabIndex: 0,
      ref: this.tabBodyRef,
      role: "tabpanel",
      id: this.state.tabContainerBodyId
    })));
  };

  return TabContainer;
}(React.Component);

TabContainer.defaultProps = {
  nested: false,
  defaultTab: 0
};
TabContainer.propTypes = process.env.NODE_ENV !== "production" ? {
  /** When true, the styles of the container changes to drop borders around each tab. */
  nested: PropTypes.bool,

  /** The numerical index of which tab should default to be open, starting at 0. */
  defaultTab: PropTypes.number,

  /** A callback function for a tab change, receives the tab's id and children */
  onTabChange: PropTypes.func,

  /** Children passed to tab container.  */
  children: PropTypes.node
} : {};
export default TabContainer;