@kiwicom/orbit-components/lib/Modal/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "ModalFooter", {
  enumerable: true,
  get: function get() {
    return _ModalFooter.default;
  }
});
Object.defineProperty(exports, "ModalHeader", {
  enumerable: true,
  get: function get() {
    return _ModalHeader.default;
  }
});
Object.defineProperty(exports, "ModalSection", {
  enumerable: true,
  get: function get() {
    return _ModalSection.default;
  }
});
exports.default = exports.PureModal = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _ButtonLink = _interopRequireWildcard(require("../ButtonLink"));

var _Close = _interopRequireDefault(require("../icons/Close"));

var _consts = require("./consts");

var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));

var _mediaQuery = _interopRequireWildcard(require("../utils/mediaQuery"));

var _ModalFooter = _interopRequireWildcard(require("./ModalFooter"));

var _ModalHeader = _interopRequireWildcard(require("./ModalHeader"));

var _ModalSection = _interopRequireWildcard(require("./ModalSection"));

var _Heading = require("../Heading");

var _rtl = require("../utils/rtl");

var _transition = _interopRequireDefault(require("../utils/transition"));

var _ModalContext = require("./ModalContext");

var _consts2 = require("../utils/mediaQuery/consts");

var _randomID = _interopRequireDefault(require("../utils/randomID"));

var _Dictionary = require("../Dictionary");

var _Translate = require("../Translate");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _typeof(obj) { 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); }

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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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

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 _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 getSizeToken = function getSizeToken() {
  return function (_ref) {
    var _tokens;

    var size = _ref.size,
        theme = _ref.theme;
    var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.SIZES.SMALL, theme.orbit.widthModalSmall), _defineProperty(_tokens, _consts.SIZES.NORMAL, theme.orbit.widthModalNormal), _defineProperty(_tokens, _consts.SIZES.LARGE, theme.orbit.widthModalLarge), _tokens);
    return tokens[size];
  };
}; // media query only for IE 10+, not Edge


var onlyIE = function onlyIE(style) {
  var breakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "all";
  return (0, _styledComponents.css)(["@media ", " and (-ms-high-contrast:none),(-ms-high-contrast:active){", ";}"], breakpoint, style);
};

var ModalBody = _styledComponents.default.div.withConfig({
  displayName: "Modal__ModalBody",
  componentId: "sc-1f0srsl-0"
})(["width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:", ";box-sizing:border-box;outline:none;overflow-x:hidden;background-color:rgba(0,0,0,0.5);font-family:", ";-webkit-overflow-scrolling:auto;", ";", ";"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.zIndexModalOverlay;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.fontfamily;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["overflow-y:auto;padding:", ";"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.spaceXXLarge;
})), onlyIE((0, _styledComponents.css)(["position:-ms-page;"])));

ModalBody.defaultProps = {
  theme: _defaultTheme.default
};

var ModalWrapper = _styledComponents.default.div.withConfig({
  displayName: "Modal__ModalWrapper",
  componentId: "sc-1f0srsl-1"
})(["box-sizing:border-box;min-height:100%;display:flex;align-items:flex-start;margin:0 auto;position:fixed;width:100%;border-top-left-radius:", ";border-top-right-radius:", ";transition:", ";top:", ";", ";", ";"], function (_ref5) {
  var isMobileFullPage = _ref5.isMobileFullPage;
  return !isMobileFullPage && "9px";
}, function (_ref6) {
  var isMobileFullPage = _ref6.isMobileFullPage;
  return !isMobileFullPage && "9px";
}, (0, _transition.default)(["top"], "normal", "ease-in-out"), function (_ref7) {
  var loaded = _ref7.loaded,
      isMobileFullPage = _ref7.isMobileFullPage;
  return loaded ? !isMobileFullPage && "32px" : "100%";
}, onlyIE((0, _styledComponents.css)(["height:1px;"])), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["position:relative;top:0;max-width:", ";align-items:center;"], getSizeToken)));

ModalWrapper.defaultProps = {
  theme: _defaultTheme.default
};

