react-odyssey
Version:
React components for Odyssey design system
1,622 lines (1,302 loc) • 144 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === 'object')
exports["ReactOdyssey"] = factory(require("react"), require("react-dom"));
else
root["ReactOdyssey"] = factory(root["React"], root["ReactDOM"]);
})(typeof self !== "undefined" ? self : this, function(__WEBPACK_EXTERNAL_MODULE__0__, __WEBPACK_EXTERNAL_MODULE__13__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 23);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if ( true && module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else if (true) {
// register as 'classnames', consistent with npm package name
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
return classNames;
}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {}
}());
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
if (false) { var throwOnDirectAccess, ReactIs; } else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = __webpack_require__(10)();
}
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.canUseDOM = undefined;
var _exenv = __webpack_require__(18);
var _exenv2 = _interopRequireDefault(_exenv);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var EE = _exenv2.default;
var SafeHTMLElement = EE.canUseDOM ? window.HTMLElement : {};
var canUseDOM = exports.canUseDOM = EE.canUseDOM;
exports.default = SafeHTMLElement;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Modal = __webpack_require__(12);
var _Modal2 = _interopRequireDefault(_Modal);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Modal2.default;
module.exports = exports["default"];
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = findTabbableDescendants;
/*!
* Adapted from jQuery UI core
*
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/ui-core/
*/
var tabbableNode = /input|select|textarea|button|object/;
function hidesContents(element) {
var zeroSize = element.offsetWidth <= 0 && element.offsetHeight <= 0;
// If the node is empty, this is good enough
if (zeroSize && !element.innerHTML) return true;
// Otherwise we need to check some styles
var style = window.getComputedStyle(element);
return zeroSize ? style.getPropertyValue("overflow") !== "visible" ||
// if 'overflow: visible' set, check if there is actually any overflow
element.scrollWidth <= 0 && element.scrollHeight <= 0 : style.getPropertyValue("display") == "none";
}
function visible(element) {
var parentElement = element;
while (parentElement) {
if (parentElement === document.body) break;
if (hidesContents(parentElement)) return false;
parentElement = parentElement.parentNode;
}
return true;
}
function focusable(element, isTabIndexNotNaN) {
var nodeName = element.nodeName.toLowerCase();
var res = tabbableNode.test(nodeName) && !element.disabled || (nodeName === "a" ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
return res && visible(element);
}
function tabbable(element) {
var tabIndex = element.getAttribute("tabindex");
if (tabIndex === null) tabIndex = undefined;
var isTabIndexNaN = isNaN(tabIndex);
return (isTabIndexNaN || tabIndex >= 0) && focusable(element, !isTabIndexNaN);
}
function findTabbableDescendants(element) {
return [].slice.call(element.querySelectorAll("*"), 0).filter(tabbable);
}
module.exports = exports["default"];
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.assertNodeList = assertNodeList;
exports.setElement = setElement;
exports.validateElement = validateElement;
exports.hide = hide;
exports.show = show;
exports.documentNotReadyOrSSRTesting = documentNotReadyOrSSRTesting;
exports.resetForTesting = resetForTesting;
var _warning = __webpack_require__(17);
var _warning2 = _interopRequireDefault(_warning);
var _safeHTMLElement = __webpack_require__(3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var globalElement = null;
function assertNodeList(nodeList, selector) {
if (!nodeList || !nodeList.length) {
throw new Error("react-modal: No elements were found for selector " + selector + ".");
}
}
function setElement(element) {
var useElement = element;
if (typeof useElement === "string" && _safeHTMLElement.canUseDOM) {
var el = document.querySelectorAll(useElement);
assertNodeList(el, useElement);
useElement = "length" in el ? el[0] : el;
}
globalElement = useElement || globalElement;
return globalElement;
}
function validateElement(appElement) {
if (!appElement && !globalElement) {
(0, _warning2.default)(false, ["react-modal: App element is not defined.", "Please use `Modal.setAppElement(el)` or set `appElement={el}`.", "This is needed so screen readers don't see main content", "when modal is opened. It is not recommended, but you can opt-out", "by setting `ariaHideApp={false}`."].join(" "));
return false;
}
return true;
}
function hide(appElement) {
if (validateElement(appElement)) {
(appElement || globalElement).setAttribute("aria-hidden", "true");
}
}
function show(appElement) {
if (validateElement(appElement)) {
(appElement || globalElement).removeAttribute("aria-hidden");
}
}
function documentNotReadyOrSSRTesting() {
globalElement = null;
}
function resetForTesting() {
globalElement = null;
}
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// Tracks portals that are open and emits events to subscribers
var PortalOpenInstances = function PortalOpenInstances() {
var _this = this;
_classCallCheck(this, PortalOpenInstances);
this.register = function (openInstance) {
if (_this.openInstances.indexOf(openInstance) !== -1) {
if (false) {}
return;
}
_this.openInstances.push(openInstance);
_this.emit("register");
};
this.deregister = function (openInstance) {
var index = _this.openInstances.indexOf(openInstance);
if (index === -1) {
if (false) {}
return;
}
_this.openInstances.splice(index, 1);
_this.emit("deregister");
};
this.subscribe = function (callback) {
_this.subscribers.push(callback);
};
this.emit = function (eventType) {
_this.subscribers.forEach(function (subscriber) {
return subscriber(eventType,
// shallow copy to avoid accidental mutation
_this.openInstances.slice());
});
};
this.openInstances = [];
this.subscribers = [];
};
var portalOpenInstances = new PortalOpenInstances();
exports.default = portalOpenInstances;
module.exports = exports["default"];
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ReactPropTypesSecret = __webpack_require__(11);
function emptyFunction() {}
function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction;
module.exports = function() {
function shim(props, propName, componentName, location, propFullName, secret) {
if (secret === ReactPropTypesSecret) {
// It is still safe when called from React.
return;
}
var err = new Error(
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
'Use PropTypes.checkPropTypes() to call them. ' +
'Read more at http://fb.me/use-check-prop-types'
);
err.name = 'Invariant Violation';
throw err;
};
shim.isRequired = shim;
function getShim() {
return shim;
};
// Important!
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
var ReactPropTypes = {
array: shim,
bool: shim,
func: shim,
number: shim,
object: shim,
string: shim,
symbol: shim,
any: shim,
arrayOf: getShim,
element: shim,
elementType: shim,
instanceOf: getShim,
node: shim,
objectOf: getShim,
oneOf: getShim,
oneOfType: getShim,
shape: getShim,
exact: getShim,
checkPropTypes: emptyFunctionWithReset,
resetWarningCache: emptyFunction
};
ReactPropTypes.PropTypes = ReactPropTypes;
return ReactPropTypes;
};
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
module.exports = ReactPropTypesSecret;
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.bodyOpenClassName = exports.portalClassName = undefined;
var _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; };
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(13);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _ModalPortal = __webpack_require__(14);
var _ModalPortal2 = _interopRequireDefault(_ModalPortal);
var _ariaAppHider = __webpack_require__(6);
var ariaAppHider = _interopRequireWildcard(_ariaAppHider);
var _safeHTMLElement = __webpack_require__(3);
var _safeHTMLElement2 = _interopRequireDefault(_safeHTMLElement);
var _reactLifecyclesCompat = __webpack_require__(21);
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)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var portalClassName = exports.portalClassName = "ReactModalPortal";
var bodyOpenClassName = exports.bodyOpenClassName = "ReactModal__Body--open";
var isReact16 = _reactDom2.default.createPortal !== undefined;
var getCreatePortal = function getCreatePortal() {
return isReact16 ? _reactDom2.default.createPortal : _reactDom2.default.unstable_renderSubtreeIntoContainer;
};
function getParentElement(parentSelector) {
return parentSelector();
}
var Modal = function (_Component) {
_inherits(Modal, _Component);
function Modal() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Modal);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Modal.__proto__ || Object.getPrototypeOf(Modal)).call.apply(_ref, [this].concat(args))), _this), _this.removePortal = function () {
!isReact16 && _reactDom2.default.unmountComponentAtNode(_this.node);
var parent = getParentElement(_this.props.parentSelector);
if (parent) {
parent.removeChild(_this.node);
} else {
// eslint-disable-next-line no-console
console.warn('React-Modal: "parentSelector" prop did not returned any DOM ' + "element. Make sure that the parent element is unmounted to " + "avoid any memory leaks.");
}
}, _this.portalRef = function (ref) {
_this.portal = ref;
}, _this.renderPortal = function (props) {
var createPortal = getCreatePortal();
var portal = createPortal(_this, _react2.default.createElement(_ModalPortal2.default, _extends({ defaultStyles: Modal.defaultStyles }, props)), _this.node);
_this.portalRef(portal);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Modal, [{
key: "componentDidMount",
value: function componentDidMount() {
if (!_safeHTMLElement.canUseDOM) return;
if (!isReact16) {
this.node = document.createElement("div");
}
this.node.className = this.props.portalClassName;
var parent = getParentElement(this.props.parentSelector);
parent.appendChild(this.node);
!isReact16 && this.renderPortal(this.props);
}
}, {
key: "getSnapshotBeforeUpdate",
value: function getSnapshotBeforeUpdate(prevProps) {
var prevParent = getParentElement(prevProps.parentSelector);
var nextParent = getParentElement(this.props.parentSelector);
return { prevParent: prevParent, nextParent: nextParent };
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, _, snapshot) {
if (!_safeHTMLElement.canUseDOM) return;
var _props = this.props,
isOpen = _props.isOpen,
portalClassName = _props.portalClassName;
if (prevProps.portalClassName !== portalClassName) {
this.node.className = portalClassName;
}
var prevParent = snapshot.prevParent,
nextParent = snapshot.nextParent;
if (nextParent !== prevParent) {
prevParent.removeChild(this.node);
nextParent.appendChild(this.node);
}
// Stop unnecessary renders if modal is remaining closed
if (!prevProps.isOpen && !isOpen) return;
!isReact16 && this.renderPortal(this.props);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (!_safeHTMLElement.canUseDOM || !this.node || !this.portal) return;
var state = this.portal.state;
var now = Date.now();
var closesAt = state.isOpen && this.props.closeTimeoutMS && (state.closesAt || now + this.props.closeTimeoutMS);
if (closesAt) {
if (!state.beforeClose) {
this.portal.closeWithTimeout();
}
setTimeout(this.removePortal, closesAt - now);
} else {
this.removePortal();
}
}
}, {
key: "render",
value: function render() {
if (!_safeHTMLElement.canUseDOM || !isReact16) {
return null;
}
if (!this.node && isReact16) {
this.node = document.createElement("div");
}
var createPortal = getCreatePortal();
return createPortal(_react2.default.createElement(_ModalPortal2.default, _extends({
ref: this.portalRef,
defaultStyles: Modal.defaultStyles
}, this.props)), this.node);
}
}], [{
key: "setAppElement",
value: function setAppElement(element) {
ariaAppHider.setElement(element);
}
/* eslint-disable react/no-unused-prop-types */
/* eslint-enable react/no-unused-prop-types */
}]);
return Modal;
}(_react.Component);
Modal.propTypes = {
isOpen: _propTypes2.default.bool.isRequired,
style: _propTypes2.default.shape({
content: _propTypes2.default.object,
overlay: _propTypes2.default.object
}),
portalClassName: _propTypes2.default.string,
bodyOpenClassName: _propTypes2.default.string,
htmlOpenClassName: _propTypes2.default.string,
className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
base: _propTypes2.default.string.isRequired,
afterOpen: _propTypes2.default.string.isRequired,
beforeClose: _propTypes2.default.string.isRequired
})]),
overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
base: _propTypes2.default.string.isRequired,
afterOpen: _propTypes2.default.string.isRequired,
beforeClose: _propTypes2.default.string.isRequired
})]),
appElement: _propTypes2.default.instanceOf(_safeHTMLElement2.default),
onAfterOpen: _propTypes2.default.func,
onRequestClose: _propTypes2.default.func,
closeTimeoutMS: _propTypes2.default.number,
ariaHideApp: _propTypes2.default.bool,
shouldFocusAfterRender: _propTypes2.default.bool,
shouldCloseOnOverlayClick: _propTypes2.default.bool,
shouldReturnFocusAfterClose: _propTypes2.default.bool,
parentSelector: _propTypes2.default.func,
aria: _propTypes2.default.object,
data: _propTypes2.default.object,
role: _propTypes2.default.string,
contentLabel: _propTypes2.default.string,
shouldCloseOnEsc: _propTypes2.default.bool,
overlayRef: _propTypes2.default.func,
contentRef: _propTypes2.default.func
};
Modal.defaultProps = {
isOpen: false,
portalClassName: portalClassName,
bodyOpenClassName: bodyOpenClassName,
role: "dialog",
ariaHideApp: true,
closeTimeoutMS: 0,
shouldFocusAfterRender: true,
shouldCloseOnEsc: true,
shouldCloseOnOverlayClick: true,
shouldReturnFocusAfterClose: true,
parentSelector: function parentSelector() {
return document.body;
}
};
Modal.defaultStyles = {
overlay: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(255, 255, 255, 0.75)"
},
content: {
position: "absolute",
top: "40px",
left: "40px",
right: "40px",
bottom: "40px",
border: "1px solid #ccc",
background: "#fff",
overflow: "auto",
WebkitOverflowScrolling: "touch",
borderRadius: "4px",
outline: "none",
padding: "20px"
}
};
(0, _reactLifecyclesCompat.polyfill)(Modal);
exports.default = Modal;
/***/ }),
/* 13 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__13__;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _focusManager = __webpack_require__(15);
var focusManager = _interopRequireWildcard(_focusManager);
var _scopeTab = __webpack_require__(16);
var _scopeTab2 = _interopRequireDefault(_scopeTab);
var _ariaAppHider = __webpack_require__(6);
var ariaAppHider = _interopRequireWildcard(_ariaAppHider);
var _classList = __webpack_require__(19);
var classList = _interopRequireWildcard(_classList);
var _safeHTMLElement = __webpack_require__(3);
var _safeHTMLElement2 = _interopRequireDefault(_safeHTMLElement);
var _portalOpenInstances = __webpack_require__(7);
var _portalOpenInstances2 = _interopRequireDefault(_portalOpenInstances);
__webpack_require__(20);
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)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// so that our CSS is statically analyzable
var CLASS_NAMES = {
overlay: "ReactModal__Overlay",
content: "ReactModal__Content"
};
var TAB_KEY = 9;
var ESC_KEY = 27;
var ariaHiddenInstances = 0;
var ModalPortal = function (_Component) {
_inherits(ModalPortal, _Component);
function ModalPortal(props) {
_classCallCheck(this, ModalPortal);
var _this = _possibleConstructorReturn(this, (ModalPortal.__proto__ || Object.getPrototypeOf(ModalPortal)).call(this, props));
_this.setOverlayRef = function (overlay) {
_this.overlay = overlay;
_this.props.overlayRef && _this.props.overlayRef(overlay);
};
_this.setContentRef = function (content) {
_this.content = content;
_this.props.contentRef && _this.props.contentRef(content);
};
_this.afterClose = function () {
var _this$props = _this.props,
appElement = _this$props.appElement,
ariaHideApp = _this$props.ariaHideApp,
htmlOpenClassName = _this$props.htmlOpenClassName,
bodyOpenClassName = _this$props.bodyOpenClassName;
// Remove classes.
bodyOpenClassName && classList.remove(document.body, bodyOpenClassName);
htmlOpenClassName && classList.remove(document.getElementsByTagName("html")[0], htmlOpenClassName);
// Reset aria-hidden attribute if all modals have been removed
if (ariaHideApp && ariaHiddenInstances > 0) {
ariaHiddenInstances -= 1;
if (ariaHiddenInstances === 0) {
ariaAppHider.show(appElement);
}
}
if (_this.props.shouldFocusAfterRender) {
if (_this.props.shouldReturnFocusAfterClose) {
focusManager.returnFocus();
focusManager.teardownScopedFocus();
} else {
focusManager.popWithoutFocus();
}
}
if (_this.props.onAfterClose) {
_this.props.onAfterClose();
}
_portalOpenInstances2.default.deregister(_this);
};
_this.open = function () {
_this.beforeOpen();
if (_this.state.afterOpen && _this.state.beforeClose) {
clearTimeout(_this.closeTimer);
_this.setState({ beforeClose: false });
} else {
if (_this.props.shouldFocusAfterRender) {
focusManager.setupScopedFocus(_this.node);
focusManager.markForFocusLater();
}
_this.setState({ isOpen: true }, function () {
_this.setState({ afterOpen: true });
if (_this.props.isOpen && _this.props.onAfterOpen) {
_this.props.onAfterOpen({
overlayEl: _this.overlay,
contentEl: _this.content
});
}
});
}
};
_this.close = function () {
if (_this.props.closeTimeoutMS > 0) {
_this.closeWithTimeout();
} else {
_this.closeWithoutTimeout();
}
};
_this.focusContent = function () {
return _this.content && !_this.contentHasFocus() && _this.content.focus();
};
_this.closeWithTimeout = function () {
var closesAt = Date.now() + _this.props.closeTimeoutMS;
_this.setState({ beforeClose: true, closesAt: closesAt }, function () {
_this.closeTimer = setTimeout(_this.closeWithoutTimeout, _this.state.closesAt - Date.now());
});
};
_this.closeWithoutTimeout = function () {
_this.setState({
beforeClose: false,
isOpen: false,
afterOpen: false,
closesAt: null
}, _this.afterClose);
};
_this.handleKeyDown = function (event) {
if (event.keyCode === TAB_KEY) {
(0, _scopeTab2.default)(_this.content, event);
}
if (_this.props.shouldCloseOnEsc && event.keyCode === ESC_KEY) {
event.stopPropagation();
_this.requestClose(event);
}
};
_this.handleOverlayOnClick = function (event) {
if (_this.shouldClose === null) {
_this.shouldClose = true;
}
if (_this.shouldClose && _this.props.shouldCloseOnOverlayClick) {
if (_this.ownerHandlesClose()) {
_this.requestClose(event);
} else {
_this.focusContent();
}
}
_this.shouldClose = null;
};
_this.handleContentOnMouseUp = function () {
_this.shouldClose = false;
};
_this.handleOverlayOnMouseDown = function (event) {
if (!_this.props.shouldCloseOnOverlayClick && event.target == _this.overlay) {
event.preventDefault();
}
};
_this.handleContentOnClick = function () {
_this.shouldClose = false;
};
_this.handleContentOnMouseDown = function () {
_this.shouldClose = false;
};
_this.requestClose = function (event) {
return _this.ownerHandlesClose() && _this.props.onRequestClose(event);
};
_this.ownerHandlesClose = function () {
return _this.props.onRequestClose;
};
_this.shouldBeClosed = function () {
return !_this.state.isOpen && !_this.state.beforeClose;
};
_this.contentHasFocus = function () {
return document.activeElement === _this.content || _this.content.contains(document.activeElement);
};
_this.buildClassName = function (which, additional) {
var classNames = (typeof additional === "undefined" ? "undefined" : _typeof(additional)) === "object" ? additional : {
base: CLASS_NAMES[which],
afterOpen: CLASS_NAMES[which] + "--after-open",
beforeClose: CLASS_NAMES[which] + "--before-close"
};
var className = classNames.base;
if (_this.state.afterOpen) {
className = className + " " + classNames.afterOpen;
}
if (_this.state.beforeClose) {
className = className + " " + classNames.beforeClose;
}
return typeof additional === "string" && additional ? className + " " + additional : className;
};
_this.attributesFromObject = function (prefix, items) {
return Object.keys(items).reduce(function (acc, name) {
acc[prefix + "-" + name] = items[name];
return acc;
}, {});
};
_this.state = {
afterOpen: false,
beforeClose: false
};
_this.shouldClose = null;
_this.moveFromContentToOverlay = null;
return _this;
}
_createClass(ModalPortal, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.isOpen) {
this.open();
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (false) {}
if (this.props.isOpen && !prevProps.isOpen) {
this.open();
} else if (!this.props.isOpen && prevProps.isOpen) {
this.close();
}
// Focus only needs to be set once when the modal is being opened
if (this.props.shouldFocusAfterRender && this.state.isOpen && !prevState.isOpen) {
this.focusContent();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.state.isOpen) {
this.afterClose();
}
clearTimeout(this.closeTimer);
}
}, {
key: "beforeOpen",
value: function beforeOpen() {
var _props = this.props,
appElement = _props.appElement,
ariaHideApp = _props.ariaHideApp,
htmlOpenClassName = _props.htmlOpenClassName,
bodyOpenClassName = _props.bodyOpenClassName;
// Add classes.
bodyOpenClassName && classList.add(document.body, bodyOpenClassName);
htmlOpenClassName && classList.add(document.getElementsByTagName("html")[0], htmlOpenClassName);
if (ariaHideApp) {
ariaHiddenInstances += 1;
ariaAppHider.hide(appElement);
}
_portalOpenInstances2.default.register(this);
}
// Don't steal focus from inner elements
}, {
key: "render",
value: function render() {
var _props2 = this.props,
id = _props2.id,
className = _props2.className,
overlayClassName = _props2.overlayClassName,
defaultStyles = _props2.defaultStyles;
var contentStyles = className ? {} : defaultStyles.content;
var overlayStyles = overlayClassName ? {} : defaultStyles.overlay;
return this.shouldBeClosed() ? null : _react2.default.createElement(
"div",
{
ref: this.setOverlayRef,
className: this.buildClassName("overlay", overlayClassName),
style: _extends({}, overlayStyles, this.props.style.overlay),
onClick: this.handleOverlayOnClick,
onMouseDown: this.handleOverlayOnMouseDown
},
_react2.default.createElement(
"div",
_extends({
id: id,
ref: this.setContentRef,
style: _extends({}, contentStyles, this.props.style.content),
className: this.buildClassName("content", className),
tabIndex: "-1",
onKeyDown: this.handleKeyDown,
onMouseDown: this.handleContentOnMouseDown,
onMouseUp: this.handleContentOnMouseUp,
onClick: this.handleContentOnClick,
role: this.props.role,
"aria-label": this.props.contentLabel
}, this.attributesFromObject("aria", this.props.aria || {}), this.attributesFromObject("data", this.props.data || {}), {
"data-testid": this.props.testId
}),
this.props.children
)
);
}
}]);
return ModalPortal;
}(_react.Component);
ModalPortal.defaultProps = {
style: {
overlay: {},
content: {}
},
defaultStyles: {}
};
ModalPortal.propTypes = {
isOpen: _propTypes2.default.bool.isRequired,
defaultStyles: _propTypes2.default.shape({
content: _propTypes2.default.object,
overlay: _propTypes2.default.object
}),
style: _propTypes2.default.shape({
content: _propTypes2.default.object,
overlay: _propTypes2.default.object
}),
className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
bodyOpenClassName: _propTypes2.default.string,
htmlOpenClassName: _propTypes2.default.string,
ariaHideApp: _propTypes2.default.bool,
appElement: _propTypes2.default.instanceOf(_safeHTMLElement2.default),
onAfterOpen: _propTypes2.default.func,
onAfterClose: _propTypes2.default.func,
onRequestClose: _propTypes2.default.func,
closeTimeoutMS: _propTypes2.default.number,
shouldFocusAfterRender: _propTypes2.default.bool,
shouldCloseOnOverlayClick: _propTypes2.default.bool,
shouldReturnFocusAfterClose: _propTypes2.default.bool,
role: _propTypes2.default.string,
contentLabel: _propTypes2.default.string,
aria: _propTypes2.default.object,
data: _propTypes2.default.object,
children: _propTypes2.default.node,
shouldCloseOnEsc: _propTypes2.default.bool,
overlayRef: _propTypes2.default.func,
contentRef: _propTypes2.default.func,
id: _propTypes2.default.string,
testId: _propTypes2.default.string
};
exports.default = ModalPortal;
module.exports = exports["default"];
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.handleBlur = handleBlur;
exports.handleFocus = handleFocus;
exports.markForFocusLater = markForFocusLater;
exports.returnFocus = returnFocus;
exports.popWithoutFocus = popWithoutFocus;
exports.setupScopedFocus = setupScopedFocus;
exports.teardownScopedFocus = teardownScopedFocus;
var _tabbable = __webpack_require__(5);
var _tabbable2 = _interopRequireDefault(_tabbable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var focusLaterElements = [];
var modalElement = null;
var needToFocus = false;
function handleBlur() {
needToFocus = true;
}
function handleFocus() {
if (needToFocus) {
needToFocus = false;
if (!modalElement) {
return;
}
// need to see how jQuery shims document.on('focusin') so we don't need the
// setTimeout, firefox doesn't support focusin, if it did, we could focus
// the element outside of a setTimeout. Side-effect of this implementation
// is that the document.body gets focus, and then we focus our element right
// after, seems fine.
setTimeout(function () {
if (modalElement.contains(document.activeElement)) {
return;
}
var el = (0, _tabbable2.default)(modalElement)[0] || modalElement;
el.focus();
}, 0);
}
}
function markForFocusLater() {
focusLaterElements.push(document.activeElement);
}
/* eslint-disable no-console */
function returnFocus() {
var toFocus = null;
try {
if (focusLaterElements.length !== 0) {
toFocus = focusLaterElements.pop();
toFocus.focus();
}
return;
} catch (e) {
console.warn(["You tried to return focus to", toFocus, "but it is not in the DOM anymore"].join(" "));
}
}
/* eslint-enable no-console */
function popWithoutFocus() {
focusLaterElements.length > 0 && focusLaterElements.pop();
}
function setupScopedFocus(element) {
modalElement = element;
if (window.addEventListener) {
window.addEventListener("blur", handleBlur, false);
document.addEventListener("focus", handleFocus, true);
} else {
window.attachEvent("onBlur", handleBlur);
document.attachEvent("onFocus", handleFocus);
}
}
function teardownScopedFocus() {
modalElement = null;
if (window.addEventListener) {
window.removeEventListener("blur", handleBlur);
document.removeEventListener("focus", handleFocus);
} else {
window.detachEvent("onBlur", handleBlur);
document.detachEvent("onFocus", handleFocus);
}
}
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = scopeTab;
var _tabbable = __webpack_require__(5);
var _tabbable2 = _interopRequireDefault(_tabbable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function scopeTab(node, event) {
var tabbable = (0, _tabbable2.default)(node);
if (!tabbable.length) {
// Do nothing, since there are no elements that can receive focus.
event.preventDefault();
return;
}
var target = void 0;
var shiftKey = event.shiftKey;
var head = tabbable[0];
var tail = tabbable[tabbable.length - 1];
// proceed with default browser behavior on tab.
// Focus on last element on shift + tab.
if (node === document.activeElement) {
if (!shiftKey) return;
target = tail;
}
if (tail === document.activeElement && !shiftKey) {
target = head;
}
if (head === document.activeElement && shiftKey) {
target = tail;
}
if (target) {
event.preventDefault();
target.focus();
return;
}
// Safari radio issue.
//
// Safari does not move the focus to the radio button,
// so we need to force it to really walk through all elements.
//
// This is very error prone, since we are trying to guess
// if it is a safari browser from the first occurence between
// chrome or safari.
//
// The chrome user agent contains the first ocurrence
// as the 'chrome/version' and later the 'safari/version'.
var checkSafari = /(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);
var isSafariDesktop = checkSafari != null && checkSafari[1] != "Chrome" && /\biPod\b|\biPad\b/g.exec(navigator.userAgent) == null;
// If we are not in safari desktop, let the browser control
// the focus
if (!isSafariDesktop) return;
var x = tabbable.indexOf(document.activeElement);
if (x > -1) {
x += shiftKey ? -1 : 1;
}
target = tabbable[x];
// If the tabbable element does not exist,
// focus head/tail based on shiftKey
if (typeof target === "undefined") {
event.preventDefault();
target = shiftKey ? tail : head;
target.focus();
return;
}
event.preventDefault();
target.focus();
}
module.exports = exports["default"];
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* Copyright (c) 2014-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Similar to invariant but only logs a warning if the condition is not met.
* This can be used to log issues in development environments in critical
* paths. Removing the logging code for production environments will keep the
* same logic and follow the same code paths.
*/
var __DEV__ = "production" !== 'production';
var warning = function() {};
if (__DEV__) {
var printWarning = function printWarning(format, args) {
var len = arguments.length;
args = new Array(len > 1 ? len - 1 : 0);
for (var key = 1; key < len; key++) {
args[key - 1] = arguments[key];
}
var argIndex = 0;
var message = 'Warning: ' +
format.replace(/%s/g, function() {
return args[argIndex++];
});
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// --- Welcome to debugging React ---
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch (x) {}
}
warning = function(condition, format, args) {
var len = arguments.length;
args = new Array(len > 2 ? len - 2 : 0);
for (var key = 2; key < len; key++) {
args[key - 2] = arguments[key];
}
if (format === undefined) {
throw new Error(
'`warning(condition, format, ...args)` requires a warning ' +
'message argument'
);
}
if (!condition) {
printWarning.apply(null, [format].concat(args));
}
};
}
module.exports = warning;
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2015 Jed Watson.
Based on code that is Copyright 2013-2015, Facebook, Inc.
All rights reserved.
*/
/* global define */
(function () {
'use strict';
var canUseDOM = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.createElement
);
var ExecutionEnvironment = {
canUseDOM: canUseDOM,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners:
canUseDOM && !!(window.addEventListener || window.attachEvent),
canUseViewport: canUseDOM && !!window.screen
};
if (true) {
!(__WEBPACK_AMD_DEFINE_RESULT__ = (function () {
return ExecutionEnvironment;
}).call(exports, __webpack_require__, exports, module),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {}
}());
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.dumpClassLists = dumpClassLists;
var htmlClassList = {};
var docBodyClassList = {};
function dumpClassLists() {
if (false) { var _x, x, buffer, classes; }
}
/**
* Track the number of reference of a class.
* @param {object} poll The poll to receive the reference.
* @param {string} className The class name.
* @return {string}
*/
var incrementReference = function incrementReference(poll, className) {
if (!poll[className]) {
poll[className] = 0;
}
poll[className] += 1;
return className;
};
/**
* Drop the reference of a class.
* @param {object} poll The poll to receive the reference.
* @param {string} className The class name.
* @return {string}
*/
var decrementReference = function decrementReference(poll, className) {
if (poll[className]) {
poll[className] -= 1;
}
return className;
};
/**
* Track a class and add to the given class list.
* @param {Object} classListRef A class list of an element.
* @param {Object} poll The poll to be used.
* @param {Array} classes The list of classes to be tracked.
*/
var trackClass = function trackClass(classListRef, poll, classes) {
classes.forEach(function (className) {
incrementReference(poll, className);
classListRef.add(className);
});
};
/**
* Untrack a class and remove from the given class list if the reference
* reaches 0.
* @param {Object} classListRef A class list of an element.
* @param {Object} poll The poll to be used.
* @param {Array} classes The list of classes to be untracked.
*/
var untrackClass = function untrackClass(classListRef, poll, classes) {
classes.forEach(function (className) {
decrementReference(poll, className);
poll[className] === 0 && classListRef.remove(className);
});
};
/**
* Public inferface to add classes to the document.body.
* @param {string} bodyClass The class string to be added.
* It may contain more then one class
* with ' ' as separator.
*/
var add = exports.add = function add(element, classString) {
return trackClass(element.classList, element.nodeName.toLowerCase() == "html" ? htmlClassList : docBodyClassList, classString.split(" "));
};
/**
* Public inferface to remove classes from the document.body.
* @param {string} bodyClass The class string to be added.
* It