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

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _nanoid = _interopRequireDefault(require("nanoid"));

var _is = _interopRequireDefault(require("is"));

var _context = _interopRequireDefault(require("./context"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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; }

var 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", function (tabId) {
      var state = {
        activeTab: tabId
      };

      _this.setState(state, function () {
        if (_is["default"].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["default"].createRef(); // When false, runs key down code for nested containers.

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

    _this.spanId = (0, _nanoid["default"])();

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

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

    var tabRefs = {};
    var activeTab = null;

    _react["default"].Children.forEach(props.children, function (child, index) {
      var id = (0, _nanoid["default"])();
      tabIds.set(index, id);
      tabRefs[tabIds.get(index)] = /*#__PURE__*/_react["default"].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: (0, _nanoid["default"])(),
      tabContainerBodyId: (0, _nanoid["default"])(),
      // 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: (0, _nanoid["default"])(),
      tabContainerBodyId: (0, _nanoid["default"])()
    });
  };

  _proto.render = function render() {
    var _this2 = this;

    var classes = (0, _classnames["default"])({
      'ma__tab-container': true,
      'ma__tab-container--nested': this.props.nested
    });
    var ulClasses = (0, _classnames["default"])({
      '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

    var children = this.props.children;

    var childrenWithProps = _react["default"].Children.map(children, function (child, index) {
      var newProps = {
        active: _this2.state.activeTab === _this2.state.tabIds.get(index),
        tabIdent: _this2.state.tabIds.get(index),
        tabRef: _this2.state.tabRefs[_this2.state.tabIds.get(index)]
      };
      return /*#__PURE__*/_react["default"].cloneElement(child, newProps, child.props.children);
    });

    return /*#__PURE__*/_react["default"].createElement(_context["default"].Provider, {
      value: this.state
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: classes
    }, /*#__PURE__*/_react["default"].createElement("ul", {
      className: ulClasses,
      id: this.state.tabContainerId,
      role: "tablist"
    }, /*#__PURE__*/_react["default"].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["default"].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["default"].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["default"].bool,

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

  /** A callback function for a tab change, receives the tab's id and children */
  onTabChange: _propTypes["default"].func,

  /** Children passed to tab container.  */
  children: _propTypes["default"].node
} : {};
var _default = TabContainer;
exports["default"] = _default;
module.exports = exports.default;