var CloseContainer = _styledComponents.default.div.withConfig({
  displayName: "Modal__CloseContainer",
  componentId: "sc-1f0srsl-2"
})(["display:flex;", ";position:", ";top:", ";right:0;z-index:800;justify-content:flex-end;align-items:center;box-sizing:border-box;height:52px;width:100%;max-width:", ";box-shadow:", ";background-color:", ";border-top-left-radius:", ";border-top-right-radius:", ";transition:", ";", ";& + ", ":first-of-type{padding-top:52px;border-top:0;margin:0;}", "{margin-", ":", ";& svg{transition:", ";color:", ";}&:hover svg{color:", ";}&:active svg{color:", ";}}"], function (_ref8) {
  var scrolled = _ref8.scrolled,
      fixedClose = _ref8.fixedClose,
      theme = _ref8.theme;
  return fixedClose || scrolled ? (0, _styledComponents.css)(["position:fixed;", ";"], onlyIE((0, _styledComponents.css)(["position:-ms-page;"]), "(max-width:".concat(+(0, _mediaQuery.getBreakpointWidth)(_consts2.QUERIES.LARGEMOBILE, theme, true) - 1, "px)"))) : (0, _styledComponents.css)(["position:absolute;"]);
}, function (_ref9) {
  var scrolled = _ref9.scrolled,
      fixedClose = _ref9.fixedClose;
  return fixedClose || scrolled ? "fixed" : "absolute";
}, function (_ref10) {
  var scrolled = _ref10.scrolled,
      fixedClose = _ref10.fixedClose,
      isMobileFullPage = _ref10.isMobileFullPage;
  return !isMobileFullPage && (fixedClose || scrolled) ? "32px" : "0";
}, function (_ref11) {
  var modalWidth = _ref11.modalWidth;
  return modalWidth ? "".concat(modalWidth, "px") : getSizeToken;
}, function (_ref12) {
  var scrolled = _ref12.scrolled;
  return scrolled && "0 2px 4px 0 rgba(23, 27, 30, 0.1)";
}, function (_ref13) {
  var theme = _ref13.theme,
      scrolled = _ref13.scrolled;
  return scrolled && theme.orbit.paletteWhite;
}, function (_ref14) {
  var isMobileFullPage = _ref14.isMobileFullPage;
  return !isMobileFullPage && "9px";
}, function (_ref15) {
  var isMobileFullPage = _ref15.isMobileFullPage;
  return !isMobileFullPage && "9px";
}, (0, _transition.default)(["box-shadow", "background-color"], "fast", "ease-in-out"), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["top:", ";right:", ";"], function (_ref16) {
  var scrolled = _ref16.scrolled,
      fixedClose = _ref16.fixedClose;
  return (fixedClose || scrolled) && "0";
}, function (_ref17) {
  var scrolled = _ref17.scrolled,
      fixedClose = _ref17.fixedClose;
  return (fixedClose || scrolled) && "auto";
})), _ModalSection.StyledModalSection, _ButtonLink.StyledButtonLink, _rtl.right, function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.spaceXXSmall;
}, (0, _transition.default)(["color"], "fast", "ease-in-out"), function (_ref19) {
  var theme = _ref19.theme;
  return theme.orbit.paletteInkLight;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.orbit.paletteInkLightHover;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.orbit.paletteInkLightActive;
});

CloseContainer.defaultProps = {
  theme: _defaultTheme.default
};

