react-simple-tooltip
Version:
A lightweight and simple tooltip component for React
1,419 lines (1,110 loc) • 88.6 kB
JavaScript
/*!
* react-simple-tooltip v2.6.3 - https://github.com/cedricdelpoux/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 = 10);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export ClassNames */
/* unused harmony export Global */
/* unused harmony export createElement */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return jsx; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return keyframes; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_runtime_helpers_esm_inheritsLoose__ = __webpack_require__(12);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_cache__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__emotion_element_57a3a7a3_browser_esm_js__ = __webpack_require__(6);
/* unused harmony reexport CacheProvider */
/* unused harmony reexport ThemeContext */
/* unused harmony reexport withEmotionCache */
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__emotion_utils__ = __webpack_require__(7);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__emotion_serialize__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__emotion_sheet__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__emotion_css__ = __webpack_require__(8);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_7__emotion_css__["a"]; });
var jsx = function jsx(type, props) {
var args = arguments;
if (props == null || !__WEBPACK_IMPORTED_MODULE_3__emotion_element_57a3a7a3_browser_esm_js__["d" /* h */].call(props, 'css')) {
// $FlowFixMe
return __WEBPACK_IMPORTED_MODULE_1_react__["createElement"].apply(undefined, args);
}
var argsLength = args.length;
var createElementArgArray = new Array(argsLength);
createElementArgArray[0] = __WEBPACK_IMPORTED_MODULE_3__emotion_element_57a3a7a3_browser_esm_js__["a" /* E */];
createElementArgArray[1] = Object(__WEBPACK_IMPORTED_MODULE_3__emotion_element_57a3a7a3_browser_esm_js__["c"])(type, props);
for (var i = 2; i < argsLength; i++) {
createElementArgArray[i] = args[i];
} // $FlowFixMe
return __WEBPACK_IMPORTED_MODULE_1_react__["createElement"].apply(null, createElementArgArray);
};
var warnedAboutCssPropForGlobal = false;
var Global = /* #__PURE__ */Object(__WEBPACK_IMPORTED_MODULE_3__emotion_element_57a3a7a3_browser_esm_js__["e" /* w */])(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 /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["createElement"])(__WEBPACK_IMPORTED_MODULE_3__emotion_element_57a3a7a3_browser_esm_js__["b" /* T */].Consumer, null, function (theme) {
var serialized = Object(__WEBPACK_IMPORTED_MODULE_5__emotion_serialize__["a" /* serializeStyles */])([styles(theme)]);
return /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["createElement"])(InnerGlobal, {
serialized: serialized,
cache: cache
});
});
}
var serialized = Object(__WEBPACK_IMPORTED_MODULE_5__emotion_serialize__["a" /* serializeStyles */])([styles]);
return /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_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) {
Object(__WEBPACK_IMPORTED_MODULE_0__babel_runtime_helpers_esm_inheritsLoose__["a" /* default */])(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_6__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_4__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_1_react__["Component"]);
var keyframes = function keyframes() {
var insertable = __WEBPACK_IMPORTED_MODULE_7__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, className) {
var registeredStyles = [];
var rawClassName = Object(__WEBPACK_IMPORTED_MODULE_4__emotion_utils__["a" /* getRegisteredStyles */])(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles);
}
var ClassNames = Object(__WEBPACK_IMPORTED_MODULE_3__emotion_element_57a3a7a3_browser_esm_js__["e" /* w */])(function (props, context) {
return /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["createElement"])(__WEBPACK_IMPORTED_MODULE_3__emotion_element_57a3a7a3_browser_esm_js__["b" /* T */].Consumer, null, function (theme) {
var hasRendered = false;
var css = function css() {
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_5__emotion_serialize__["a" /* serializeStyles */])(args, context.registered);
{
Object(__WEBPACK_IMPORTED_MODULE_4__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, classnames(args));
};
var content = {
css: css,
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 serializeStyles; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__emotion_hash__ = __webpack_require__(16);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__emotion_unitless__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_memoize__ = __webpack_require__(18);
var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
var hyphenateRegex = /[A-Z]|^ms/g;
var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
var isCustomProperty = function isCustomProperty(property) {
return property.charCodeAt(1) === 45;
};
var isProcessableValue = function isProcessableValue(value) {
return value != null && typeof value !== 'boolean';
};
var processStyleName = Object(__WEBPACK_IMPORTED_MODULE_2__emotion_memoize__["a" /* default */])(function (styleName) {
return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
});
var processStyleValue = function processStyleValue(key, value) {
switch (key) {
case 'animation':
case 'animationName':
{
if (typeof value === 'string') {
return 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 && !isCustomProperty(key) && 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);
if (processed !== '' && !isCustomProperty(key) && 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}`");
}
break;
}
case 'string':
if (true) {
var matched = [];
var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
var fakeVarName = "animation" + matched.length;
matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
return "${" + fakeVarName + "}";
});
if (matched.length) {
console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
}
}
break;
} // finalize string values (regular strings and functions interpolated into css calls)
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 if (isProcessableValue(value)) {
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++) {
if (isProcessableValue(value[_i])) {
string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
}
}
} else {
var interpolated = handleInterpolation(mergedProps, registered, value, false);
switch (_key) {
case 'animation':
case 'animationName':
{
string += processStyleName(_key) + ":" + interpolated + ";";
break;
}
default:
{
if ("development" !== 'production' && _key === 'undefined') {
console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
}
string += _key + "{" + interpolated + "}";
}
}
}
}
}
}
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 {
if ("development" !== 'production' && strings[0] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
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) {
if ("development" !== 'production' && strings[i] === undefined) {
console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
}
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) {
// $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
return {
name: name,
styles: styles,
map: sourceMap,
next: cursor,
toString: function toString() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
};
}
return {
name: name,
styles: styles,
next: cursor
};
};
/***/ }),
/* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__emotion_sheet__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__emotion_stylis__ = __webpack_require__(13);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_weak_memoize__ = __webpack_require__(14);
// 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 && cache.compat !== true) {
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);
/***/ }),
/* 5 */
/***/ (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;
}();
/***/ }),
/* 6 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export C */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Emotion; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return ThemeContext; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return createEmotionProps; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return hasOwnProperty; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return withEmotionCache; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_runtime_helpers_inheritsLoose__ = __webpack_require__(15);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_runtime_helpers_inheritsLoose___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_runtime_helpers_inheritsLoose__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__emotion_cache__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__emotion_utils__ = __webpack_require__(7);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__emotion_serialize__ = __webpack_require__(3);
var hasOwnProperty = Object.prototype.hasOwnProperty;
var EmotionCacheContext = /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["createContext"])( // we're doing this to avoid preconstruct's dead code elimination in this one case
// because this module is primarily intended for the browser and node
// but it's also required in react native and similar environments sometimes
// and we could have a special build just for that
// but this is much easier and the native packages
// might use a different theme context in the future anyway
typeof HTMLElement !== 'undefined' ? Object(__WEBPACK_IMPORTED_MODULE_2__emotion_cache__["a" /* default */])() : null);
var ThemeContext = /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["createContext"])({});
var CacheProvider = EmotionCacheContext.Provider;
var withEmotionCache = function withEmotionCache(func) {
var render = function render(props, ref) {
return /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["createElement"])(EmotionCacheContext.Consumer, null, function (cache) {
return func(props, cache, ref);
});
}; // $FlowFixMe
return /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["forwardRef"])(render);
};
// thus we only need to replace what is a valid character for JS, but not for CSS
var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
return identifier.replace(/\$/g, '-');
};
var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
var createEmotionProps = function createEmotionProps(type, props) {
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 newProps = {};
for (var key in props) {
if (hasOwnProperty.call(props, key)) {
newProps[key] = props[key];
}
}
newProps[typePropName] = type; // TODO: check if this still works with all of those different JSX functions
if (true) {
var error = new Error();
if (error.stack) {
// chrome
var match = error.stack.match(/at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z$]+) /);
if (!match) {
// safari and firefox
match = error.stack.match(/.*\n([A-Z][A-Za-z$]+)@/);
}
if (match) {
newProps[labelPropName] = sanitizeIdentifier(match[1]);
}
}
}
return newProps;
};
var render = function render(cache, props, theme, ref) {
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];
}
var type = props[typePropName];
var registeredStyles = [cssProp];
var className = '';
if (typeof props.className === 'string') {
className = Object(__WEBPACK_IMPORTED_MODULE_3__emotion_utils__["a" /* getRegisteredStyles */])(cache.registered, registeredStyles, props.className);
} else if (props.className != null) {
className = props.className + " ";
}
var serialized = Object(__WEBPACK_IMPORTED_MODULE_4__emotion_serialize__["a" /* serializeStyles */])(registeredStyles);
if ("development" !== 'production' && serialized.name.indexOf('-') === -1) {
var labelFromStack = props[labelPropName];
if (labelFromStack) {
serialized = Object(__WEBPACK_IMPORTED_MODULE_4__emotion_serialize__["a" /* serializeStyles */])([serialized, 'label:' + labelFromStack + ';']);
}
}
var rules = Object(__WEBPACK_IMPORTED_MODULE_3__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 = /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["createElement"])(type, newProps);
return ele;
}; // eslint-disable-next-line no-undef
var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
if (typeof props.css === 'function') {
return /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_1_react__["createElement"])(ThemeContext.Consumer, null, function (theme) {
return render(cache, props, theme, ref);
});
}
return render(cache, props, null, ref);
});
if (true) {
Emotion.displayName = 'EmotionCssPropInternal';
}
/***/ }),
/* 7 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getRegisteredStyles; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return insertStyles; });
var isBrowser = "object" !== 'undefined';
function getRegisteredStyles(registered, registeredStyles, classNames) {
var rawClassName = '';
classNames.split(' ').forEach(function (className) {
if (registered[className] !== undefined) {
registeredStyles.push(registered[className]);
} else {
rawClassName += className + " ";
}
});
return rawClassName;
}
var insertStyles = function insertStyles(cache, serialized, isStringTag) {
var className = cache.key + "-" + serialized.name;
if ( // we only need to add the styles to the registered cache if the
// class name could be used further down
// the tree but if it's a string tag, we know it won't
// so we don't have to add it to registered cache.
// this improves memory usage since we can avoid storing the whole style string
(isStringTag === false || // we need to always store it if we're in compat mode and
// in node since emotion-server relies on whether a style is in
// the registered cache to know whether a style is global or not
// also, note that this check will be dead code eliminated in the browser
isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
cache.registered[className] = serialized.styles;
}
if (cache.inserted[serialized.name] === undefined) {
var current = serialized;
do {
var maybeStyles = cache.insert("." + className, current, cache.sheet, true);
current = current.next;
} while (current !== undefined);
}
};
/***/ }),
/* 8 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__emotion_serialize__ = __webpack_require__(3);
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);
/***/ }),
/* 9 */
/***/ (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]);
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(11);
/***/ }),
/* 11 */
/***/ (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__(19);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_Tooltip__ = __webpack_require__(20);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__components_Bubble__ = __webpack_require__(21);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_propTypes__ = __webpack_require__(9);
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,
pla