react-simple-tooltip
Version:
A lightweight and simple tooltip component for React
1,523 lines (1,214 loc) • 81.3 kB
JavaScript
/*!
* react-simple-tooltip v2.6.1 - https://github.com/xuopled/react-simple-tooltip#readme
* MIT Licensed
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("prop-types"));
else if(typeof define === 'function' && define.amd)
define(["react", "prop-types"], factory);
else if(typeof exports === 'object')
exports["ReactDemoPage"] = factory(require("react"), require("prop-types"));
else
root["ReactDemoPage"] = factory(root["React"], root["PropTypes"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_0__) {
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, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // 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 = 7);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export withEmotionCache */
/* unused harmony export CacheProvider */
/* unused harmony export ThemeContext */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return jsx; });
/* unused harmony export Global */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return keyframes; });
/* unused harmony export ClassNames */
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__emotion_cache__ = __webpack_require__(9);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_utils__ = __webpack_require__(12);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__emotion_serialize__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__emotion_sheet__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__emotion_css__ = __webpack_require__(5);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_5__emotion_css__["a"]; });
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
var EmotionCacheContext = Object(__WEBPACK_IMPORTED_MODULE_0_react__["createContext"])(Object(__WEBPACK_IMPORTED_MODULE_1__emotion_cache__["a" /* default */])());
var ThemeContext = Object(__WEBPACK_IMPORTED_MODULE_0_react__["createContext"])({});
var CacheProvider = EmotionCacheContext.Provider;
var withEmotionCache = function withEmotionCache(func) {
var render = function render(props, ref) {
return Object(__WEBPACK_IMPORTED_MODULE_0_react__["createElement"])(EmotionCacheContext.Consumer, null, function ( // $FlowFixMe we know it won't be null
cache) {
return func(props, cache, ref);
});
}; // $FlowFixMe
return Object(__WEBPACK_IMPORTED_MODULE_0_react__["forwardRef"])(render);
};
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
var hasOwnProperty = Object.prototype.hasOwnProperty;
var render = function render(cache, props, theme, ref) {
var type = props[typePropName];
var registeredStyles = [];
var className = '';
var cssProp = theme === null ? props.css : props.css(theme); // so that using `css` from `emotion` and passing the result to the css prop works
// not passing the registered cache to serializeStyles because it would
// make certain babel optimisations not possible
if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
cssProp = cache.registered[cssProp];
}
registeredStyles.push(cssProp);
if (props.className !== undefined) {
className = Object(__WEBPACK_IMPORTED_MODULE_2__emotion_utils__["a" /* getRegisteredStyles */])(cache.registered, registeredStyles, props.className);
}
var serialized = Object(__WEBPACK_IMPORTED_MODULE_3__emotion_serialize__["a" /* serializeStyles */])(registeredStyles);
if ("development" !== 'production' && serialized.name.indexOf('-') === -1) {
var labelFromStack = props[labelPropName];
if (labelFromStack) {
serialized = Object(__WEBPACK_IMPORTED_MODULE_3__emotion_serialize__["a" /* serializeStyles */])([serialized, 'label:' + labelFromStack + ';']);
}
}
var rules = Object(__WEBPACK_IMPORTED_MODULE_2__emotion_utils__["b" /* insertStyles */])(cache, serialized, typeof type === 'string');
className += cache.key + "-" + serialized.name;
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && ("development" === 'production' || key !== labelPropName)) {
newProps[key] = props[key];
}
}
newProps.ref = ref;
newProps.className = className;
var ele = Object(__WEBPACK_IMPORTED_MODULE_0_react__["createElement"])(type, newProps);
return ele;
};
var Emotion = withEmotionCache(function (props, cache, ref) {
// use Context.read for the theme when it's stable
if (typeof props.css === 'function') {
return Object(__WEBPACK_IMPORTED_MODULE_0_react__["createElement"])(ThemeContext.Consumer, null, function (theme) {
return render(cache, props, theme, ref);
});
}
return render(cache, props, null, ref);
});
if (true) {
Emotion.displayName = 'EmotionCssPropInternal';
} // $FlowFixMe
var jsx = function jsx(type, props) {
var args = arguments;
if (props == null || props.css == null) {
// $FlowFixMe
return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"].apply(undefined, args);
}
if ("development" !== 'production' && typeof props.css === 'string' && // check if there is a css declaration
props.css.indexOf(':') !== -1) {
throw new Error("Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/css' like this: css`" + props.css + "`");
}
var argsLength = args.length;
var createElementArgArray = new Array(argsLength);
createElementArgArray[0] = Emotion;
var newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key)) {
newProps[key] = props[key];
}
}
newProps[typePropName] = type;
if (true) {
var error = new Error();
if (error.stack) {
// chrome
var match = error.stack.match(/at jsx.*\n\s+at ([A-Z][A-Za-z]+) /);
if (!match) {
// safari and firefox
match = error.stack.match(/^.*\n([A-Z][A-Za-z]+)@/);
}
if (match) {
newProps[labelPropName] = match[1];
}
}
}
createElementArgArray[1] = newProps;
for (var i = 2; i < argsLength; i++) {
createElementArgArray[i] = args[i];
} // $FlowFixMe
return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"].apply(null, createElementArgArray);
};
var warnedAboutCssPropForGlobal = false;
var Global =
/* #__PURE__ */
withEmotionCache(function (props, cache) {
if ("development" !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
// probably using the custom createElement which
// means it will be turned into a className prop
// $FlowFixMe I don't really want to add it to the type since it shouldn't be used
props.className || props.css)) {
console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?");
warnedAboutCssPropForGlobal = true;
}
var styles = props.styles;
if (typeof styles === 'function') {
return Object(__WEBPACK_IMPORTED_MODULE_0_react__["createElement"])(ThemeContext.Consumer, null, function (theme) {
var serialized = Object(__WEBPACK_IMPORTED_MODULE_3__emotion_serialize__["a" /* serializeStyles */])([styles(theme)]);
return Object(__WEBPACK_IMPORTED_MODULE_0_react__["createElement"])(InnerGlobal, {
serialized: serialized,
cache: cache
});
});
}
var serialized = Object(__WEBPACK_IMPORTED_MODULE_3__emotion_serialize__["a" /* serializeStyles */])([styles]);
return Object(__WEBPACK_IMPORTED_MODULE_0_react__["createElement"])(InnerGlobal, {
serialized: serialized,
cache: cache
});
});
// maintain place over rerenders.
// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
// initial client-side render from SSR, use place of hydrating tag
var InnerGlobal =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(InnerGlobal, _React$Component);
function InnerGlobal(props, context, updater) {
return _React$Component.call(this, props, context, updater) || this;
}
var _proto = InnerGlobal.prototype;
_proto.componentDidMount = function componentDidMount() {
this.sheet = new __WEBPACK_IMPORTED_MODULE_4__emotion_sheet__["a" /* StyleSheet */]({
key: this.props.cache.key + "-global",
nonce: this.props.cache.sheet.nonce,
container: this.props.cache.sheet.container
}); // $FlowFixMe
var node = document.querySelector("style[data-emotion-" + this.props.cache.key + "=\"" + this.props.serialized.name + "\"]");
if (node !== null) {
this.sheet.tags.push(node);
}
if (this.props.cache.sheet.tags.length) {
this.sheet.before = this.props.cache.sheet.tags[0];
}
this.insertStyles();
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
if (prevProps.serialized.name !== this.props.serialized.name) {
this.insertStyles();
}
};
_proto.insertStyles = function insertStyles$$1() {
if (this.props.serialized.next !== undefined) {
// insert keyframes
Object(__WEBPACK_IMPORTED_MODULE_2__emotion_utils__["b" /* insertStyles */])(this.props.cache, this.props.serialized.next, true);
}
if (this.sheet.tags.length) {
// if this doesn't exist then it will be null so the style element will be appended
var element = this.sheet.tags[this.sheet.tags.length - 1].nextElementSibling;
this.sheet.before = element;
this.sheet.flush();
}
this.props.cache.insert("", this.props.serialized, this.sheet, false);
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.sheet.flush();
};
_proto.render = function render() {
return null;
};
return InnerGlobal;
}(__WEBPACK_IMPORTED_MODULE_0_react__["Component"]);
var keyframes = function keyframes() {
var insertable = __WEBPACK_IMPORTED_MODULE_5__emotion_css__["a" /* default */].apply(void 0, arguments);
var name = "animation-" + insertable.name; // $FlowFixMe
return {
name: name,
styles: "@keyframes " + name + "{" + insertable.styles + "}",
anim: 1,
toString: function toString() {
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
}
};
};
var classnames = function classnames(args) {
var len = args.length;
var i = 0;
var cls = '';
for (; i < len; i++) {
var arg = args[i];
if (arg == null) continue;
var toAdd = void 0;
switch (typeof arg) {
case 'boolean':
break;
case 'object':
{
if (Array.isArray(arg)) {
toAdd = classnames(arg);
} else {
toAdd = '';
for (var k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ');
toAdd += k;
}
}
}
break;
}
default:
{
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += ' ');
cls += toAdd;
}
}
return cls;
};
function merge(registered, css$$1, className) {
var registeredStyles = [];
var rawClassName = Object(__WEBPACK_IMPORTED_MODULE_2__emotion_utils__["a" /* getRegisteredStyles */])(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css$$1(registeredStyles);
}
var ClassNames = withEmotionCache(function (props, context) {
return Object(__WEBPACK_IMPORTED_MODULE_0_react__["createElement"])(ThemeContext.Consumer, null, function (theme) {
var hasRendered = false;
var css$$1 = function css$$1() {
if (hasRendered && "development" !== 'production') {
throw new Error('css can only be used during render');
}
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var serialized = Object(__WEBPACK_IMPORTED_MODULE_3__emotion_serialize__["a" /* serializeStyles */])(args, context.registered);
{
Object(__WEBPACK_IMPORTED_MODULE_2__emotion_utils__["b" /* insertStyles */])(context, serialized, false);
}
return context.key + "-" + serialized.name;
};
var cx = function cx() {
if (hasRendered && "development" !== 'production') {
throw new Error('cx can only be used during render');
}
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return merge(context.registered, css$$1, classnames(args));
};
var content = {
css: css$$1,
cx: cx,
theme: theme
};
var ele = props.children(content);
hasRendered = true;
return ele;
});
});
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return StyleSheet; });
/*
Based off glamor's StyleSheet, thanks Sunil ❤️
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
// $FlowFixMe
function sheetForTag(tag) {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet;
} // this weirdness brought to you by firefox
/* istanbul ignore next */
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i];
}
}
}
function createStyleElement(options) {
var tag = document.createElement('style');
tag.setAttribute('data-emotion', options.key);
if (options.nonce !== undefined) {
tag.setAttribute('nonce', options.nonce);
}
tag.appendChild(document.createTextNode(''));
return tag;
}
var StyleSheet =
/*#__PURE__*/
function () {
function StyleSheet(options) {
this.isSpeedy = options.speedy === undefined ? "development" === 'production' : options.speedy;
this.tags = [];
this.ctr = 0;
this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
this.key = options.key;
this.container = options.container;
this.before = null;
}
var _proto = StyleSheet.prototype;
_proto.insert = function insert(rule) {
// the max length is how many rules we have per style tag, it's 65000 in speedy mode
// it's 1 in dev because we insert source maps that map a single rule to a location
// and you can only have one source map per style tag
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
var _tag = createStyleElement(this);
var before;
if (this.tags.length === 0) {
before = this.before;
} else {
before = this.tags[this.tags.length - 1].nextSibling;
}
this.container.insertBefore(_tag, before);
this.tags.push(_tag);
}
var tag = this.tags[this.tags.length - 1];
if (this.isSpeedy) {
var sheet = sheetForTag(tag);
try {
// this is a really hot path
// we check the second character first because having "i"
// as the second character will happen less often than
// having "@" as the first character
var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, // we need to insert @import rules before anything else
// otherwise there will be an error
// technically this means that the @import rules will
// _usually_(not always since there could be multiple style tags)
// be the first ones in prod and generally later in dev
// this shouldn't really matter in the real world though
// @import is generally only used for font faces from google fonts and etc.
// so while this could be technically correct then it would be slower and larger
// for a tiny bit of correctness that won't matter in the real world
isImportRule ? 0 : sheet.cssRules.length);
} catch (e) {
if (true) {
console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
}
}
} else {
tag.appendChild(document.createTextNode(rule));
}
this.ctr++;
};
_proto.flush = function flush() {
// $FlowFixMe
this.tags.forEach(function (tag) {
return tag.parentNode.removeChild(tag);
});
this.tags = [];
this.ctr = 0;
};
return StyleSheet;
}();
/***/ }),
/* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return serializeStyles; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__emotion_hash__ = __webpack_require__(13);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__emotion_unitless__ = __webpack_require__(14);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_memoize__ = __webpack_require__(15);
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var processStyleName = Object(__WEBPACK_IMPORTED_MODULE_2__emotion_memoize__["a" /* default */])(function (styleName) {
return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
if (value == null || typeof value === 'boolean') {
return '';
}
switch (key) {
case 'animation':
case 'animationName':
{
if (typeof value === 'string') {
value = value.replace(animationRegex, function (match, p1, p2) {
cursor = {
name: p1,
styles: p2,
next: cursor
};
return p1;
});
}
}
}
if (__WEBPACK_IMPORTED_MODULE_1__emotion_unitless__["a" /* default */][key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
typeof value === 'number' && value !== 0) {
return value + 'px';
}
return value;
};
if (true) {
var contentValuePattern = /(attr|calc|counters?|url)\(/;
var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
var oldProcessStyleValue = processStyleValue;
var msPattern = /^-ms-/;
var hyphenPattern = /-(.)/g;
var hyphenatedCache = {};
processStyleValue = function processStyleValue(key, value) {
if (key === 'content') {
if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
}
}
var processed = oldProcessStyleValue(key, value);
var isCssVariable = key.charCodeAt(1) === 45;
if (processed !== '' && !isCssVariable && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
hyphenatedCache[key] = true;
console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, char) {
return char.toUpperCase();
}) + "?");
}
return processed;
};
}
var shouldWarnAboutInterpolatingClassNameFromCss = true;
function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
if (interpolation == null) {
return '';
}
if (interpolation.__emotion_styles !== undefined) {
if ("development" !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
}
return interpolation;
}
switch (typeof interpolation) {
case 'boolean':
{
return '';
}
case 'object':
{
if (interpolation.anim === 1) {
cursor = {
name: interpolation.name,
styles: interpolation.styles,
next: cursor
};
return interpolation.name;
}
if (interpolation.styles !== undefined) {
var next = interpolation.next;
if (next !== undefined) {
// not the most efficient thing ever but this is a pretty rare case
// and there will be very few iterations of this generally
while (next !== undefined) {
cursor = {
name: next.name,
styles: next.styles,
next: cursor
};
next = next.next;
}
}
var styles = interpolation.styles;
if ("development" !== 'production' && interpolation.map !== undefined) {
styles += interpolation.map;
}
return styles;
}
return createStringFromObject(mergedProps, registered, interpolation);
}
case 'function':
{
if (mergedProps !== undefined) {
var previousCursor = cursor;
var result = interpolation(mergedProps);
cursor = previousCursor;
return handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
} else if (true) {
console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
}
}
// eslint-disable-next-line no-fallthrough
default:
{
if (registered == null) {
return interpolation;
}
var cached = registered[interpolation];
if ("development" !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
shouldWarnAboutInterpolatingClassNameFromCss = false;
}
return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
}
}
}
function createStringFromObject(mergedProps, registered, obj) {
var string = '';
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
string += handleInterpolation(mergedProps, registered, obj[i], false);
}
} else {
for (var _key in obj) {
var value = obj[_key];
if (typeof value !== 'object') {
if (registered != null && registered[value] !== undefined) {
string += _key + "{" + registered[value] + "}";
} else {
string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
}
} else {
if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
}
if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
for (var _i = 0; _i < value.length; _i++) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
}
} else {
string += _key + "{" + handleInterpolation(mergedProps, registered, value, false) + "}";
}
}
}
}
return string;
}
var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;
var sourceMapPattern;
if (true) {
sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//;
} // this is the cursor for keyframes
// keyframes are stored on the SerializedStyles object as a linked list
var cursor;
var serializeStyles = function serializeStyles(args, registered, mergedProps) {
if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
return args[0];
}
var stringMode = true;
var styles = '';
cursor = undefined;
var strings = args[0];
if (strings == null || strings.raw === undefined) {
stringMode = false;
styles += handleInterpolation(mergedProps, registered, strings, false);
} else {
styles += strings[0];
} // we start at 1 since we've already handled the first arg
for (var i = 1; i < args.length; i++) {
styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);
if (stringMode) {
styles += strings[i];
}
}
var sourceMap;
if (true) {
styles = styles.replace(sourceMapPattern, function (match) {
sourceMap = match;
return '';
});
} // using a global regex with .exec is stateful so lastIndex has to be reset each time
labelPattern.lastIndex = 0;
var identifierName = '';
var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
while ((match = labelPattern.exec(styles)) !== null) {
identifierName += '-' + // $FlowFixMe we know it's not null
match[1];
}
var name = Object(__WEBPACK_IMPORTED_MODULE_0__emotion_hash__["a" /* default */])(styles) + identifierName;
if (true) {
return {
name: name,
styles: styles,
map: sourceMap,
next: cursor
};
}
return {
name: name,
styles: styles,
next: cursor
};
};
/***/ }),
/* 5 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__emotion_serialize__ = __webpack_require__(4);
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return Object(__WEBPACK_IMPORTED_MODULE_0__emotion_serialize__["a" /* serializeStyles */])(args);
}
/* harmony default export */ __webpack_exports__["a"] = (css);
/***/ }),
/* 6 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return easingPropType; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_prop_types__);
var normalEasingPropType = __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf(["linear", "ease", "ease-in", "ease-out", "ease-in-out"]);
// A regex to test if a string matches the CSS cubic-beizer format
// cubic-bezier(n,n,n,n)
// See: https://regex101.com/r/n2fAzV for details
var cubicEasingRegex = /^cubic-bezier\((-?((\d*\.\d+)|\d+),){3}(-?(\d*\.\d+)|\d+)\)$/;
var cubicEasingPropType = function cubicEasingPropType(props, propName, componentName) {
if (!cubicEasingRegex.test(props[propName])) {
return new Error("Invalid prop `" + propName + "` supplied to" + " `" + componentName + "`. Validation failed.");
}
};
var easingPropType = __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOfType([normalEasingPropType, cubicEasingPropType]);
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(8);
/***/ }),
/* 8 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_core__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__components_Arrow__ = __webpack_require__(16);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_Tooltip__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__components_Bubble__ = __webpack_require__(18);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_propTypes__ = __webpack_require__(6);
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 _templateObject = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n"], ["\n position: relative;\n display: inline-block;\n"]),
_templateObject2 = _taggedTemplateLiteralLoose(["\n ", ";\n ", "\n "], ["\n ", ";\n ", "\n "]);
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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; }
function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
/** @jsx jsx */
var ContainerCss = Object(__WEBPACK_IMPORTED_MODULE_2__emotion_core__["a" /* css */])(_templateObject);
var Wrapper = function (_React$Component) {
_inherits(Wrapper, _React$Component);
function Wrapper() {
_classCallCheck(this, Wrapper);
var _this = _possibleConstructorReturn(this, _React$Component.call(this));
_this.state = {
open: false
};
_this.handleMouseEnter = _this.handleMouseEnter.bind(_this);
_this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
_this.handleTouch = _this.handleTouch.bind(_this);
return _this;
}
Wrapper.prototype.handleMouseEnter = function handleMouseEnter() {
this.setState({ open: true });
};
Wrapper.prototype.handleMouseLeave = function handleMouseLeave() {
this.setState({ open: false });
};
Wrapper.prototype.handleTouch = function handleTouch() {
var isOpen = this.state.open;
this.setState({ open: !isOpen });
};
Wrapper.prototype.render = function render() {
var open = this.state.open;
var _props = this.props,
arrow = _props.arrow,
background = _props.background,
border = _props.border,
children = _props.children,
color = _props.color,
content = _props.content,
customCss = _props.customCss,
fadeDuration = _props.fadeDuration,
fadeEasing = _props.fadeEasing,
fixed = _props.fixed,
fontFamily = _props.fontFamily,
fontSize = _props.fontSize,
offset = _props.offset,
padding = _props.padding,
placement = _props.placement,
radius = _props.radius,
zIndex = _props.zIndex,
props = _objectWithoutProperties(_props, ["arrow", "background", "border", "children", "color", "content", "customCss", "fadeDuration", "fadeEasing", "fixed", "fontFamily", "fontSize", "offset", "padding", "placement", "radius", "zIndex"]);
var hasTrigger = children !== undefined && children !== null;
var tooltipElement = Object(__WEBPACK_IMPORTED_MODULE_2__emotion_core__["b" /* jsx */])(
__WEBPACK_IMPORTED_MODULE_4__components_Tooltip__["a" /* default */],
{
open: !hasTrigger || fixed ? true : open,
placement: placement,
offset: offset + arrow,
zIndex: zIndex,
fadeEasing: fadeEasing,
fadeDuration: fadeDuration
},
Object(__WEBPACK_IMPORTED_MODULE_2__emotion_core__["b" /* jsx */])(
__WEBPACK_IMPORTED_MODULE_5__components_Bubble__["a" /* default */],
{
background: background,
border: border,
color: color,
radius: radius,
fontFamily: fontFamily,
fontSize: fontSize,
padding: padding
},
Object(__WEBPACK_IMPORTED_MODULE_2__emotion_core__["b" /* jsx */])(__WEBPACK_IMPORTED_MODULE_3__components_Arrow__["a" /* default */], {
width: arrow,
background: background,
border: border,
color: color,
placement: placement
}),
content
)
);
return hasTrigger ? Object(__WEBPACK_IMPORTED_MODULE_2__emotion_core__["b" /* jsx */])(
"div",
_extends({
onMouseEnter: !fixed ? this.handleMouseEnter : undefined,
onMouseLeave: !fixed ? this.handleMouseLeave : undefined,
onTouchEnd: !fixed ? this.handleTouch : undefined,
css: Object(__WEBPACK_IMPORTED_MODULE_2__emotion_core__["a" /* css */])(_templateObject2, ContainerCss, customCss)
}, props),
children,
tooltipElement
) : Object(__WEBPACK_IMPORTED_MODULE_2__emotion_core__["b" /* jsx */])(
"div",
_extends({
css: Object(__WEBPACK_IMPORTED_MODULE_2__emotion_core__["a" /* css */])(_templateObject2, ContainerCss, customCss)
}, props),
tooltipElement
);
};
return Wrapper;
}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);
Wrapper.propTypes = {
arrow: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number,
background: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
border: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
children: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.any,
color: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
content: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.any.isRequired,
customCss: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.any,
fadeDuration: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number,
fadeEasing: __WEBPACK_IMPORTED_MODULE_6__utils_propTypes__["a" /* easingPropType */],
fixed: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.bool,
fontFamily: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
fontSize: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
offset: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number,
padding: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number,
placement: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.oneOf(["left", "top", "right", "bottom"]),
radius: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number,
zIndex: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number
};
Wrapper.defaultProps = {
arrow: 8,
background: "#000",
border: "#000",
children: null,
color: "#fff",
fadeDuration: 0,
fadeEasing: "linear",
fixed: false,
fontFamily: "inherit",
fontSize: "inherit",
offset: 0,
padding: 16,
placement: "top",
radius: 0,
zIndex: 1
};
Wrapper.displayName = "Tooltip.Wrapper";
__WEBPACK_IMPORTED_MODULE_4__components_Tooltip__["a" /* default */].displayName = "Tooltip";
__WEBPACK_IMPORTED_MODULE_5__components_Bubble__["a" /* default */].displayName = "Tooltip.Bubble";
__WEBPACK_IMPORTED_MODULE_3__components_Arrow__["a" /* default */].displayName = "Tooltip.Arrow";
/* harmony default export */ __webpack_exports__["default"] = (Wrapper);
/***/ }),
/* 9 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__emotion_sheet__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__emotion_stylis__ = __webpack_require__(10);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_weak_memoize__ = __webpack_require__(11);
// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
// inlined to avoid umd wrapper and peerDep warnings/installing stylis
// since we use stylis after closure compiler
var delimiter = '/*|*/';
var needle = delimiter + '}';
function toSheet(block) {
if (block) {
Sheet.current.insert(block + '}');
}
}
var Sheet = {
current: null
};
var ruleSheet = function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
switch (context) {
// property
case 1:
{
switch (content.charCodeAt(0)) {
case 64:
{
// @import
Sheet.current.insert(content + ';');
return '';
}
// charcode for l
case 108:
{
// charcode for b
// this ignores label
if (content.charCodeAt(2) === 98) {
return '';
}
}
}
break;
}
// selector
case 2:
{
if (ns === 0) return content + delimiter;
break;
}
// at-rule
case 3:
{
switch (ns) {
// @font-face, @page
case 102:
case 112:
{
Sheet.current.insert(selectors[0] + content);
return '';
}
default:
{
return content + (at === 0 ? delimiter : '');
}
}
}
case -2:
{
content.split(needle).forEach(toSheet);
}
}
};
var createCache = function createCache(options) {
if (options === undefined) options = {};
var key = options.key || 'css';
var stylisOptions;
if (options.prefix !== undefined) {
stylisOptions = {
prefix: options.prefix
};
}
var stylis = new __WEBPACK_IMPORTED_MODULE_1__emotion_stylis__["a" /* default */](stylisOptions);
if (true) {
// $FlowFixMe
if (/[^a-z-]/.test(key)) {
throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
}
}
var inserted = {}; // $FlowFixMe
var container;
{
container = options.container || document.head;
var nodes = document.querySelectorAll("style[data-emotion-" + key + "]");
Array.prototype.forEach.call(nodes, function (node) {
var attrib = node.getAttribute("data-emotion-" + key); // $FlowFixMe
attrib.split(' ').forEach(function (id) {
inserted[id] = true;
});
if (node.parentNode !== container) {
container.appendChild(node);
}
});
}
var _insert;
{
stylis.use(options.stylisPlugins)(ruleSheet);
_insert = function insert(selector, serialized, sheet, shouldCache) {
var name = serialized.name;
Sheet.current = sheet;
if ("development" !== 'production' && serialized.map !== undefined) {
var map = serialized.map;
Sheet.current = {
insert: function insert(rule) {
sheet.insert(rule + map);
}
};
}
stylis(selector, serialized.styles);
if (shouldCache) {
cache.inserted[name] = true;
}
};
}
if (true) {
// https://esbench.com/bench/5bf7371a4cd7e6009ef61d0a
var commentStart = /\/\*/g;
var commentEnd = /\*\//g;
stylis.use(function (context, content) {
switch (context) {
case -1:
{
while (commentStart.test(content)) {
commentEnd.lastIndex = commentStart.lastIndex;
if (commentEnd.test(content)) {
commentStart.lastIndex = commentEnd.lastIndex;
continue;
}
throw new Error('Your styles have an unterminated comment ("/*" without corresponding "*/").');
}
commentStart.lastIndex = 0;
break;
}
}
});
stylis.use(function (context, content, selectors) {
switch (context) {
case -1:
{
var flag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
var unsafePseudoClasses = content.match(/(:first|:nth|:nth-last)-child/g);
if (unsafePseudoClasses) {
unsafePseudoClasses.forEach(function (unsafePseudoClass) {
var ignoreRegExp = new RegExp(unsafePseudoClass + ".*\\/\\* " + flag + " \\*\\/");
var ignore = ignoreRegExp.test(content);
if (unsafePseudoClass && !ignore) {
console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
}
});
}
break;
}
}
});
}
var cache = {
key: key,
sheet: new __WEBPACK_IMPORTED_MODULE_0__emotion_sheet__["a" /* StyleSheet */]({
key: key,
container: container,
nonce: options.nonce,
speedy: options.speedy
}),
nonce: options.nonce,
inserted: inserted,
registered: {},
insert: _insert
};
return cache;
};
/* harmony default export */ __webpack_exports__["a"] = (createCache);
/***/ }),
/* 10 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
function stylis_min (W) {
function M(d, c, e, h, a) {
for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
g = e.charCodeAt(l);
l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);
if (0 === b + n + v + m) {
if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
switch (g) {
case 32:
case 9:
case 59:
case 13:
case 10:
break;
default:
f += e.charAt(l);
}
g = 59;
}
switch (g) {
case 123:
f = f.trim();
q = f.charCodeAt(0);
k = 1;
for (t = ++l; l < B;) {
switch (g = e.charCodeAt(l)) {
case 123:
k++;
break;
case 125:
k--;
break;
case 47:
switch (g = e.charCodeAt(l + 1)) {
case 42:
case 47:
a: {
for (u = l + 1; u < J; ++u) {
switch (e.charCodeAt(u)) {
case 47:
if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
l = u + 1;
break a;
}
break;
case 10:
if (47 === g) {
l = u + 1;
break a;
}
}
}
l = u;
}
}
break;
case 91:
g++;
case 40:
g++;
case 34:
case 39:
for (; l++ < J && e.charCodeAt(l) !== g;) {
}
}
if (0 === k) break;
l++;
}
k = e.substring(t, l);
0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));
switch (q) {
case 64:
0 < r && (f = f.replace(N, ''));
g = f.charCodeAt(1);
switch (g) {
case 100:
case 109:
case 115:
case 45:
r = c;
break;
default:
r = O;
}
k = M(c, r, k, g, a + 1);
t = k.length;
0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
if (0 < t) switch (g) {
case 115:
f = f.replace(da, ea);
case 100:
case 109:
case 45:
k = f + '{' + k + '}';
break;
case 107:
f = f.replace(fa, '$1 $2');
k = f + '{' + k + '}';
k = 1 === w || 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
break;
default:
k = f + k, 112 === h && (k = (p += k, ''));
} else k = '';
break;
default:
k = M(c, X(c, f, I), k, h, a + 1);
}
F += k;
k = I = r = u = q = 0;
f = '';
g = e.charCodeAt(++l);
break;
case 125:
case 59:
f = (0 < r ? f.replace(N, '') : f).trim();
if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q || 96 < q && 123 >