var ModalWrapperContent = _styledComponents.default.div.withConfig({
  displayName: "Modal__ModalWrapperContent",
  componentId: "sc-1f0srsl-3"
})(["position:absolute;box-sizing:border-box;border-top-left-radius:", ";border-top-right-radius:", ";background-color:", ";font-family:", ";width:100%;", ";bottom:", ";box-shadow:", ";overflow-y:auto;overflow-x:hidden;", ";", "{top:", ";opacity:", ";visibility:", ";transition:", ";}", "};", "{margin-bottom:", ";}", ";", ";", ";"], function (_ref22) {
  var isMobileFullPage = _ref22.isMobileFullPage;
  return !isMobileFullPage && "9px";
}, function (_ref23) {
  var isMobileFullPage = _ref23.isMobileFullPage;
  return !isMobileFullPage && "9px";
}, function (_ref24) {
  var theme = _ref24.theme;
  return theme.orbit.backgroundModal;
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.orbit.fontFamily;
}, function (_ref26) {
  var theme = _ref26.theme,
      fixedFooter = _ref26.fixedFooter,
      footerHeight = _ref26.footerHeight,
      isMobileFullPage = _ref26.isMobileFullPage;
  return isMobileFullPage ? (0, _styledComponents.css)(["max-height:100%;top:0;"]) : (0, _styledComponents.css)(["max-height:calc( 100% - ", " - ", " );"], theme.orbit.spaceXLarge, "".concat(fixedFooter && !!footerHeight ? footerHeight : 0, "px"));
}, function (_ref27) {
  var fixedFooter = _ref27.fixedFooter,
      footerHeight = _ref27.footerHeight,
      isMobileFullPage = _ref27.isMobileFullPage,
      theme = _ref27.theme;
  return "".concat((!isMobileFullPage ? parseInt(theme.orbit.spaceXLarge, 10) : 0) + (fixedFooter && !!footerHeight ? footerHeight : 0), "px");
}, function (_ref28) {
  var theme = _ref28.theme;
  return theme.orbit.boxShadowModal;
}, function (_ref29) {
  var fixedFooter = _ref29.fixedFooter,
      theme = _ref29.theme,
      footerHeight = _ref29.footerHeight,
      fullyScrolled = _ref29.fullyScrolled;
  return fixedFooter && footerHeight && (0, _styledComponents.css)(["", "{bottom:0;padding:", ";box-shadow:", ";position:fixed;transition:", ";}", ":last-of-type{padding-bottom:", ";margin-bottom:0;}"], _ModalFooter.StyledModalFooter, theme.orbit.spaceMedium, fullyScrolled ? "inset 0 1px 0 ".concat(theme.orbit.paletteCloudNormal, ", 0 -2px 4px 0 rgba(23, 27, 30, 0)") : "inset 0 0 0 transparent, 0 -2px 4px 0 rgba(23, 27, 30, 0.1)", (0, _transition.default)(["box-shadow"], "fast", "ease-in-out"), _ModalSection.StyledModalSection, theme.orbit.spaceLarge);
}, _ModalHeader.MobileHeader, function (_ref30) {
  var scrolled = _ref30.scrolled,
      theme = _ref30.theme,
      isMobileFullPage = _ref30.isMobileFullPage;
  return !isMobileFullPage && scrolled && theme.orbit.spaceXLarge;
}, function (_ref31) {
  var scrolled = _ref31.scrolled;
  return scrolled && "1";
}, function (_ref32) {
  var scrolled = _ref32.scrolled;
  return scrolled && "visible";
}, function (_ref33) {
  var scrolled = _ref33.scrolled,
      theme = _ref33.theme;
  return scrolled && "top ".concat(theme.orbit.durationNormal, " ease-in-out,\n    opacity ").concat(theme.orbit.durationFast, " ease-in-out,\n    visibility ").concat(theme.orbit.durationFast, " ease-in-out ").concat(theme.orbit.durationFast);
}, function (_ref34) {
  var scrolled = _ref34.scrolled;
  return scrolled && onlyIE((0, _styledComponents.css)(["", "{position:-ms-page;}"], _ModalHeader.MobileHeader));
}, _ModalHeader.StyledModalHeader, function (_ref35) {
  var hasModalSection = _ref35.hasModalSection,
      theme = _ref35.theme;
  return !hasModalSection && theme.orbit.spaceXLarge;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["position:relative;bottom:auto;border-radius:", ";padding-bottom:0;height:auto;overflow:visible;max-height:100%;", ":last-of-type{padding-bottom:", ";margin-bottom:", ";&::after{content:none;}}", "{margin-bottom:", ";}", "{padding:", ";max-width:", ";position:", ";box-shadow:", ";}", "{top:", ";width:", ";}"], function (_ref36) {
  var isMobileFullPage = _ref36.isMobileFullPage;
  return !isMobileFullPage && "9px";
}, _ModalSection.StyledModalSection, function (_ref37) {
  var theme = _ref37.theme;
  return theme.orbit.spaceXXLarge;
}, function (_ref38) {
  var fixedFooter = _ref38.fixedFooter,
      footerHeight = _ref38.footerHeight;
  return fixedFooter ? "".concat(footerHeight, "px") : "0";
}, _ModalHeader.StyledModalHeader, function (_ref39) {
  var hasModalSection = _ref39.hasModalSection,
      fixedFooter = _ref39.fixedFooter,
      footerHeight = _ref39.footerHeight;
  return !hasModalSection && fixedFooter ? "".concat(footerHeight, "px") : "0";
}, _ModalFooter.StyledModalFooter, function (_ref40) {
  var theme = _ref40.theme,
      fixedFooter = _ref40.fixedFooter;
  return fixedFooter ? "".concat(theme.orbit.spaceXLarge, " ").concat(theme.orbit.spaceXXLarge, "!important") : theme.orbit.spaceXXLarge;
}, function (_ref41) {
  var modalWidth = _ref41.modalWidth;
  return modalWidth ? "".concat(modalWidth, "px") : getSizeToken;
}, function (_ref42) {
  var fullyScrolled = _ref42.fullyScrolled,
      fixedFooter = _ref42.fixedFooter;
  return fixedFooter && fullyScrolled && "absolute";
}, function (_ref43) {
  var fullyScrolled = _ref43.fullyScrolled;
  return fullyScrolled && "none";
}, _ModalHeader.MobileHeader, function (_ref44) {
  var scrolled = _ref44.scrolled,
      theme = _ref44.theme;
  return scrolled ? "0" : "-".concat(theme.orbit.spaceXXLarge);
}, function (_ref45) {
  var modalWidth = _ref45.modalWidth,
      theme = _ref45.theme;
  return "calc(".concat(modalWidth, "px - 48px - ").concat(theme.orbit.spaceXXLarge, ")");
})), onlyIE((0, _styledComponents.css)(["", "{position:", ";}"], _ModalFooter.StyledModalFooter, function (_ref46) {
  var fixedFooter = _ref46.fixedFooter;
  return fixedFooter && "-ms-page";
})), function (_ref47) {
  var theme = _ref47.theme;
  return onlyIE((0, _styledComponents.css)(["", "{position:", ";box-shadow:", ";}", ";"], _ModalFooter.StyledModalFooter, function (_ref48) {
    var fullyScrolled = _ref48.fullyScrolled,
        fixedFooter = _ref48.fixedFooter;
    return fullyScrolled && fixedFooter && "static" || fixedFooter && "fixed";
  }, function (_ref49) {
    var fixedFooter = _ref49.fixedFooter;
    return !fixedFooter && "inset 0 0 0 1px ".concat(theme.orbit.paletteWhite);
  }, function (_ref50) {
    var fullyScrolled = _ref50.fullyScrolled,
        fixedFooter = _ref50.fixedFooter;
    return fullyScrolled && fixedFooter && (0, _styledComponents.css)(["", ":last-of-type{margin-bottom:0;}", "{margin-bottom:", ";}"], _ModalSection.StyledModalSection, _ModalHeader.StyledModalHeader, function (_ref51) {
      var hasModalSection = _ref51.hasModalSection;
      return !hasModalSection && "0";
    });
  }), (0, _mediaQuery.getBreakpointWidth)(_consts2.QUERIES.LARGEMOBILE, theme));
});

