guestbell-forms 2.0.298 → 2.0.300

package/build/components/InputHeader/InputHeader.js

@@ -1,11 +1,9 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.InputHeader = exports.InputHeaderRaw = void 0;
+exports.default = exports.InputHeaderRaw = exports.InputHeader = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -23,35 +21,15 @@ var _withThemeContext = require("../themeProvider/withThemeContext");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 
@@ -84,344 +62,301 @@ PlusIcon.defaultProps = {
   viewBox: "0 0 24 24"
 };
 
-var CollapseExpandButtonComponent = function CollapseExpandButtonComponent(props) {
-  return /*#__PURE__*/React.createElement("a", {
-    className: props.className,
-    onClick: props.onClick,
-    href: "#"
-  }, props.children);
-};
-
-var InputHeaderRaw = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(InputHeaderRaw, _React$PureComponent);
-
-  var _super = _createSuper(InputHeaderRaw);
-
-  function InputHeaderRaw(props) {
-    var _this;
+const CollapseExpandButtonComponent = props => /*#__PURE__*/React.createElement("a", {
+  className: props.className,
+  onClick: props.onClick,
+  href: "#"
+}, props.children);
 
-    _classCallCheck(this, InputHeaderRaw);
+class InputHeaderRaw extends React.PureComponent {
+  constructor(props) {
+    super(props);
 
-    _this = _super.call(this, props);
+    _defineProperty(this, "componentId", (0, _Guid.default)());
 
-    _defineProperty(_assertThisInitialized(_this), "componentId", (0, _Guid.default)());
+    _defineProperty(this, "toggleClick", () => this.toggle());
 
-    _defineProperty(_assertThisInitialized(_this), "toggleClick", function () {
-      return _this.toggle();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "mainButtonClick", function (e) {
-      if (_this.props.stopsPropagation) {
+    _defineProperty(this, "mainButtonClick", e => {
+      if (this.props.stopsPropagation) {
         e.stopPropagation();
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "containerClick", function (e) {
-      return e.stopPropagation();
-    });
+    _defineProperty(this, "containerClick", e => e.stopPropagation());
 
-    _defineProperty(_assertThisInitialized(_this), "expandAllClick", function () {
-      Object.keys(_this.state.inputHeaderContext.components).forEach(function (key) {
-        var component = _this.state.inputHeaderContext.components[key];
+    _defineProperty(this, "expandAllClick", () => {
+      Object.keys(this.state.inputHeaderContext.components).forEach(key => {
+        const component = this.state.inputHeaderContext.components[key];
         component.componentApi.expand();
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "collapseAllClick", function () {
-      Object.keys(_this.state.inputHeaderContext.components).forEach(function (key) {
-        var component = _this.state.inputHeaderContext.components[key];
+    _defineProperty(this, "collapseAllClick", () => {
+      Object.keys(this.state.inputHeaderContext.components).forEach(key => {
+        const component = this.state.inputHeaderContext.components[key];
         component.componentApi.collapse();
       });
     });
 
-    _this.state = {
+    this.state = {
       collapsed: props.collapsedDefault,
       inputHeaderContext: {
-        registerInputHeader: _this.registerInputHeader,
-        unregisterInputHeader: _this.unregisterInputHeader,
-        stateChanged: function stateChanged() {
-          return _this.forceUpdate();
-        },
+        registerInputHeader: this.registerInputHeader,
+        unregisterInputHeader: this.unregisterInputHeader,
+        stateChanged: () => this.forceUpdate(),
         components: {}
       }
     };
-    _this.registerInputHeader = _this.registerInputHeader.bind(_assertThisInitialized(_this));
-    _this.unregisterInputHeader = _this.unregisterInputHeader.bind(_assertThisInitialized(_this));
-    _this.expand = _this.expand.bind(_assertThisInitialized(_this));
-    _this.collapse = _this.collapse.bind(_assertThisInitialized(_this));
-    _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
-    return _this;
+    this.registerInputHeader = this.registerInputHeader.bind(this);
+    this.unregisterInputHeader = this.unregisterInputHeader.bind(this);
+    this.expand = this.expand.bind(this);
+    this.collapse = this.collapse.bind(this);
+    this.toggle = this.toggle.bind(this);
   }
 
-  _createClass(InputHeaderRaw, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (!this.props.ignoreContext && this.props.inputHeaderContext) {
-        this.props.inputHeaderContext.unregisterInputHeader(this.componentId);
-      }
+  componentWillUnmount() {
+    if (!this.props.ignoreContext && this.props.inputHeaderContext) {
+      this.props.inputHeaderContext.unregisterInputHeader(this.componentId);
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!this.props.ignoreContext && this.props.inputHeaderContext) {
-        this.props.inputHeaderContext.registerInputHeader(this.componentId, {
-          componentId: this.componentId,
-          componentApi: {
-            expand: this.expand,
-            collapse: this.collapse,
-            toggle: this.toggle
-          },
-          props: _objectSpread(_objectSpread({}, {}), this.props),
-          state: _objectSpread(_objectSpread({}, {}), this.state)
-        });
-      }
-    }
-  }, {
-    key: "expand",
-    value: function expand() {
-      var _this2 = this;
-
-      this.props.collapsible && this.setState({
-        collapsed: false
-      }, function () {
-        var _this2$props$inputHea, _this2$props$inputHea2, _this2$props$onChange, _this2$props, _this2$props$onExpand, _this2$props2;
-
-        (_this2$props$inputHea = _this2.props.inputHeaderContext) === null || _this2$props$inputHea === void 0 ? void 0 : (_this2$props$inputHea2 = _this2$props$inputHea.stateChanged) === null || _this2$props$inputHea2 === void 0 ? void 0 : _this2$props$inputHea2.call(_this2$props$inputHea);
-        (_this2$props$onChange = (_this2$props = _this2.props).onChange) === null || _this2$props$onChange === void 0 ? void 0 : _this2$props$onChange.call(_this2$props, true);
-        (_this2$props$onExpand = (_this2$props2 = _this2.props).onExpanded) === null || _this2$props$onExpand === void 0 ? void 0 : _this2$props$onExpand.call(_this2$props2);
-      });
-    }
-  }, {
-    key: "collapse",
-    value: function collapse() {
-      var _this3 = this;
-
-      this.props.collapsible && this.setState({
-        collapsed: true
-      }, function () {
-        var _this3$props$inputHea, _this3$props$inputHea2, _this3$props$onChange, _this3$props, _this3$props$onCollap, _this3$props2;
-
-        (_this3$props$inputHea = _this3.props.inputHeaderContext) === null || _this3$props$inputHea === void 0 ? void 0 : (_this3$props$inputHea2 = _this3$props$inputHea.stateChanged) === null || _this3$props$inputHea2 === void 0 ? void 0 : _this3$props$inputHea2.call(_this3$props$inputHea);
-        (_this3$props$onChange = (_this3$props = _this3.props).onChange) === null || _this3$props$onChange === void 0 ? void 0 : _this3$props$onChange.call(_this3$props, false);
-        (_this3$props$onCollap = (_this3$props2 = _this3.props).onCollapsed) === null || _this3$props$onCollap === void 0 ? void 0 : _this3$props$onCollap.call(_this3$props2);
+  }
+
+  componentDidMount() {
+    if (!this.props.ignoreContext && this.props.inputHeaderContext) {
+      this.props.inputHeaderContext.registerInputHeader(this.componentId, {
+        componentId: this.componentId,
+        componentApi: {
+          expand: this.expand,
+          collapse: this.collapse,
+          toggle: this.toggle
+        },
+        props: _objectSpread(_objectSpread({}, {}), this.props),
+        state: _objectSpread(_objectSpread({}, {}), this.state)
       });
     }
-  }, {
-    key: "toggle",
-    value: function toggle() {
-      var _this4 = this;
+  }
 
-      this.props.collapsible && this.setState({
-        collapsed: !this.state.collapsed
-      }, function () {
-        var _this4$props$inputHea, _this4$props$inputHea2, _this4$props$onChange, _this4$props;
+  expand() {
+    this.props.collapsible && this.setState({
+      collapsed: false
+    }, () => {
+      var _this$props$inputHead, _this$props$inputHead2, _this$props$onChange, _this$props, _this$props$onExpande, _this$props2;
 
-        (_this4$props$inputHea = _this4.props.inputHeaderContext) === null || _this4$props$inputHea === void 0 ? void 0 : (_this4$props$inputHea2 = _this4$props$inputHea.stateChanged) === null || _this4$props$inputHea2 === void 0 ? void 0 : _this4$props$inputHea2.call(_this4$props$inputHea);
-        (_this4$props$onChange = (_this4$props = _this4.props).onChange) === null || _this4$props$onChange === void 0 ? void 0 : _this4$props$onChange.call(_this4$props, _this4.state.collapsed);
+      (_this$props$inputHead = this.props.inputHeaderContext) === null || _this$props$inputHead === void 0 ? void 0 : (_this$props$inputHead2 = _this$props$inputHead.stateChanged) === null || _this$props$inputHead2 === void 0 ? void 0 : _this$props$inputHead2.call(_this$props$inputHead);
+      (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, true);
+      (_this$props$onExpande = (_this$props2 = this.props).onExpanded) === null || _this$props$onExpande === void 0 ? void 0 : _this$props$onExpande.call(_this$props2);
+    });
+  }
 
-        if (_this4.state.collapsed) {
-          var _this4$props$onCollap, _this4$props2;
+  collapse() {
+    this.props.collapsible && this.setState({
+      collapsed: true
+    }, () => {
+      var _this$props$inputHead3, _this$props$inputHead4, _this$props$onChange2, _this$props3, _this$props$onCollaps, _this$props4;
 
-          (_this4$props$onCollap = (_this4$props2 = _this4.props).onCollapsed) === null || _this4$props$onCollap === void 0 ? void 0 : _this4$props$onCollap.call(_this4$props2);
-        }
+      (_this$props$inputHead3 = this.props.inputHeaderContext) === null || _this$props$inputHead3 === void 0 ? void 0 : (_this$props$inputHead4 = _this$props$inputHead3.stateChanged) === null || _this$props$inputHead4 === void 0 ? void 0 : _this$props$inputHead4.call(_this$props$inputHead3);
+      (_this$props$onChange2 = (_this$props3 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props3, false);
+      (_this$props$onCollaps = (_this$props4 = this.props).onCollapsed) === null || _this$props$onCollaps === void 0 ? void 0 : _this$props$onCollaps.call(_this$props4);
+    });
+  }
 
-        if (!_this4.state.collapsed) {
-          var _this4$props$onExpand, _this4$props3;
+  toggle() {
+    this.props.collapsible && this.setState({
+      collapsed: !this.state.collapsed
+    }, () => {
+      var _this$props$inputHead5, _this$props$inputHead6, _this$props$onChange3, _this$props5;
 
-          (_this4$props$onExpand = (_this4$props3 = _this4.props).onExpanded) === null || _this4$props$onExpand === void 0 ? void 0 : _this4$props$onExpand.call(_this4$props3);
-        }
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var collapsed = this.props.collapsed !== undefined ? !this.props.collapsed : !this.state.collapsed;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "input__header " + (this.props.className ? this.props.className : '') + ' ' + this.getTypeClass()
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames('input__header__top', {
-          'input__header__top--tall': this.props.showExpandAll
-        }, {
-          'input__header__top--no-bg': this.props.noBg
-        }, {
-          'input__header__top--clickable': this.props.collapsible && this.props.shouldToggleCollapseOnHeaderClick
-        }, this.props.headerClassName),
-        role: this.props.collapsible && this.props.shouldToggleCollapseOnHeaderClick ? 'button' : undefined,
-        onClick: this.props.collapsible && this.props.shouldToggleCollapseOnHeaderClick ? this.toggleClick : undefined
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'input__header__top__header-container '
-      }, this.props.icon && /*#__PURE__*/React.createElement("div", {
-        className: "input__header__icon line-height--0"
-      }, this.props.icon), /*#__PURE__*/React.createElement("div", {
-        className: "input__header__title__container"
-      }, this.props.title && /*#__PURE__*/React.createElement("div", {
-        className: "input__header__title"
-      }, this.renderTitle()), this.props.subTitle && /*#__PURE__*/React.createElement("div", {
-        className: "input__header__sub-title"
-      }, this.props.subTitle))), /*#__PURE__*/React.createElement("div", {
-        className: "input__header__top__button-container",
-        onClick: this.mainButtonClick
-      }, this.props.mainButton && this.props.mainButton, this.props.extraButtons ? /*#__PURE__*/React.createElement(_dropdown.Dropdown, {
-        header: /*#__PURE__*/React.createElement(_Button.Button, _extends({
-          blank: true,
-          circular: true
-        }, this.props.extraButtonsButtonProps), /*#__PURE__*/React.createElement(MoreIcon, null)),
-        showArrow: false,
-        headerClassName: 'line-height--0',
-        className: ''
-      }, this.renderExtraButtons()) : null, this.props.collapsible && /*#__PURE__*/React.createElement(_Button.Button, _extends({
-        circular: true,
-        blank: true,
-        className: "input__header__collapse-button line-height--0 ".concat(this.state.collapsed ? 'collapsed' : '')
-      }, this.props.collapseButtonsButtonProps, {
-        onClick: this.toggleClick
-      }), /*#__PURE__*/React.createElement(PlusIcon, null))), this.props.showExpandAll && Object.keys(this.state.inputHeaderContext.components).length > 0 && this.renderCollapseExpandAll()), /*#__PURE__*/React.createElement("div", {
-        className: 'input__header__bottom ' + (this.props.contentClassName ? this.props.contentClassName : '')
-      }, this.props.collapsible ? /*#__PURE__*/React.createElement(_Collapse.default //this was here for some reason but it's messing with aria
-      //collapsedHeight={'0.0001px'}
-      , {
-        in: collapsed,
-        mountOnEnter: this.props.mountOnEnter,
-        unmountOnExit: this.props.unmountOnExit,
-        "aria-expanded": collapsed ? 'false' : true
-      }, this.props.children) : this.props.children));
-    }
-  }, {
-    key: "registerInputHeader",
-    value: function registerInputHeader(componentId, component) {
-      this.setState(function (previousState) {
-        var components = Object.assign({}, previousState.inputHeaderContext.components);
-        components[componentId] = component;
-        return {
-          inputHeaderContext: _objectSpread(_objectSpread({}, previousState.inputHeaderContext), {}, {
-            components: components
-          })
-        };
-      });
-    }
-  }, {
-    key: "unregisterInputHeader",
-    value: function unregisterInputHeader(componentId) {
-      this.setState(function (previousState) {
-        var components = Object.assign({}, previousState.inputHeaderContext.components);
-        delete components[componentId];
-        return {
-          inputHeaderContext: _objectSpread(_objectSpread({}, previousState.inputHeaderContext), {}, {
-            components: components
-          })
-        };
-      });
-    }
-  }, {
-    key: "getTypeClass",
-    value: function getTypeClass() {
-      switch (this.props.type) {
-        case 'hero':
-          return 'input__header--hero';
-
-        case 'small':
-          return 'input__header--small';
-
-        default:
-          return '';
+      (_this$props$inputHead5 = this.props.inputHeaderContext) === null || _this$props$inputHead5 === void 0 ? void 0 : (_this$props$inputHead6 = _this$props$inputHead5.stateChanged) === null || _this$props$inputHead6 === void 0 ? void 0 : _this$props$inputHead6.call(_this$props$inputHead5);
+      (_this$props$onChange3 = (_this$props5 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props5, this.state.collapsed);
+
+      if (this.state.collapsed) {
+        var _this$props$onCollaps2, _this$props6;
+
+        (_this$props$onCollaps2 = (_this$props6 = this.props).onCollapsed) === null || _this$props$onCollaps2 === void 0 ? void 0 : _this$props$onCollaps2.call(_this$props6);
       }
-    }
-  }, {
-    key: "renderExtraButtons",
-    value: function renderExtraButtons() {
-      var arr = [];
-
-      if (typeof this.props.extraButtons === 'function') {
-        arr = this.props.extraButtons;
-      } else {
-        arr = this.props.extraButtons;
+
+      if (!this.state.collapsed) {
+        var _this$props$onExpande2, _this$props7;
+
+        (_this$props$onExpande2 = (_this$props7 = this.props).onExpanded) === null || _this$props$onExpande2 === void 0 ? void 0 : _this$props$onExpande2.call(_this$props7);
       }
+    });
+  }
 
-      return arr.map(function (extraButton, index) {
-        return /*#__PURE__*/React.createElement("li", {
-          key: index
-        }, extraButton);
-      });
-    }
-  }, {
-    key: "renderCollapseExpandAll",
-    value: function renderCollapseExpandAll() {
-      var _this5 = this;
-
-      var allCollapsed = true;
-      var allExpanded = true;
-      Object.keys(this.state.inputHeaderContext.components).forEach(function (key) {
-        var component = _this5.state.inputHeaderContext.components[key];
-
-        if (component && component.props.collapsible) {
-          if (component.state.collapsed) {
-            allExpanded = false;
-          } else {
-            allCollapsed = false;
-          }
-        }
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "input__header__expand-collapse--all",
-        onClick: this.containerClick
-      }, (allCollapsed || !allExpanded) && /*#__PURE__*/React.createElement(_Button.Button, {
-        noRipples: true,
-        small: true,
-        className: allExpanded || !allCollapsed ? 'mr-2' : '',
-        onClick: this.expandAllClick,
+  render() {
+    const collapsed = this.props.collapsed !== undefined ? !this.props.collapsed : !this.state.collapsed;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `input__header ` + (this.props.className ? this.props.className : '') + ' ' + this.getTypeClass()
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames('input__header__top', {
+        'input__header__top--tall': this.props.showExpandAll
+      }, {
+        'input__header__top--no-bg': this.props.noBg
+      }, {
+        'input__header__top--clickable': this.props.collapsible && this.props.shouldToggleCollapseOnHeaderClick
+      }, this.props.headerClassName),
+      role: this.props.collapsible && this.props.shouldToggleCollapseOnHeaderClick ? 'button' : undefined,
+      onClick: this.props.collapsible && this.props.shouldToggleCollapseOnHeaderClick ? this.toggleClick : undefined
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'input__header__top__header-container '
+    }, this.props.icon && /*#__PURE__*/React.createElement("div", {
+      className: "input__header__icon line-height--0"
+    }, this.props.icon), /*#__PURE__*/React.createElement("div", {
+      className: "input__header__title__container"
+    }, this.props.title && /*#__PURE__*/React.createElement("div", {
+      className: "input__header__title"
+    }, this.renderTitle()), this.props.subTitle && /*#__PURE__*/React.createElement("div", {
+      className: "input__header__sub-title"
+    }, this.props.subTitle))), /*#__PURE__*/React.createElement("div", {
+      className: "input__header__top__button-container",
+      onClick: this.mainButtonClick
+    }, this.props.mainButton && this.props.mainButton, this.props.extraButtons ? /*#__PURE__*/React.createElement(_dropdown.Dropdown, {
+      header: /*#__PURE__*/React.createElement(_Button.Button, _extends({
         blank: true,
-        Component: CollapseExpandButtonComponent
-      }, "Expand all"), (allExpanded || !allCollapsed) && /*#__PURE__*/React.createElement(_Button.Button, {
-        noRipples: true,
-        small: true,
-        onClick: this.collapseAllClick,
-        blank: true,
-        Component: CollapseExpandButtonComponent
-      }, "Collapse all"));
+        circular: true
+      }, this.props.extraButtonsButtonProps), /*#__PURE__*/React.createElement(MoreIcon, null)),
+      showArrow: false,
+      headerClassName: 'line-height--0',
+      className: ''
+    }, this.renderExtraButtons()) : null, this.props.collapsible && /*#__PURE__*/React.createElement(_Button.Button, _extends({
+      circular: true,
+      blank: true,
+      className: `input__header__collapse-button line-height--0 ${this.state.collapsed ? 'collapsed' : ''}`
+    }, this.props.collapseButtonsButtonProps, {
+      onClick: this.toggleClick
+    }), /*#__PURE__*/React.createElement(PlusIcon, null))), this.props.showExpandAll && Object.keys(this.state.inputHeaderContext.components).length > 0 && this.renderCollapseExpandAll()), /*#__PURE__*/React.createElement("div", {
+      className: 'input__header__bottom ' + (this.props.contentClassName ? this.props.contentClassName : '')
+    }, this.props.collapsible ? /*#__PURE__*/React.createElement(_Collapse.default //this was here for some reason but it's messing with aria
+    //collapsedHeight={'0.0001px'}
+    , {
+      in: collapsed,
+      mountOnEnter: this.props.mountOnEnter,
+      unmountOnExit: this.props.unmountOnExit,
+      "aria-expanded": collapsed ? 'false' : true
+    }, this.props.children) : this.props.children));
+  }
+
+  registerInputHeader(componentId, component) {
+    this.setState(previousState => {
+      let components = Object.assign({}, previousState.inputHeaderContext.components);
+      components[componentId] = component;
+      return {
+        inputHeaderContext: _objectSpread(_objectSpread({}, previousState.inputHeaderContext), {}, {
+          components
+        })
+      };
+    });
+  }
+
+  unregisterInputHeader(componentId) {
+    this.setState(previousState => {
+      let components = Object.assign({}, previousState.inputHeaderContext.components);
+      delete components[componentId];
+      return {
+        inputHeaderContext: _objectSpread(_objectSpread({}, previousState.inputHeaderContext), {}, {
+          components
+        })
+      };
+    });
+  }
+
+  getTypeClass() {
+    switch (this.props.type) {
+      case 'hero':
+        return 'input__header--hero';
+
+      case 'small':
+        return 'input__header--small';
+
+      default:
+        return '';
     }
-  }, {
-    key: "renderTitle",
-    value: function renderTitle() {
-      if (!this.props.tooltip) {
-        return this.props.title;
-      }
+  }
+
+  renderExtraButtons() {
+    let arr = [];
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.title, this.renderTooltip());
+    if (typeof this.props.extraButtons === 'function') {
+      arr = this.props.extraButtons;
+    } else {
+      arr = this.props.extraButtons;
     }
-  }, {
-    key: "renderTooltip",
-    value: function renderTooltip() {
-      var content = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : /*#__PURE__*/React.createElement("span", {
-        className: "label--help-icon"
-      }, "?");
-
-      if (this.props.tooltip) {
-        var _document;
-
-        var Tippy = require('@tippy.js/react').default;
-
-        return /*#__PURE__*/React.createElement(Tippy, _extends({
-          content: this.props.tooltip,
-          placement: "bottom",
-          animation: "scale-subtle",
-          arrow: false,
-          duration: 200,
-          delay: [75, 0],
-          distance: 8,
-          interactive: true,
-          appendTo: (_document = document) === null || _document === void 0 ? void 0 : _document.body,
-          trigger: "mouseenter focus"
-        }, this.props.tooltipProps), /*#__PURE__*/React.createElement("span", {
-          tabIndex: 0
-        }, content));
+
+    return arr.map((extraButton, index) => /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, extraButton));
+  }
+
+  renderCollapseExpandAll() {
+    let allCollapsed = true;
+    let allExpanded = true;
+    Object.keys(this.state.inputHeaderContext.components).forEach(key => {
+      const component = this.state.inputHeaderContext.components[key];
+
+      if (component && component.props.collapsible) {
+        if (component.state.collapsed) {
+          allExpanded = false;
+        } else {
+          allCollapsed = false;
+        }
       }
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "input__header__expand-collapse--all",
+      onClick: this.containerClick
+    }, (allCollapsed || !allExpanded) && /*#__PURE__*/React.createElement(_Button.Button, {
+      noRipples: true,
+      small: true,
+      className: allExpanded || !allCollapsed ? 'mr-2' : '',
+      onClick: this.expandAllClick,
+      blank: true,
+      Component: CollapseExpandButtonComponent
+    }, "Expand all"), (allExpanded || !allCollapsed) && /*#__PURE__*/React.createElement(_Button.Button, {
+      noRipples: true,
+      small: true,
+      onClick: this.collapseAllClick,
+      blank: true,
+      Component: CollapseExpandButtonComponent
+    }, "Collapse all"));
+  }
 
-      return content;
+  renderTitle() {
+    if (!this.props.tooltip) {
+      return this.props.title;
     }
-  }]);
 
-  return InputHeaderRaw;
-}(React.PureComponent);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.title, this.renderTooltip());
+  }
+
+  renderTooltip() {
+    let content = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : /*#__PURE__*/React.createElement("span", {
+      className: "label--help-icon"
+    }, "?");
+
+    if (this.props.tooltip) {
+      var _document;
+
+      const Tippy = require('@tippy.js/react').default;
+
+      return /*#__PURE__*/React.createElement(Tippy, _extends({
+        content: this.props.tooltip,
+        placement: "bottom",
+        animation: "scale-subtle",
+        arrow: false,
+        duration: 200,
+        delay: [75, 0],
+        distance: 8,
+        interactive: true,
+        appendTo: (_document = document) === null || _document === void 0 ? void 0 : _document.body,
+        trigger: "mouseenter focus"
+      }, this.props.tooltipProps), /*#__PURE__*/React.createElement("span", {
+        tabIndex: 0
+      }, content));
+    }
+
+    return content;
+  }
+
+}
 
 exports.InputHeaderRaw = InputHeaderRaw;
 
@@ -435,7 +370,7 @@ _defineProperty(InputHeaderRaw, "defaultProps", {
   stopsPropagation: true
 });
 
-var InputHeader = (0, _withThemeContext.withThemeContext)((0, _withInputHeaderContext.withInputHeaderContext)(InputHeaderRaw), 'inputHeader');
+const InputHeader = (0, _withThemeContext.withThemeContext)((0, _withInputHeaderContext.withInputHeaderContext)(InputHeaderRaw), 'inputHeader');
 exports.InputHeader = InputHeader;
 var _default = InputHeader;
 exports.default = _default;