ModalWrapperContent.defaultProps = {
  theme: _defaultTheme.default
};

var ModalCloseButton = function ModalCloseButton(_ref52) {
  var onClick = _ref52.onClick,
      dataTest = _ref52.dataTest;
  var dictionary = React.useContext(_Dictionary.DictionaryContext);
  return React.createElement(_ButtonLink.default, {
    onClick: onClick,
    size: "normal",
    icon: React.createElement(_Close.default, null),
    transparent: true,
    dataTest: dataTest,
    title: (0, _Translate.pureTranslate)(dictionary, "button_close")
  });
};

var PureModal =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(PureModal, _React$PureComponent);

  function PureModal() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, PureModal);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(PureModal)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "state", {
      scrolled: false,
      loaded: false,
      fixedClose: false,
      fullyScrolled: false,
      modalWidth: 0,
      footerHeight: 0,
      hasModalSection: false
    });

    _defineProperty(_assertThisInitialized(_this), "modalContent", React.createRef());

    _defineProperty(_assertThisInitialized(_this), "modalBody", React.createRef());

    _defineProperty(_assertThisInitialized(_this), "offset", 40);

    _defineProperty(_assertThisInitialized(_this), "focusTriggered", false);

    _defineProperty(_assertThisInitialized(_this), "modalID", (0, _randomID.default)("modalID"));

    _defineProperty(_assertThisInitialized(_this), "setScrollPosition", function (value) {
      var _window;

      var _assertThisInitialize = _assertThisInitialized(_this),
          modalContent = _assertThisInitialize.modalContent,
          modalBody = _assertThisInitialize.modalBody;

      if (((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) >= (0, _mediaQuery.getBreakpointWidth)(_consts2.QUERIES.LARGEMOBILE, _this.props.theme, true)) {
        if (modalBody.current) {
          modalBody.current.scrollTop = value;
        }
      } else if (modalContent.current) {
        modalContent.current.scrollTop = value;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "setDimensions", function () {
      var content = _this.modalContent.current;

      if (content) {
        // added in 4.0.3, interpolation of styled component return static className
        var footerEl = content.querySelector("".concat(_ModalFooter.StyledModalFooter));
        var headingEl = content.querySelector("".concat(_Heading.StyledHeading));
        _this.offset = (headingEl === null || headingEl === void 0 ? void 0 : headingEl.clientHeight) + (headingEl === null || headingEl === void 0 ? void 0 : headingEl.offsetTop);
        var contentDimensions = content.getBoundingClientRect();
        var modalWidth = contentDimensions.width;
        var footerHeight = footerEl === null || footerEl === void 0 ? void 0 : footerEl.clientHeight;

        _this.setState({
          modalWidth: modalWidth,
          footerHeight: footerHeight
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "setHasModalSection", function () {
      if (!_this.state.hasModalSection) {
        _this.setState({
          hasModalSection: true
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "removeHasModalSection", function () {
      if (_this.state.hasModalSection) _this.setState({
        hasModalSection: false
      });
    });

    _defineProperty(_assertThisInitialized(_this), "decideFixedFooter", function () {
      // if the content height is smaller than window height, we need to explicitly set fullyScrolled to true
      var content = _this.modalContent.current;
      var body = _this.modalBody.current; // when scrollHeight + topPadding - scrollingElementHeight is smaller or even than window height

      var fullyScrolled = (content === null || content === void 0 ? void 0 : content.scrollHeight) + 40 - (body === null || body === void 0 ? void 0 : body.scrollTop) <= window.innerHeight;

      _this.setState({
        fullyScrolled: fullyScrolled
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
      _this.setDimensions();

      _this.decideFixedFooter();
    });

    _defineProperty(_assertThisInitialized(_this), "resolveAndSetStates", function (target, fullScrollOffset, fixCloseOffset) {
      _this.setState({
        scrolled: target.scrollTop >= _this.offset,
        fixedClose: target.scrollTop >= fixCloseOffset,
        fullyScrolled: _this.props.fixedFooter && // set fullyScrolled state sooner than the exact end of the scroll (with fullScrollOffset value)
        target.scrollTop >= target.scrollHeight - target.clientHeight - fullScrollOffset
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleMobileScroll", function (ev) {
      if (ev.target instanceof HTMLDivElement && ev.target === _this.modalContent.current) {
        _this.resolveAndSetStates(ev.target, 10, 1);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleScroll", function (ev) {
      if (ev.target instanceof HTMLDivElement && ev.target === _this.modalBody.current) {
        _this.resolveAndSetStates(ev.target, 40, 40);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (ev) {
      var onClose = _this.props.onClose;

      if (onClose && ev.key === "Escape") {
        ev.stopPropagation();
        onClose(ev);
      }

      _this.keyboardHandler(ev);
    });

    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (ev) {
      var onClose = _this.props.onClose;

      if (onClose && _this.modalContent.current && ev.target instanceof Element && !_this.modalContent.current.contains(ev.target) && /ModalBody|ModalWrapper/.test(ev.target.className)) {
        // If is clicked outside of modal
        onClose(ev);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "keyboardHandler", function (e) {
      if (e.keyCode === _keyMaps.default.TAB) {
        // Rotate Focus
        if (!_this.focusTriggered) {
          _this.focusTriggered = true;

          _this.manageFocus();
        }

        if (e.shiftKey && (document.activeElement === _this.firstFocusableEl || document.activeElement === _this.modalBody.current)) {
          e.preventDefault();

          _this.lastFocusableEl.focus();
        } else if (!e.shiftKey && document.activeElement === _this.lastFocusableEl) {
          e.preventDefault();

          _this.firstFocusableEl.focus();
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "manageFocus", function () {
      if (_this.focusTriggered) {
        var focusableElements = _this.modalContent.current.querySelectorAll(_consts.FOCUSABLE_ELEMENT_SELECTORS);

        if (focusableElements.length > 0) {
          var firstFocusableEl = focusableElements[0];
          var lastFocusableEl = focusableElements[focusableElements.length - 1];
          _this.firstFocusableEl = firstFocusableEl;
          _this.lastFocusableEl = lastFocusableEl;
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "firstFocusableEl", void 0);

    _defineProperty(_assertThisInitialized(_this), "lastFocusableEl", void 0);

    _defineProperty(_assertThisInitialized(_this), "timeout", void 0);

    return _this;
  }

  _createClass(PureModal, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      this.timeout = setTimeout(function () {
        _this2.setState({
          loaded: true
        });

        _this2.decideFixedFooter();

        _this2.setDimensions();

        _this2.setFirstFocus();
      }, 15);
      window.addEventListener("resize", this.handleResize);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (this.props.children !== prevProps.children) {
        this.decideFixedFooter();
        this.setDimensions();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener("resize", this.handleResize);

      if (this.timeout) {
        clearTimeout(this.timeout);
      }
    }
  }, {
    key: "setFirstFocus",
    value: function setFirstFocus() {
      if (this.modalBody.current) this.modalBody.current.focus();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          onClose = _this$props.onClose,
          children = _this$props.children,
          _this$props$size = _this$props.size,
          size = _this$props$size === void 0 ? _consts.SIZES.NORMAL : _this$props$size,
          _this$props$fixedFoot = _this$props.fixedFooter,
          fixedFooter = _this$props$fixedFoot === void 0 ? false : _this$props$fixedFoot,
          dataTest = _this$props.dataTest,
          _this$props$isMobileF = _this$props.isMobileFullPage,
          isMobileFullPage = _this$props$isMobileF === void 0 ? false : _this$props$isMobileF;
      var _this$state = this.state,
          scrolled = _this$state.scrolled,
          loaded = _this$state.loaded,
          fixedClose = _this$state.fixedClose,
          fullyScrolled = _this$state.fullyScrolled,
          modalWidth = _this$state.modalWidth,
          footerHeight = _this$state.footerHeight,
          hasModalSection = _this$state.hasModalSection;
      return React.createElement(ModalBody, {
        tabIndex: "0",
        onKeyDown: this.handleKeyDown,
        onScroll: this.handleScroll,
        onClick: this.handleClickOutside,
        "data-test": dataTest,
        ref: this.modalBody,
        role: "dialog",
        "aria-modal": "true",
        "aria-labelledby": this.modalID
      }, React.createElement(ModalWrapper, {
        size: size,
        loaded: loaded,
        onScroll: this.handleMobileScroll,
        fixedFooter: fixedFooter,
        id: this.modalID,
        isMobileFullPage: isMobileFullPage
      }, React.createElement(ModalWrapperContent, {
        size: size,
        fixedFooter: fixedFooter,
        scrolled: scrolled,
        ref: this.modalContent,
        fixedClose: fixedClose,
        fullyScrolled: fullyScrolled,
        modalWidth: modalWidth,
        footerHeight: footerHeight,
        hasModalSection: hasModalSection,
        isMobileFullPage: isMobileFullPage
      }, React.createElement(CloseContainer, {
        modalWidth: modalWidth,
        size: size,
        scrolled: scrolled,
        fixedClose: fixedClose,
        isMobileFullPage: isMobileFullPage
      }, onClose && React.createElement(ModalCloseButton, {
        onClick: onClose,
        dataTest: _consts.CLOSE_BUTTON_DATA_TEST
      })), React.createElement(_ModalContext.ModalContext.Provider, {
        value: {
          setDimensions: this.setDimensions,
          decideFixedFooter: this.decideFixedFooter,
          setHasModalSection: this.setHasModalSection,
          removeHasModalSection: this.removeHasModalSection,
          manageFocus: this.manageFocus,
          hasModalSection: hasModalSection,
          isMobileFullPage: isMobileFullPage
        }
      }, children))));
    }
  }]);

  return PureModal;
}(React.PureComponent);

exports.PureModal = PureModal;

_defineProperty(PureModal, "defaultProps", {
  theme: _defaultTheme.default
});

var ThemedModal = (0, _styledComponents.withTheme)(PureModal);
ThemedModal.displayName = "Modal";
var _default = ThemedModal;
exports.default = _default;