// ==UserScript==
// @name youtube-danmaku
// @namespace https://github.com/IronKinoko/ytb-danmaku
// @version 2.5.2
// @icon https://www.youtube.com/favicon.ico
// @license MIT
// @description Youtube livechat danmaku
// @author Ironkinoko
// @match https://www.youtube.com/*
// @exclude https://www.youtube.com/live_chat*
// @grant none
// @require https://unpkg.com/react@16.14.0/umd/react.production.min.js
// @require https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js
// @require https://unpkg.com/mobx@6.3.2/dist/mobx.umd.production.min.js
// @require https://unpkg.com/mobx-react-lite@3.2.0/dist/mobxreactlite.umd.production.min.js
// @require https://unpkg.com/mobx-react@7.2.0/dist/mobxreact.umd.production.min.js
// @require https://unpkg.com/@ironkinoko/danmaku@1.2.6/dist/danmaku.umd.js
// ==/UserScript==
(function (React$3, ReactDOM, mobxReact, mobx, Danmaku$2) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefaultLegacy(React$3);
var React__namespace = /*#__PURE__*/_interopNamespace(React$3);
var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
var Danmaku__default = /*#__PURE__*/_interopDefaultLegacy(Danmaku$2);
var e$1 = [],
t$1 = [];
function n$1(n, r) {
if (n && "undefined" != typeof document) {
var a,
s = !0 === r.prepend ? "prepend" : "append",
d = !0 === r.singleTag,
i = "string" == typeof r.container ? document.querySelector(r.container) : document.getElementsByTagName("head")[0];
if (d) {
var u = e$1.indexOf(i);
-1 === u && (u = e$1.push(i) - 1, t$1[u] = {}), a = t$1[u] && t$1[u][s] ? t$1[u][s] : t$1[u][s] = c();
} else a = c();
65279 === n.charCodeAt(0) && (n = n.substring(1)), a.styleSheet ? a.styleSheet.cssText += n : a.appendChild(document.createTextNode(n));
}
function c() {
var e = document.createElement("style");
if (e.setAttribute("type", "text/css"), r.attributes) for (var t = Object.keys(r.attributes), n = 0; n < t.length; n++) e.setAttribute(t[n], r.attributes[t[n]]);
var a = "prepend" === s ? "afterbegin" : "beforeend";
return i.insertAdjacentElement(a, e), e;
}
}
var css$2 = ".danmaku-stage {\n border: 0;\n bottom: 0;\n display: block;\n left: 0;\n margin: 0;\n overflow: hidden;\n position: absolute !important;\n right: 0;\n top: 0;\n -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: none;\n z-index: 20;\n}\n\n.danmaku-stage > div {\n --size: var(--danmaku-font-size, 24px);\n pointer-events: none;\n color: #fff;\n font-family: SimHei, SimSun, Heiti, \"MS Mincho\", Meiryo, \"Microsoft YaHei\", monospace;\n font-size: var(--size);\n letter-spacing: 0;\n line-height: 100%;\n margin: 0;\n padding: 3px 0 0 0;\n position: absolute;\n text-decoration: none;\n text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;\n -webkit-text-size-adjust: none;\n -ms-text-size-adjust: none;\n text-size-adjust: none;\n -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n -webkit-transform-origin: 0 0;\n -ms-transform-origin: 0 0;\n transform-origin: 0 0;\n white-space: pre;\n word-break: keep-all;\n}\n.danmaku-stage > div img {\n width: var(--size);\n height: var(--size);\n}";
n$1(css$2,{});
var common = {
black: '#000',
white: '#fff'
};
var red = {
50: '#ffebee',
100: '#ffcdd2',
200: '#ef9a9a',
300: '#e57373',
400: '#ef5350',
500: '#f44336',
600: '#e53935',
700: '#d32f2f',
800: '#c62828',
900: '#b71c1c',
A100: '#ff8a80',
A200: '#ff5252',
A400: '#ff1744',
A700: '#d50000'
};
var pink = {
50: '#fce4ec',
100: '#f8bbd0',
200: '#f48fb1',
300: '#f06292',
400: '#ec407a',
500: '#e91e63',
600: '#d81b60',
700: '#c2185b',
800: '#ad1457',
900: '#880e4f',
A100: '#ff80ab',
A200: '#ff4081',
A400: '#f50057',
A700: '#c51162'
};
var indigo = {
50: '#e8eaf6',
100: '#c5cae9',
200: '#9fa8da',
300: '#7986cb',
400: '#5c6bc0',
500: '#3f51b5',
600: '#3949ab',
700: '#303f9f',
800: '#283593',
900: '#1a237e',
A100: '#8c9eff',
A200: '#536dfe',
A400: '#3d5afe',
A700: '#304ffe'
};
var blue = {
50: '#e3f2fd',
100: '#bbdefb',
200: '#90caf9',
300: '#64b5f6',
400: '#42a5f5',
500: '#2196f3',
600: '#1e88e5',
700: '#1976d2',
800: '#1565c0',
900: '#0d47a1',
A100: '#82b1ff',
A200: '#448aff',
A400: '#2979ff',
A700: '#2962ff'
};
var green = {
50: '#e8f5e9',
100: '#c8e6c9',
200: '#a5d6a7',
300: '#81c784',
400: '#66bb6a',
500: '#4caf50',
600: '#43a047',
700: '#388e3c',
800: '#2e7d32',
900: '#1b5e20',
A100: '#b9f6ca',
A200: '#69f0ae',
A400: '#00e676',
A700: '#00c853'
};
var orange = {
50: '#fff3e0',
100: '#ffe0b2',
200: '#ffcc80',
300: '#ffb74d',
400: '#ffa726',
500: '#ff9800',
600: '#fb8c00',
700: '#f57c00',
800: '#ef6c00',
900: '#e65100',
A100: '#ffd180',
A200: '#ffab40',
A400: '#ff9100',
A700: '#ff6d00'
};
var grey = {
50: '#fafafa',
100: '#f5f5f5',
200: '#eeeeee',
300: '#e0e0e0',
400: '#bdbdbd',
500: '#9e9e9e',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
A100: '#d5d5d5',
A200: '#aaaaaa',
A400: '#303030',
A700: '#616161'
};
function _extends$1() {
_extends$1 = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$1.apply(this, arguments);
}
function _typeof$3(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof$3 = function _typeof(obj) {
return typeof obj;
};
} else {
_typeof$3 = function _typeof(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof$3(obj);
}
function isPlainObject(item) {
return item && _typeof$3(item) === 'object' && item.constructor === Object;
}
function deepmerge(target, source) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
clone: true
};
var output = options.clone ? _extends$1({}, target) : target;
if (isPlainObject(target) && isPlainObject(source)) {
Object.keys(source).forEach(function (key) {
// Avoid prototype pollution
if (key === '__proto__') {
return;
}
if (isPlainObject(source[key]) && key in target) {
output[key] = deepmerge(target[key], source[key], options);
} else {
output[key] = source[key];
}
});
}
return output;
}
function getAugmentedNamespace(n) {
if (n.__esModule) return n;
var a = Object.defineProperty({}, '__esModule', {value: true});
Object.keys(n).forEach(function (k) {
var d = Object.getOwnPropertyDescriptor(n, k);
Object.defineProperty(a, k, d.get ? d : {
enumerable: true,
get: function () {
return n[k];
}
});
});
return a;
}
var reactIs$1 = {exports: {}};
var reactIs_production_min = {};
/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var b = "function" === typeof Symbol && Symbol.for,
c = b ? Symbol.for("react.element") : 60103,
d = b ? Symbol.for("react.portal") : 60106,
e = b ? Symbol.for("react.fragment") : 60107,
f = b ? Symbol.for("react.strict_mode") : 60108,
g = b ? Symbol.for("react.profiler") : 60114,
h = b ? Symbol.for("react.provider") : 60109,
k = b ? Symbol.for("react.context") : 60110,
l = b ? Symbol.for("react.async_mode") : 60111,
m = b ? Symbol.for("react.concurrent_mode") : 60111,
n = b ? Symbol.for("react.forward_ref") : 60112,
p = b ? Symbol.for("react.suspense") : 60113,
q = b ? Symbol.for("react.suspense_list") : 60120,
r = b ? Symbol.for("react.memo") : 60115,
t = b ? Symbol.for("react.lazy") : 60116,
v = b ? Symbol.for("react.block") : 60121,
w = b ? Symbol.for("react.fundamental") : 60117,
x = b ? Symbol.for("react.responder") : 60118,
y = b ? Symbol.for("react.scope") : 60119;
function z(a) {
if ("object" === typeof a && null !== a) {
var u = a.$$typeof;
switch (u) {
case c:
switch (a = a.type, a) {
case l:
case m:
case e:
case g:
case f:
case p:
return a;
default:
switch (a = a && a.$$typeof, a) {
case k:
case n:
case t:
case r:
case h:
return a;
default:
return u;
}
}
case d:
return u;
}
}
}
function A(a) {
return z(a) === m;
}
reactIs_production_min.AsyncMode = l;
reactIs_production_min.ConcurrentMode = m;
reactIs_production_min.ContextConsumer = k;
reactIs_production_min.ContextProvider = h;
reactIs_production_min.Element = c;
reactIs_production_min.ForwardRef = n;
reactIs_production_min.Fragment = e;
reactIs_production_min.Lazy = t;
reactIs_production_min.Memo = r;
reactIs_production_min.Portal = d;
reactIs_production_min.Profiler = g;
reactIs_production_min.StrictMode = f;
reactIs_production_min.Suspense = p;
reactIs_production_min.isAsyncMode = function (a) {
return A(a) || z(a) === l;
};
reactIs_production_min.isConcurrentMode = A;
reactIs_production_min.isContextConsumer = function (a) {
return z(a) === k;
};
reactIs_production_min.isContextProvider = function (a) {
return z(a) === h;
};
reactIs_production_min.isElement = function (a) {
return "object" === typeof a && null !== a && a.$$typeof === c;
};
reactIs_production_min.isForwardRef = function (a) {
return z(a) === n;
};
reactIs_production_min.isFragment = function (a) {
return z(a) === e;
};
reactIs_production_min.isLazy = function (a) {
return z(a) === t;
};
reactIs_production_min.isMemo = function (a) {
return z(a) === r;
};
reactIs_production_min.isPortal = function (a) {
return z(a) === d;
};
reactIs_production_min.isProfiler = function (a) {
return z(a) === g;
};
reactIs_production_min.isStrictMode = function (a) {
return z(a) === f;
};
reactIs_production_min.isSuspense = function (a) {
return z(a) === p;
};
reactIs_production_min.isValidElementType = function (a) {
return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
};
reactIs_production_min.typeOf = z;
{
reactIs$1.exports = reactIs_production_min;
}
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
/* eslint-disable no-unused-vars */
var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
function toObject(val) {
if (val === null || val === undefined) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
function shouldUseNative() {
try {
if (!Object.assign) {
return false;
} // Detect buggy property enumeration order in older V8 versions.
// https://bugs.chromium.org/p/v8/issues/detail?id=4118
var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
test1[5] = 'de';
if (Object.getOwnPropertyNames(test1)[0] === '5') {
return false;
} // https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test2 = {};
for (var i = 0; i < 10; i++) {
test2['_' + String.fromCharCode(i)] = i;
}
var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
return test2[n];
});
if (order2.join('') !== '0123456789') {
return false;
} // https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test3 = {};
'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
test3[letter] = letter;
});
if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
return false;
}
return true;
} catch (err) {
// We don't expect any of the above to throw, but better to be safe.
return false;
}
}
shouldUseNative() ? Object.assign : function (target, source) {
var from;
var to = toObject(target);
var symbols;
for (var s = 1; s < arguments.length; s++) {
from = Object(arguments[s]);
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
if (getOwnPropertySymbols$1) {
symbols = getOwnPropertySymbols$1(from);
for (var i = 0; i < symbols.length; i++) {
if (propIsEnumerable.call(from, symbols[i])) {
to[symbols[i]] = from[symbols[i]];
}
}
}
}
return to;
};
/**
* 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$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
/**
* 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.
*/
Function.call.bind(Object.prototype.hasOwnProperty);
/**
* 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 = ReactPropTypesSecret_1;
function emptyFunction() {}
function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction;
var factoryWithThrowingShims = 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;
}
// 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;
};
/**
* 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.
*/
{
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
factoryWithThrowingShims();
}
function _defineProperty$3(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
/**
* WARNING: Don't import this directly.
* Use `MuiError` from `@material-ui/utils/macros/MuiError.macro` instead.
* @param {number} code
*/
function formatMuiErrorMessage(code) {
// Apply babel-plugin-transform-template-literals in loose mode
// loose mode is safe iff we're concatenating primitives
// see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
/* eslint-disable prefer-template */
var url = 'https://material-ui.com/production-error/?code=' + code;
for (var i = 1; i < arguments.length; i += 1) {
// rest params over-transpile for this case
// eslint-disable-next-line prefer-rest-params
url += '&args[]=' + encodeURIComponent(arguments[i]);
}
return 'Minified Material-UI error #' + code + '; visit ' + url + ' for the full message.';
/* eslint-enable prefer-template */
}
/* eslint-disable no-use-before-define */
/**
* Returns a number whose value is limited to the given range.
*
* @param {number} value The value to be clamped
* @param {number} min The lower boundary of the output range
* @param {number} max The upper boundary of the output range
* @returns {number} A number in the range [min, max]
*/
function clamp$1(value) {
var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
return Math.min(Math.max(min, value), max);
}
/**
* Converts a color from CSS hex format to CSS rgb format.
*
* @param {string} color - Hex color, i.e. #nnn or #nnnnnn
* @returns {string} A CSS rgb color string
*/
function hexToRgb(color) {
color = color.substr(1);
var re = new RegExp(".{1,".concat(color.length >= 6 ? 2 : 1, "}"), 'g');
var colors = color.match(re);
if (colors && colors[0].length === 1) {
colors = colors.map(function (n) {
return n + n;
});
}
return colors ? "rgb".concat(colors.length === 4 ? 'a' : '', "(").concat(colors.map(function (n, index) {
return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
}).join(', '), ")") : '';
}
/**
* Converts a color from hsl format to rgb format.
*
* @param {string} color - HSL color values
* @returns {string} rgb color values
*/
function hslToRgb(color) {
color = decomposeColor(color);
var _color = color,
values = _color.values;
var h = values[0];
var s = values[1] / 100;
var l = values[2] / 100;
var a = s * Math.min(l, 1 - l);
var f = function f(n) {
var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
};
var type = 'rgb';
var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
if (color.type === 'hsla') {
type += 'a';
rgb.push(values[3]);
}
return recomposeColor({
type: type,
values: rgb
});
}
/**
* Returns an object with the type and values of a color.
*
* Note: Does not support rgb % values.
*
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @returns {object} - A MUI color object: {type: string, values: number[]}
*/
function decomposeColor(color) {
// Idempotent
if (color.type) {
return color;
}
if (color.charAt(0) === '#') {
return decomposeColor(hexToRgb(color));
}
var marker = color.indexOf('(');
var type = color.substring(0, marker);
if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
throw new Error(formatMuiErrorMessage(3, color));
}
var values = color.substring(marker + 1, color.length - 1).split(',');
values = values.map(function (value) {
return parseFloat(value);
});
return {
type: type,
values: values
};
}
/**
* Converts a color object with type and values to a string.
*
* @param {object} color - Decomposed color
* @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
* @param {array} color.values - [n,n,n] or [n,n,n,n]
* @returns {string} A CSS color string
*/
function recomposeColor(color) {
var type = color.type;
var values = color.values;
if (type.indexOf('rgb') !== -1) {
// Only convert the first 3 values to int (i.e. not alpha)
values = values.map(function (n, i) {
return i < 3 ? parseInt(n, 10) : n;
});
} else if (type.indexOf('hsl') !== -1) {
values[1] = "".concat(values[1], "%");
values[2] = "".concat(values[2], "%");
}
return "".concat(type, "(").concat(values.join(', '), ")");
}
/**
* Calculates the contrast ratio between two colors.
*
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*
* @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @returns {number} A contrast ratio value in the range 0 - 21.
*/
function getContrastRatio(foreground, background) {
var lumA = getLuminance(foreground);
var lumB = getLuminance(background);
return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
}
/**
* The relative brightness of any point in a color space,
* normalized to 0 for darkest black and 1 for lightest white.
*
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @returns {number} The relative brightness of the color in the range 0 - 1
*/
function getLuminance(color) {
color = decomposeColor(color);
var rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
rgb = rgb.map(function (val) {
val /= 255; // normalized
return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
}); // Truncate at 3 digits
return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
}
/**
* Set the absolute transparency of a color.
* Any existing alpha values are overwritten.
*
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @param {number} value - value to set the alpha channel to in the range 0 -1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
function fade(color, value) {
color = decomposeColor(color);
value = clamp$1(value);
if (color.type === 'rgb' || color.type === 'hsl') {
color.type += 'a';
}
color.values[3] = value;
return recomposeColor(color);
}
/**
* Darkens a color.
*
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @param {number} coefficient - multiplier in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
function darken(color, coefficient) {
color = decomposeColor(color);
coefficient = clamp$1(coefficient);
if (color.type.indexOf('hsl') !== -1) {
color.values[2] *= 1 - coefficient;
} else if (color.type.indexOf('rgb') !== -1) {
for (var i = 0; i < 3; i += 1) {
color.values[i] *= 1 - coefficient;
}
}
return recomposeColor(color);
}
/**
* Lightens a color.
*
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @param {number} coefficient - multiplier in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
function lighten(color, coefficient) {
color = decomposeColor(color);
coefficient = clamp$1(coefficient);
if (color.type.indexOf('hsl') !== -1) {
color.values[2] += (100 - color.values[2]) * coefficient;
} else if (color.type.indexOf('rgb') !== -1) {
for (var i = 0; i < 3; i += 1) {
color.values[i] += (255 - color.values[i]) * coefficient;
}
}
return recomposeColor(color);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
// It can't be configured as it's used statically for propTypes.
var keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
function createBreakpoints(breakpoints) {
var _breakpoints$values = breakpoints.values,
values = _breakpoints$values === void 0 ? {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920
} : _breakpoints$values,
_breakpoints$unit = breakpoints.unit,
unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
_breakpoints$step = breakpoints.step,
step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
function up(key) {
var value = typeof values[key] === 'number' ? values[key] : key;
return "@media (min-width:".concat(value).concat(unit, ")");
}
function down(key) {
var endIndex = keys.indexOf(key) + 1;
var upperbound = values[keys[endIndex]];
if (endIndex === keys.length) {
// xl down applies to all sizes
return up('xs');
}
var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
}
function between(start, end) {
var endIndex = keys.indexOf(end);
if (endIndex === keys.length - 1) {
return up(start);
}
return "@media (min-width:".concat(typeof values[start] === 'number' ? values[start] : start).concat(unit, ") and ") + "(max-width:".concat((endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number' ? values[keys[endIndex + 1]] : end) - step / 100).concat(unit, ")");
}
function only(key) {
return between(key, key);
}
function width(key) {
return values[key];
}
return _extends$1({
keys: keys,
values: values,
up: up,
down: down,
between: between,
only: only,
width: width
}, other);
}
function createMixins(breakpoints, spacing, mixins) {
var _toolbar;
return _extends$1({
gutters: function gutters() {
var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; // To deprecate in v4.1
// warning(
// false,
// [
// 'Material-UI: Theme.mixins.gutters() is deprecated.',
// 'You can use the source of the mixin directly:',
// `
// paddingLeft: theme.spacing(2),
// paddingRight: theme.spacing(2),
// [theme.breakpoints.up('sm')]: {
// paddingLeft: theme.spacing(3),
// paddingRight: theme.spacing(3),
// },
// `,
// ].join('\n'),
// );
return _extends$1({
paddingLeft: spacing(2),
paddingRight: spacing(2)
}, styles, _defineProperty$3({}, breakpoints.up('sm'), _extends$1({
paddingLeft: spacing(3),
paddingRight: spacing(3)
}, styles[breakpoints.up('sm')])));
},
toolbar: (_toolbar = {
minHeight: 56
}, _defineProperty$3(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
minHeight: 48
}), _defineProperty$3(_toolbar, breakpoints.up('sm'), {
minHeight: 64
}), _toolbar)
}, mixins);
}
var light = {
// The colors used to style the text.
text: {
// The most important text.
primary: 'rgba(0, 0, 0, 0.87)',
// Secondary text.
secondary: 'rgba(0, 0, 0, 0.54)',
// Disabled text have even lower visual prominence.
disabled: 'rgba(0, 0, 0, 0.38)',
// Text hints.
hint: 'rgba(0, 0, 0, 0.38)'
},
// The color used to divide different elements.
divider: 'rgba(0, 0, 0, 0.12)',
// The background colors used to style the surfaces.
// Consistency between these values is important.
background: {
paper: common.white,
default: grey[50]
},
// The colors used to style the action elements.
action: {
// The color of an active action like an icon button.
active: 'rgba(0, 0, 0, 0.54)',
// The color of an hovered action.
hover: 'rgba(0, 0, 0, 0.04)',
hoverOpacity: 0.04,
// The color of a selected action.
selected: 'rgba(0, 0, 0, 0.08)',
selectedOpacity: 0.08,
// The color of a disabled action.
disabled: 'rgba(0, 0, 0, 0.26)',
// The background color of a disabled action.
disabledBackground: 'rgba(0, 0, 0, 0.12)',
disabledOpacity: 0.38,
focus: 'rgba(0, 0, 0, 0.12)',
focusOpacity: 0.12,
activatedOpacity: 0.12
}
};
var dark = {
text: {
primary: common.white,
secondary: 'rgba(255, 255, 255, 0.7)',
disabled: 'rgba(255, 255, 255, 0.5)',
hint: 'rgba(255, 255, 255, 0.5)',
icon: 'rgba(255, 255, 255, 0.5)'
},
divider: 'rgba(255, 255, 255, 0.12)',
background: {
paper: grey[800],
default: '#303030'
},
action: {
active: common.white,
hover: 'rgba(255, 255, 255, 0.08)',
hoverOpacity: 0.08,
selected: 'rgba(255, 255, 255, 0.16)',
selectedOpacity: 0.16,
disabled: 'rgba(255, 255, 255, 0.3)',
disabledBackground: 'rgba(255, 255, 255, 0.12)',
disabledOpacity: 0.38,
focus: 'rgba(255, 255, 255, 0.12)',
focusOpacity: 0.12,
activatedOpacity: 0.24
}
};
function addLightOrDark(intent, direction, shade, tonalOffset) {
var tonalOffsetLight = tonalOffset.light || tonalOffset;
var tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
if (!intent[direction]) {
if (intent.hasOwnProperty(shade)) {
intent[direction] = intent[shade];
} else if (direction === 'light') {
intent.light = lighten(intent.main, tonalOffsetLight);
} else if (direction === 'dark') {
intent.dark = darken(intent.main, tonalOffsetDark);
}
}
}
function createPalette(palette) {
var _palette$primary = palette.primary,
primary = _palette$primary === void 0 ? {
light: indigo[300],
main: indigo[500],
dark: indigo[700]
} : _palette$primary,
_palette$secondary = palette.secondary,
secondary = _palette$secondary === void 0 ? {
light: pink.A200,
main: pink.A400,
dark: pink.A700
} : _palette$secondary,
_palette$error = palette.error,
error = _palette$error === void 0 ? {
light: red[300],
main: red[500],
dark: red[700]
} : _palette$error,
_palette$warning = palette.warning,
warning = _palette$warning === void 0 ? {
light: orange[300],
main: orange[500],
dark: orange[700]
} : _palette$warning,
_palette$info = palette.info,
info = _palette$info === void 0 ? {
light: blue[300],
main: blue[500],
dark: blue[700]
} : _palette$info,
_palette$success = palette.success,
success = _palette$success === void 0 ? {
light: green[300],
main: green[500],
dark: green[700]
} : _palette$success,
_palette$type = palette.type,
type = _palette$type === void 0 ? 'light' : _palette$type,
_palette$contrastThre = palette.contrastThreshold,
contrastThreshold = _palette$contrastThre === void 0 ? 3 : _palette$contrastThre,
_palette$tonalOffset = palette.tonalOffset,
tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
other = _objectWithoutProperties(palette, ["primary", "secondary", "error", "warning", "info", "success", "type", "contrastThreshold", "tonalOffset"]); // Use the same logic as
// Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
// and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
function getContrastText(background) {
var contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
return contrastText;
}
var augmentColor = function augmentColor(color) {
var mainShade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
var lightShade = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
var darkShade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 700;
color = _extends$1({}, color);
if (!color.main && color[mainShade]) {
color.main = color[mainShade];
}
if (!color.main) {
throw new Error(formatMuiErrorMessage(4, mainShade));
}
if (typeof color.main !== 'string') {
throw new Error(formatMuiErrorMessage(5, JSON.stringify(color.main)));
}
addLightOrDark(color, 'light', lightShade, tonalOffset);
addLightOrDark(color, 'dark', darkShade, tonalOffset);
if (!color.contrastText) {
color.contrastText = getContrastText(color.main);
}
return color;
};
var types = {
dark: dark,
light: light
};
var paletteOutput = deepmerge(_extends$1({
// A collection of common colors.
common: common,
// The palette type, can be light or dark.
type: type,
// The colors used to represent primary interface elements for a user.
primary: augmentColor(primary),
// The colors used to represent secondary interface elements for a user.
secondary: augmentColor(secondary, 'A400', 'A200', 'A700'),
// The colors used to represent interface elements that the user should be made aware of.
error: augmentColor(error),
// The colors used to represent potentially dangerous actions or important messages.
warning: augmentColor(warning),
// The colors used to present information to the user that is neutral and not necessarily important.
info: augmentColor(info),
// The colors used to indicate the successful completion of an action that user triggered.
success: augmentColor(success),
// The grey colors.
grey: grey,
// Used by `getContrastText()` to maximize the contrast between
// the background and the text.
contrastThreshold: contrastThreshold,
// Takes a background color and returns the text color that maximizes the contrast.
getContrastText: getContrastText,
// Generate a rich color object.
augmentColor: augmentColor,
// Used by the functions below to shift a color's luminance by approximately
// two indexes within its tonal palette.
// E.g., shift from Red 500 to Red 300 or Red 700.
tonalOffset: tonalOffset
}, types[type]), other);
return paletteOutput;
}
function round$1(value) {
return Math.round(value * 1e5) / 1e5;
}
var caseAllCaps = {
textTransform: 'uppercase'
};
var defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
/**
* @see @link{https://material.io/design/typography/the-type-system.html}
* @see @link{https://material.io/design/typography/understanding-typography.html}
*/
function createTypography(palette, typography) {
var _ref = typeof typography === 'function' ? typography(palette) : typography,
_ref$fontFamily = _ref.fontFamily,
fontFamily = _ref$fontFamily === void 0 ? defaultFontFamily : _ref$fontFamily,
_ref$fontSize = _ref.fontSize,
fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
_ref$fontWeightLight = _ref.fontWeightLight,
fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,
_ref$fontWeightRegula = _ref.fontWeightRegular,
fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,
_ref$fontWeightMedium = _ref.fontWeightMedium,
fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,
_ref$fontWeightBold = _ref.fontWeightBold,
fontWeightBold = _ref$fontWeightBold === void 0 ? 700 : _ref$fontWeightBold,
_ref$htmlFontSize = _ref.htmlFontSize,
htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,
allVariants = _ref.allVariants,
pxToRem2 = _ref.pxToRem,
other = _objectWithoutProperties(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"]);
var coef = fontSize / 14;
var pxToRem = pxToRem2 || function (size) {
return "".concat(size / htmlFontSize * coef, "rem");
};
var buildVariant = function buildVariant(fontWeight, size, lineHeight, letterSpacing, casing) {
return _extends$1({
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: pxToRem(size),
// Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
lineHeight: lineHeight
}, fontFamily === defaultFontFamily ? {
letterSpacing: "".concat(round$1(letterSpacing / size), "em")
} : {}, casing, allVariants);
};
var variants = {
h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
};
return deepmerge(_extends$1({
htmlFontSize: htmlFontSize,
pxToRem: pxToRem,
round: round$1,
// TODO v5: remove
fontFamily: fontFamily,
fontSize: fontSize,
fontWeightLight: fontWeightLight,
fontWeightRegular: fontWeightRegular,
fontWeightMedium: fontWeightMedium,
fontWeightBold: fontWeightBold
}, variants), other, {
clone: false // No need to clone deep
});
}
var shadowKeyUmbraOpacity = 0.2;
var shadowKeyPenumbraOpacity = 0.14;
var shadowAmbientShadowOpacity = 0.12;
function createShadow() {
return ["".concat(arguments.length <= 0 ? undefined : arguments[0], "px ").concat(arguments.length <= 1 ? undefined : arguments[1], "px ").concat(arguments.length <= 2 ? undefined : arguments[2], "px ").concat(arguments.length <= 3 ? undefined : arguments[3], "px rgba(0,0,0,").concat(shadowKeyUmbraOpacity, ")"), "".concat(arguments.length <= 4 ? undefined : arguments[4], "px ").concat(arguments.length <= 5 ? undefined : arguments[5], "px ").concat(arguments.length <= 6 ? undefined : arguments[6], "px ").concat(arguments.length <= 7 ? undefined : arguments[7], "px rgba(0,0,0,").concat(shadowKeyPenumbraOpacity, ")"), "".concat(arguments.length <= 8 ? undefined : arguments[8], "px ").concat(arguments.length <= 9 ? undefined : arguments[9], "px ").concat(arguments.length <= 10 ? undefined : arguments[10], "px ").concat(arguments.length <= 11 ? undefined : arguments[11], "px rgba(0,0,0,").concat(shadowAmbientShadowOpacity, ")")].join(',');
} // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
var shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
var shape = {
borderRadius: 4
};
function _arrayLikeToArray$2(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray$2(arr);
}
function _iterableToArray$1(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _unsupportedIterableToArray$2(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray$2(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$2(arr) || _nonIterableSpread();
}
function merge(acc, item) {
if (!item) {
return acc;
}
return deepmerge(acc, item, {
clone: false // No need to clone deep, it's way faster.
});
}
// For instance with the first breakpoint xs: [xs, sm[.
var values$1 = {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920
};
var defaultBreakpoints = {
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
up: function up(key) {
return "@media (min-width:".concat(values$1[key], "px)");
}
};
function handleBreakpoints(props, propValue, styleFromPropValue) {
if (Array.isArray(propValue)) {
var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
return propValue.reduce(function (acc, item, index) {
acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
return acc;
}, {});
}
if (_typeof$3(propValue) === 'object') {
var _themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
return Object.keys(propValue).reduce(function (acc, breakpoint) {
acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
return acc;
}, {});
}
var output = styleFromPropValue(propValue);
return output;
}
function getPath$1(obj, path) {
if (!path || typeof path !== 'string') {
return null;
}
return path.split('.').reduce(function (acc, item) {
return acc && acc[item] ? acc[item] : null;
}, obj);
}
function style$1(options) {
var prop = options.prop,
_options$cssProperty = options.cssProperty,
cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
themeKey = options.themeKey,
transform = options.transform;
var fn = function fn(props) {
if (props[prop] == null) {
return null;
}
var propValue = props[prop];
var theme = props.theme;
var themeMapping = getPath$1(theme, themeKey) || {};
var styleFromPropValue = function styleFromPropValue(propValueFinal) {
var value;
if (typeof themeMapping === 'function') {
value = themeMapping(propValueFinal);
} else if (Array.isArray(themeMapping)) {
value = themeMapping[propValueFinal] || propValueFinal;
} else {
value = getPath$1(themeMapping, propValueFinal) || propValueFinal;
if (transform) {
value = transform(value);
}
}
if (cssProperty === false) {
return value;
}
return _defineProperty$3({}, cssProperty, value);
};
return handleBreakpoints(props, propValue, styleFromPropValue);
};
fn.propTypes = {};
fn.filterProps = [prop];
return fn;
}
function compose() {
for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
styles[_key] = arguments[_key];
}
var fn = function fn(props) {
return styles.reduce(function (acc, style) {
var output = style(props);
if (output) {
return merge(acc, output);
}
return acc;
}, {});
}; // Alternative approach that doesn't yield any performance gain.
// const handlers = styles.reduce((acc, style) => {
// style.filterProps.forEach(prop => {
// acc[prop] = style;
// });
// return acc;
// }, {});
// const fn = props => {
// return Object.keys(props).reduce((acc, prop) => {
// if (handlers[prop]) {
// return merge(acc, handlers[prop](props));
// }
// return acc;
// }, {});
// };
fn.propTypes = {};
fn.filterProps = styles.reduce(function (acc, style) {
return acc.concat(style.filterProps);
}, []);
return fn;
}
function getBorder(value) {
if (typeof value !== 'number') {
return value;
}
return "".concat(value, "px solid");
}
var border = style$1({
prop: 'border',
themeKey: 'borders',
transform: getBorder
});
var borderTop = style$1({
prop: 'borderTop',
themeKey: 'borders',
transform: getBorder
});
var borderRight = style$1({
prop: 'borderRight',
themeKey: 'borders',
transform: getBorder
});
var borderBottom = style$1({
prop: 'borderBottom',
themeKey: 'borders',
transform: getBorder
});
var borderLeft = style$1({
prop: 'borderLeft',
themeKey: 'borders',
transform: getBorder
});
var borderColor = style$1({
prop: 'borderColor',
themeKey: 'palette'
});
var borderRadius = style$1({
prop: 'borderRadius',
themeKey: 'shape'
});
var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
function omit$1(input, fields) {
var output = {};
Object.keys(input).forEach(function (prop) {
if (fields.indexOf(prop) === -1) {
output[prop] = input[prop];
}
});
return output;
}
function css$1(styleFunction) {
var newStyleFunction = function newStyleFunction(props) {
var output = styleFunction(props);
if (props.css) {
return _extends$1({}, merge(output, styleFunction(_extends$1({
theme: props.theme
}, props.css))), omit$1(props.css, [styleFunction.filterProps]));
}
return output;
};
newStyleFunction.propTypes = {};
newStyleFunction.filterProps = ['css'].concat(_toConsumableArray(styleFunction.filterProps));
return newStyleFunction;
}
var displayPrint = style$1({
prop: 'displayPrint',
cssProperty: false,
transform: function transform(value) {
return {
'@media print': {
display: value
}
};
}
});
var displayRaw = style$1({
prop: 'display'
});
var overflow = style$1({
prop: 'overflow'
});
var textOverflow = style$1({
prop: 'textOverflow'
});
var visibility = style$1({
prop: 'visibility'
});
var whiteSpace = style$1({
prop: 'whiteSpace'
});
var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
var flexBasis = style$1({
prop: 'flexBasis'
});
var flexDirection = style$1({
prop: 'flexDirection'
});
var flexWrap = style$1({
prop: 'flexWrap'
});
var justifyContent = style$1({
prop: 'justifyContent'
});
var alignItems = style$1({
prop: 'alignItems'
});
var alignContent = style$1({
prop: 'alignContent'
});
var order = style$1({
prop: 'order'
});
var flex = style$1({
prop: 'flex'
});
var flexGrow = style$1({
prop: 'flexGrow'
});
var flexShrink = style$1({
prop: 'flexShrink'
});
var alignSelf = style$1({
prop: 'alignSelf'
});
var justifyItems = style$1({
prop: 'justifyItems'
});
var justifySelf = style$1({
prop: 'justifySelf'
});
var flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
var gridGap = style$1({
prop: 'gridGap'
});
var gridColumnGap = style$1({
prop: 'gridColumnGap'
});
var gridRowGap = style$1({
prop: 'gridRowGap'
});
var gridColumn = style$1({
prop: 'gridColumn'
});
var gridRow = style$1({
prop: 'gridRow'
});
var gridAutoFlow = style$1({
prop: 'gridAutoFlow'
});
var gridAutoColumns = style$1({
prop: 'gridAutoColumns'
});
var gridAutoRows = style$1({
prop: 'gridAutoRows'
});
var gridTemplateColumns = style$1({
prop: 'gridTemplateColumns'
});
var gridTemplateRows = style$1({
prop: 'gridTemplateRows'
});
var gridTemplateAreas = style$1({
prop: 'gridTemplateAreas'
});
var gridArea = style$1({
prop: 'gridArea'
});
var grid = compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
var color = style$1({
prop: 'color',
themeKey: 'palette'
});
var bgcolor = style$1({
prop: 'bgcolor',
cssProperty: 'backgroundColor',
themeKey: 'palette'
});
var palette = compose(color, bgcolor);
var position = style$1({
prop: 'position'
});
var zIndex$1 = style$1({
prop: 'zIndex',
themeKey: 'zIndex'
});
var top = style$1({
prop: 'top'
});
var right = style$1({
prop: 'right'
});
var bottom = style$1({
prop: 'bottom'
});
var left = style$1({
prop: 'left'
});
var positions = compose(position, zIndex$1, top, right, bottom, left);
var boxShadow = style$1({
prop: 'boxShadow',
themeKey: 'shadows'
});
function transform$1(value) {
return value <= 1 ? "".concat(value * 100, "%") : value;
}
var width = style$1({
prop: 'width',
transform: transform$1
});
var maxWidth = style$1({
prop: 'maxWidth',
transform: transform$1
});
var minWidth = style$1({
prop: 'minWidth',
transform: transform$1
});
var height = style$1({
prop: 'height',
transform: transform$1
});
var maxHeight = style$1({
prop: 'maxHeight',
transform: transform$1
});
var minHeight = style$1({
prop: 'minHeight',
transform: transform$1
});
style$1({
prop: 'size',
cssProperty: 'width',
transform: transform$1
});
style$1({
prop: 'size',
cssProperty: 'height',
transform: transform$1
});
var boxSizing = style$1({
prop: 'boxSizing'
});
var sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
function _arrayWithHoles$2(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit$1(arr, i) {
var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _nonIterableRest$2() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray$1(arr, i) {
return _arrayWithHoles$2(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest$2();
}
function memoize$1(fn) {
var cache = {};
return function (arg) {
if (cache[arg] === undefined) {
cache[arg] = fn(arg);
}
return cache[arg];
};
}
var properties = {
m: 'margin',
p: 'padding'
};
var directions = {
t: 'Top',
r: 'Right',
b: 'Bottom',
l: 'Left',
x: ['Left', 'Right'],
y: ['Top', 'Bottom']
};
var aliases = {
marginX: 'mx',
marginY: 'my',
paddingX: 'px',
paddingY: 'py'
}; // memoize() impact:
// From 300,000 ops/sec
// To 350,000 ops/sec
var getCssProperties = memoize$1(function (prop) {
// It's not a shorthand notation.
if (prop.length > 2) {
if (aliases[prop]) {
prop = aliases[prop];
} else {
return [prop];
}
}
var _prop$split = prop.split(''),
_prop$split2 = _slicedToArray$1(_prop$split, 2),
a = _prop$split2[0],
b = _prop$split2[1];
var property = properties[a];
var direction = directions[b] || '';
return Array.isArray(direction) ? direction.map(function (dir) {
return property + dir;
}) : [property + direction];
});
var spacingKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
function createUnarySpacing(theme) {
var themeSpacing = theme.spacing || 8;
if (typeof themeSpacing === 'number') {
return function (abs) {
return themeSpacing * abs;
};
}
if (Array.isArray(themeSpacing)) {
return function (abs) {
return themeSpacing[abs];
};
}
if (typeof themeSpacing === 'function') {
return themeSpacing;
}
return function () {
return undefined;
};
}
function getValue(transformer, propValue) {
if (typeof propValue === 'string' || propValue == null) {
return propValue;
}
var abs = Math.abs(propValue);
var transformed = transformer(abs);
if (propValue >= 0) {
return transformed;
}
if (typeof transformed === 'number') {
return -transformed;
}
return "-".concat(transformed);
}
function getStyleFromPropValue(cssProperties, transformer) {
return function (propValue) {
return cssProperties.reduce(function (acc, cssProperty) {
acc[cssProperty] = getValue(transformer, propValue);
return acc;
}, {});
};
}
function spacing(props) {
var theme = props.theme;
var transformer = createUnarySpacing(theme);
return Object.keys(props).map(function (prop) {
// Using a hash computation over an array iteration could be faster, but with only 28 items,
// it's doesn't worth the bundle size.
if (spacingKeys.indexOf(prop) === -1) {
return null;
}
var cssProperties = getCssProperties(prop);
var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
var propValue = props[prop];
return handleBreakpoints(props, propValue, styleFromPropValue);
}).reduce(merge, {});
}
spacing.propTypes = {};
spacing.filterProps = spacingKeys;
var fontFamily = style$1({
prop: 'fontFamily',
themeKey: 'typography'
});
var fontSize$2 = style$1({
prop: 'fontSize',
themeKey: 'typography'
});
var fontStyle = style$1({
prop: 'fontStyle',
themeKey: 'typography'
});
var fontWeight = style$1({
prop: 'fontWeight',
themeKey: 'typography'
});
var letterSpacing = style$1({
prop: 'letterSpacing'
});
var lineHeight = style$1({
prop: 'lineHeight'
});
var textAlign = style$1({
prop: 'textAlign'
});
var typography = compose(fontFamily, fontSize$2, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
function createSpacing() {
var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8; // Already transformed.
if (spacingInput.mui) {
return spacingInput;
} // Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout.
// Smaller components, such as icons and type, can align to a 4dp grid.
// https://material.io/design/layout/understanding-layout.html#usage
var transform = createUnarySpacing({
spacing: spacingInput
});
var spacing = function spacing() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (args.length === 0) {
return transform(1);
}
if (args.length === 1) {
return transform(args[0]);
}
return args.map(function (argument) {
if (typeof argument === 'string') {
return argument;
}
var output = transform(argument);
return typeof output === 'number' ? "".concat(output, "px") : output;
}).join(' ');
}; // Backward compatibility, to remove in v5.
Object.defineProperty(spacing, 'unit', {
get: function get() {
return spacingInput;
}
});
spacing.mui = true;
return spacing;
}
// to learn the context in which each easing should be used.
var easing = {
// This is the most common easing curve.
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
// Objects enter the screen at full velocity from off-screen and
// slowly decelerate to a resting point.
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
// Objects leave the screen at full velocity. They do not decelerate when off-screen.
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
// The sharp curve is used by objects that may return to the screen at any time.
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
}; // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
// to learn when use what timing
var duration = {
shortest: 150,
shorter: 200,
short: 250,
// most basic recommended timing
standard: 300,
// this is to be used in complex animations
complex: 375,
// recommended when something is entering screen
enteringScreen: 225,
// recommended when something is leaving screen
leavingScreen: 195
};
function formatMs(milliseconds) {
return "".concat(Math.round(milliseconds), "ms");
}
/**
* @param {string|Array} props
* @param {object} param
* @param {string} param.prop
* @param {number} param.duration
* @param {string} param.easing
* @param {number} param.delay
*/
var transitions = {
easing: easing,
duration: duration,
create: function create() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['all'];
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _options$duration = options.duration,
durationOption = _options$duration === void 0 ? duration.standard : _options$duration,
_options$easing = options.easing,
easingOption = _options$easing === void 0 ? easing.easeInOut : _options$easing,
_options$delay = options.delay,
delay = _options$delay === void 0 ? 0 : _options$delay;
_objectWithoutProperties(options, ["duration", "easing", "delay"]);
return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : formatMs(durationOption), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : formatMs(delay));
}).join(',');
},
getAutoHeightDuration: function getAutoHeightDuration(height) {
if (!height) {
return 0;
}
var constant = height / 36; // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
}
};
// We need to centralize the zIndex definitions as they work
// like global values in the browser.
var zIndex = {
mobileStepper: 1000,
speedDial: 1050,
appBar: 1100,
drawer: 1200,
modal: 1300,
snackbar: 1400,
tooltip: 1500
};
function createMuiTheme() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$breakpoints = options.breakpoints,
breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
_options$mixins = options.mixins,
mixinsInput = _options$mixins === void 0 ? {} : _options$mixins,
_options$palette = options.palette,
paletteInput = _options$palette === void 0 ? {} : _options$palette,
spacingInput = options.spacing,
_options$typography = options.typography,
typographyInput = _options$typography === void 0 ? {} : _options$typography,
other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "spacing", "typography"]);
var palette = createPalette(paletteInput);
var breakpoints = createBreakpoints(breakpointsInput);
var spacing = createSpacing(spacingInput);
var muiTheme = deepmerge({
breakpoints: breakpoints,
direction: 'ltr',
mixins: createMixins(breakpoints, spacing, mixinsInput),
overrides: {},
// Inject custom styles
palette: palette,
props: {},
// Provide default props
shadows: shadows,
typography: createTypography(palette, typographyInput),
spacing: spacing,
shape: shape,
transitions: transitions,
zIndex: zIndex
}, other);
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
muiTheme = args.reduce(function (acc, argument) {
return deepmerge(acc, argument);
}, muiTheme);
return muiTheme;
}
var hasSymbol = typeof Symbol === 'function' && Symbol.for;
var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
/**
* This is the list of the style rule name we use as drop in replacement for the built-in
* pseudo classes (:checked, :disabled, :focused, etc.).
*
* Why do they exist in the first place?
* These classes are used at a specificity of 2.
* It allows them to override previously definied styles as well as
* being untouched by simple user overrides.
*/
var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected']; // Returns a function which generates unique class names based on counters.
// When new generator function is created, rule counter is reset.
// We need to reset the rule counter for SSR for each request.
//
// It's inspired by
// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
function createGenerateClassName() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$disableGloba = options.disableGlobal,
disableGlobal = _options$disableGloba === void 0 ? false : _options$disableGloba,
_options$productionPr = options.productionPrefix,
productionPrefix = _options$productionPr === void 0 ? 'jss' : _options$productionPr,
_options$seed = options.seed,
seed = _options$seed === void 0 ? '' : _options$seed;
var seedPrefix = seed === '' ? '' : "".concat(seed, "-");
var ruleCounter = 0;
var getNextCounterId = function getNextCounterId() {
ruleCounter += 1;
return ruleCounter;
};
return function (rule, styleSheet) {
var name = styleSheet.options.name; // Is a global static MUI style?
if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
// We can use a shorthand class name, we never use the keys to style the components.
if (pseudoClasses.indexOf(rule.key) !== -1) {
return "Mui-".concat(rule.key);
}
var prefix = "".concat(seedPrefix).concat(name, "-").concat(rule.key);
if (!styleSheet.options.theme[nested] || seed !== '') {
return prefix;
}
return "".concat(prefix, "-").concat(getNextCounterId());
}
{
return "".concat(seedPrefix).concat(productionPrefix).concat(getNextCounterId());
}
};
}
function createStyles$1(styles) {
return styles;
}
/* eslint-disable no-restricted-syntax */
function getThemeProps(params) {
var theme = params.theme,
name = params.name,
props = params.props;
if (!theme || !theme.props || !theme.props[name]) {
return props;
} // Resolve default props, code borrow from React source.
// https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
var defaultProps = theme.props[name];
var propName;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
return props;
}
var _typeof$2 = 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 isBrowser$1 = (typeof window === "undefined" ? "undefined" : _typeof$2(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$2(document)) === 'object' && document.nodeType === 9;
function _defineProperties$2(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass$2(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties$2(Constructor.prototype, protoProps);
if (staticProps) _defineProperties$2(Constructor, staticProps);
return Constructor;
}
function _setPrototypeOf$1(o, p) {
_setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf$1(o, p);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf$1(subClass, superClass);
}
function _assertThisInitialized$1(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
var plainObjectConstrurctor = {}.constructor;
function cloneStyle(style) {
if (style == null || typeof style !== 'object') return style;
if (Array.isArray(style)) return style.map(cloneStyle);
if (style.constructor !== plainObjectConstrurctor) return style;
var newStyle = {};
for (var name in style) {
newStyle[name] = cloneStyle(style[name]);
}
return newStyle;
}
/**
* Create a rule instance.
*/
function createRule(name, decl, options) {
if (name === void 0) {
name = 'unnamed';
}
var jss = options.jss;
var declCopy = cloneStyle(decl);
var rule = jss.plugins.onCreateRule(name, declCopy, options);
if (rule) return rule; // It is an at-rule and it has no instance.
if (name[0] === '@') ;
return null;
}
var join = function join(value, by) {
var result = '';
for (var i = 0; i < value.length; i++) {
// Remove !important from the value, it will be readded later.
if (value[i] === '!important') break;
if (result) result += by;
result += value[i];
}
return result;
};
/**
* Converts array values to string.
*
* `margin: [['5px', '10px']]` > `margin: 5px 10px;`
* `border: ['1px', '2px']` > `border: 1px, 2px;`
* `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`
* `color: ['red', !important]` > `color: red !important;`
*/
var toCssValue = function toCssValue(value, ignoreImportant) {
if (ignoreImportant === void 0) {
ignoreImportant = false;
}
if (!Array.isArray(value)) return value;
var cssValue = ''; // Support space separated values via `[['5px', '10px']]`.
if (Array.isArray(value[0])) {
for (var i = 0; i < value.length; i++) {
if (value[i] === '!important') break;
if (cssValue) cssValue += ', ';
cssValue += join(value[i], ' ');
}
} else cssValue = join(value, ', '); // Add !important, because it was ignored.
if (!ignoreImportant && value[value.length - 1] === '!important') {
cssValue += ' !important';
}
return cssValue;
};
/**
* Indent a string.
* http://jsperf.com/array-join-vs-for
*/
function indentStr(str, indent) {
var result = '';
for (var index = 0; index < indent; index++) {
result += ' ';
}
return result + str;
}
/**
* Converts a Rule to CSS string.
*/
function toCss(selector, style, options) {
if (options === void 0) {
options = {};
}
var result = '';
if (!style) return result;
var _options = options,
_options$indent = _options.indent,
indent = _options$indent === void 0 ? 0 : _options$indent;
var fallbacks = style.fallbacks;
if (selector) indent++; // Apply fallbacks first.
if (fallbacks) {
// Array syntax {fallbacks: [{prop: value}]}
if (Array.isArray(fallbacks)) {
for (var index = 0; index < fallbacks.length; index++) {
var fallback = fallbacks[index];
for (var prop in fallback) {
var value = fallback[prop];
if (value != null) {
if (result) result += '\n';
result += "" + indentStr(prop + ": " + toCssValue(value) + ";", indent);
}
}
}
} else {
// Object syntax {fallbacks: {prop: value}}
for (var _prop in fallbacks) {
var _value = fallbacks[_prop];
if (_value != null) {
if (result) result += '\n';
result += "" + indentStr(_prop + ": " + toCssValue(_value) + ";", indent);
}
}
}
}
for (var _prop2 in style) {
var _value2 = style[_prop2];
if (_value2 != null && _prop2 !== 'fallbacks') {
if (result) result += '\n';
result += "" + indentStr(_prop2 + ": " + toCssValue(_value2) + ";", indent);
}
} // Allow empty style in this case, because properties will be added dynamically.
if (!result && !options.allowEmpty) return result; // When rule is being stringified before selector was defined.
if (!selector) return result;
indent--;
if (result) result = "\n" + result + "\n";
return indentStr(selector + " {" + result, indent) + indentStr('}', indent);
}
var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
var escape$1 = function (str) {
return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
};
var BaseStyleRule = /*#__PURE__*/function () {
function BaseStyleRule(key, style, options) {
this.type = 'style';
this.key = void 0;
this.isProcessed = false;
this.style = void 0;
this.renderer = void 0;
this.renderable = void 0;
this.options = void 0;
var sheet = options.sheet,
Renderer = options.Renderer;
this.key = key;
this.options = options;
this.style = style;
if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();
}
/**
* Get or set a style property.
*/
var _proto = BaseStyleRule.prototype;
_proto.prop = function prop(name, value, options) {
// It's a getter.
if (value === undefined) return this.style[name]; // Don't do anything if the value has not changed.
var force = options ? options.force : false;
if (!force && this.style[name] === value) return this;
var newValue = value;
if (!options || options.process !== false) {
newValue = this.options.jss.plugins.onChangeValue(value, name, this);
}
var isEmpty = newValue == null || newValue === false;
var isDefined = (name in this.style); // Value is empty and wasn't defined before.
if (isEmpty && !isDefined && !force) return this; // We are going to remove this value.
var remove = isEmpty && isDefined;
if (remove) delete this.style[name];else this.style[name] = newValue; // Renderable is defined if StyleSheet option `link` is true.
if (this.renderable && this.renderer) {
if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
return this;
}
var sheet = this.options.sheet;
if (sheet && sheet.attached) ;
return this;
};
return BaseStyleRule;
}();
var StyleRule = /*#__PURE__*/function (_BaseStyleRule) {
_inheritsLoose(StyleRule, _BaseStyleRule);
function StyleRule(key, style, options) {
var _this;
_this = _BaseStyleRule.call(this, key, style, options) || this;
_this.selectorText = void 0;
_this.id = void 0;
_this.renderable = void 0;
var selector = options.selector,
scoped = options.scoped,
sheet = options.sheet,
generateId = options.generateId;
if (selector) {
_this.selectorText = selector;
} else if (scoped !== false) {
_this.id = generateId(_assertThisInitialized$1(_assertThisInitialized$1(_this)), sheet);
_this.selectorText = "." + escape$1(_this.id);
}
return _this;
}
/**
* Set selector string.
* Attention: use this with caution. Most browsers didn't implement
* selectorText setter, so this may result in rerendering of entire Style Sheet.
*/
var _proto2 = StyleRule.prototype;
/**
* Apply rule to an element inline.
*/
_proto2.applyTo = function applyTo(renderable) {
var renderer = this.renderer;
if (renderer) {
var json = this.toJSON();
for (var prop in json) {
renderer.setProperty(renderable, prop, json[prop]);
}
}
return this;
}
/**
* Returns JSON representation of the rule.
* Fallbacks are not supported.
* Useful for inline styles.
*/
;
_proto2.toJSON = function toJSON() {
var json = {};
for (var prop in this.style) {
var value = this.style[prop];
if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
}
return json;
}
/**
* Generates a CSS string.
*/
;
_proto2.toString = function toString(options) {
var sheet = this.options.sheet;
var link = sheet ? sheet.options.link : false;
var opts = link ? _extends$1({}, options, {
allowEmpty: true
}) : options;
return toCss(this.selectorText, this.style, opts);
};
_createClass$2(StyleRule, [{
key: "selector",
set: function set(selector) {
if (selector === this.selectorText) return;
this.selectorText = selector;
var renderer = this.renderer,
renderable = this.renderable;
if (!renderable || !renderer) return;
var hasChanged = renderer.setSelector(renderable, selector); // If selector setter is not implemented, rerender the rule.
if (!hasChanged) {
renderer.replaceRule(renderable, this);
}
}
/**
* Get selector string.
*/
,
get: function get() {
return this.selectorText;
}
}]);
return StyleRule;
}(BaseStyleRule);
var pluginStyleRule = {
onCreateRule: function onCreateRule(name, style, options) {
if (name[0] === '@' || options.parent && options.parent.type === 'keyframes') {
return null;
}
return new StyleRule(name, style, options);
}
};
var defaultToStringOptions = {
indent: 1,
children: true
};
var atRegExp = /@([\w-]+)/;
/**
* Conditional rule for @media, @supports
*/
var ConditionalRule = /*#__PURE__*/function () {
function ConditionalRule(key, styles, options) {
this.type = 'conditional';
this.at = void 0;
this.key = void 0;
this.query = void 0;
this.rules = void 0;
this.options = void 0;
this.isProcessed = false;
this.renderable = void 0;
this.key = key;
var atMatch = key.match(atRegExp);
this.at = atMatch ? atMatch[1] : 'unknown'; // Key might contain a unique suffix in case the `name` passed by user was duplicate.
this.query = options.name || "@" + this.at;
this.options = options;
this.rules = new RuleList(_extends$1({}, options, {
parent: this
}));
for (var name in styles) {
this.rules.add(name, styles[name]);
}
this.rules.process();
}
/**
* Get a rule.
*/
var _proto = ConditionalRule.prototype;
_proto.getRule = function getRule(name) {
return this.rules.get(name);
}
/**
* Get index of a rule.
*/
;
_proto.indexOf = function indexOf(rule) {
return this.rules.indexOf(rule);
}
/**
* Create and register rule, run plugins.
*/
;
_proto.addRule = function addRule(name, style, options) {
var rule = this.rules.add(name, style, options);
if (!rule) return null;
this.options.jss.plugins.onProcessRule(rule);
return rule;
}
/**
* Generates a CSS string.
*/
;
_proto.toString = function toString(options) {
if (options === void 0) {
options = defaultToStringOptions;
}
if (options.indent == null) options.indent = defaultToStringOptions.indent;
if (options.children == null) options.children = defaultToStringOptions.children;
if (options.children === false) {
return this.query + " {}";
}
var children = this.rules.toString(options);
return children ? this.query + " {\n" + children + "\n}" : '';
};
return ConditionalRule;
}();
var keyRegExp = /@media|@supports\s+/;
var pluginConditionalRule = {
onCreateRule: function onCreateRule(key, styles, options) {
return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;
}
};
var defaultToStringOptions$1 = {
indent: 1,
children: true
};
var nameRegExp = /@keyframes\s+([\w-]+)/;
/**
* Rule for @keyframes
*/
var KeyframesRule = /*#__PURE__*/function () {
function KeyframesRule(key, frames, options) {
this.type = 'keyframes';
this.at = '@keyframes';
this.key = void 0;
this.name = void 0;
this.id = void 0;
this.rules = void 0;
this.options = void 0;
this.isProcessed = false;
this.renderable = void 0;
var nameMatch = key.match(nameRegExp);
if (nameMatch && nameMatch[1]) {
this.name = nameMatch[1];
} else {
this.name = 'noname';
}
this.key = this.type + "-" + this.name;
this.options = options;
var scoped = options.scoped,
sheet = options.sheet,
generateId = options.generateId;
this.id = scoped === false ? this.name : escape$1(generateId(this, sheet));
this.rules = new RuleList(_extends$1({}, options, {
parent: this
}));
for (var name in frames) {
this.rules.add(name, frames[name], _extends$1({}, options, {
parent: this
}));
}
this.rules.process();
}
/**
* Generates a CSS string.
*/
var _proto = KeyframesRule.prototype;
_proto.toString = function toString(options) {
if (options === void 0) {
options = defaultToStringOptions$1;
}
if (options.indent == null) options.indent = defaultToStringOptions$1.indent;
if (options.children == null) options.children = defaultToStringOptions$1.children;
if (options.children === false) {
return this.at + " " + this.id + " {}";
}
var children = this.rules.toString(options);
if (children) children = "\n" + children + "\n";
return this.at + " " + this.id + " {" + children + "}";
};
return KeyframesRule;
}();
var keyRegExp$1 = /@keyframes\s+/;
var refRegExp$1 = /\$([\w-]+)/g;
var findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {
if (typeof val === 'string') {
return val.replace(refRegExp$1, function (match, name) {
if (name in keyframes) {
return keyframes[name];
}
return match;
});
}
return val;
};
/**
* Replace the reference for a animation name.
*/
var replaceRef = function replaceRef(style, prop, keyframes) {
var value = style[prop];
var refKeyframe = findReferencedKeyframe(value, keyframes);
if (refKeyframe !== value) {
style[prop] = refKeyframe;
}
};
var plugin = {
onCreateRule: function onCreateRule(key, frames, options) {
return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
},
// Animation name ref replacer.
onProcessStyle: function onProcessStyle(style, rule, sheet) {
if (rule.type !== 'style' || !sheet) return style;
if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes);
if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes);
return style;
},
onChangeValue: function onChangeValue(val, prop, rule) {
var sheet = rule.options.sheet;
if (!sheet) {
return val;
}
switch (prop) {
case 'animation':
return findReferencedKeyframe(val, sheet.keyframes);
case 'animation-name':
return findReferencedKeyframe(val, sheet.keyframes);
default:
return val;
}
}
};
var KeyframeRule = /*#__PURE__*/function (_BaseStyleRule) {
_inheritsLoose(KeyframeRule, _BaseStyleRule);
function KeyframeRule() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _BaseStyleRule.call.apply(_BaseStyleRule, [this].concat(args)) || this;
_this.renderable = void 0;
return _this;
}
var _proto = KeyframeRule.prototype;
/**
* Generates a CSS string.
*/
_proto.toString = function toString(options) {
var sheet = this.options.sheet;
var link = sheet ? sheet.options.link : false;
var opts = link ? _extends$1({}, options, {
allowEmpty: true
}) : options;
return toCss(this.key, this.style, opts);
};
return KeyframeRule;
}(BaseStyleRule);
var pluginKeyframeRule = {
onCreateRule: function onCreateRule(key, style, options) {
if (options.parent && options.parent.type === 'keyframes') {
return new KeyframeRule(key, style, options);
}
return null;
}
};
var FontFaceRule = /*#__PURE__*/function () {
function FontFaceRule(key, style, options) {
this.type = 'font-face';
this.at = '@font-face';
this.key = void 0;
this.style = void 0;
this.options = void 0;
this.isProcessed = false;
this.renderable = void 0;
this.key = key;
this.style = style;
this.options = options;
}
/**
* Generates a CSS string.
*/
var _proto = FontFaceRule.prototype;
_proto.toString = function toString(options) {
if (Array.isArray(this.style)) {
var str = '';
for (var index = 0; index < this.style.length; index++) {
str += toCss(this.at, this.style[index]);
if (this.style[index + 1]) str += '\n';
}
return str;
}
return toCss(this.at, this.style, options);
};
return FontFaceRule;
}();
var keyRegExp$2 = /@font-face/;
var pluginFontFaceRule = {
onCreateRule: function onCreateRule(key, style, options) {
return keyRegExp$2.test(key) ? new FontFaceRule(key, style, options) : null;
}
};
var ViewportRule = /*#__PURE__*/function () {
function ViewportRule(key, style, options) {
this.type = 'viewport';
this.at = '@viewport';
this.key = void 0;
this.style = void 0;
this.options = void 0;
this.isProcessed = false;
this.renderable = void 0;
this.key = key;
this.style = style;
this.options = options;
}
/**
* Generates a CSS string.
*/
var _proto = ViewportRule.prototype;
_proto.toString = function toString(options) {
return toCss(this.key, this.style, options);
};
return ViewportRule;
}();
var pluginViewportRule = {
onCreateRule: function onCreateRule(key, style, options) {
return key === '@viewport' || key === '@-ms-viewport' ? new ViewportRule(key, style, options) : null;
}
};
var SimpleRule = /*#__PURE__*/function () {
function SimpleRule(key, value, options) {
this.type = 'simple';
this.key = void 0;
this.value = void 0;
this.options = void 0;
this.isProcessed = false;
this.renderable = void 0;
this.key = key;
this.value = value;
this.options = options;
}
/**
* Generates a CSS string.
*/
// eslint-disable-next-line no-unused-vars
var _proto = SimpleRule.prototype;
_proto.toString = function toString(options) {
if (Array.isArray(this.value)) {
var str = '';
for (var index = 0; index < this.value.length; index++) {
str += this.key + " " + this.value[index] + ";";
if (this.value[index + 1]) str += '\n';
}
return str;
}
return this.key + " " + this.value + ";";
};
return SimpleRule;
}();
var keysMap = {
'@charset': true,
'@import': true,
'@namespace': true
};
var pluginSimpleRule = {
onCreateRule: function onCreateRule(key, value, options) {
return key in keysMap ? new SimpleRule(key, value, options) : null;
}
};
var plugins$1 = [pluginStyleRule, pluginConditionalRule, plugin, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
var defaultUpdateOptions = {
process: true
};
var forceUpdateOptions = {
force: true,
process: true
/**
* Contains rules objects and allows adding/removing etc.
* Is used for e.g. by `StyleSheet` or `ConditionalRule`.
*/
};
var RuleList = /*#__PURE__*/function () {
// Rules registry for access by .get() method.
// It contains the same rule registered by name and by selector.
// Original styles object.
// Used to ensure correct rules order.
function RuleList(options) {
this.map = {};
this.raw = {};
this.index = [];
this.counter = 0;
this.options = void 0;
this.classes = void 0;
this.keyframes = void 0;
this.options = options;
this.classes = options.classes;
this.keyframes = options.keyframes;
}
/**
* Create and register rule.
*
* Will not render after Style Sheet was rendered the first time.
*/
var _proto = RuleList.prototype;
_proto.add = function add(name, decl, ruleOptions) {
var _this$options = this.options,
parent = _this$options.parent,
sheet = _this$options.sheet,
jss = _this$options.jss,
Renderer = _this$options.Renderer,
generateId = _this$options.generateId,
scoped = _this$options.scoped;
var options = _extends$1({
classes: this.classes,
parent: parent,
sheet: sheet,
jss: jss,
Renderer: Renderer,
generateId: generateId,
scoped: scoped,
name: name,
keyframes: this.keyframes,
selector: undefined
}, ruleOptions); // When user uses .createStyleSheet(), duplicate names are not possible, but
// `sheet.addRule()` opens the door for any duplicate rule name. When this happens
// we need to make the key unique within this RuleList instance scope.
var key = name;
if (name in this.raw) {
key = name + "-d" + this.counter++;
} // We need to save the original decl before creating the rule
// because cache plugin needs to use it as a key to return a cached rule.
this.raw[key] = decl;
if (key in this.classes) {
// E.g. rules inside of @media container
options.selector = "." + escape$1(this.classes[key]);
}
var rule = createRule(key, decl, options);
if (!rule) return null;
this.register(rule);
var index = options.index === undefined ? this.index.length : options.index;
this.index.splice(index, 0, rule);
return rule;
}
/**
* Get a rule.
*/
;
_proto.get = function get(name) {
return this.map[name];
}
/**
* Delete a rule.
*/
;
_proto.remove = function remove(rule) {
this.unregister(rule);
delete this.raw[rule.key];
this.index.splice(this.index.indexOf(rule), 1);
}
/**
* Get index of a rule.
*/
;
_proto.indexOf = function indexOf(rule) {
return this.index.indexOf(rule);
}
/**
* Run `onProcessRule()` plugins on every rule.
*/
;
_proto.process = function process() {
var plugins = this.options.jss.plugins; // We need to clone array because if we modify the index somewhere else during a loop
// we end up with very hard-to-track-down side effects.
this.index.slice(0).forEach(plugins.onProcessRule, plugins);
}
/**
* Register a rule in `.map`, `.classes` and `.keyframes` maps.
*/
;
_proto.register = function register(rule) {
this.map[rule.key] = rule;
if (rule instanceof StyleRule) {
this.map[rule.selector] = rule;
if (rule.id) this.classes[rule.key] = rule.id;
} else if (rule instanceof KeyframesRule && this.keyframes) {
this.keyframes[rule.name] = rule.id;
}
}
/**
* Unregister a rule.
*/
;
_proto.unregister = function unregister(rule) {
delete this.map[rule.key];
if (rule instanceof StyleRule) {
delete this.map[rule.selector];
delete this.classes[rule.key];
} else if (rule instanceof KeyframesRule) {
delete this.keyframes[rule.name];
}
}
/**
* Update the function values with a new data.
*/
;
_proto.update = function update() {
var name;
var data;
var options;
if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
name = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]
data = arguments.length <= 1 ? undefined : arguments[1]; // $FlowFixMe[invalid-tuple-index]
options = arguments.length <= 2 ? undefined : arguments[2];
} else {
data = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]
options = arguments.length <= 1 ? undefined : arguments[1];
name = null;
}
if (name) {
this.updateOne(this.map[name], data, options);
} else {
for (var index = 0; index < this.index.length; index++) {
this.updateOne(this.index[index], data, options);
}
}
}
/**
* Execute plugins, update rule props.
*/
;
_proto.updateOne = function updateOne(rule, data, options) {
if (options === void 0) {
options = defaultUpdateOptions;
}
var _this$options2 = this.options,
plugins = _this$options2.jss.plugins,
sheet = _this$options2.sheet; // It is a rules container like for e.g. ConditionalRule.
if (rule.rules instanceof RuleList) {
rule.rules.update(data, options);
return;
}
var styleRule = rule;
var style = styleRule.style;
plugins.onUpdate(data, rule, sheet, options); // We rely on a new `style` ref in case it was mutated during onUpdate hook.
if (options.process && style && style !== styleRule.style) {
// We need to run the plugins in case new `style` relies on syntax plugins.
plugins.onProcessStyle(styleRule.style, styleRule, sheet); // Update and add props.
for (var prop in styleRule.style) {
var nextValue = styleRule.style[prop];
var prevValue = style[prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
// We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
if (nextValue !== prevValue) {
styleRule.prop(prop, nextValue, forceUpdateOptions);
}
} // Remove props.
for (var _prop in style) {
var _nextValue = styleRule.style[_prop];
var _prevValue = style[_prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
// We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
if (_nextValue == null && _nextValue !== _prevValue) {
styleRule.prop(_prop, null, forceUpdateOptions);
}
}
}
}
/**
* Convert rules to a CSS string.
*/
;
_proto.toString = function toString(options) {
var str = '';
var sheet = this.options.sheet;
var link = sheet ? sheet.options.link : false;
for (var index = 0; index < this.index.length; index++) {
var rule = this.index[index];
var css = rule.toString(options); // No need to render an empty rule.
if (!css && !link) continue;
if (str) str += '\n';
str += css;
}
return str;
};
return RuleList;
}();
var StyleSheet = /*#__PURE__*/function () {
function StyleSheet(styles, options) {
this.options = void 0;
this.deployed = void 0;
this.attached = void 0;
this.rules = void 0;
this.renderer = void 0;
this.classes = void 0;
this.keyframes = void 0;
this.queue = void 0;
this.attached = false;
this.deployed = false;
this.classes = {};
this.keyframes = {};
this.options = _extends$1({}, options, {
sheet: this,
parent: this,
classes: this.classes,
keyframes: this.keyframes
});
if (options.Renderer) {
this.renderer = new options.Renderer(this);
}
this.rules = new RuleList(this.options);
for (var name in styles) {
this.rules.add(name, styles[name]);
}
this.rules.process();
}
/**
* Attach renderable to the render tree.
*/
var _proto = StyleSheet.prototype;
_proto.attach = function attach() {
if (this.attached) return this;
if (this.renderer) this.renderer.attach();
this.attached = true; // Order is important, because we can't use insertRule API if style element is not attached.
if (!this.deployed) this.deploy();
return this;
}
/**
* Remove renderable from render tree.
*/
;
_proto.detach = function detach() {
if (!this.attached) return this;
if (this.renderer) this.renderer.detach();
this.attached = false;
return this;
}
/**
* Add a rule to the current stylesheet.
* Will insert a rule also after the stylesheet has been rendered first time.
*/
;
_proto.addRule = function addRule(name, decl, options) {
var queue = this.queue; // Plugins can create rules.
// In order to preserve the right order, we need to queue all `.addRule` calls,
// which happen after the first `rules.add()` call.
if (this.attached && !queue) this.queue = [];
var rule = this.rules.add(name, decl, options);
if (!rule) return null;
this.options.jss.plugins.onProcessRule(rule);
if (this.attached) {
if (!this.deployed) return rule; // Don't insert rule directly if there is no stringified version yet.
// It will be inserted all together when .attach is called.
if (queue) queue.push(rule);else {
this.insertRule(rule);
if (this.queue) {
this.queue.forEach(this.insertRule, this);
this.queue = undefined;
}
}
return rule;
} // We can't add rules to a detached style node.
// We will redeploy the sheet once user will attach it.
this.deployed = false;
return rule;
}
/**
* Insert rule into the StyleSheet
*/
;
_proto.insertRule = function insertRule(rule) {
if (this.renderer) {
this.renderer.insertRule(rule);
}
}
/**
* Create and add rules.
* Will render also after Style Sheet was rendered the first time.
*/
;
_proto.addRules = function addRules(styles, options) {
var added = [];
for (var name in styles) {
var rule = this.addRule(name, styles[name], options);
if (rule) added.push(rule);
}
return added;
}
/**
* Get a rule by name.
*/
;
_proto.getRule = function getRule(name) {
return this.rules.get(name);
}
/**
* Delete a rule by name.
* Returns `true`: if rule has been deleted from the DOM.
*/
;
_proto.deleteRule = function deleteRule(name) {
var rule = typeof name === 'object' ? name : this.rules.get(name);
if (!rule || // Style sheet was created without link: true and attached, in this case we
// won't be able to remove the CSS rule from the DOM.
this.attached && !rule.renderable) {
return false;
}
this.rules.remove(rule);
if (this.attached && rule.renderable && this.renderer) {
return this.renderer.deleteRule(rule.renderable);
}
return true;
}
/**
* Get index of a rule.
*/
;
_proto.indexOf = function indexOf(rule) {
return this.rules.indexOf(rule);
}
/**
* Deploy pure CSS string to a renderable.
*/
;
_proto.deploy = function deploy() {
if (this.renderer) this.renderer.deploy();
this.deployed = true;
return this;
}
/**
* Update the function values with a new data.
*/
;
_proto.update = function update() {
var _this$rules;
(_this$rules = this.rules).update.apply(_this$rules, arguments);
return this;
}
/**
* Updates a single rule.
*/
;
_proto.updateOne = function updateOne(rule, data, options) {
this.rules.updateOne(rule, data, options);
return this;
}
/**
* Convert rules to a CSS string.
*/
;
_proto.toString = function toString(options) {
return this.rules.toString(options);
};
return StyleSheet;
}();
var PluginsRegistry = /*#__PURE__*/function () {
function PluginsRegistry() {
this.plugins = {
internal: [],
external: []
};
this.registry = void 0;
}
var _proto = PluginsRegistry.prototype;
/**
* Call `onCreateRule` hooks and return an object if returned by a hook.
*/
_proto.onCreateRule = function onCreateRule(name, decl, options) {
for (var i = 0; i < this.registry.onCreateRule.length; i++) {
var rule = this.registry.onCreateRule[i](name, decl, options);
if (rule) return rule;
}
return null;
}
/**
* Call `onProcessRule` hooks.
*/
;
_proto.onProcessRule = function onProcessRule(rule) {
if (rule.isProcessed) return;
var sheet = rule.options.sheet;
for (var i = 0; i < this.registry.onProcessRule.length; i++) {
this.registry.onProcessRule[i](rule, sheet);
}
if (rule.style) this.onProcessStyle(rule.style, rule, sheet);
rule.isProcessed = true;
}
/**
* Call `onProcessStyle` hooks.
*/
;
_proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {
for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
// $FlowFixMe[prop-missing]
rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
}
}
/**
* Call `onProcessSheet` hooks.
*/
;
_proto.onProcessSheet = function onProcessSheet(sheet) {
for (var i = 0; i < this.registry.onProcessSheet.length; i++) {
this.registry.onProcessSheet[i](sheet);
}
}
/**
* Call `onUpdate` hooks.
*/
;
_proto.onUpdate = function onUpdate(data, rule, sheet, options) {
for (var i = 0; i < this.registry.onUpdate.length; i++) {
this.registry.onUpdate[i](data, rule, sheet, options);
}
}
/**
* Call `onChangeValue` hooks.
*/
;
_proto.onChangeValue = function onChangeValue(value, prop, rule) {
var processedValue = value;
for (var i = 0; i < this.registry.onChangeValue.length; i++) {
processedValue = this.registry.onChangeValue[i](processedValue, prop, rule);
}
return processedValue;
}
/**
* Register a plugin.
*/
;
_proto.use = function use(newPlugin, options) {
if (options === void 0) {
options = {
queue: 'external'
};
}
var plugins = this.plugins[options.queue]; // Avoids applying same plugin twice, at least based on ref.
if (plugins.indexOf(newPlugin) !== -1) {
return;
}
plugins.push(newPlugin);
this.registry = [].concat(this.plugins.external, this.plugins.internal).reduce(function (registry, plugin) {
for (var name in plugin) {
if (name in registry) {
registry[name].push(plugin[name]);
}
}
return registry;
}, {
onCreateRule: [],
onProcessRule: [],
onProcessStyle: [],
onProcessSheet: [],
onChangeValue: [],
onUpdate: []
});
};
return PluginsRegistry;
}();
/**
* Sheets registry to access them all at one place.
*/
var SheetsRegistry = /*#__PURE__*/function () {
function SheetsRegistry() {
this.registry = [];
}
var _proto = SheetsRegistry.prototype;
/**
* Register a Style Sheet.
*/
_proto.add = function add(sheet) {
var registry = this.registry;
var index = sheet.options.index;
if (registry.indexOf(sheet) !== -1) return;
if (registry.length === 0 || index >= this.index) {
registry.push(sheet);
return;
} // Find a position.
for (var i = 0; i < registry.length; i++) {
if (registry[i].options.index > index) {
registry.splice(i, 0, sheet);
return;
}
}
}
/**
* Reset the registry.
*/
;
_proto.reset = function reset() {
this.registry = [];
}
/**
* Remove a Style Sheet.
*/
;
_proto.remove = function remove(sheet) {
var index = this.registry.indexOf(sheet);
this.registry.splice(index, 1);
}
/**
* Convert all attached sheets to a CSS string.
*/
;
_proto.toString = function toString(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
attached = _ref.attached,
options = _objectWithoutPropertiesLoose(_ref, ["attached"]);
var css = '';
for (var i = 0; i < this.registry.length; i++) {
var sheet = this.registry[i];
if (attached != null && sheet.attached !== attached) {
continue;
}
if (css) css += '\n';
css += sheet.toString(options);
}
return css;
};
_createClass$2(SheetsRegistry, [{
key: "index",
/**
* Current highest index number.
*/
get: function get() {
return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;
}
}]);
return SheetsRegistry;
}();
/**
* This is a global sheets registry. Only DomRenderer will add sheets to it.
* On the server one should use an own SheetsRegistry instance and add the
* sheets to it, because you need to make sure to create a new registry for
* each request in order to not leak sheets across requests.
*/
var registry = new SheetsRegistry();
/* eslint-disable */
/**
* Now that `globalThis` is available on most platforms
* (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis#browser_compatibility)
* we check for `globalThis` first. `globalThis` is necessary for jss
* to run in Agoric's secure version of JavaScript (SES). Under SES,
* `globalThis` exists, but `window`, `self`, and `Function('return
* this')()` are all undefined for security reasons.
*
* https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
*/
var globalThis$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' && window.Math === Math ? window : typeof self !== 'undefined' && self.Math === Math ? self : Function('return this')();
var ns = '2f1acc6c3a606b082e5eef5e54414ffb';
if (globalThis$1[ns] == null) globalThis$1[ns] = 0; // Bundle may contain multiple JSS versions at the same time. In order to identify
// the current version with just one short number and use it for classes generation
// we use a counter. Also it is more accurate, because user can manually reevaluate
// the module.
var moduleId = globalThis$1[ns]++;
/**
* Returns a function which generates unique class names based on counters.
* When new generator function is created, rule counter is reseted.
* We need to reset the rule counter for SSR for each request.
*/
var createGenerateId = function createGenerateId(options) {
if (options === void 0) {
options = {};
}
var ruleCounter = 0;
return function (rule, sheet) {
ruleCounter += 1;
var jssId = '';
var prefix = '';
if (sheet) {
if (sheet.options.classNamePrefix) {
prefix = sheet.options.classNamePrefix;
}
if (sheet.options.jss.id != null) {
jssId = String(sheet.options.jss.id);
}
}
if (options.minify) {
// Using "c" because a number can't be the first char in a class name.
return "" + (prefix || 'c') + moduleId + jssId + ruleCounter;
}
return prefix + rule.key + "-" + moduleId + (jssId ? "-" + jssId : '') + "-" + ruleCounter;
};
};
/**
* Cache the value from the first time a function is called.
*/
var memoize = function memoize(fn) {
var value;
return function () {
if (!value) value = fn();
return value;
};
};
/**
* Get a style property value.
*/
var getPropertyValue = function getPropertyValue(cssRule, prop) {
try {
// Support CSSTOM.
if (cssRule.attributeStyleMap) {
return cssRule.attributeStyleMap.get(prop);
}
return cssRule.style.getPropertyValue(prop);
} catch (err) {
// IE may throw if property is unknown.
return '';
}
};
/**
* Set a style property.
*/
var setProperty = function setProperty(cssRule, prop, value) {
try {
var cssValue = value;
if (Array.isArray(value)) {
cssValue = toCssValue(value, true);
if (value[value.length - 1] === '!important') {
cssRule.style.setProperty(prop, cssValue, 'important');
return true;
}
} // Support CSSTOM.
if (cssRule.attributeStyleMap) {
cssRule.attributeStyleMap.set(prop, cssValue);
} else {
cssRule.style.setProperty(prop, cssValue);
}
} catch (err) {
// IE may throw if property is unknown.
return false;
}
return true;
};
/**
* Remove a style property.
*/
var removeProperty = function removeProperty(cssRule, prop) {
try {
// Support CSSTOM.
if (cssRule.attributeStyleMap) {
cssRule.attributeStyleMap.delete(prop);
} else {
cssRule.style.removeProperty(prop);
}
} catch (err) {
}
};
/**
* Set the selector.
*/
var setSelector = function setSelector(cssRule, selectorText) {
cssRule.selectorText = selectorText; // Return false if setter was not successful.
// Currently works in chrome only.
return cssRule.selectorText === selectorText;
};
/**
* Gets the `head` element upon the first call and caches it.
* We assume it can't be null.
*/
var getHead = memoize(function () {
return document.querySelector('head');
});
/**
* Find attached sheet with an index higher than the passed one.
*/
function findHigherSheet(registry, options) {
for (var i = 0; i < registry.length; i++) {
var sheet = registry[i];
if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {
return sheet;
}
}
return null;
}
/**
* Find attached sheet with the highest index.
*/
function findHighestSheet(registry, options) {
for (var i = registry.length - 1; i >= 0; i--) {
var sheet = registry[i];
if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {
return sheet;
}
}
return null;
}
/**
* Find a comment with "jss" inside.
*/
function findCommentNode(text) {
var head = getHead();
for (var i = 0; i < head.childNodes.length; i++) {
var node = head.childNodes[i];
if (node.nodeType === 8 && node.nodeValue.trim() === text) {
return node;
}
}
return null;
}
/**
* Find a node before which we can insert the sheet.
*/
function findPrevNode(options) {
var registry$1 = registry.registry;
if (registry$1.length > 0) {
// Try to insert before the next higher sheet.
var sheet = findHigherSheet(registry$1, options);
if (sheet && sheet.renderer) {
return {
parent: sheet.renderer.element.parentNode,
node: sheet.renderer.element
};
} // Otherwise insert after the last attached.
sheet = findHighestSheet(registry$1, options);
if (sheet && sheet.renderer) {
return {
parent: sheet.renderer.element.parentNode,
node: sheet.renderer.element.nextSibling
};
}
} // Try to find a comment placeholder if registry is empty.
var insertionPoint = options.insertionPoint;
if (insertionPoint && typeof insertionPoint === 'string') {
var comment = findCommentNode(insertionPoint);
if (comment) {
return {
parent: comment.parentNode,
node: comment.nextSibling
};
} // If user specifies an insertion point and it can't be found in the document -
}
return false;
}
/**
* Insert style element into the DOM.
*/
function insertStyle(style, options) {
var insertionPoint = options.insertionPoint;
var nextNode = findPrevNode(options);
if (nextNode !== false && nextNode.parent) {
nextNode.parent.insertBefore(style, nextNode.node);
return;
} // Works with iframes and any node types.
if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
// https://stackoverflow.com/questions/41328728/force-casting-in-flow
var insertionPointElement = insertionPoint;
var parentNode = insertionPointElement.parentNode;
if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);
return;
}
getHead().appendChild(style);
}
/**
* Read jss nonce setting from the page if the user has set it.
*/
var getNonce = memoize(function () {
var node = document.querySelector('meta[property="csp-nonce"]');
return node ? node.getAttribute('content') : null;
});
var _insertRule = function insertRule(container, rule, index) {
try {
if ('insertRule' in container) {
var c = container;
c.insertRule(rule, index);
} // Keyframes rule.
else if ('appendRule' in container) {
var _c = container;
_c.appendRule(rule);
}
} catch (err) {
return false;
}
return container.cssRules[index];
};
var getValidRuleInsertionIndex = function getValidRuleInsertionIndex(container, index) {
var maxIndex = container.cssRules.length; // In case previous insertion fails, passed index might be wrong
if (index === undefined || index > maxIndex) {
// eslint-disable-next-line no-param-reassign
return maxIndex;
}
return index;
};
var createStyle = function createStyle() {
var el = document.createElement('style'); // Without it, IE will have a broken source order specificity if we
// insert rules after we insert the style tag.
// It seems to kick-off the source order specificity algorithm.
el.textContent = '\n';
return el;
};
var DomRenderer = /*#__PURE__*/function () {
// HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
// Will be empty if link: true option is not set, because
// it is only for use together with insertRule API.
function DomRenderer(sheet) {
this.getPropertyValue = getPropertyValue;
this.setProperty = setProperty;
this.removeProperty = removeProperty;
this.setSelector = setSelector;
this.element = void 0;
this.sheet = void 0;
this.hasInsertedRules = false;
this.cssRules = []; // There is no sheet when the renderer is used from a standalone StyleRule.
if (sheet) registry.add(sheet);
this.sheet = sheet;
var _ref = this.sheet ? this.sheet.options : {},
media = _ref.media,
meta = _ref.meta,
element = _ref.element;
this.element = element || createStyle();
this.element.setAttribute('data-jss', '');
if (media) this.element.setAttribute('media', media);
if (meta) this.element.setAttribute('data-meta', meta);
var nonce = getNonce();
if (nonce) this.element.setAttribute('nonce', nonce);
}
/**
* Insert style element into render tree.
*/
var _proto = DomRenderer.prototype;
_proto.attach = function attach() {
// In the case the element node is external and it is already in the DOM.
if (this.element.parentNode || !this.sheet) return;
insertStyle(this.element, this.sheet.options); // When rules are inserted using `insertRule` API, after `sheet.detach().attach()`
// most browsers create a new CSSStyleSheet, except of all IEs.
var deployed = Boolean(this.sheet && this.sheet.deployed);
if (this.hasInsertedRules && deployed) {
this.hasInsertedRules = false;
this.deploy();
}
}
/**
* Remove style element from render tree.
*/
;
_proto.detach = function detach() {
if (!this.sheet) return;
var parentNode = this.element.parentNode;
if (parentNode) parentNode.removeChild(this.element); // In the most browsers, rules inserted using insertRule() API will be lost when style element is removed.
// Though IE will keep them and we need a consistent behavior.
if (this.sheet.options.link) {
this.cssRules = [];
this.element.textContent = '\n';
}
}
/**
* Inject CSS string into element.
*/
;
_proto.deploy = function deploy() {
var sheet = this.sheet;
if (!sheet) return;
if (sheet.options.link) {
this.insertRules(sheet.rules);
return;
}
this.element.textContent = "\n" + sheet.toString() + "\n";
}
/**
* Insert RuleList into an element.
*/
;
_proto.insertRules = function insertRules(rules, nativeParent) {
for (var i = 0; i < rules.index.length; i++) {
this.insertRule(rules.index[i], i, nativeParent);
}
}
/**
* Insert a rule into element.
*/
;
_proto.insertRule = function insertRule(rule, index, nativeParent) {
if (nativeParent === void 0) {
nativeParent = this.element.sheet;
}
if (rule.rules) {
var parent = rule;
var latestNativeParent = nativeParent;
if (rule.type === 'conditional' || rule.type === 'keyframes') {
var _insertionIndex = getValidRuleInsertionIndex(nativeParent, index); // We need to render the container without children first.
latestNativeParent = _insertRule(nativeParent, parent.toString({
children: false
}), _insertionIndex);
if (latestNativeParent === false) {
return false;
}
this.refCssRule(rule, _insertionIndex, latestNativeParent);
}
this.insertRules(parent.rules, latestNativeParent);
return latestNativeParent;
}
var ruleStr = rule.toString();
if (!ruleStr) return false;
var insertionIndex = getValidRuleInsertionIndex(nativeParent, index);
var nativeRule = _insertRule(nativeParent, ruleStr, insertionIndex);
if (nativeRule === false) {
return false;
}
this.hasInsertedRules = true;
this.refCssRule(rule, insertionIndex, nativeRule);
return nativeRule;
};
_proto.refCssRule = function refCssRule(rule, index, cssRule) {
rule.renderable = cssRule; // We only want to reference the top level rules, deleteRule API doesn't support removing nested rules
// like rules inside media queries or keyframes
if (rule.options.parent instanceof StyleSheet) {
this.cssRules[index] = cssRule;
}
}
/**
* Delete a rule.
*/
;
_proto.deleteRule = function deleteRule(cssRule) {
var sheet = this.element.sheet;
var index = this.indexOf(cssRule);
if (index === -1) return false;
sheet.deleteRule(index);
this.cssRules.splice(index, 1);
return true;
}
/**
* Get index of a CSS Rule.
*/
;
_proto.indexOf = function indexOf(cssRule) {
return this.cssRules.indexOf(cssRule);
}
/**
* Generate a new CSS rule and replace the existing one.
*
* Only used for some old browsers because they can't set a selector.
*/
;
_proto.replaceRule = function replaceRule(cssRule, rule) {
var index = this.indexOf(cssRule);
if (index === -1) return false;
this.element.sheet.deleteRule(index);
this.cssRules.splice(index, 1);
return this.insertRule(rule, index);
}
/**
* Get all rules elements.
*/
;
_proto.getRules = function getRules() {
return this.element.sheet.cssRules;
};
return DomRenderer;
}();
var instanceCounter = 0;
var Jss = /*#__PURE__*/function () {
function Jss(options) {
this.id = instanceCounter++;
this.version = "10.6.0";
this.plugins = new PluginsRegistry();
this.options = {
id: {
minify: false
},
createGenerateId: createGenerateId,
Renderer: isBrowser$1 ? DomRenderer : null,
plugins: []
};
this.generateId = createGenerateId({
minify: false
});
for (var i = 0; i < plugins$1.length; i++) {
this.plugins.use(plugins$1[i], {
queue: 'internal'
});
}
this.setup(options);
}
/**
* Prepares various options, applies plugins.
* Should not be used twice on the same instance, because there is no plugins
* deduplication logic.
*/
var _proto = Jss.prototype;
_proto.setup = function setup(options) {
if (options === void 0) {
options = {};
}
if (options.createGenerateId) {
this.options.createGenerateId = options.createGenerateId;
}
if (options.id) {
this.options.id = _extends$1({}, this.options.id, options.id);
}
if (options.createGenerateId || options.id) {
this.generateId = this.options.createGenerateId(this.options.id);
}
if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;
if ('Renderer' in options) {
this.options.Renderer = options.Renderer;
} // eslint-disable-next-line prefer-spread
if (options.plugins) this.use.apply(this, options.plugins);
return this;
}
/**
* Create a Style Sheet.
*/
;
_proto.createStyleSheet = function createStyleSheet(styles, options) {
if (options === void 0) {
options = {};
}
var _options = options,
index = _options.index;
if (typeof index !== 'number') {
index = registry.index === 0 ? 0 : registry.index + 1;
}
var sheet = new StyleSheet(styles, _extends$1({}, options, {
jss: this,
generateId: options.generateId || this.generateId,
insertionPoint: this.options.insertionPoint,
Renderer: this.options.Renderer,
index: index
}));
this.plugins.onProcessSheet(sheet);
return sheet;
}
/**
* Detach the Style Sheet and remove it from the registry.
*/
;
_proto.removeStyleSheet = function removeStyleSheet(sheet) {
sheet.detach();
registry.remove(sheet);
return this;
}
/**
* Create a rule without a Style Sheet.
* [Deprecated] will be removed in the next major version.
*/
;
_proto.createRule = function createRule$1(name, style, options) {
if (style === void 0) {
style = {};
}
if (options === void 0) {
options = {};
} // Enable rule without name for inline styles.
if (typeof name === 'object') {
// $FlowFixMe[incompatible-call]
return this.createRule(undefined, name, style);
} // $FlowFixMe[incompatible-type]
var ruleOptions = _extends$1({}, options, {
name: name,
jss: this,
Renderer: this.options.Renderer
});
if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId;
if (!ruleOptions.classes) ruleOptions.classes = {};
if (!ruleOptions.keyframes) ruleOptions.keyframes = {};
var rule = createRule(name, style, ruleOptions);
if (rule) this.plugins.onProcessRule(rule);
return rule;
}
/**
* Register plugin. Passed function will be invoked with a rule instance.
*/
;
_proto.use = function use() {
var _this = this;
for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
plugins[_key] = arguments[_key];
}
plugins.forEach(function (plugin) {
_this.plugins.use(plugin);
});
return this;
};
return Jss;
}();
/**
* Extracts a styles object with only props that contain function values.
*/
function getDynamicStyles(styles) {
var to = null;
for (var key in styles) {
var value = styles[key];
var type = typeof value;
if (type === 'function') {
if (!to) to = {};
to[key] = value;
} else if (type === 'object' && value !== null && !Array.isArray(value)) {
var extracted = getDynamicStyles(value);
if (extracted) {
if (!to) to = {};
to[key] = extracted;
}
}
}
return to;
}
/**
* A better abstraction over CSS.
*
* @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
* @website https://github.com/cssinjs/jss
* @license MIT
*/
/**
* Export a constant indicating if this browser has CSSTOM support.
* https://developers.google.com/web/updates/2018/03/cssom
*/
var hasCSSTOMSupport = typeof CSS === 'object' && CSS != null && 'number' in CSS;
/**
* Creates a new instance of Jss.
*/
var create = function create(options) {
return new Jss(options);
};
/**
* A global Jss instance.
*/
create();
var now = Date.now();
var fnValuesNs = "fnValues" + now;
var fnRuleNs = "fnStyle" + ++now;
var functionPlugin = function functionPlugin() {
return {
onCreateRule: function onCreateRule(name, decl, options) {
if (typeof decl !== 'function') return null;
var rule = createRule(name, {}, options);
rule[fnRuleNs] = decl;
return rule;
},
onProcessStyle: function onProcessStyle(style, rule) {
// We need to extract function values from the declaration, so that we can keep core unaware of them.
// We need to do that only once.
// We don't need to extract functions on each style update, since this can happen only once.
// We don't support function values inside of function rules.
if (fnValuesNs in rule || fnRuleNs in rule) return style;
var fnValues = {};
for (var prop in style) {
var value = style[prop];
if (typeof value !== 'function') continue;
delete style[prop];
fnValues[prop] = value;
} // $FlowFixMe[prop-missing]
rule[fnValuesNs] = fnValues;
return style;
},
onUpdate: function onUpdate(data, rule, sheet, options) {
var styleRule = rule; // $FlowFixMe[prop-missing]
var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object
// will be returned from that function.
if (fnRule) {
// Empty object will remove all currently defined props
// in case function rule returns a falsy value.
styleRule.style = fnRule(data) || {};
} // $FlowFixMe[prop-missing]
var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.
if (fnValues) {
for (var _prop in fnValues) {
styleRule.prop(_prop, fnValues[_prop](data), options);
}
}
}
};
};
var at = '@global';
var atPrefix = '@global ';
var GlobalContainerRule = /*#__PURE__*/function () {
function GlobalContainerRule(key, styles, options) {
this.type = 'global';
this.at = at;
this.rules = void 0;
this.options = void 0;
this.key = void 0;
this.isProcessed = false;
this.key = key;
this.options = options;
this.rules = new RuleList(_extends$1({}, options, {
parent: this
}));
for (var selector in styles) {
this.rules.add(selector, styles[selector]);
}
this.rules.process();
}
/**
* Get a rule.
*/
var _proto = GlobalContainerRule.prototype;
_proto.getRule = function getRule(name) {
return this.rules.get(name);
}
/**
* Create and register rule, run plugins.
*/
;
_proto.addRule = function addRule(name, style, options) {
var rule = this.rules.add(name, style, options);
if (rule) this.options.jss.plugins.onProcessRule(rule);
return rule;
}
/**
* Get index of a rule.
*/
;
_proto.indexOf = function indexOf(rule) {
return this.rules.indexOf(rule);
}
/**
* Generates a CSS string.
*/
;
_proto.toString = function toString() {
return this.rules.toString();
};
return GlobalContainerRule;
}();
var GlobalPrefixedRule = /*#__PURE__*/function () {
function GlobalPrefixedRule(key, style, options) {
this.type = 'global';
this.at = at;
this.options = void 0;
this.rule = void 0;
this.isProcessed = false;
this.key = void 0;
this.key = key;
this.options = options;
var selector = key.substr(atPrefix.length);
this.rule = options.jss.createRule(selector, style, _extends$1({}, options, {
parent: this
}));
}
var _proto2 = GlobalPrefixedRule.prototype;
_proto2.toString = function toString(options) {
return this.rule ? this.rule.toString(options) : '';
};
return GlobalPrefixedRule;
}();
var separatorRegExp$1 = /\s*,\s*/g;
function addScope(selector, scope) {
var parts = selector.split(separatorRegExp$1);
var scoped = '';
for (var i = 0; i < parts.length; i++) {
scoped += scope + " " + parts[i].trim();
if (parts[i + 1]) scoped += ', ';
}
return scoped;
}
function handleNestedGlobalContainerRule(rule, sheet) {
var options = rule.options,
style = rule.style;
var rules = style ? style[at] : null;
if (!rules) return;
for (var name in rules) {
sheet.addRule(name, rules[name], _extends$1({}, options, {
selector: addScope(name, rule.selector)
}));
}
delete style[at];
}
function handlePrefixedGlobalRule(rule, sheet) {
var options = rule.options,
style = rule.style;
for (var prop in style) {
if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;
var selector = addScope(prop.substr(at.length), rule.selector);
sheet.addRule(selector, style[prop], _extends$1({}, options, {
selector: selector
}));
delete style[prop];
}
}
/**
* Convert nested rules to separate, remove them from original styles.
*
* @param {Rule} rule
* @api public
*/
function jssGlobal() {
function onCreateRule(name, styles, options) {
if (!name) return null;
if (name === at) {
return new GlobalContainerRule(name, styles, options);
}
if (name[0] === '@' && name.substr(0, atPrefix.length) === atPrefix) {
return new GlobalPrefixedRule(name, styles, options);
}
var parent = options.parent;
if (parent) {
if (parent.type === 'global' || parent.options.parent && parent.options.parent.type === 'global') {
options.scoped = false;
}
}
if (options.scoped === false) {
options.selector = name;
}
return null;
}
function onProcessRule(rule, sheet) {
if (rule.type !== 'style' || !sheet) return;
handleNestedGlobalContainerRule(rule, sheet);
handlePrefixedGlobalRule(rule, sheet);
}
return {
onCreateRule: onCreateRule,
onProcessRule: onProcessRule
};
}
var separatorRegExp = /\s*,\s*/g;
var parentRegExp = /&/g;
var refRegExp = /\$([\w-]+)/g;
/**
* Convert nested rules to separate, remove them from original styles.
*
* @param {Rule} rule
* @api public
*/
function jssNested() {
// Get a function to be used for $ref replacement.
function getReplaceRef(container, sheet) {
return function (match, key) {
var rule = container.getRule(key) || sheet && sheet.getRule(key);
if (rule) {
rule = rule;
return rule.selector;
}
return key;
};
}
function replaceParentRefs(nestedProp, parentProp) {
var parentSelectors = parentProp.split(separatorRegExp);
var nestedSelectors = nestedProp.split(separatorRegExp);
var result = '';
for (var i = 0; i < parentSelectors.length; i++) {
var parent = parentSelectors[i];
for (var j = 0; j < nestedSelectors.length; j++) {
var nested = nestedSelectors[j];
if (result) result += ', '; // Replace all & by the parent or prefix & with the parent.
result += nested.indexOf('&') !== -1 ? nested.replace(parentRegExp, parent) : parent + " " + nested;
}
}
return result;
}
function getOptions(rule, container, prevOptions) {
// Options has been already created, now we only increase index.
if (prevOptions) return _extends$1({}, prevOptions, {
index: prevOptions.index + 1 // $FlowFixMe[prop-missing]
});
var nestingLevel = rule.options.nestingLevel;
nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
var options = _extends$1({}, rule.options, {
nestingLevel: nestingLevel,
index: container.indexOf(rule) + 1 // We don't need the parent name to be set options for chlid.
});
delete options.name;
return options;
}
function onProcessStyle(style, rule, sheet) {
if (rule.type !== 'style') return style;
var styleRule = rule;
var container = styleRule.options.parent;
var options;
var replaceRef;
for (var prop in style) {
var isNested = prop.indexOf('&') !== -1;
var isNestedConditional = prop[0] === '@';
if (!isNested && !isNestedConditional) continue;
options = getOptions(styleRule, container, options);
if (isNested) {
var selector = replaceParentRefs(prop, styleRule.selector); // Lazily create the ref replacer function just once for
// all nested rules within the sheet.
if (!replaceRef) replaceRef = getReplaceRef(container, sheet); // Replace all $refs.
selector = selector.replace(refRegExp, replaceRef);
container.addRule(selector, style[prop], _extends$1({}, options, {
selector: selector
}));
} else if (isNestedConditional) {
// Place conditional right after the parent rule to ensure right ordering.
container.addRule(prop, {}, options) // Flow expects more options but they aren't required
// And flow doesn't know this will always be a StyleRule which has the addRule method
// $FlowFixMe[incompatible-use]
// $FlowFixMe[prop-missing]
.addRule(styleRule.key, style[prop], {
selector: styleRule.selector
});
}
delete style[prop];
}
return style;
}
return {
onProcessStyle: onProcessStyle
};
}
/* eslint-disable no-var, prefer-template */
var uppercasePattern = /[A-Z]/g;
var msPattern = /^ms-/;
var cache$2 = {};
function toHyphenLower(match) {
return '-' + match.toLowerCase();
}
function hyphenateStyleName(name) {
if (cache$2.hasOwnProperty(name)) {
return cache$2[name];
}
var hName = name.replace(uppercasePattern, toHyphenLower);
return cache$2[name] = msPattern.test(hName) ? '-' + hName : hName;
}
/**
* Convert camel cased property names to dash separated.
*
* @param {Object} style
* @return {Object}
*/
function convertCase(style) {
var converted = {};
for (var prop in style) {
var key = prop.indexOf('--') === 0 ? prop : hyphenateStyleName(prop);
converted[key] = style[prop];
}
if (style.fallbacks) {
if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
}
return converted;
}
/**
* Allow camel cased property names by converting them back to dasherized.
*
* @param {Rule} rule
*/
function camelCase() {
function onProcessStyle(style) {
if (Array.isArray(style)) {
// Handle rules like @font-face, which can have multiple styles in an array
for (var index = 0; index < style.length; index++) {
style[index] = convertCase(style[index]);
}
return style;
}
return convertCase(style);
}
function onChangeValue(value, prop, rule) {
if (prop.indexOf('--') === 0) {
return value;
}
var hyphenatedProp = hyphenateStyleName(prop); // There was no camel case in place
if (prop === hyphenatedProp) return value;
rule.prop(hyphenatedProp, value); // Core will ignore that property value we set the proper one above.
return null;
}
return {
onProcessStyle: onProcessStyle,
onChangeValue: onChangeValue
};
}
var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
/**
* Generated jss-plugin-default-unit CSS property units
*
* @type object
*/
var defaultUnits = {
// Animation properties
'animation-delay': ms,
'animation-duration': ms,
// Background properties
'background-position': px,
'background-position-x': px,
'background-position-y': px,
'background-size': px,
// Border Properties
border: px,
'border-bottom': px,
'border-bottom-left-radius': px,
'border-bottom-right-radius': px,
'border-bottom-width': px,
'border-left': px,
'border-left-width': px,
'border-radius': px,
'border-right': px,
'border-right-width': px,
'border-top': px,
'border-top-left-radius': px,
'border-top-right-radius': px,
'border-top-width': px,
'border-width': px,
'border-block': px,
'border-block-end': px,
'border-block-end-width': px,
'border-block-start': px,
'border-block-start-width': px,
'border-block-width': px,
'border-inline': px,
'border-inline-end': px,
'border-inline-end-width': px,
'border-inline-start': px,
'border-inline-start-width': px,
'border-inline-width': px,
'border-start-start-radius': px,
'border-start-end-radius': px,
'border-end-start-radius': px,
'border-end-end-radius': px,
// Margin properties
margin: px,
'margin-bottom': px,
'margin-left': px,
'margin-right': px,
'margin-top': px,
'margin-block': px,
'margin-block-end': px,
'margin-block-start': px,
'margin-inline': px,
'margin-inline-end': px,
'margin-inline-start': px,
// Padding properties
padding: px,
'padding-bottom': px,
'padding-left': px,
'padding-right': px,
'padding-top': px,
'padding-block': px,
'padding-block-end': px,
'padding-block-start': px,
'padding-inline': px,
'padding-inline-end': px,
'padding-inline-start': px,
// Mask properties
'mask-position-x': px,
'mask-position-y': px,
'mask-size': px,
// Width and height properties
height: px,
width: px,
'min-height': px,
'max-height': px,
'min-width': px,
'max-width': px,
// Position properties
bottom: px,
left: px,
top: px,
right: px,
inset: px,
'inset-block': px,
'inset-block-end': px,
'inset-block-start': px,
'inset-inline': px,
'inset-inline-end': px,
'inset-inline-start': px,
// Shadow properties
'box-shadow': px,
'text-shadow': px,
// Column properties
'column-gap': px,
'column-rule': px,
'column-rule-width': px,
'column-width': px,
// Font and text properties
'font-size': px,
'font-size-delta': px,
'letter-spacing': px,
'text-decoration-thickness': px,
'text-indent': px,
'text-stroke': px,
'text-stroke-width': px,
'word-spacing': px,
// Motion properties
motion: px,
'motion-offset': px,
// Outline properties
outline: px,
'outline-offset': px,
'outline-width': px,
// Perspective properties
perspective: px,
'perspective-origin-x': percent,
'perspective-origin-y': percent,
// Transform properties
'transform-origin': percent,
'transform-origin-x': percent,
'transform-origin-y': percent,
'transform-origin-z': percent,
// Transition properties
'transition-delay': ms,
'transition-duration': ms,
// Alignment properties
'vertical-align': px,
'flex-basis': px,
// Some random properties
'shape-margin': px,
size: px,
gap: px,
// Grid properties
grid: px,
'grid-gap': px,
'row-gap': px,
'grid-row-gap': px,
'grid-column-gap': px,
'grid-template-rows': px,
'grid-template-columns': px,
'grid-auto-rows': px,
'grid-auto-columns': px,
// Not existing properties.
// Used to avoid issues with jss-plugin-expand integration.
'box-shadow-x': px,
'box-shadow-y': px,
'box-shadow-blur': px,
'box-shadow-spread': px,
'font-line-height': px,
'text-shadow-x': px,
'text-shadow-y': px,
'text-shadow-blur': px
};
/**
* Clones the object and adds a camel cased property version.
*/
function addCamelCasedVersion(obj) {
var regExp = /(-[a-z])/g;
var replace = function replace(str) {
return str[1].toUpperCase();
};
var newObj = {};
for (var _key in obj) {
newObj[_key] = obj[_key];
newObj[_key.replace(regExp, replace)] = obj[_key];
}
return newObj;
}
var units = addCamelCasedVersion(defaultUnits);
/**
* Recursive deep style passing function
*/
function iterate(prop, value, options) {
if (value == null) return value;
if (Array.isArray(value)) {
for (var i = 0; i < value.length; i++) {
value[i] = iterate(prop, value[i], options);
}
} else if (typeof value === 'object') {
if (prop === 'fallbacks') {
for (var innerProp in value) {
value[innerProp] = iterate(innerProp, value[innerProp], options);
}
} else {
for (var _innerProp in value) {
value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
}
} // eslint-disable-next-line no-restricted-globals
} else if (typeof value === 'number' && isNaN(value) === false) {
var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.
if (unit && !(value === 0 && unit === px)) {
return typeof unit === 'function' ? unit(value).toString() : "" + value + unit;
}
return value.toString();
}
return value;
}
/**
* Add unit to numeric values.
*/
function defaultUnit(options) {
if (options === void 0) {
options = {};
}
var camelCasedOptions = addCamelCasedVersion(options);
function onProcessStyle(style, rule) {
if (rule.type !== 'style') return style;
for (var prop in style) {
style[prop] = iterate(prop, style[prop], camelCasedOptions);
}
return style;
}
function onChangeValue(value, prop) {
return iterate(prop, value, camelCasedOptions);
}
return {
onProcessStyle: onProcessStyle,
onChangeValue: onChangeValue
};
}
var js = '';
var css = '';
var vendor = '';
var browser = '';
var isTouch = isBrowser$1 && 'ontouchstart' in document.documentElement; // We should not do anything if required serverside.
if (isBrowser$1) {
// Order matters. We need to check Webkit the last one because
// other vendors use to add Webkit prefixes to some properties
var jsCssMap = {
Moz: '-moz-',
ms: '-ms-',
O: '-o-',
Webkit: '-webkit-'
};
var _document$createEleme = document.createElement('p'),
style = _document$createEleme.style;
var testProp = 'Transform';
for (var key in jsCssMap) {
if (key + testProp in style) {
js = key;
css = jsCssMap[key];
break;
}
} // Correctly detect the Edge browser.
if (js === 'Webkit' && 'msHyphens' in style) {
js = 'ms';
css = jsCssMap.ms;
browser = 'edge';
} // Correctly detect the Safari browser.
if (js === 'Webkit' && '-apple-trailing-word' in style) {
vendor = 'apple';
}
}
/**
* Vendor prefix string for the current browser.
*
* @type {{js: String, css: String, vendor: String, browser: String}}
* @api public
*/
var prefix = {
js: js,
css: css,
vendor: vendor,
browser: browser,
isTouch: isTouch
};
/**
* Test if a keyframe at-rule should be prefixed or not
*
* @param {String} vendor prefix string for the current browser.
* @return {String}
* @api public
*/
function supportedKeyframes(key) {
// Keyframes is already prefixed. e.g. key = '@-webkit-keyframes a'
if (key[1] === '-') return key; // No need to prefix IE/Edge. Older browsers will ignore unsupported rules.
// https://caniuse.com/#search=keyframes
if (prefix.js === 'ms') return key;
return "@" + prefix.css + "keyframes" + key.substr(10);
} // https://caniuse.com/#search=appearance
var appearence = {
noPrefill: ['appearance'],
supportedProperty: function supportedProperty(prop) {
if (prop !== 'appearance') return false;
if (prefix.js === 'ms') return "-webkit-" + prop;
return prefix.css + prop;
}
}; // https://caniuse.com/#search=color-adjust
var colorAdjust = {
noPrefill: ['color-adjust'],
supportedProperty: function supportedProperty(prop) {
if (prop !== 'color-adjust') return false;
if (prefix.js === 'Webkit') return prefix.css + "print-" + prop;
return prop;
}
};
var regExp = /[-\s]+(.)?/g;
/**
* Replaces the letter with the capital letter
*
* @param {String} match
* @param {String} c
* @return {String}
* @api private
*/
function toUpper(match, c) {
return c ? c.toUpperCase() : '';
}
/**
* Convert dash separated strings to camel-cased.
*
* @param {String} str
* @return {String}
* @api private
*/
function camelize(str) {
return str.replace(regExp, toUpper);
}
/**
* Convert dash separated strings to pascal cased.
*
* @param {String} str
* @return {String}
* @api private
*/
function pascalize(str) {
return camelize("-" + str);
} // but we can use a longhand property instead.
// https://caniuse.com/#search=mask
var mask = {
noPrefill: ['mask'],
supportedProperty: function supportedProperty(prop, style) {
if (!/^mask/.test(prop)) return false;
if (prefix.js === 'Webkit') {
var longhand = 'mask-image';
if (camelize(longhand) in style) {
return prop;
}
if (prefix.js + pascalize(longhand) in style) {
return prefix.css + prop;
}
}
return prop;
}
}; // https://caniuse.com/#search=text-orientation
var textOrientation = {
noPrefill: ['text-orientation'],
supportedProperty: function supportedProperty(prop) {
if (prop !== 'text-orientation') return false;
if (prefix.vendor === 'apple' && !prefix.isTouch) {
return prefix.css + prop;
}
return prop;
}
}; // https://caniuse.com/#search=transform
var transform = {
noPrefill: ['transform'],
supportedProperty: function supportedProperty(prop, style, options) {
if (prop !== 'transform') return false;
if (options.transform) {
return prop;
}
return prefix.css + prop;
}
}; // https://caniuse.com/#search=transition
var transition = {
noPrefill: ['transition'],
supportedProperty: function supportedProperty(prop, style, options) {
if (prop !== 'transition') return false;
if (options.transition) {
return prop;
}
return prefix.css + prop;
}
}; // https://caniuse.com/#search=writing-mode
var writingMode = {
noPrefill: ['writing-mode'],
supportedProperty: function supportedProperty(prop) {
if (prop !== 'writing-mode') return false;
if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {
return prefix.css + prop;
}
return prop;
}
}; // https://caniuse.com/#search=user-select
var userSelect = {
noPrefill: ['user-select'],
supportedProperty: function supportedProperty(prop) {
if (prop !== 'user-select') return false;
if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {
return prefix.css + prop;
}
return prop;
}
}; // https://caniuse.com/#search=multicolumn
// https://github.com/postcss/autoprefixer/issues/491
// https://github.com/postcss/autoprefixer/issues/177
var breakPropsOld = {
supportedProperty: function supportedProperty(prop, style) {
if (!/^break-/.test(prop)) return false;
if (prefix.js === 'Webkit') {
var jsProp = "WebkitColumn" + pascalize(prop);
return jsProp in style ? prefix.css + "column-" + prop : false;
}
if (prefix.js === 'Moz') {
var _jsProp = "page" + pascalize(prop);
return _jsProp in style ? "page-" + prop : false;
}
return false;
}
}; // See https://github.com/postcss/autoprefixer/issues/324.
var inlineLogicalOld = {
supportedProperty: function supportedProperty(prop, style) {
if (!/^(border|margin|padding)-inline/.test(prop)) return false;
if (prefix.js === 'Moz') return prop;
var newProp = prop.replace('-inline', '');
return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
}
}; // Camelization is required because we can't test using.
// CSS syntax for e.g. in FF.
var unprefixed = {
supportedProperty: function supportedProperty(prop, style) {
return camelize(prop) in style ? prop : false;
}
};
var prefixed = {
supportedProperty: function supportedProperty(prop, style) {
var pascalized = pascalize(prop); // Return custom CSS variable without prefixing.
if (prop[0] === '-') return prop; // Return already prefixed value without prefixing.
if (prop[0] === '-' && prop[1] === '-') return prop;
if (prefix.js + pascalized in style) return prefix.css + prop; // Try webkit fallback.
if (prefix.js !== 'Webkit' && "Webkit" + pascalized in style) return "-webkit-" + prop;
return false;
}
}; // https://caniuse.com/#search=scroll-snap
var scrollSnap = {
supportedProperty: function supportedProperty(prop) {
if (prop.substring(0, 11) !== 'scroll-snap') return false;
if (prefix.js === 'ms') {
return "" + prefix.css + prop;
}
return prop;
}
}; // https://caniuse.com/#search=overscroll-behavior
var overscrollBehavior = {
supportedProperty: function supportedProperty(prop) {
if (prop !== 'overscroll-behavior') return false;
if (prefix.js === 'ms') {
return prefix.css + "scroll-chaining";
}
return prop;
}
};
var propMap = {
'flex-grow': 'flex-positive',
'flex-shrink': 'flex-negative',
'flex-basis': 'flex-preferred-size',
'justify-content': 'flex-pack',
order: 'flex-order',
'align-items': 'flex-align',
'align-content': 'flex-line-pack' // 'align-self' is handled by 'align-self' plugin.
}; // Support old flex spec from 2012.
var flex2012 = {
supportedProperty: function supportedProperty(prop, style) {
var newProp = propMap[prop];
if (!newProp) return false;
return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
}
};
var propMap$1 = {
flex: 'box-flex',
'flex-grow': 'box-flex',
'flex-direction': ['box-orient', 'box-direction'],
order: 'box-ordinal-group',
'align-items': 'box-align',
'flex-flow': ['box-orient', 'box-direction'],
'justify-content': 'box-pack'
};
var propKeys = Object.keys(propMap$1);
var prefixCss = function prefixCss(p) {
return prefix.css + p;
}; // Support old flex spec from 2009.
var flex2009 = {
supportedProperty: function supportedProperty(prop, style, _ref) {
var multiple = _ref.multiple;
if (propKeys.indexOf(prop) > -1) {
var newProp = propMap$1[prop];
if (!Array.isArray(newProp)) {
return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
}
if (!multiple) return false;
for (var i = 0; i < newProp.length; i++) {
if (!(prefix.js + pascalize(newProp[0]) in style)) {
return false;
}
}
return newProp.map(prefixCss);
}
return false;
}
}; // plugins = [
// ...plugins,
// breakPropsOld,
// inlineLogicalOld,
// unprefixed,
// prefixed,
// scrollSnap,
// flex2012,
// flex2009
// ]
// Plugins without 'noPrefill' value, going last.
// 'flex-*' plugins should be at the bottom.
// 'flex2009' going after 'flex2012'.
// 'prefixed' going after 'unprefixed'
var plugins = [appearence, colorAdjust, mask, textOrientation, transform, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];
var propertyDetectors = plugins.filter(function (p) {
return p.supportedProperty;
}).map(function (p) {
return p.supportedProperty;
});
var noPrefill = plugins.filter(function (p) {
return p.noPrefill;
}).reduce(function (a, p) {
a.push.apply(a, _toConsumableArray(p.noPrefill));
return a;
}, []);
var el;
var cache = {};
if (isBrowser$1) {
el = document.createElement('p'); // We test every property on vendor prefix requirement.
// Once tested, result is cached. It gives us up to 70% perf boost.
// http://jsperf.com/element-style-object-access-vs-plain-object
//
// Prefill cache with known css properties to reduce amount of
// properties we need to feature test at runtime.
// http://davidwalsh.name/vendor-prefix
var computed = window.getComputedStyle(document.documentElement, '');
for (var key$1 in computed) {
// eslint-disable-next-line no-restricted-globals
if (!isNaN(key$1)) cache[computed[key$1]] = computed[key$1];
} // Properties that cannot be correctly detected using the
// cache prefill method.
noPrefill.forEach(function (x) {
return delete cache[x];
});
}
/**
* Test if a property is supported, returns supported property with vendor
* prefix if required. Returns `false` if not supported.
*
* @param {String} prop dash separated
* @param {Object} [options]
* @return {String|Boolean}
* @api public
*/
function supportedProperty(prop, options) {
if (options === void 0) {
options = {};
} // For server-side rendering.
if (!el) return prop; // Remove cache for benchmark tests or return property from the cache.
if (cache[prop] != null) {
return cache[prop];
} // Check if 'transition' or 'transform' natively supported in browser.
if (prop === 'transition' || prop === 'transform') {
options[prop] = prop in el.style;
} // Find a plugin for current prefix property.
for (var i = 0; i < propertyDetectors.length; i++) {
cache[prop] = propertyDetectors[i](prop, el.style, options); // Break loop, if value found.
if (cache[prop]) break;
} // Reset styles for current property.
// Firefox can even throw an error for invalid properties, e.g., "0".
try {
el.style[prop] = '';
} catch (err) {
return false;
}
return cache[prop];
}
var cache$1 = {};
var transitionProperties = {
transition: 1,
'transition-property': 1,
'-webkit-transition': 1,
'-webkit-transition-property': 1
};
var transPropsRegExp = /(^\s*[\w-]+)|, (\s*[\w-]+)(?![^()]*\))/g;
var el$1;
/**
* Returns prefixed value transition/transform if needed.
*
* @param {String} match
* @param {String} p1
* @param {String} p2
* @return {String}
* @api private
*/
function prefixTransitionCallback(match, p1, p2) {
if (p1 === 'var') return 'var';
if (p1 === 'all') return 'all';
if (p2 === 'all') return ', all';
var prefixedValue = p1 ? supportedProperty(p1) : ", " + supportedProperty(p2);
if (!prefixedValue) return p1 || p2;
return prefixedValue;
}
if (isBrowser$1) el$1 = document.createElement('p');
/**
* Returns prefixed value if needed. Returns `false` if value is not supported.
*
* @param {String} property
* @param {String} value
* @return {String|Boolean}
* @api public
*/
function supportedValue(property, value) {
// For server-side rendering.
var prefixedValue = value;
if (!el$1 || property === 'content') return value; // It is a string or a number as a string like '1'.
// We want only prefixable values here.
// eslint-disable-next-line no-restricted-globals
if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {
return prefixedValue;
} // Create cache key for current value.
var cacheKey = property + prefixedValue; // Remove cache for benchmark tests or return value from cache.
if (cache$1[cacheKey] != null) {
return cache$1[cacheKey];
} // IE can even throw an error in some cases, for e.g. style.content = 'bar'.
try {
// Test value as it is.
el$1.style[property] = prefixedValue;
} catch (err) {
// Return false if value not supported.
cache$1[cacheKey] = false;
return false;
} // If 'transition' or 'transition-property' property.
if (transitionProperties[property]) {
prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);
} else if (el$1.style[property] === '') {
// Value with a vendor prefix.
prefixedValue = prefix.css + prefixedValue; // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.
if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox'; // Test prefixed value.
el$1.style[property] = prefixedValue; // Return false if value not supported.
if (el$1.style[property] === '') {
cache$1[cacheKey] = false;
return false;
}
} // Reset styles for current property.
el$1.style[property] = ''; // Write current value to cache.
cache$1[cacheKey] = prefixedValue;
return cache$1[cacheKey];
}
/**
* Add vendor prefix to a property name when needed.
*
* @api public
*/
function jssVendorPrefixer() {
function onProcessRule(rule) {
if (rule.type === 'keyframes') {
var atRule = rule;
atRule.at = supportedKeyframes(atRule.at);
}
}
function prefixStyle(style) {
for (var prop in style) {
var value = style[prop];
if (prop === 'fallbacks' && Array.isArray(value)) {
style[prop] = value.map(prefixStyle);
continue;
}
var changeProp = false;
var supportedProp = supportedProperty(prop);
if (supportedProp && supportedProp !== prop) changeProp = true;
var changeValue = false;
var supportedValue$1 = supportedValue(supportedProp, toCssValue(value));
if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;
if (changeProp || changeValue) {
if (changeProp) delete style[prop];
style[supportedProp || prop] = supportedValue$1 || value;
}
}
return style;
}
function onProcessStyle(style, rule) {
if (rule.type !== 'style') return style;
return prefixStyle(style);
}
function onChangeValue(value, prop) {
return supportedValue(prop, toCssValue(value)) || value;
}
return {
onProcessRule: onProcessRule,
onProcessStyle: onProcessStyle,
onChangeValue: onChangeValue
};
}
/**
* Sort props by length.
*/
function jssPropsSort() {
var sort = function sort(prop0, prop1) {
if (prop0.length === prop1.length) {
return prop0 > prop1 ? 1 : -1;
}
return prop0.length - prop1.length;
};
return {
onProcessStyle: function onProcessStyle(style, rule) {
if (rule.type !== 'style') return style;
var newStyle = {};
var props = Object.keys(style).sort(sort);
for (var i = 0; i < props.length; i++) {
newStyle[props[i]] = style[props[i]];
}
return newStyle;
}
};
}
function jssPreset() {
return {
plugins: [functionPlugin(), jssGlobal(), jssNested(), camelCase(), defaultUnit(), // Disable the vendor prefixer server-side, it does nothing.
// This way, we can get a performance boost.
// In the documentation, we are using `autoprefixer` to solve this problem.
typeof window === 'undefined' ? null : jssVendorPrefixer(), jssPropsSort()]
};
}
function mergeClasses() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var baseClasses = options.baseClasses,
newClasses = options.newClasses;
options.Component;
if (!newClasses) {
return baseClasses;
}
var nextClasses = _extends$1({}, baseClasses);
Object.keys(newClasses).forEach(function (key) {
if (newClasses[key]) {
nextClasses[key] = "".concat(baseClasses[key], " ").concat(newClasses[key]);
}
});
return nextClasses;
}
// Used https://github.com/thinkloop/multi-key-cache as inspiration
var multiKeyStore = {
set: function set(cache, key1, key2, value) {
var subCache = cache.get(key1);
if (!subCache) {
subCache = new Map();
cache.set(key1, subCache);
}
subCache.set(key2, value);
},
get: function get(cache, key1, key2) {
var subCache = cache.get(key1);
return subCache ? subCache.get(key2) : undefined;
},
delete: function _delete(cache, key1, key2) {
var subCache = cache.get(key1);
subCache.delete(key2);
}
};
var ThemeContext = /*#__PURE__*/React__default['default'].createContext(null);
function useTheme$1() {
var theme = React__default['default'].useContext(ThemeContext);
return theme;
}
var jss = create(jssPreset()); // Use a singleton or the provided one by the context.
//
// The counter-based approach doesn't tolerate any mistake.
// It's much safer to use the same counter everywhere.
var generateClassName = createGenerateClassName(); // Exported for test purposes
var sheetsManager = new Map();
var defaultOptions$1 = {
disableGeneration: false,
generateClassName: generateClassName,
jss: jss,
sheetsCache: null,
sheetsManager: sheetsManager,
sheetsRegistry: null
};
var StylesContext = /*#__PURE__*/React__default['default'].createContext(defaultOptions$1);
/* eslint-disable import/prefer-default-export */
// Global index counter to preserve source order.
// We create the style sheet during the creation of the component,
// children are handled after the parents, so the order of style elements would be parent->child.
// It is a problem though when a parent passes a className
// which needs to override any child's styles.
// StyleSheet of the child has a higher specificity, because of the source order.
// So our solution is to render sheets them in the reverse order child->sheet, so
// that parent has a higher specificity.
var indexCounter = -1e9;
function increment() {
indexCounter += 1;
return indexCounter;
}
// We use the same empty object to ref count the styles that don't need a theme object.
var noopTheme = {};
function getStylesCreator(stylesOrCreator) {
var themingEnabled = typeof stylesOrCreator === 'function';
return {
create: function create(theme, name) {
var styles;
try {
styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
} catch (err) {
throw err;
}
if (!name || !theme.overrides || !theme.overrides[name]) {
return styles;
}
var overrides = theme.overrides[name];
var stylesWithOverrides = _extends$1({}, styles);
Object.keys(overrides).forEach(function (key) {
stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
});
return stylesWithOverrides;
},
options: {}
};
}
function getClasses(_ref, classes, Component) {
var state = _ref.state,
stylesOptions = _ref.stylesOptions;
if (stylesOptions.disableGeneration) {
return classes || {};
}
if (!state.cacheClasses) {
state.cacheClasses = {
// Cache for the finalized classes value.
value: null,
// Cache for the last used classes prop pointer.
lastProp: null,
// Cache for the last used rendered classes pointer.
lastJSS: {}
};
} // Tracks if either the rendered classes or classes prop has changed,
// requiring the generation of a new finalized classes object.
var generate = false;
if (state.classes !== state.cacheClasses.lastJSS) {
state.cacheClasses.lastJSS = state.classes;
generate = true;
}
if (classes !== state.cacheClasses.lastProp) {
state.cacheClasses.lastProp = classes;
generate = true;
}
if (generate) {
state.cacheClasses.value = mergeClasses({
baseClasses: state.cacheClasses.lastJSS,
newClasses: classes,
Component: Component
});
}
return state.cacheClasses.value;
}
function attach(_ref2, props) {
var state = _ref2.state,
theme = _ref2.theme,
stylesOptions = _ref2.stylesOptions,
stylesCreator = _ref2.stylesCreator,
name = _ref2.name;
if (stylesOptions.disableGeneration) {
return;
}
var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
if (!sheetManager) {
sheetManager = {
refs: 0,
staticSheet: null,
dynamicStyles: null
};
multiKeyStore.set(stylesOptions.sheetsManager, stylesCreator, theme, sheetManager);
}
var options = _extends$1({}, stylesCreator.options, stylesOptions, {
theme: theme,
flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
});
options.generateId = options.serverGenerateClassName || options.generateClassName;
var sheetsRegistry = stylesOptions.sheetsRegistry;
if (sheetManager.refs === 0) {
var staticSheet;
if (stylesOptions.sheetsCache) {
staticSheet = multiKeyStore.get(stylesOptions.sheetsCache, stylesCreator, theme);
}
var styles = stylesCreator.create(theme, name);
if (!staticSheet) {
staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends$1({
link: false
}, options));
staticSheet.attach();
if (stylesOptions.sheetsCache) {
multiKeyStore.set(stylesOptions.sheetsCache, stylesCreator, theme, staticSheet);
}
}
if (sheetsRegistry) {
sheetsRegistry.add(staticSheet);
}
sheetManager.staticSheet = staticSheet;
sheetManager.dynamicStyles = getDynamicStyles(styles);
}
if (sheetManager.dynamicStyles) {
var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends$1({
link: true
}, options));
dynamicSheet.update(props);
dynamicSheet.attach();
state.dynamicSheet = dynamicSheet;
state.classes = mergeClasses({
baseClasses: sheetManager.staticSheet.classes,
newClasses: dynamicSheet.classes
});
if (sheetsRegistry) {
sheetsRegistry.add(dynamicSheet);
}
} else {
state.classes = sheetManager.staticSheet.classes;
}
sheetManager.refs += 1;
}
function update$1(_ref3, props) {
var state = _ref3.state;
if (state.dynamicSheet) {
state.dynamicSheet.update(props);
}
}
function detach(_ref4) {
var state = _ref4.state,
theme = _ref4.theme,
stylesOptions = _ref4.stylesOptions,
stylesCreator = _ref4.stylesCreator;
if (stylesOptions.disableGeneration) {
return;
}
var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
sheetManager.refs -= 1;
var sheetsRegistry = stylesOptions.sheetsRegistry;
if (sheetManager.refs === 0) {
multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);
stylesOptions.jss.removeStyleSheet(sheetManager.staticSheet);
if (sheetsRegistry) {
sheetsRegistry.remove(sheetManager.staticSheet);
}
}
if (state.dynamicSheet) {
stylesOptions.jss.removeStyleSheet(state.dynamicSheet);
if (sheetsRegistry) {
sheetsRegistry.remove(state.dynamicSheet);
}
}
}
function useSynchronousEffect(func, values) {
var key = React__default['default'].useRef([]);
var output; // Store "generation" key. Just returns a new object every time
var currentKey = React__default['default'].useMemo(function () {
return {};
}, values); // eslint-disable-line react-hooks/exhaustive-deps
// "the first render", or "memo dropped the value"
if (key.current !== currentKey) {
key.current = currentKey;
output = func();
}
React__default['default'].useEffect(function () {
return function () {
if (output) {
output();
}
};
}, [currentKey] // eslint-disable-line react-hooks/exhaustive-deps
);
}
function makeStyles$1(stylesOrCreator) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var name = options.name,
classNamePrefixOption = options.classNamePrefix,
Component = options.Component,
_options$defaultTheme = options.defaultTheme,
defaultTheme = _options$defaultTheme === void 0 ? noopTheme : _options$defaultTheme,
stylesOptions2 = _objectWithoutProperties(options, ["name", "classNamePrefix", "Component", "defaultTheme"]);
var stylesCreator = getStylesCreator(stylesOrCreator);
var classNamePrefix = name || classNamePrefixOption || 'makeStyles';
stylesCreator.options = {
index: increment(),
name: name,
meta: classNamePrefix,
classNamePrefix: classNamePrefix
};
var useStyles = function useStyles() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var theme = useTheme$1() || defaultTheme;
var stylesOptions = _extends$1({}, React__default['default'].useContext(StylesContext), stylesOptions2);
var instance = React__default['default'].useRef();
var shouldUpdate = React__default['default'].useRef();
useSynchronousEffect(function () {
var current = {
name: name,
state: {},
stylesCreator: stylesCreator,
stylesOptions: stylesOptions,
theme: theme
};
attach(current, props);
shouldUpdate.current = false;
instance.current = current;
return function () {
detach(current);
};
}, [theme, stylesCreator]);
React__default['default'].useEffect(function () {
if (shouldUpdate.current) {
update$1(instance.current, props);
}
shouldUpdate.current = true;
});
var classes = getClasses(instance.current, props.classes, Component);
return classes;
};
return useStyles;
}
function toVal(mix) {
var k,
y,
str = '';
if (typeof mix === 'string' || typeof mix === 'number') {
str += mix;
} else if (typeof mix === 'object') {
if (Array.isArray(mix)) {
for (k = 0; k < mix.length; k++) {
if (mix[k]) {
if (y = toVal(mix[k])) {
str && (str += ' ');
str += y;
}
}
}
} else {
for (k in mix) {
if (mix[k]) {
str && (str += ' ');
str += k;
}
}
}
}
return str;
}
function clsx () {
var i = 0,
tmp,
x,
str = '';
while (i < arguments.length) {
if (tmp = arguments[i++]) {
if (x = toVal(tmp)) {
str && (str += ' ');
str += x;
}
}
}
return str;
}
var reactIs = reactIs$1.exports;
/**
* Copyright 2015, Yahoo! Inc.
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
*/
var REACT_STATICS = {
childContextTypes: true,
contextType: true,
contextTypes: true,
defaultProps: true,
displayName: true,
getDefaultProps: true,
getDerivedStateFromError: true,
getDerivedStateFromProps: true,
mixins: true,
propTypes: true,
type: true
};
var KNOWN_STATICS = {
name: true,
length: true,
prototype: true,
caller: true,
callee: true,
arguments: true,
arity: true
};
var FORWARD_REF_STATICS = {
'$$typeof': true,
render: true,
defaultProps: true,
displayName: true,
propTypes: true
};
var MEMO_STATICS = {
'$$typeof': true,
compare: true,
defaultProps: true,
displayName: true,
propTypes: true,
type: true
};
var TYPE_STATICS = {};
TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
function getStatics(component) {
// React v16.11 and below
if (reactIs.isMemo(component)) {
return MEMO_STATICS;
} // React v16.12 and above
return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
}
var defineProperty$1 = Object.defineProperty;
var getOwnPropertyNames = Object.getOwnPropertyNames;
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
var getPrototypeOf = Object.getPrototypeOf;
var objectPrototype = Object.prototype;
function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
if (typeof sourceComponent !== 'string') {
// don't hoist over string (html) components
if (objectPrototype) {
var inheritedComponent = getPrototypeOf(sourceComponent);
if (inheritedComponent && inheritedComponent !== objectPrototype) {
hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
}
}
var keys = getOwnPropertyNames(sourceComponent);
if (getOwnPropertySymbols) {
keys = keys.concat(getOwnPropertySymbols(sourceComponent));
}
var targetStatics = getStatics(targetComponent);
var sourceStatics = getStatics(sourceComponent);
for (var i = 0; i < keys.length; ++i) {
var key = keys[i];
if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
try {
// Avoid failures from read-only properties
defineProperty$1(targetComponent, key, descriptor);
} catch (e) {}
}
}
}
return targetComponent;
}
var hoistNonReactStatics_cjs = hoistNonReactStatics;
function omit(input, fields) {
var output = {};
Object.keys(input).forEach(function (prop) {
if (fields.indexOf(prop) === -1) {
output[prop] = input[prop];
}
});
return output;
} // styled-components's API removes the mapping between components and styles.
// Using components as a low-level styling construct can be simpler.
function styled$1(Component) {
var componentCreator = function componentCreator(style) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var name = options.name,
stylesOptions = _objectWithoutProperties(options, ["name"]);
var classNamePrefix = name;
var stylesOrCreator = typeof style === 'function' ? function (theme) {
return {
root: function root(props) {
return style(_extends$1({
theme: theme
}, props));
}
};
} : {
root: style
};
var useStyles = makeStyles$1(stylesOrCreator, _extends$1({
Component: Component,
name: name || Component.displayName,
classNamePrefix: classNamePrefix
}, stylesOptions));
var filterProps;
if (style.filterProps) {
filterProps = style.filterProps;
delete style.filterProps;
}
/* eslint-disable react/forbid-foreign-prop-types */
if (style.propTypes) {
delete style.propTypes;
}
/* eslint-enable react/forbid-foreign-prop-types */
var StyledComponent = /*#__PURE__*/React__default['default'].forwardRef(function StyledComponent(props, ref) {
var children = props.children,
classNameProp = props.className,
clone = props.clone,
ComponentProp = props.component,
other = _objectWithoutProperties(props, ["children", "className", "clone", "component"]);
var classes = useStyles(props);
var className = clsx(classes.root, classNameProp);
var spread = other;
if (filterProps) {
spread = omit(spread, filterProps);
}
if (clone) {
return /*#__PURE__*/React__default['default'].cloneElement(children, _extends$1({
className: clsx(children.props.className, className)
}, spread));
}
if (typeof children === 'function') {
return children(_extends$1({
className: className
}, spread));
}
var FinalComponent = ComponentProp || Component;
return /*#__PURE__*/React__default['default'].createElement(FinalComponent, _extends$1({
ref: ref,
className: className
}, spread), children);
});
hoistNonReactStatics_cjs(StyledComponent, Component);
return StyledComponent;
};
return componentCreator;
}
function mergeOuterLocalTheme(outerTheme, localTheme) {
if (typeof localTheme === 'function') {
var mergedTheme = localTheme(outerTheme);
return mergedTheme;
}
return _extends$1({}, outerTheme, localTheme);
}
/**
* This component takes a `theme` prop.
* It makes the `theme` available down the React tree thanks to React context.
* This component should preferably be used at **the root of your component tree**.
*/
function ThemeProvider(props) {
var children = props.children,
localTheme = props.theme;
var outerTheme = useTheme$1();
var theme = React__default['default'].useMemo(function () {
var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
if (output != null) {
output[nested] = outerTheme !== null;
}
return output;
}, [localTheme, outerTheme]);
return /*#__PURE__*/React__default['default'].createElement(ThemeContext.Provider, {
value: theme
}, children);
}
// It does not modify the component passed to it;
// instead, it returns a new component, with a `classes` property.
var withStyles$1 = function withStyles(stylesOrCreator) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return function (Component) {
var defaultTheme = options.defaultTheme,
_options$withTheme = options.withTheme,
withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
name = options.name,
stylesOptions = _objectWithoutProperties(options, ["defaultTheme", "withTheme", "name"]);
var classNamePrefix = name;
var useStyles = makeStyles$1(stylesOrCreator, _extends$1({
defaultTheme: defaultTheme,
Component: Component,
name: name || Component.displayName,
classNamePrefix: classNamePrefix
}, stylesOptions));
var WithStyles = /*#__PURE__*/React__default['default'].forwardRef(function WithStyles(props, ref) {
props.classes;
var innerRef = props.innerRef,
other = _objectWithoutProperties(props, ["classes", "innerRef"]); // The wrapper receives only user supplied props, which could be a subset of
// the actual props Component might receive due to merging with defaultProps.
// So copying it here would give us the same result in the wrapper as well.
var classes = useStyles(_extends$1({}, Component.defaultProps, props));
var theme;
var more = other;
if (typeof name === 'string' || withTheme) {
// name and withTheme are invariant in the outer scope
// eslint-disable-next-line react-hooks/rules-of-hooks
theme = useTheme$1() || defaultTheme;
if (name) {
more = getThemeProps({
theme: theme,
name: name,
props: other
});
} // Provide the theme to the wrapped component.
// So we don't have to use the `withTheme()` Higher-order Component.
if (withTheme && !more.theme) {
more.theme = theme;
}
}
return /*#__PURE__*/React__default['default'].createElement(Component, _extends$1({
ref: innerRef || ref,
classes: classes
}, more));
});
hoistNonReactStatics_cjs(WithStyles, Component);
return WithStyles;
};
};
// To remove in v5
function createStyles(styles) {
// warning(
// warnOnce,
// [
// 'Material-UI: createStyles from @material-ui/core/styles is deprecated.',
// 'Please use @material-ui/styles/createStyles',
// ].join('\n'),
// );
// warnOnce = true;
return createStyles$1(styles);
}
var defaultTheme = createMuiTheme();
function makeStyles(stylesOrCreator) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return makeStyles$1(stylesOrCreator, _extends$1({
defaultTheme: defaultTheme
}, options));
}
var styled = function styled(Component) {
var componentCreator = styled$1(Component);
return function (style, options) {
return componentCreator(style, _extends$1({
defaultTheme: defaultTheme
}, options));
};
};
function useTheme() {
var theme = useTheme$1() || defaultTheme;
return theme;
}
function withStyles(stylesOrCreator, options) {
return withStyles$1(stylesOrCreator, _extends$1({
defaultTheme: defaultTheme
}, options));
}
//
// A strict capitalization should uppercase the first letter of each word a the sentence.
// We only handle the first word.
function capitalize$1(string) {
if (typeof string !== 'string') {
throw new Error(formatMuiErrorMessage(7));
}
return string.charAt(0).toUpperCase() + string.slice(1);
}
/**
* Safe chained function
*
* Will only create a new function if needed,
* otherwise will pass back existing functions or null.
*
* @param {function} functions to chain
* @returns {function|null}
*/
function createChainedFunction() {
for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
funcs[_key] = arguments[_key];
}
return funcs.reduce(function (acc, func) {
if (func == null) {
return acc;
}
return function chainedFunction() {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
acc.apply(this, args);
func.apply(this, args);
};
}, function () {});
}
var styles$g = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
userSelect: 'none',
width: '1em',
height: '1em',
display: 'inline-block',
fill: 'currentColor',
flexShrink: 0,
fontSize: theme.typography.pxToRem(24),
transition: theme.transitions.create('fill', {
duration: theme.transitions.duration.shorter
})
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
color: theme.palette.primary.main
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
color: theme.palette.secondary.main
},
/* Styles applied to the root element if `color="action"`. */
colorAction: {
color: theme.palette.action.active
},
/* Styles applied to the root element if `color="error"`. */
colorError: {
color: theme.palette.error.main
},
/* Styles applied to the root element if `color="disabled"`. */
colorDisabled: {
color: theme.palette.action.disabled
},
/* Styles applied to the root element if `fontSize="inherit"`. */
fontSizeInherit: {
fontSize: 'inherit'
},
/* Styles applied to the root element if `fontSize="small"`. */
fontSizeSmall: {
fontSize: theme.typography.pxToRem(20)
},
/* Styles applied to the root element if `fontSize="large"`. */
fontSizeLarge: {
fontSize: theme.typography.pxToRem(35)
}
};
};
var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(props, ref) {
var children = props.children,
classes = props.classes,
className = props.className,
_props$color = props.color,
color = _props$color === void 0 ? 'inherit' : _props$color,
_props$component = props.component,
Component = _props$component === void 0 ? 'svg' : _props$component,
_props$fontSize = props.fontSize,
fontSize = _props$fontSize === void 0 ? 'default' : _props$fontSize,
htmlColor = props.htmlColor,
titleAccess = props.titleAccess,
_props$viewBox = props.viewBox,
viewBox = _props$viewBox === void 0 ? '0 0 24 24' : _props$viewBox,
other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"]);
return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize$1(color))], fontSize !== 'default' && classes["fontSize".concat(capitalize$1(fontSize))]),
focusable: "false",
viewBox: viewBox,
color: htmlColor,
"aria-hidden": titleAccess ? undefined : true,
role: titleAccess ? 'img' : undefined,
ref: ref
}, other), children, titleAccess ? /*#__PURE__*/React__namespace.createElement("title", null, titleAccess) : null);
});
SvgIcon.muiName = 'SvgIcon';
var SvgIcon$1 = withStyles(styles$g, {
name: 'MuiSvgIcon'
})(SvgIcon);
/**
* Private module reserved for @material-ui/x packages.
*/
function createSvgIcon$1(path, displayName) {
var Component = function Component(props, ref) {
return /*#__PURE__*/React__default['default'].createElement(SvgIcon$1, _extends$1({
ref: ref
}, props), path);
};
Component.muiName = SvgIcon$1.muiName;
return /*#__PURE__*/React__default['default'].memo( /*#__PURE__*/React__default['default'].forwardRef(Component));
}
// Corresponds to 10 frames at 60 Hz.
// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
function debounce$1(func) {
var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;
var timeout;
function debounced() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
} // eslint-disable-next-line consistent-this
var that = this;
var later = function later() {
func.apply(that, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
debounced.clear = function () {
clearTimeout(timeout);
};
return debounced;
}
function deprecatedPropType(validator, reason) {
{
return function () {
return null;
};
}
}
function isMuiElement(element, muiNames) {
return /*#__PURE__*/ /*#__PURE__*/React__namespace.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
}
function ownerDocument(node) {
return node && node.ownerDocument || document;
}
function ownerWindow(node) {
var doc = ownerDocument(node);
return doc.defaultView || window;
}
function requirePropFactory(componentNameInError) {
{
return function () {
return null;
};
}
}
// TODO v5: consider to make it private
function setRef(ref, value) {
if (typeof ref === 'function') {
ref(value);
} else if (ref) {
ref.current = value;
}
}
function unsupportedProp(props, propName, componentName, location, propFullName) {
{
return null;
}
}
/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
function useControlled(_ref) {
var controlled = _ref.controlled,
defaultProp = _ref.default;
_ref.name;
_ref.state;
var _React$useRef = React__namespace.useRef(controlled !== undefined),
isControlled = _React$useRef.current;
var _React$useState = React__namespace.useState(defaultProp),
valueState = _React$useState[0],
setValue = _React$useState[1];
var value = isControlled ? controlled : valueState;
var setValueIfUncontrolled = React__namespace.useCallback(function (newValue) {
if (!isControlled) {
setValue(newValue);
}
}, []);
return [value, setValueIfUncontrolled];
}
var useEnhancedEffect$4 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
/**
* https://github.com/facebook/react/issues/14099#issuecomment-440013892
*
* @param {function} fn
*/
function useEventCallback(fn) {
var ref = React__namespace.useRef(fn);
useEnhancedEffect$4(function () {
ref.current = fn;
});
return React__namespace.useCallback(function () {
return (ref.current).apply(void 0, arguments);
}, []);
}
function useForkRef(refA, refB) {
/**
* This will create a new function if the ref props change and are defined.
* This means react will call the old forkRef with `null` and the new forkRef
* with the ref. Cleanup naturally emerges from this behavior
*/
return React__namespace.useMemo(function () {
if (refA == null && refB == null) {
return null;
}
return function (refValue) {
setRef(refA, refValue);
setRef(refB, refValue);
};
}, [refA, refB]);
}
/**
* Private module reserved for @material-ui/x packages.
*/
function useId(idOverride) {
var _React$useState = React__namespace.useState(idOverride),
defaultId = _React$useState[0],
setDefaultId = _React$useState[1];
var id = idOverride || defaultId;
React__namespace.useEffect(function () {
if (defaultId == null) {
// Fallback to this default id when possible.
// Use the random value for client-side rendering only.
// We can't use it server-side.
setDefaultId("mui-".concat(Math.round(Math.random() * 1e5)));
}
}, [defaultId]);
return id;
}
// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
var hadKeyboardEvent = true;
var hadFocusVisibleRecently = false;
var hadFocusVisibleRecentlyTimeout = null;
var inputTypesWhitelist = {
text: true,
search: true,
url: true,
tel: true,
email: true,
password: true,
number: true,
date: true,
month: true,
week: true,
time: true,
datetime: true,
'datetime-local': true
};
/**
* Computes whether the given element should automatically trigger the
* `focus-visible` class being added, i.e. whether it should always match
* `:focus-visible` when focused.
* @param {Element} node
* @return {boolean}
*/
function focusTriggersKeyboardModality(node) {
var type = node.type,
tagName = node.tagName;
if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
return true;
}
if (tagName === 'TEXTAREA' && !node.readOnly) {
return true;
}
if (node.isContentEditable) {
return true;
}
return false;
}
/**
* Keep track of our keyboard modality state with `hadKeyboardEvent`.
* If the most recent user interaction was via the keyboard;
* and the key press did not include a meta, alt/option, or control key;
* then the modality is keyboard. Otherwise, the modality is not keyboard.
* @param {KeyboardEvent} event
*/
function handleKeyDown(event) {
if (event.metaKey || event.altKey || event.ctrlKey) {
return;
}
hadKeyboardEvent = true;
}
/**
* If at any point a user clicks with a pointing device, ensure that we change
* the modality away from keyboard.
* This avoids the situation where a user presses a key on an already focused
* element, and then clicks on a different element, focusing it with a
* pointing device, while we still think we're in keyboard modality.
*/
function handlePointerDown() {
hadKeyboardEvent = false;
}
function handleVisibilityChange() {
if (this.visibilityState === 'hidden') {
// If the tab becomes active again, the browser will handle calling focus
// on the element (Safari actually calls it twice).
// If this tab change caused a blur on an element with focus-visible,
// re-apply the class when the user switches back to the tab.
if (hadFocusVisibleRecently) {
hadKeyboardEvent = true;
}
}
}
function prepare(doc) {
doc.addEventListener('keydown', handleKeyDown, true);
doc.addEventListener('mousedown', handlePointerDown, true);
doc.addEventListener('pointerdown', handlePointerDown, true);
doc.addEventListener('touchstart', handlePointerDown, true);
doc.addEventListener('visibilitychange', handleVisibilityChange, true);
}
function isFocusVisible(event) {
var target = event.target;
try {
return target.matches(':focus-visible');
} catch (error) {} // browsers not implementing :focus-visible will throw a SyntaxError
// we use our own heuristic for those browsers
// rethrow might be better if it's not the expected error but do we really
// want to crash if focus-visible malfunctioned?
// no need for validFocusTarget check. the user does that by attaching it to
// focusable events only
return hadKeyboardEvent || focusTriggersKeyboardModality(target);
}
/**
* Should be called if a blur event is fired on a focus-visible element
*/
function handleBlurVisible() {
// To detect a tab/window switch, we look for a blur event followed
// rapidly by a visibility change.
// If we don't see a visibility change within 100ms, it's probably a
// regular focus change.
hadFocusVisibleRecently = true;
window.clearTimeout(hadFocusVisibleRecentlyTimeout);
hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
hadFocusVisibleRecently = false;
}, 100);
}
function useIsFocusVisible() {
var ref = React__namespace.useCallback(function (instance) {
var node = ReactDOM__namespace.findDOMNode(instance);
if (node != null) {
prepare(node.ownerDocument);
}
}, []);
return {
isFocusVisible: isFocusVisible,
onBlurVisible: handleBlurVisible,
ref: ref
};
}
var utils = /*#__PURE__*/Object.freeze({
__proto__: null,
capitalize: capitalize$1,
createChainedFunction: createChainedFunction,
createSvgIcon: createSvgIcon$1,
debounce: debounce$1,
deprecatedPropType: deprecatedPropType,
isMuiElement: isMuiElement,
ownerDocument: ownerDocument,
ownerWindow: ownerWindow,
requirePropFactory: requirePropFactory,
setRef: setRef,
unsupportedProp: unsupportedProp,
useControlled: useControlled,
useEventCallback: useEventCallback,
useForkRef: useForkRef,
unstable_useId: useId,
useIsFocusVisible: useIsFocusVisible
});
var config$1 = {
disabled: false
};
var TransitionGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
var UNMOUNTED = 'unmounted';
var EXITED = 'exited';
var ENTERING = 'entering';
var ENTERED = 'entered';
var EXITING = 'exiting';
/**
* The Transition component lets you describe a transition from one component
* state to another _over time_ with a simple declarative API. Most commonly
* it's used to animate the mounting and unmounting of a component, but can also
* be used to describe in-place transition states as well.
*
* ---
*
* **Note**: `Transition` is a platform-agnostic base component. If you're using
* transitions in CSS, you'll probably want to use
* [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
* instead. It inherits all the features of `Transition`, but contains
* additional features necessary to play nice with CSS transitions (hence the
* name of the component).
*
* ---
*
* By default the `Transition` component does not alter the behavior of the
* component it renders, it only tracks "enter" and "exit" states for the
* components. It's up to you to give meaning and effect to those states. For
* example we can add styles to a component when it enters or exits:
*
* ```jsx
* import { Transition } from 'react-transition-group';
*
* const duration = 300;
*
* const defaultStyle = {
* transition: `opacity ${duration}ms ease-in-out`,
* opacity: 0,
* }
*
* const transitionStyles = {
* entering: { opacity: 1 },
* entered: { opacity: 1 },
* exiting: { opacity: 0 },
* exited: { opacity: 0 },
* };
*
* const Fade = ({ in: inProp }) => (
* <Transition in={inProp} timeout={duration}>
* {state => (
* <div style={{
* ...defaultStyle,
* ...transitionStyles[state]
* }}>
* I'm a fade Transition!
* </div>
* )}
* </Transition>
* );
* ```
*
* There are 4 main states a Transition can be in:
* - `'entering'`
* - `'entered'`
* - `'exiting'`
* - `'exited'`
*
* Transition state is toggled via the `in` prop. When `true` the component
* begins the "Enter" stage. During this stage, the component will shift from
* its current transition state, to `'entering'` for the duration of the
* transition and then to the `'entered'` stage once it's complete. Let's take
* the following example (we'll use the
* [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
*
* ```jsx
* function App() {
* const [inProp, setInProp] = useState(false);
* return (
* <div>
* <Transition in={inProp} timeout={500}>
* {state => (
* // ...
* )}
* </Transition>
* <button onClick={() => setInProp(true)}>
* Click to Enter
* </button>
* </div>
* );
* }
* ```
*
* When the button is clicked the component will shift to the `'entering'` state
* and stay there for 500ms (the value of `timeout`) before it finally switches
* to `'entered'`.
*
* When `in` is `false` the same thing happens except the state moves from
* `'exiting'` to `'exited'`.
*/
var Transition = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Transition, _React$Component);
function Transition(props, context) {
var _this;
_this = _React$Component.call(this, props, context) || this;
var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
var initialStatus;
_this.appearStatus = null;
if (props.in) {
if (appear) {
initialStatus = EXITED;
_this.appearStatus = ENTERING;
} else {
initialStatus = ENTERED;
}
} else {
if (props.unmountOnExit || props.mountOnEnter) {
initialStatus = UNMOUNTED;
} else {
initialStatus = EXITED;
}
}
_this.state = {
status: initialStatus
};
_this.nextCallback = null;
return _this;
}
Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
var nextIn = _ref.in;
if (nextIn && prevState.status === UNMOUNTED) {
return {
status: EXITED
};
}
return null;
} // getSnapshotBeforeUpdate(prevProps) {
// let nextStatus = null
// if (prevProps !== this.props) {
// const { status } = this.state
// if (this.props.in) {
// if (status !== ENTERING && status !== ENTERED) {
// nextStatus = ENTERING
// }
// } else {
// if (status === ENTERING || status === ENTERED) {
// nextStatus = EXITING
// }
// }
// }
// return { nextStatus }
// }
;
var _proto = Transition.prototype;
_proto.componentDidMount = function componentDidMount() {
this.updateStatus(true, this.appearStatus);
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var nextStatus = null;
if (prevProps !== this.props) {
var status = this.state.status;
if (this.props.in) {
if (status !== ENTERING && status !== ENTERED) {
nextStatus = ENTERING;
}
} else {
if (status === ENTERING || status === ENTERED) {
nextStatus = EXITING;
}
}
}
this.updateStatus(false, nextStatus);
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.cancelNextCallback();
};
_proto.getTimeouts = function getTimeouts() {
var timeout = this.props.timeout;
var exit, enter, appear;
exit = enter = appear = timeout;
if (timeout != null && typeof timeout !== 'number') {
exit = timeout.exit;
enter = timeout.enter; // TODO: remove fallback for next major
appear = timeout.appear !== undefined ? timeout.appear : enter;
}
return {
exit: exit,
enter: enter,
appear: appear
};
};
_proto.updateStatus = function updateStatus(mounting, nextStatus) {
if (mounting === void 0) {
mounting = false;
}
if (nextStatus !== null) {
// nextStatus will always be ENTERING or EXITING.
this.cancelNextCallback();
if (nextStatus === ENTERING) {
this.performEnter(mounting);
} else {
this.performExit();
}
} else if (this.props.unmountOnExit && this.state.status === EXITED) {
this.setState({
status: UNMOUNTED
});
}
};
_proto.performEnter = function performEnter(mounting) {
var _this2 = this;
var enter = this.props.enter;
var appearing = this.context ? this.context.isMounting : mounting;
var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default['default'].findDOMNode(this), appearing],
maybeNode = _ref2[0],
maybeAppearing = _ref2[1];
var timeouts = this.getTimeouts();
var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
// if we are mounting and running this it means appear _must_ be set
if (!mounting && !enter || config$1.disabled) {
this.safeSetState({
status: ENTERED
}, function () {
_this2.props.onEntered(maybeNode);
});
return;
}
this.props.onEnter(maybeNode, maybeAppearing);
this.safeSetState({
status: ENTERING
}, function () {
_this2.props.onEntering(maybeNode, maybeAppearing);
_this2.onTransitionEnd(enterTimeout, function () {
_this2.safeSetState({
status: ENTERED
}, function () {
_this2.props.onEntered(maybeNode, maybeAppearing);
});
});
});
};
_proto.performExit = function performExit() {
var _this3 = this;
var exit = this.props.exit;
var timeouts = this.getTimeouts();
var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default['default'].findDOMNode(this); // no exit animation skip right to EXITED
if (!exit || config$1.disabled) {
this.safeSetState({
status: EXITED
}, function () {
_this3.props.onExited(maybeNode);
});
return;
}
this.props.onExit(maybeNode);
this.safeSetState({
status: EXITING
}, function () {
_this3.props.onExiting(maybeNode);
_this3.onTransitionEnd(timeouts.exit, function () {
_this3.safeSetState({
status: EXITED
}, function () {
_this3.props.onExited(maybeNode);
});
});
});
};
_proto.cancelNextCallback = function cancelNextCallback() {
if (this.nextCallback !== null) {
this.nextCallback.cancel();
this.nextCallback = null;
}
};
_proto.safeSetState = function safeSetState(nextState, callback) {
// This shouldn't be necessary, but there are weird race conditions with
// setState callbacks and unmounting in testing, so always make sure that
// we can cancel any pending setState callbacks after we unmount.
callback = this.setNextCallback(callback);
this.setState(nextState, callback);
};
_proto.setNextCallback = function setNextCallback(callback) {
var _this4 = this;
var active = true;
this.nextCallback = function (event) {
if (active) {
active = false;
_this4.nextCallback = null;
callback(event);
}
};
this.nextCallback.cancel = function () {
active = false;
};
return this.nextCallback;
};
_proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
this.setNextCallback(handler);
var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default['default'].findDOMNode(this);
var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
if (!node || doesNotHaveTimeoutOrListener) {
setTimeout(this.nextCallback, 0);
return;
}
if (this.props.addEndListener) {
var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
maybeNode = _ref3[0],
maybeNextCallback = _ref3[1];
this.props.addEndListener(maybeNode, maybeNextCallback);
}
if (timeout != null) {
setTimeout(this.nextCallback, timeout);
}
};
_proto.render = function render() {
var status = this.state.status;
if (status === UNMOUNTED) {
return null;
}
var _this$props = this.props,
children = _this$props.children;
_this$props.in;
_this$props.mountOnEnter;
_this$props.unmountOnExit;
_this$props.appear;
_this$props.enter;
_this$props.exit;
_this$props.timeout;
_this$props.addEndListener;
_this$props.onEnter;
_this$props.onEntering;
_this$props.onEntered;
_this$props.onExit;
_this$props.onExiting;
_this$props.onExited;
_this$props.nodeRef;
var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
return (
/*#__PURE__*/
// allows for nested Transitions
React__default['default'].createElement(TransitionGroupContext.Provider, {
value: null
}, typeof children === 'function' ? children(status, childProps) : /*#__PURE__*/React__default['default'].cloneElement(React__default['default'].Children.only(children), childProps))
);
};
return Transition;
}(React__default['default'].Component);
Transition.contextType = TransitionGroupContext;
Transition.propTypes = {}; // Name the function so it is clearer in the documentation
function noop$1() {}
Transition.defaultProps = {
in: false,
mountOnEnter: false,
unmountOnExit: false,
appear: false,
enter: true,
exit: true,
onEnter: noop$1,
onEntering: noop$1,
onEntered: noop$1,
onExit: noop$1,
onExiting: noop$1,
onExited: noop$1
};
Transition.UNMOUNTED = UNMOUNTED;
Transition.EXITED = EXITED;
Transition.ENTERING = ENTERING;
Transition.ENTERED = ENTERED;
Transition.EXITING = EXITING;
/**
* Given `this.props.children`, return an object mapping key to child.
*
* @param {*} children `this.props.children`
* @return {object} Mapping of key to child
*/
function getChildMapping(children, mapFn) {
var mapper = function mapper(child) {
return mapFn && /*#__PURE__*/React$3.isValidElement(child) ? mapFn(child) : child;
};
var result = Object.create(null);
if (children) React$3.Children.map(children, function (c) {
return c;
}).forEach(function (child) {
// run the map function here instead so that the key is the computed one
result[child.key] = mapper(child);
});
return result;
}
/**
* When you're adding or removing children some may be added or removed in the
* same render pass. We want to show *both* since we want to simultaneously
* animate elements in and out. This function takes a previous set of keys
* and a new set of keys and merges them with its best guess of the correct
* ordering. In the future we may expose some of the utilities in
* ReactMultiChild to make this easy, but for now React itself does not
* directly have this concept of the union of prevChildren and nextChildren
* so we implement it here.
*
* @param {object} prev prev children as returned from
* `ReactTransitionChildMapping.getChildMapping()`.
* @param {object} next next children as returned from
* `ReactTransitionChildMapping.getChildMapping()`.
* @return {object} a key set that contains all keys in `prev` and all keys
* in `next` in a reasonable order.
*/
function mergeChildMappings(prev, next) {
prev = prev || {};
next = next || {};
function getValueForKey(key) {
return key in next ? next[key] : prev[key];
} // For each key of `next`, the list of keys to insert before that key in
// the combined list
var nextKeysPending = Object.create(null);
var pendingKeys = [];
for (var prevKey in prev) {
if (prevKey in next) {
if (pendingKeys.length) {
nextKeysPending[prevKey] = pendingKeys;
pendingKeys = [];
}
} else {
pendingKeys.push(prevKey);
}
}
var i;
var childMapping = {};
for (var nextKey in next) {
if (nextKeysPending[nextKey]) {
for (i = 0; i < nextKeysPending[nextKey].length; i++) {
var pendingNextKey = nextKeysPending[nextKey][i];
childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
}
}
childMapping[nextKey] = getValueForKey(nextKey);
} // Finally, add the keys which didn't appear before any key in `next`
for (i = 0; i < pendingKeys.length; i++) {
childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
}
return childMapping;
}
function getProp(child, prop, props) {
return props[prop] != null ? props[prop] : child.props[prop];
}
function getInitialChildMapping(props, onExited) {
return getChildMapping(props.children, function (child) {
return /*#__PURE__*/React$3.cloneElement(child, {
onExited: onExited.bind(null, child),
in: true,
appear: getProp(child, 'appear', props),
enter: getProp(child, 'enter', props),
exit: getProp(child, 'exit', props)
});
});
}
function getNextChildMapping(nextProps, prevChildMapping, onExited) {
var nextChildMapping = getChildMapping(nextProps.children);
var children = mergeChildMappings(prevChildMapping, nextChildMapping);
Object.keys(children).forEach(function (key) {
var child = children[key];
if (! /*#__PURE__*/React$3.isValidElement(child)) return;
var hasPrev = (key in prevChildMapping);
var hasNext = (key in nextChildMapping);
var prevChild = prevChildMapping[key];
var isLeaving = /*#__PURE__*/React$3.isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
if (hasNext && (!hasPrev || isLeaving)) {
// console.log('entering', key)
children[key] = /*#__PURE__*/React$3.cloneElement(child, {
onExited: onExited.bind(null, child),
in: true,
exit: getProp(child, 'exit', nextProps),
enter: getProp(child, 'enter', nextProps)
});
} else if (!hasNext && hasPrev && !isLeaving) {
// item is old (exiting)
// console.log('leaving', key)
children[key] = /*#__PURE__*/React$3.cloneElement(child, {
in: false
});
} else if (hasNext && hasPrev && /*#__PURE__*/React$3.isValidElement(prevChild)) {
// item hasn't changed transition states
// copy over the last transition props;
// console.log('unchanged', key)
children[key] = /*#__PURE__*/React$3.cloneElement(child, {
onExited: onExited.bind(null, child),
in: prevChild.props.in,
exit: getProp(child, 'exit', nextProps),
enter: getProp(child, 'enter', nextProps)
});
}
});
return children;
}
var values = Object.values || function (obj) {
return Object.keys(obj).map(function (k) {
return obj[k];
});
};
var defaultProps = {
component: 'div',
childFactory: function childFactory(child) {
return child;
}
};
/**
* The `<TransitionGroup>` component manages a set of transition components
* (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
* components, `<TransitionGroup>` is a state machine for managing the mounting
* and unmounting of components over time.
*
* Consider the example below. As items are removed or added to the TodoList the
* `in` prop is toggled automatically by the `<TransitionGroup>`.
*
* Note that `<TransitionGroup>` does not define any animation behavior!
* Exactly _how_ a list item animates is up to the individual transition
* component. This means you can mix and match animations across different list
* items.
*/
var TransitionGroup = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(TransitionGroup, _React$Component);
function TransitionGroup(props, context) {
var _this;
_this = _React$Component.call(this, props, context) || this;
var handleExited = _this.handleExited.bind(_assertThisInitialized$1(_this)); // Initial children should all be entering, dependent on appear
_this.state = {
contextValue: {
isMounting: true
},
handleExited: handleExited,
firstRender: true
};
return _this;
}
var _proto = TransitionGroup.prototype;
_proto.componentDidMount = function componentDidMount() {
this.mounted = true;
this.setState({
contextValue: {
isMounting: false
}
});
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.mounted = false;
};
TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
var prevChildMapping = _ref.children,
handleExited = _ref.handleExited,
firstRender = _ref.firstRender;
return {
children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
firstRender: false
};
} // node is `undefined` when user provided `nodeRef` prop
;
_proto.handleExited = function handleExited(child, node) {
var currentChildMapping = getChildMapping(this.props.children);
if (child.key in currentChildMapping) return;
if (child.props.onExited) {
child.props.onExited(node);
}
if (this.mounted) {
this.setState(function (state) {
var children = _extends$1({}, state.children);
delete children[child.key];
return {
children: children
};
});
}
};
_proto.render = function render() {
var _this$props = this.props,
Component = _this$props.component,
childFactory = _this$props.childFactory,
props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
var contextValue = this.state.contextValue;
var children = values(this.state.children).map(childFactory);
delete props.appear;
delete props.enter;
delete props.exit;
if (Component === null) {
return /*#__PURE__*/React__default['default'].createElement(TransitionGroupContext.Provider, {
value: contextValue
}, children);
}
return /*#__PURE__*/React__default['default'].createElement(TransitionGroupContext.Provider, {
value: contextValue
}, /*#__PURE__*/React__default['default'].createElement(Component, props, children));
};
return TransitionGroup;
}(React__default['default'].Component);
TransitionGroup.propTypes = {};
TransitionGroup.defaultProps = defaultProps;
var reflow = function reflow(node) {
return node.scrollTop;
};
function getTransitionProps(props, options) {
var timeout = props.timeout,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style;
return {
duration: style.transitionDuration || typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
delay: style.transitionDelay
};
}
var useEnhancedEffect$3 = typeof window === 'undefined' ? React__namespace.useEffect : React__namespace.useLayoutEffect;
/**
* @ignore - internal component.
*/
function Ripple(props) {
var classes = props.classes,
_props$pulsate = props.pulsate,
pulsate = _props$pulsate === void 0 ? false : _props$pulsate,
rippleX = props.rippleX,
rippleY = props.rippleY,
rippleSize = props.rippleSize,
inProp = props.in,
_props$onExited = props.onExited,
onExited = _props$onExited === void 0 ? function () {} : _props$onExited,
timeout = props.timeout;
var _React$useState = React__namespace.useState(false),
leaving = _React$useState[0],
setLeaving = _React$useState[1];
var rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
var rippleStyles = {
width: rippleSize,
height: rippleSize,
top: -(rippleSize / 2) + rippleY,
left: -(rippleSize / 2) + rippleX
};
var childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
var handleExited = useEventCallback(onExited); // Ripple is used for user feedback (e.g. click or press) so we want to apply styles with the highest priority
useEnhancedEffect$3(function () {
if (!inProp) {
// react-transition-group#onExit
setLeaving(true); // react-transition-group#onExited
var timeoutId = setTimeout(handleExited, timeout);
return function () {
clearTimeout(timeoutId);
};
}
return undefined;
}, [handleExited, inProp, timeout]);
return /*#__PURE__*/React__namespace.createElement("span", {
className: rippleClassName,
style: rippleStyles
}, /*#__PURE__*/React__namespace.createElement("span", {
className: childClassName
}));
}
var DURATION = 550;
var DELAY_RIPPLE = 80;
var styles$f = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
overflow: 'hidden',
pointerEvents: 'none',
position: 'absolute',
zIndex: 0,
top: 0,
right: 0,
bottom: 0,
left: 0,
borderRadius: 'inherit'
},
/* Styles applied to the internal `Ripple` components `ripple` class. */
ripple: {
opacity: 0,
position: 'absolute'
},
/* Styles applied to the internal `Ripple` components `rippleVisible` class. */
rippleVisible: {
opacity: 0.3,
transform: 'scale(1)',
animation: "$enter ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
},
/* Styles applied to the internal `Ripple` components `ripplePulsate` class. */
ripplePulsate: {
animationDuration: "".concat(theme.transitions.duration.shorter, "ms")
},
/* Styles applied to the internal `Ripple` components `child` class. */
child: {
opacity: 1,
display: 'block',
width: '100%',
height: '100%',
borderRadius: '50%',
backgroundColor: 'currentColor'
},
/* Styles applied to the internal `Ripple` components `childLeaving` class. */
childLeaving: {
opacity: 0,
animation: "$exit ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
},
/* Styles applied to the internal `Ripple` components `childPulsate` class. */
childPulsate: {
position: 'absolute',
left: 0,
top: 0,
animation: "$pulsate 2500ms ".concat(theme.transitions.easing.easeInOut, " 200ms infinite")
},
'@keyframes enter': {
'0%': {
transform: 'scale(0)',
opacity: 0.1
},
'100%': {
transform: 'scale(1)',
opacity: 0.3
}
},
'@keyframes exit': {
'0%': {
opacity: 1
},
'100%': {
opacity: 0
}
},
'@keyframes pulsate': {
'0%': {
transform: 'scale(1)'
},
'50%': {
transform: 'scale(0.92)'
},
'100%': {
transform: 'scale(1)'
}
}
};
};
/**
* @ignore - internal component.
*
* TODO v5: Make private
*/
var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(props, ref) {
var _props$center = props.center,
centerProp = _props$center === void 0 ? false : _props$center,
classes = props.classes,
className = props.className,
other = _objectWithoutProperties(props, ["center", "classes", "className"]);
var _React$useState = React__namespace.useState([]),
ripples = _React$useState[0],
setRipples = _React$useState[1];
var nextKey = React__namespace.useRef(0);
var rippleCallback = React__namespace.useRef(null);
React__namespace.useEffect(function () {
if (rippleCallback.current) {
rippleCallback.current();
rippleCallback.current = null;
}
}, [ripples]); // Used to filter out mouse emulated events on mobile.
var ignoringMouseDown = React__namespace.useRef(false); // We use a timer in order to only show the ripples for touch "click" like events.
// We don't want to display the ripple for touch scroll events.
var startTimer = React__namespace.useRef(null); // This is the hook called once the previous timeout is ready.
var startTimerCommit = React__namespace.useRef(null);
var container = React__namespace.useRef(null);
React__namespace.useEffect(function () {
return function () {
clearTimeout(startTimer.current);
};
}, []);
var startCommit = React__namespace.useCallback(function (params) {
var pulsate = params.pulsate,
rippleX = params.rippleX,
rippleY = params.rippleY,
rippleSize = params.rippleSize,
cb = params.cb;
setRipples(function (oldRipples) {
return [].concat(_toConsumableArray(oldRipples), [/*#__PURE__*/React__namespace.createElement(Ripple, {
key: nextKey.current,
classes: classes,
timeout: DURATION,
pulsate: pulsate,
rippleX: rippleX,
rippleY: rippleY,
rippleSize: rippleSize
})]);
});
nextKey.current += 1;
rippleCallback.current = cb;
}, [classes]);
var start = React__namespace.useCallback(function () {
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var cb = arguments.length > 2 ? arguments[2] : undefined;
var _options$pulsate = options.pulsate,
pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
_options$center = options.center,
center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,
_options$fakeElement = options.fakeElement,
fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;
if (event.type === 'mousedown' && ignoringMouseDown.current) {
ignoringMouseDown.current = false;
return;
}
if (event.type === 'touchstart') {
ignoringMouseDown.current = true;
}
var element = fakeElement ? null : container.current;
var rect = element ? element.getBoundingClientRect() : {
width: 0,
height: 0,
left: 0,
top: 0
}; // Get the size of the ripple
var rippleX;
var rippleY;
var rippleSize;
if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
rippleX = Math.round(rect.width / 2);
rippleY = Math.round(rect.height / 2);
} else {
var _ref = event.touches ? event.touches[0] : event,
clientX = _ref.clientX,
clientY = _ref.clientY;
rippleX = Math.round(clientX - rect.left);
rippleY = Math.round(clientY - rect.top);
}
if (center) {
rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even.
if (rippleSize % 2 === 0) {
rippleSize += 1;
}
} else {
var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
} // Touche devices
if (event.touches) {
// check that this isn't another touchstart due to multitouch
// otherwise we will only clear a single timer when unmounting while two
// are running
if (startTimerCommit.current === null) {
// Prepare the ripple effect.
startTimerCommit.current = function () {
startCommit({
pulsate: pulsate,
rippleX: rippleX,
rippleY: rippleY,
rippleSize: rippleSize,
cb: cb
});
}; // Delay the execution of the ripple effect.
startTimer.current = setTimeout(function () {
if (startTimerCommit.current) {
startTimerCommit.current();
startTimerCommit.current = null;
}
}, DELAY_RIPPLE); // We have to make a tradeoff with this value.
}
} else {
startCommit({
pulsate: pulsate,
rippleX: rippleX,
rippleY: rippleY,
rippleSize: rippleSize,
cb: cb
});
}
}, [centerProp, startCommit]);
var pulsate = React__namespace.useCallback(function () {
start({}, {
pulsate: true
});
}, [start]);
var stop = React__namespace.useCallback(function (event, cb) {
clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
// We still want to show ripple effect.
if (event.type === 'touchend' && startTimerCommit.current) {
event.persist();
startTimerCommit.current();
startTimerCommit.current = null;
startTimer.current = setTimeout(function () {
stop(event, cb);
});
return;
}
startTimerCommit.current = null;
setRipples(function (oldRipples) {
if (oldRipples.length > 0) {
return oldRipples.slice(1);
}
return oldRipples;
});
rippleCallback.current = cb;
}, []);
React__namespace.useImperativeHandle(ref, function () {
return {
pulsate: pulsate,
start: start,
stop: stop
};
}, [pulsate, start, stop]);
return /*#__PURE__*/React__namespace.createElement("span", _extends$1({
className: clsx(classes.root, className),
ref: container
}, other), /*#__PURE__*/React__namespace.createElement(TransitionGroup, {
component: null,
exit: true
}, ripples));
});
var TouchRipple$1 = withStyles(styles$f, {
flip: false,
name: 'MuiTouchRipple'
})( /*#__PURE__*/React__namespace.memo(TouchRipple));
var styles$e = {
/* Styles applied to the root element. */
root: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
WebkitTapHighlightColor: 'transparent',
backgroundColor: 'transparent',
// Reset default value
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
border: 0,
margin: 0,
// Remove the margin in Safari
borderRadius: 0,
padding: 0,
// Remove the padding in Firefox
cursor: 'pointer',
userSelect: 'none',
verticalAlign: 'middle',
'-moz-appearance': 'none',
// Reset
'-webkit-appearance': 'none',
// Reset
textDecoration: 'none',
// So we take precedent over the style of a native <a /> element.
color: 'inherit',
'&::-moz-focus-inner': {
borderStyle: 'none' // Remove Firefox dotted outline.
},
'&$disabled': {
pointerEvents: 'none',
// Disable link interactions
cursor: 'default'
},
'@media print': {
colorAdjust: 'exact'
}
},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Pseudo-class applied to the root element if keyboard focused. */
focusVisible: {}
};
/**
* `ButtonBase` contains as few styles as possible.
* It aims to be a simple building block for creating a button.
* It contains a load of style reset and some focus/ripple logic.
*/
var ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(props, ref) {
var action = props.action,
buttonRefProp = props.buttonRef,
_props$centerRipple = props.centerRipple,
centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,
children = props.children,
classes = props.classes,
className = props.className,
_props$component = props.component,
component = _props$component === void 0 ? 'button' : _props$component,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$disableRipple = props.disableRipple,
disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
_props$disableTouchRi = props.disableTouchRipple,
disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,
_props$focusRipple = props.focusRipple,
focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,
focusVisibleClassName = props.focusVisibleClassName,
onBlur = props.onBlur,
onClick = props.onClick,
onFocus = props.onFocus,
onFocusVisible = props.onFocusVisible,
onKeyDown = props.onKeyDown,
onKeyUp = props.onKeyUp,
onMouseDown = props.onMouseDown,
onMouseLeave = props.onMouseLeave,
onMouseUp = props.onMouseUp,
onTouchEnd = props.onTouchEnd,
onTouchMove = props.onTouchMove,
onTouchStart = props.onTouchStart,
onDragLeave = props.onDragLeave,
_props$tabIndex = props.tabIndex,
tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
TouchRippleProps = props.TouchRippleProps,
_props$type = props.type,
type = _props$type === void 0 ? 'button' : _props$type,
other = _objectWithoutProperties(props, ["action", "buttonRef", "centerRipple", "children", "classes", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "onDragLeave", "tabIndex", "TouchRippleProps", "type"]);
var buttonRef = React__namespace.useRef(null);
function getButtonNode() {
// #StrictMode ready
return ReactDOM__namespace.findDOMNode(buttonRef.current);
}
var rippleRef = React__namespace.useRef(null);
var _React$useState = React__namespace.useState(false),
focusVisible = _React$useState[0],
setFocusVisible = _React$useState[1];
if (disabled && focusVisible) {
setFocusVisible(false);
}
var _useIsFocusVisible = useIsFocusVisible(),
isFocusVisible = _useIsFocusVisible.isFocusVisible,
onBlurVisible = _useIsFocusVisible.onBlurVisible,
focusVisibleRef = _useIsFocusVisible.ref;
React__namespace.useImperativeHandle(action, function () {
return {
focusVisible: function focusVisible() {
setFocusVisible(true);
buttonRef.current.focus();
}
};
}, []);
React__namespace.useEffect(function () {
if (focusVisible && focusRipple && !disableRipple) {
rippleRef.current.pulsate();
}
}, [disableRipple, focusRipple, focusVisible]);
function useRippleHandler(rippleAction, eventCallback) {
var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;
return useEventCallback(function (event) {
if (eventCallback) {
eventCallback(event);
}
var ignore = skipRippleAction;
if (!ignore && rippleRef.current) {
rippleRef.current[rippleAction](event);
}
return true;
});
}
var handleMouseDown = useRippleHandler('start', onMouseDown);
var handleDragLeave = useRippleHandler('stop', onDragLeave);
var handleMouseUp = useRippleHandler('stop', onMouseUp);
var handleMouseLeave = useRippleHandler('stop', function (event) {
if (focusVisible) {
event.preventDefault();
}
if (onMouseLeave) {
onMouseLeave(event);
}
});
var handleTouchStart = useRippleHandler('start', onTouchStart);
var handleTouchEnd = useRippleHandler('stop', onTouchEnd);
var handleTouchMove = useRippleHandler('stop', onTouchMove);
var handleBlur = useRippleHandler('stop', function (event) {
if (focusVisible) {
onBlurVisible(event);
setFocusVisible(false);
}
if (onBlur) {
onBlur(event);
}
}, false);
var handleFocus = useEventCallback(function (event) {
// Fix for https://github.com/facebook/react/issues/7769
if (!buttonRef.current) {
buttonRef.current = event.currentTarget;
}
if (isFocusVisible(event)) {
setFocusVisible(true);
if (onFocusVisible) {
onFocusVisible(event);
}
}
if (onFocus) {
onFocus(event);
}
});
var isNonNativeButton = function isNonNativeButton() {
var button = getButtonNode();
return component && component !== 'button' && !(button.tagName === 'A' && button.href);
};
/**
* IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
*/
var keydownRef = React__namespace.useRef(false);
var handleKeyDown = useEventCallback(function (event) {
// Check if key is already down to avoid repeats being counted as multiple activations
if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
keydownRef.current = true;
event.persist();
rippleRef.current.stop(event, function () {
rippleRef.current.start(event);
});
}
if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
event.preventDefault();
}
if (onKeyDown) {
onKeyDown(event);
} // Keyboard accessibility for non interactive elements
if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
event.preventDefault();
if (onClick) {
onClick(event);
}
}
});
var handleKeyUp = useEventCallback(function (event) {
// calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
// https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
keydownRef.current = false;
event.persist();
rippleRef.current.stop(event, function () {
rippleRef.current.pulsate(event);
});
}
if (onKeyUp) {
onKeyUp(event);
} // Keyboard accessibility for non interactive elements
if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
onClick(event);
}
});
var ComponentProp = component;
if (ComponentProp === 'button' && other.href) {
ComponentProp = 'a';
}
var buttonProps = {};
if (ComponentProp === 'button') {
buttonProps.type = type;
buttonProps.disabled = disabled;
} else {
if (ComponentProp !== 'a' || !other.href) {
buttonProps.role = 'button';
}
buttonProps['aria-disabled'] = disabled;
}
var handleUserRef = useForkRef(buttonRefProp, ref);
var handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
var handleRef = useForkRef(handleUserRef, handleOwnRef);
var _React$useState2 = React__namespace.useState(false),
mountedState = _React$useState2[0],
setMountedState = _React$useState2[1];
React__namespace.useEffect(function () {
setMountedState(true);
}, []);
var enableTouchRipple = mountedState && !disableRipple && !disabled;
return /*#__PURE__*/React__namespace.createElement(ComponentProp, _extends$1({
className: clsx(classes.root, className, focusVisible && [classes.focusVisible, focusVisibleClassName], disabled && classes.disabled),
onBlur: handleBlur,
onClick: onClick,
onFocus: handleFocus,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
onMouseDown: handleMouseDown,
onMouseLeave: handleMouseLeave,
onMouseUp: handleMouseUp,
onDragLeave: handleDragLeave,
onTouchEnd: handleTouchEnd,
onTouchMove: handleTouchMove,
onTouchStart: handleTouchStart,
ref: handleRef,
tabIndex: disabled ? -1 : tabIndex
}, buttonProps, other), children, enableTouchRipple ?
/*#__PURE__*/
/* TouchRipple is only needed client-side, x2 boost on the server. */
React__namespace.createElement(TouchRipple$1, _extends$1({
ref: rippleRef,
center: centerRipple
}, TouchRippleProps)) : null);
});
var ButtonBase$1 = withStyles(styles$e, {
name: 'MuiButtonBase'
})(ButtonBase);
var styles$d = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
textAlign: 'center',
flex: '0 0 auto',
fontSize: theme.typography.pxToRem(24),
padding: 12,
borderRadius: '50%',
overflow: 'visible',
// Explicitly set the default value to solve a bug on IE 11.
color: theme.palette.action.active,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shortest
}),
'&:hover': {
backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
},
'&$disabled': {
backgroundColor: 'transparent',
color: theme.palette.action.disabled
}
},
/* Styles applied to the root element if `edge="start"`. */
edgeStart: {
marginLeft: -12,
'$sizeSmall&': {
marginLeft: -3
}
},
/* Styles applied to the root element if `edge="end"`. */
edgeEnd: {
marginRight: -12,
'$sizeSmall&': {
marginRight: -3
}
},
/* Styles applied to the root element if `color="inherit"`. */
colorInherit: {
color: 'inherit'
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
color: theme.palette.primary.main,
'&:hover': {
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
color: theme.palette.secondary.main,
'&:hover': {
backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `size="small"`. */
sizeSmall: {
padding: 3,
fontSize: theme.typography.pxToRem(18)
},
/* Styles applied to the children container element. */
label: {
width: '100%',
display: 'flex',
alignItems: 'inherit',
justifyContent: 'inherit'
}
};
};
/**
* Refer to the [Icons](/components/icons/) section of the documentation
* regarding the available icon options.
*/
var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(props, ref) {
var _props$edge = props.edge,
edge = _props$edge === void 0 ? false : _props$edge,
children = props.children,
classes = props.classes,
className = props.className,
_props$color = props.color,
color = _props$color === void 0 ? 'default' : _props$color,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$disableFocusRi = props.disableFocusRipple,
disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
_props$size = props.size,
size = _props$size === void 0 ? 'medium' : _props$size,
other = _objectWithoutProperties(props, ["edge", "children", "classes", "className", "color", "disabled", "disableFocusRipple", "size"]);
return /*#__PURE__*/React__namespace.createElement(ButtonBase$1, _extends$1({
className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize$1(color))], disabled && classes.disabled, size === "small" && classes["size".concat(capitalize$1(size))], {
'start': classes.edgeStart,
'end': classes.edgeEnd
}[edge]),
centerRipple: true,
focusRipple: !disableFocusRipple,
disabled: disabled,
ref: ref
}, other), /*#__PURE__*/React__namespace.createElement("span", {
className: classes.label
}, children));
});
var IconButton$1 = withStyles(styles$d, {
name: 'MuiIconButton'
})(IconButton);
var styles$c = {
entering: {
opacity: 1
},
entered: {
opacity: 1
}
};
var defaultTimeout = {
enter: duration.enteringScreen,
exit: duration.leavingScreen
};
/**
* The Fade transition is used by the [Modal](/components/modal/) component.
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
*/
var Fade = /*#__PURE__*/React__namespace.forwardRef(function Fade(props, ref) {
var children = props.children,
_props$disableStrictM = props.disableStrictModeCompat,
disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
inProp = props.in,
onEnter = props.onEnter,
onEntered = props.onEntered,
onEntering = props.onEntering,
onExit = props.onExit,
onExited = props.onExited,
onExiting = props.onExiting,
style = props.style,
_props$TransitionComp = props.TransitionComponent,
TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
_props$timeout = props.timeout,
timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "TransitionComponent", "timeout"]);
var theme = useTheme();
var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
var nodeRef = React__namespace.useRef(null);
var foreignRef = useForkRef(children.ref, ref);
var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);
var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
return function (nodeOrAppearing, maybeAppearing) {
if (callback) {
var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
_ref2 = _slicedToArray$1(_ref, 2),
node = _ref2[0],
isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
if (isAppearing === undefined) {
callback(node);
} else {
callback(node, isAppearing);
}
}
};
};
var handleEntering = normalizedTransitionCallback(onEntering);
var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
reflow(node); // So the animation always start from the start.
var transitionProps = getTransitionProps({
style: style,
timeout: timeout
}, {
mode: 'enter'
});
node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
node.style.transition = theme.transitions.create('opacity', transitionProps);
if (onEnter) {
onEnter(node, isAppearing);
}
});
var handleEntered = normalizedTransitionCallback(onEntered);
var handleExiting = normalizedTransitionCallback(onExiting);
var handleExit = normalizedTransitionCallback(function (node) {
var transitionProps = getTransitionProps({
style: style,
timeout: timeout
}, {
mode: 'exit'
});
node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
node.style.transition = theme.transitions.create('opacity', transitionProps);
if (onExit) {
onExit(node);
}
});
var handleExited = normalizedTransitionCallback(onExited);
return /*#__PURE__*/React__namespace.createElement(TransitionComponent, _extends$1({
appear: true,
in: inProp,
nodeRef: enableStrictModeCompat ? nodeRef : undefined,
onEnter: handleEnter,
onEntered: handleEntered,
onEntering: handleEntering,
onExit: handleExit,
onExited: handleExited,
onExiting: handleExiting,
timeout: timeout
}, other), function (state, childProps) {
return /*#__PURE__*/React__namespace.cloneElement(children, _extends$1({
style: _extends$1({
opacity: 0,
visibility: state === 'exited' && !inProp ? 'hidden' : undefined
}, styles$c[state], style, children.props.style),
ref: handleRef
}, childProps));
});
});
var styleFunction = css$1(compose(borders, display, flexbox, grid, positions, palette, boxShadow, sizing, spacing, typography));
/**
* @ignore - do not document.
*/
var Box = styled('div')(styleFunction, {
name: 'MuiBox'
});
var styles$b = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
margin: 0
},
/* Styles applied to the root element if `variant="body2"`. */
body2: theme.typography.body2,
/* Styles applied to the root element if `variant="body1"`. */
body1: theme.typography.body1,
/* Styles applied to the root element if `variant="caption"`. */
caption: theme.typography.caption,
/* Styles applied to the root element if `variant="button"`. */
button: theme.typography.button,
/* Styles applied to the root element if `variant="h1"`. */
h1: theme.typography.h1,
/* Styles applied to the root element if `variant="h2"`. */
h2: theme.typography.h2,
/* Styles applied to the root element if `variant="h3"`. */
h3: theme.typography.h3,
/* Styles applied to the root element if `variant="h4"`. */
h4: theme.typography.h4,
/* Styles applied to the root element if `variant="h5"`. */
h5: theme.typography.h5,
/* Styles applied to the root element if `variant="h6"`. */
h6: theme.typography.h6,
/* Styles applied to the root element if `variant="subtitle1"`. */
subtitle1: theme.typography.subtitle1,
/* Styles applied to the root element if `variant="subtitle2"`. */
subtitle2: theme.typography.subtitle2,
/* Styles applied to the root element if `variant="overline"`. */
overline: theme.typography.overline,
/* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */
srOnly: {
position: 'absolute',
height: 1,
width: 1,
overflow: 'hidden'
},
/* Styles applied to the root element if `align="left"`. */
alignLeft: {
textAlign: 'left'
},
/* Styles applied to the root element if `align="center"`. */
alignCenter: {
textAlign: 'center'
},
/* Styles applied to the root element if `align="right"`. */
alignRight: {
textAlign: 'right'
},
/* Styles applied to the root element if `align="justify"`. */
alignJustify: {
textAlign: 'justify'
},
/* Styles applied to the root element if `nowrap={true}`. */
noWrap: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
/* Styles applied to the root element if `gutterBottom={true}`. */
gutterBottom: {
marginBottom: '0.35em'
},
/* Styles applied to the root element if `paragraph={true}`. */
paragraph: {
marginBottom: 16
},
/* Styles applied to the root element if `color="inherit"`. */
colorInherit: {
color: 'inherit'
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
color: theme.palette.primary.main
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
color: theme.palette.secondary.main
},
/* Styles applied to the root element if `color="textPrimary"`. */
colorTextPrimary: {
color: theme.palette.text.primary
},
/* Styles applied to the root element if `color="textSecondary"`. */
colorTextSecondary: {
color: theme.palette.text.secondary
},
/* Styles applied to the root element if `color="error"`. */
colorError: {
color: theme.palette.error.main
},
/* Styles applied to the root element if `display="inline"`. */
displayInline: {
display: 'inline'
},
/* Styles applied to the root element if `display="block"`. */
displayBlock: {
display: 'block'
}
};
};
var defaultVariantMapping = {
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h4',
h5: 'h5',
h6: 'h6',
subtitle1: 'h6',
subtitle2: 'h6',
body1: 'p',
body2: 'p'
};
var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(props, ref) {
var _props$align = props.align,
align = _props$align === void 0 ? 'inherit' : _props$align,
classes = props.classes,
className = props.className,
_props$color = props.color,
color = _props$color === void 0 ? 'initial' : _props$color,
component = props.component,
_props$display = props.display,
display = _props$display === void 0 ? 'initial' : _props$display,
_props$gutterBottom = props.gutterBottom,
gutterBottom = _props$gutterBottom === void 0 ? false : _props$gutterBottom,
_props$noWrap = props.noWrap,
noWrap = _props$noWrap === void 0 ? false : _props$noWrap,
_props$paragraph = props.paragraph,
paragraph = _props$paragraph === void 0 ? false : _props$paragraph,
_props$variant = props.variant,
variant = _props$variant === void 0 ? 'body1' : _props$variant,
_props$variantMapping = props.variantMapping,
variantMapping = _props$variantMapping === void 0 ? defaultVariantMapping : _props$variantMapping,
other = _objectWithoutProperties(props, ["align", "classes", "className", "color", "component", "display", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"]);
var Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
className: clsx(classes.root, className, variant !== 'inherit' && classes[variant], color !== 'initial' && classes["color".concat(capitalize$1(color))], noWrap && classes.noWrap, gutterBottom && classes.gutterBottom, paragraph && classes.paragraph, align !== 'inherit' && classes["align".concat(capitalize$1(align))], display !== 'initial' && classes["display".concat(capitalize$1(display))]),
ref: ref
}, other));
});
var Typography$1 = withStyles(styles$b, {
name: 'MuiTypography'
})(Typography);
/**
* @ignore - internal component.
*/
var FormControlContext = /*#__PURE__*/React__namespace.createContext();
function useFormControl() {
return React__namespace.useContext(FormControlContext);
}
var styles$a = {
root: {
padding: 9
},
checked: {},
disabled: {},
input: {
cursor: 'inherit',
position: 'absolute',
opacity: 0,
width: '100%',
height: '100%',
top: 0,
left: 0,
margin: 0,
padding: 0,
zIndex: 1
}
};
/**
* @ignore - internal component.
*/
var SwitchBase = /*#__PURE__*/React__namespace.forwardRef(function SwitchBase(props, ref) {
var autoFocus = props.autoFocus,
checkedProp = props.checked,
checkedIcon = props.checkedIcon,
classes = props.classes,
className = props.className,
defaultChecked = props.defaultChecked,
disabledProp = props.disabled,
icon = props.icon,
id = props.id,
inputProps = props.inputProps,
inputRef = props.inputRef,
name = props.name,
onBlur = props.onBlur,
onChange = props.onChange,
onFocus = props.onFocus,
readOnly = props.readOnly,
required = props.required,
tabIndex = props.tabIndex,
type = props.type,
value = props.value,
other = _objectWithoutProperties(props, ["autoFocus", "checked", "checkedIcon", "classes", "className", "defaultChecked", "disabled", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"]);
var _useControlled = useControlled({
controlled: checkedProp,
default: Boolean(defaultChecked),
name: 'SwitchBase',
state: 'checked'
}),
_useControlled2 = _slicedToArray$1(_useControlled, 2),
checked = _useControlled2[0],
setCheckedState = _useControlled2[1];
var muiFormControl = useFormControl();
var handleFocus = function handleFocus(event) {
if (onFocus) {
onFocus(event);
}
if (muiFormControl && muiFormControl.onFocus) {
muiFormControl.onFocus(event);
}
};
var handleBlur = function handleBlur(event) {
if (onBlur) {
onBlur(event);
}
if (muiFormControl && muiFormControl.onBlur) {
muiFormControl.onBlur(event);
}
};
var handleInputChange = function handleInputChange(event) {
var newChecked = event.target.checked;
setCheckedState(newChecked);
if (onChange) {
// TODO v5: remove the second argument.
onChange(event, newChecked);
}
};
var disabled = disabledProp;
if (muiFormControl) {
if (typeof disabled === 'undefined') {
disabled = muiFormControl.disabled;
}
}
var hasLabelFor = type === 'checkbox' || type === 'radio';
return /*#__PURE__*/React__namespace.createElement(IconButton$1, _extends$1({
component: "span",
className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),
disabled: disabled,
tabIndex: null,
role: undefined,
onFocus: handleFocus,
onBlur: handleBlur,
ref: ref
}, other), /*#__PURE__*/React__namespace.createElement("input", _extends$1({
autoFocus: autoFocus,
checked: checkedProp,
defaultChecked: defaultChecked,
className: classes.input,
disabled: disabled,
id: hasLabelFor && id,
name: name,
onChange: handleInputChange,
readOnly: readOnly,
ref: inputRef,
required: required,
tabIndex: tabIndex,
type: type,
value: value
}, inputProps)), checked ? checkedIcon : icon);
}); // NB: If changed, please update Checkbox, Switch and Radio
var SwitchBase$1 = withStyles(styles$a, {
name: 'PrivateSwitchBase'
})(SwitchBase);
function mapEventPropToEvent(eventProp) {
return eventProp.substring(2).toLowerCase();
}
function clickedRootScrollbar(event) {
return document.documentElement.clientWidth < event.clientX || document.documentElement.clientHeight < event.clientY;
}
/**
* Listen for click events that occur somewhere in the document, outside of the element itself.
* For instance, if you need to hide a menu when people click anywhere else on your page.
*/
function ClickAwayListener(props) {
var children = props.children,
_props$disableReactTr = props.disableReactTree,
disableReactTree = _props$disableReactTr === void 0 ? false : _props$disableReactTr,
_props$mouseEvent = props.mouseEvent,
mouseEvent = _props$mouseEvent === void 0 ? 'onClick' : _props$mouseEvent,
onClickAway = props.onClickAway,
_props$touchEvent = props.touchEvent,
touchEvent = _props$touchEvent === void 0 ? 'onTouchEnd' : _props$touchEvent;
var movedRef = React__namespace.useRef(false);
var nodeRef = React__namespace.useRef(null);
var activatedRef = React__namespace.useRef(false);
var syntheticEventRef = React__namespace.useRef(false);
React__namespace.useEffect(function () {
// Ensure that this component is not "activated" synchronously.
// https://github.com/facebook/react/issues/20074
setTimeout(function () {
activatedRef.current = true;
}, 0);
return function () {
activatedRef.current = false;
};
}, []); // can be removed once we drop support for non ref forwarding class components
var handleOwnRef = React__namespace.useCallback(function (instance) {
// #StrictMode ready
nodeRef.current = ReactDOM__namespace.findDOMNode(instance);
}, []);
var handleRef = useForkRef(children.ref, handleOwnRef); // The handler doesn't take event.defaultPrevented into account:
//
// event.preventDefault() is meant to stop default behaviours like
// clicking a checkbox to check it, hitting a button to submit a form,
// and hitting left arrow to move the cursor in a text input etc.
// Only special HTML elements have these default behaviors.
var handleClickAway = useEventCallback(function (event) {
// Given developers can stop the propagation of the synthetic event,
// we can only be confident with a positive value.
var insideReactTree = syntheticEventRef.current;
syntheticEventRef.current = false; // 1. IE 11 support, which trigger the handleClickAway even after the unbind
// 2. The child might render null.
// 3. Behave like a blur listener.
if (!activatedRef.current || !nodeRef.current || clickedRootScrollbar(event)) {
return;
} // Do not act if user performed touchmove
if (movedRef.current) {
movedRef.current = false;
return;
}
var insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
if (event.composedPath) {
insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
} else {
// TODO v6 remove dead logic https://caniuse.com/#search=composedPath.
var doc = ownerDocument(nodeRef.current);
insideDOM = !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
}
if (!insideDOM && (disableReactTree || !insideReactTree)) {
onClickAway(event);
}
}); // Keep track of mouse/touch events that bubbled up through the portal.
var createHandleSynthetic = function createHandleSynthetic(handlerName) {
return function (event) {
syntheticEventRef.current = true;
var childrenPropsHandler = children.props[handlerName];
if (childrenPropsHandler) {
childrenPropsHandler(event);
}
};
};
var childrenProps = {
ref: handleRef
};
if (touchEvent !== false) {
childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
}
React__namespace.useEffect(function () {
if (touchEvent !== false) {
var mappedTouchEvent = mapEventPropToEvent(touchEvent);
var doc = ownerDocument(nodeRef.current);
var handleTouchMove = function handleTouchMove() {
movedRef.current = true;
};
doc.addEventListener(mappedTouchEvent, handleClickAway);
doc.addEventListener('touchmove', handleTouchMove);
return function () {
doc.removeEventListener(mappedTouchEvent, handleClickAway);
doc.removeEventListener('touchmove', handleTouchMove);
};
}
return undefined;
}, [handleClickAway, touchEvent]);
if (mouseEvent !== false) {
childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
}
React__namespace.useEffect(function () {
if (mouseEvent !== false) {
var mappedMouseEvent = mapEventPropToEvent(mouseEvent);
var doc = ownerDocument(nodeRef.current);
doc.addEventListener(mappedMouseEvent, handleClickAway);
return function () {
doc.removeEventListener(mappedMouseEvent, handleClickAway);
};
}
return undefined;
}, [handleClickAway, mouseEvent]);
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.cloneElement(children, childrenProps));
}
function getContainer(container) {
container = typeof container === 'function' ? container() : container; // #StrictMode ready
return ReactDOM__namespace.findDOMNode(container);
}
var useEnhancedEffect$2 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
/**
* Portals provide a first-class way to render children into a DOM node
* that exists outside the DOM hierarchy of the parent component.
*/
var Portal = /*#__PURE__*/React__namespace.forwardRef(function Portal(props, ref) {
var children = props.children,
container = props.container,
_props$disablePortal = props.disablePortal,
disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
onRendered = props.onRendered;
var _React$useState = React__namespace.useState(null),
mountNode = _React$useState[0],
setMountNode = _React$useState[1];
var handleRef = useForkRef( /*#__PURE__*/ /*#__PURE__*/React__namespace.isValidElement(children) ? children.ref : null, ref);
useEnhancedEffect$2(function () {
if (!disablePortal) {
setMountNode(getContainer(container) || document.body);
}
}, [container, disablePortal]);
useEnhancedEffect$2(function () {
if (mountNode && !disablePortal) {
setRef(ref, mountNode);
return function () {
setRef(ref, null);
};
}
return undefined;
}, [ref, mountNode, disablePortal]);
useEnhancedEffect$2(function () {
if (onRendered && (mountNode || disablePortal)) {
onRendered();
}
}, [onRendered, mountNode, disablePortal]);
if (disablePortal) {
if ( /*#__PURE__*/React__namespace.isValidElement(children)) {
return /*#__PURE__*/React__namespace.cloneElement(children, {
ref: handleRef
});
}
return children;
}
return mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode;
});
var styles$9 = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
height: 1,
margin: 0,
// Reset browser default style.
border: 'none',
flexShrink: 0,
backgroundColor: theme.palette.divider
},
/* Styles applied to the root element if `absolute={true}`. */
absolute: {
position: 'absolute',
bottom: 0,
left: 0,
width: '100%'
},
/* Styles applied to the root element if `variant="inset"`. */
inset: {
marginLeft: 72
},
/* Styles applied to the root element if `light={true}`. */
light: {
backgroundColor: fade(theme.palette.divider, 0.08)
},
/* Styles applied to the root element if `variant="middle"`. */
middle: {
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2)
},
/* Styles applied to the root element if `orientation="vertical"`. */
vertical: {
height: '100%',
width: 1
},
/* Styles applied to the root element if `flexItem={true}`. */
flexItem: {
alignSelf: 'stretch',
height: 'auto'
}
};
};
var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(props, ref) {
var _props$absolute = props.absolute,
absolute = _props$absolute === void 0 ? false : _props$absolute,
classes = props.classes,
className = props.className,
_props$component = props.component,
Component = _props$component === void 0 ? 'hr' : _props$component,
_props$flexItem = props.flexItem,
flexItem = _props$flexItem === void 0 ? false : _props$flexItem,
_props$light = props.light,
light = _props$light === void 0 ? false : _props$light,
_props$orientation = props.orientation,
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
_props$role = props.role,
role = _props$role === void 0 ? Component !== 'hr' ? 'separator' : undefined : _props$role,
_props$variant = props.variant,
variant = _props$variant === void 0 ? 'fullWidth' : _props$variant,
other = _objectWithoutProperties(props, ["absolute", "classes", "className", "component", "flexItem", "light", "orientation", "role", "variant"]);
return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
className: clsx(classes.root, className, variant !== 'fullWidth' && classes[variant], absolute && classes.absolute, flexItem && classes.flexItem, light && classes.light, orientation === 'vertical' && classes.vertical),
role: role,
ref: ref
}, other));
});
var Divider$1 = withStyles(styles$9, {
name: 'MuiDivider'
})(Divider);
function getScale(value) {
return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
}
var styles$8 = {
entering: {
opacity: 1,
transform: getScale(1)
},
entered: {
opacity: 1,
transform: 'none'
}
};
/**
* The Grow transition is used by the [Tooltip](/components/tooltips/) and
* [Popover](/components/popover/) components.
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
*/
var Grow = /*#__PURE__*/React__namespace.forwardRef(function Grow(props, ref) {
var children = props.children,
_props$disableStrictM = props.disableStrictModeCompat,
disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
inProp = props.in,
onEnter = props.onEnter,
onEntered = props.onEntered,
onEntering = props.onEntering,
onExit = props.onExit,
onExited = props.onExited,
onExiting = props.onExiting,
style = props.style,
_props$timeout = props.timeout,
timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
_props$TransitionComp = props.TransitionComponent,
TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
var timer = React__namespace.useRef();
var autoTimeout = React__namespace.useRef();
var theme = useTheme();
var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
var nodeRef = React__namespace.useRef(null);
var foreignRef = useForkRef(children.ref, ref);
var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);
var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
return function (nodeOrAppearing, maybeAppearing) {
if (callback) {
var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
_ref2 = _slicedToArray$1(_ref, 2),
node = _ref2[0],
isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
if (isAppearing === undefined) {
callback(node);
} else {
callback(node, isAppearing);
}
}
};
};
var handleEntering = normalizedTransitionCallback(onEntering);
var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
reflow(node); // So the animation always start from the start.
var _getTransitionProps = getTransitionProps({
style: style,
timeout: timeout
}, {
mode: 'enter'
}),
transitionDuration = _getTransitionProps.duration,
delay = _getTransitionProps.delay;
var duration;
if (timeout === 'auto') {
duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
autoTimeout.current = duration;
} else {
duration = transitionDuration;
}
node.style.transition = [theme.transitions.create('opacity', {
duration: duration,
delay: delay
}), theme.transitions.create('transform', {
duration: duration * 0.666,
delay: delay
})].join(',');
if (onEnter) {
onEnter(node, isAppearing);
}
});
var handleEntered = normalizedTransitionCallback(onEntered);
var handleExiting = normalizedTransitionCallback(onExiting);
var handleExit = normalizedTransitionCallback(function (node) {
var _getTransitionProps2 = getTransitionProps({
style: style,
timeout: timeout
}, {
mode: 'exit'
}),
transitionDuration = _getTransitionProps2.duration,
delay = _getTransitionProps2.delay;
var duration;
if (timeout === 'auto') {
duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
autoTimeout.current = duration;
} else {
duration = transitionDuration;
}
node.style.transition = [theme.transitions.create('opacity', {
duration: duration,
delay: delay
}), theme.transitions.create('transform', {
duration: duration * 0.666,
delay: delay || duration * 0.333
})].join(',');
node.style.opacity = '0';
node.style.transform = getScale(0.75);
if (onExit) {
onExit(node);
}
});
var handleExited = normalizedTransitionCallback(onExited);
var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
var next = enableStrictModeCompat ? nodeOrNext : maybeNext;
if (timeout === 'auto') {
timer.current = setTimeout(next, autoTimeout.current || 0);
}
};
React__namespace.useEffect(function () {
return function () {
clearTimeout(timer.current);
};
}, []);
return /*#__PURE__*/React__namespace.createElement(TransitionComponent, _extends$1({
appear: true,
in: inProp,
nodeRef: enableStrictModeCompat ? nodeRef : undefined,
onEnter: handleEnter,
onEntered: handleEntered,
onEntering: handleEntering,
onExit: handleExit,
onExited: handleExited,
onExiting: handleExiting,
addEndListener: addEndListener,
timeout: timeout === 'auto' ? null : timeout
}, other), function (state, childProps) {
return /*#__PURE__*/React__namespace.cloneElement(children, _extends$1({
style: _extends$1({
opacity: 0,
transform: getScale(0.75),
visibility: state === 'exited' && !inProp ? 'hidden' : undefined
}, styles$8[state], style, children.props.style),
ref: handleRef
}, childProps));
});
});
Grow.muiSupportAuto = true;
/**
* @ignore - internal component.
*/
var ListContext = /*#__PURE__*/React__namespace.createContext({});
var styles$7 = {
/* Styles applied to the root element. */
root: {
listStyle: 'none',
margin: 0,
padding: 0,
position: 'relative'
},
/* Styles applied to the root element if `disablePadding={false}`. */
padding: {
paddingTop: 8,
paddingBottom: 8
},
/* Styles applied to the root element if dense. */
dense: {},
/* Styles applied to the root element if a `subheader` is provided. */
subheader: {
paddingTop: 0
}
};
var List = /*#__PURE__*/React__namespace.forwardRef(function List(props, ref) {
var children = props.children,
classes = props.classes,
className = props.className,
_props$component = props.component,
Component = _props$component === void 0 ? 'ul' : _props$component,
_props$dense = props.dense,
dense = _props$dense === void 0 ? false : _props$dense,
_props$disablePadding = props.disablePadding,
disablePadding = _props$disablePadding === void 0 ? false : _props$disablePadding,
subheader = props.subheader,
other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "dense", "disablePadding", "subheader"]);
var context = React__namespace.useMemo(function () {
return {
dense: dense
};
}, [dense]);
return /*#__PURE__*/React__namespace.createElement(ListContext.Provider, {
value: context
}, /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
className: clsx(classes.root, className, dense && classes.dense, !disablePadding && classes.padding, subheader && classes.subheader),
ref: ref
}, other), subheader, children));
});
var List$1 = withStyles(styles$7, {
name: 'MuiList'
})(List);
var styles$6 = function styles(theme) {
return {
/* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
root: {
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
position: 'relative',
textDecoration: 'none',
width: '100%',
boxSizing: 'border-box',
textAlign: 'left',
paddingTop: 8,
paddingBottom: 8,
'&$focusVisible': {
backgroundColor: theme.palette.action.selected
},
'&$selected, &$selected:hover': {
backgroundColor: theme.palette.action.selected
},
'&$disabled': {
opacity: 0.5
}
},
/* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */
container: {
position: 'relative'
},
/* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
focusVisible: {},
/* Styles applied to the `component` element if dense. */
dense: {
paddingTop: 4,
paddingBottom: 4
},
/* Styles applied to the `component` element if `alignItems="flex-start"`. */
alignItemsFlexStart: {
alignItems: 'flex-start'
},
/* Pseudo-class applied to the inner `component` element if `disabled={true}`. */
disabled: {},
/* Styles applied to the inner `component` element if `divider={true}`. */
divider: {
borderBottom: "1px solid ".concat(theme.palette.divider),
backgroundClip: 'padding-box'
},
/* Styles applied to the inner `component` element if `disableGutters={false}`. */
gutters: {
paddingLeft: 16,
paddingRight: 16
},
/* Styles applied to the inner `component` element if `button={true}`. */
button: {
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shortest
}),
'&:hover': {
textDecoration: 'none',
backgroundColor: theme.palette.action.hover,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
/* Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. */
secondaryAction: {
// Add some space to avoid collision as `ListItemSecondaryAction`
// is absolutely positioned.
paddingRight: 48
},
/* Pseudo-class applied to the root element if `selected={true}`. */
selected: {}
};
};
var useEnhancedEffect$1 = typeof window === 'undefined' ? React__namespace.useEffect : React__namespace.useLayoutEffect;
/**
* Uses an additional container component if `ListItemSecondaryAction` is the last child.
*/
var ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(props, ref) {
var _props$alignItems = props.alignItems,
alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
_props$autoFocus = props.autoFocus,
autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
_props$button = props.button,
button = _props$button === void 0 ? false : _props$button,
childrenProp = props.children,
classes = props.classes,
className = props.className,
componentProp = props.component,
_props$ContainerCompo = props.ContainerComponent,
ContainerComponent = _props$ContainerCompo === void 0 ? 'li' : _props$ContainerCompo,
_props$ContainerProps = props.ContainerProps;
_props$ContainerProps = _props$ContainerProps === void 0 ? {} : _props$ContainerProps;
var ContainerClassName = _props$ContainerProps.className,
ContainerProps = _objectWithoutProperties(_props$ContainerProps, ["className"]),
_props$dense = props.dense,
dense = _props$dense === void 0 ? false : _props$dense,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$disableGutters = props.disableGutters,
disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
_props$divider = props.divider,
divider = _props$divider === void 0 ? false : _props$divider,
focusVisibleClassName = props.focusVisibleClassName,
_props$selected = props.selected,
selected = _props$selected === void 0 ? false : _props$selected,
other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "classes", "className", "component", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "divider", "focusVisibleClassName", "selected"]);
var context = React__namespace.useContext(ListContext);
var childContext = {
dense: dense || context.dense || false,
alignItems: alignItems
};
var listItemRef = React__namespace.useRef(null);
useEnhancedEffect$1(function () {
if (autoFocus) {
if (listItemRef.current) {
listItemRef.current.focus();
}
}
}, [autoFocus]);
var children = React__namespace.Children.toArray(childrenProp);
var hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
var handleOwnRef = React__namespace.useCallback(function (instance) {
// #StrictMode ready
listItemRef.current = ReactDOM__namespace.findDOMNode(instance);
}, []);
var handleRef = useForkRef(handleOwnRef, ref);
var componentProps = _extends$1({
className: clsx(classes.root, className, childContext.dense && classes.dense, !disableGutters && classes.gutters, divider && classes.divider, disabled && classes.disabled, button && classes.button, alignItems !== "center" && classes.alignItemsFlexStart, hasSecondaryAction && classes.secondaryAction, selected && classes.selected),
disabled: disabled
}, other);
var Component = componentProp || 'li';
if (button) {
componentProps.component = componentProp || 'div';
componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
Component = ButtonBase$1;
}
if (hasSecondaryAction) {
// Use div by default.
Component = !componentProps.component && !componentProp ? 'div' : Component; // Avoid nesting of li > li.
if (ContainerComponent === 'li') {
if (Component === 'li') {
Component = 'div';
} else if (componentProps.component === 'li') {
componentProps.component = 'div';
}
}
return /*#__PURE__*/React__namespace.createElement(ListContext.Provider, {
value: childContext
}, /*#__PURE__*/React__namespace.createElement(ContainerComponent, _extends$1({
className: clsx(classes.container, ContainerClassName),
ref: handleRef
}, ContainerProps), /*#__PURE__*/React__namespace.createElement(Component, componentProps, children), children.pop()));
}
return /*#__PURE__*/React__namespace.createElement(ListContext.Provider, {
value: childContext
}, /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
ref: handleRef
}, componentProps), children));
});
var ListItem$1 = withStyles(styles$6, {
name: 'MuiListItem'
})(ListItem);
var styles$5 = {
/* Styles applied to the root element. */
root: {
position: 'absolute',
right: 16,
top: '50%',
transform: 'translateY(-50%)'
}
};
/**
* Must be used as the last child of ListItem to function properly.
*/
var ListItemSecondaryAction = /*#__PURE__*/React__namespace.forwardRef(function ListItemSecondaryAction(props, ref) {
var classes = props.classes,
className = props.className,
other = _objectWithoutProperties(props, ["classes", "className"]);
return /*#__PURE__*/React__namespace.createElement("div", _extends$1({
className: clsx(classes.root, className),
ref: ref
}, other));
});
ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
var ListItemSecondaryAction$1 = withStyles(styles$5, {
name: 'MuiListItemSecondaryAction'
})(ListItemSecondaryAction);
var styles$4 = {
/* Styles applied to the root element. */
root: {
flex: '1 1 auto',
minWidth: 0,
marginTop: 4,
marginBottom: 4
},
/* Styles applied to the `Typography` components if primary and secondary are set. */
multiline: {
marginTop: 6,
marginBottom: 6
},
/* Styles applied to the `Typography` components if dense. */
dense: {},
/* Styles applied to the root element if `inset={true}`. */
inset: {
paddingLeft: 56
},
/* Styles applied to the primary `Typography` component. */
primary: {},
/* Styles applied to the secondary `Typography` component. */
secondary: {}
};
var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(props, ref) {
var children = props.children,
classes = props.classes,
className = props.className,
_props$disableTypogra = props.disableTypography,
disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
_props$inset = props.inset,
inset = _props$inset === void 0 ? false : _props$inset,
primaryProp = props.primary,
primaryTypographyProps = props.primaryTypographyProps,
secondaryProp = props.secondary,
secondaryTypographyProps = props.secondaryTypographyProps,
other = _objectWithoutProperties(props, ["children", "classes", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"]);
var _React$useContext = React__namespace.useContext(ListContext),
dense = _React$useContext.dense;
var primary = primaryProp != null ? primaryProp : children;
if (primary != null && primary.type !== Typography$1 && !disableTypography) {
primary = /*#__PURE__*/React__namespace.createElement(Typography$1, _extends$1({
variant: dense ? 'body2' : 'body1',
className: classes.primary,
component: "span",
display: "block"
}, primaryTypographyProps), primary);
}
var secondary = secondaryProp;
if (secondary != null && secondary.type !== Typography$1 && !disableTypography) {
secondary = /*#__PURE__*/React__namespace.createElement(Typography$1, _extends$1({
variant: "body2",
className: classes.secondary,
color: "textSecondary",
display: "block"
}, secondaryTypographyProps), secondary);
}
return /*#__PURE__*/React__namespace.createElement("div", _extends$1({
className: clsx(classes.root, className, dense && classes.dense, inset && classes.inset, primary && secondary && classes.multiline),
ref: ref
}, other), primary, secondary);
});
var ListItemText$1 = withStyles(styles$4, {
name: 'MuiListItemText'
})(ListItemText);
/**!
* @fileOverview Kickass library to create and place poppers near their reference elements.
* @version 1.16.1-lts
* @license
* Copyright (c) 2016 Federico Zivolo and contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
var timeoutDuration = function () {
var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
return 1;
}
}
return 0;
}();
function microtaskDebounce(fn) {
var called = false;
return function () {
if (called) {
return;
}
called = true;
window.Promise.resolve().then(function () {
called = false;
fn();
});
};
}
function taskDebounce(fn) {
var scheduled = false;
return function () {
if (!scheduled) {
scheduled = true;
setTimeout(function () {
scheduled = false;
fn();
}, timeoutDuration);
}
};
}
var supportsMicroTasks = isBrowser && window.Promise;
/**
* Create a debounced version of a method, that's asynchronously deferred
* but called in the minimum time possible.
*
* @method
* @memberof Popper.Utils
* @argument {Function} fn
* @returns {Function}
*/
var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;
/**
* Check if the given variable is a function
* @method
* @memberof Popper.Utils
* @argument {Any} functionToCheck - variable to check
* @returns {Boolean} answer to: is a function?
*/
function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
/**
* Get CSS computed property of the given element
* @method
* @memberof Popper.Utils
* @argument {Eement} element
* @argument {String} property
*/
function getStyleComputedProperty(element, property) {
if (element.nodeType !== 1) {
return [];
} // NOTE: 1 DOM access here
var window = element.ownerDocument.defaultView;
var css = window.getComputedStyle(element, null);
return property ? css[property] : css;
}
/**
* Returns the parentNode or the host of the element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} parent
*/
function getParentNode(element) {
if (element.nodeName === 'HTML') {
return element;
}
return element.parentNode || element.host;
}
/**
* Returns the scrolling parent of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} scroll parent
*/
function getScrollParent(element) {
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
if (!element) {
return document.body;
}
switch (element.nodeName) {
case 'HTML':
case 'BODY':
return element.ownerDocument.body;
case '#document':
return element.body;
} // Firefox want us to check `-x` and `-y` variations as well
var _getStyleComputedProp = getStyleComputedProperty(element),
overflow = _getStyleComputedProp.overflow,
overflowX = _getStyleComputedProp.overflowX,
overflowY = _getStyleComputedProp.overflowY;
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
return element;
}
return getScrollParent(getParentNode(element));
}
/**
* Returns the reference node of the reference object, or the reference object itself.
* @method
* @memberof Popper.Utils
* @param {Element|Object} reference - the reference element (the popper will be relative to this)
* @returns {Element} parent
*/
function getReferenceNode(reference) {
return reference && reference.referenceNode ? reference.referenceNode : reference;
}
var isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);
var isIE10$1 = isBrowser && /MSIE 10/.test(navigator.userAgent);
/**
* Determines if the browser is Internet Explorer
* @method
* @memberof Popper.Utils
* @param {Number} version to check
* @returns {Boolean} isIE
*/
function isIE(version) {
if (version === 11) {
return isIE11;
}
if (version === 10) {
return isIE10$1;
}
return isIE11 || isIE10$1;
}
/**
* Returns the offset parent of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} offset parent
*/
function getOffsetParent(element) {
if (!element) {
return document.documentElement;
}
var noOffsetParent = isIE(10) ? document.body : null; // NOTE: 1 DOM access here
var offsetParent = element.offsetParent || null; // Skip hidden elements which don't have an offsetParent
while (offsetParent === noOffsetParent && element.nextElementSibling) {
offsetParent = (element = element.nextElementSibling).offsetParent;
}
var nodeName = offsetParent && offsetParent.nodeName;
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
return element ? element.ownerDocument.documentElement : document.documentElement;
} // .offsetParent will return the closest TH, TD or TABLE in case
// no offsetParent is present, I hate this job...
if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
return getOffsetParent(offsetParent);
}
return offsetParent;
}
function isOffsetContainer(element) {
var nodeName = element.nodeName;
if (nodeName === 'BODY') {
return false;
}
return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
}
/**
* Finds the root node (document, shadowDOM root) of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} node
* @returns {Element} root node
*/
function getRoot(node) {
if (node.parentNode !== null) {
return getRoot(node.parentNode);
}
return node;
}
/**
* Finds the offset parent common to the two provided nodes
* @method
* @memberof Popper.Utils
* @argument {Element} element1
* @argument {Element} element2
* @returns {Element} common offset parent
*/
function findCommonOffsetParent(element1, element2) {
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
return document.documentElement;
} // Here we make sure to give as "start" the element that comes first in the DOM
var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
var start = order ? element1 : element2;
var end = order ? element2 : element1; // Get common ancestor container
var range = document.createRange();
range.setStart(start, 0);
range.setEnd(end, 0);
var commonAncestorContainer = range.commonAncestorContainer; // Both nodes are inside #document
if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
if (isOffsetContainer(commonAncestorContainer)) {
return commonAncestorContainer;
}
return getOffsetParent(commonAncestorContainer);
} // one of the nodes is inside shadowDOM, find which one
var element1root = getRoot(element1);
if (element1root.host) {
return findCommonOffsetParent(element1root.host, element2);
} else {
return findCommonOffsetParent(element1, getRoot(element2).host);
}
}
/**
* Gets the scroll value of the given element in the given side (top and left)
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @argument {String} side `top` or `left`
* @returns {number} amount of scrolled pixels
*/
function getScroll(element) {
var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
var nodeName = element.nodeName;
if (nodeName === 'BODY' || nodeName === 'HTML') {
var html = element.ownerDocument.documentElement;
var scrollingElement = element.ownerDocument.scrollingElement || html;
return scrollingElement[upperSide];
}
return element[upperSide];
}
/*
* Sum or subtract the element scroll values (left and top) from a given rect object
* @method
* @memberof Popper.Utils
* @param {Object} rect - Rect object you want to change
* @param {HTMLElement} element - The element from the function reads the scroll values
* @param {Boolean} subtract - set to true if you want to subtract the scroll values
* @return {Object} rect - The modifier rect object
*/
function includeScroll(rect, element) {
var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var scrollTop = getScroll(element, 'top');
var scrollLeft = getScroll(element, 'left');
var modifier = subtract ? -1 : 1;
rect.top += scrollTop * modifier;
rect.bottom += scrollTop * modifier;
rect.left += scrollLeft * modifier;
rect.right += scrollLeft * modifier;
return rect;
}
/*
* Helper to detect borders of a given element
* @method
* @memberof Popper.Utils
* @param {CSSStyleDeclaration} styles
* Result of `getStyleComputedProperty` on the given element
* @param {String} axis - `x` or `y`
* @return {number} borders - The borders size of the given axis
*/
function getBordersSize(styles, axis) {
var sideA = axis === 'x' ? 'Left' : 'Top';
var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
}
function getSize(axis, body, html, computedStyle) {
return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
}
function getWindowSizes(document) {
var body = document.body;
var html = document.documentElement;
var computedStyle = isIE(10) && getComputedStyle(html);
return {
height: getSize('Height', body, html, computedStyle),
width: getSize('Width', body, html, computedStyle)
};
}
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
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 defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
};
var _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;
};
/**
* Given element offsets, generate an output similar to getBoundingClientRect
* @method
* @memberof Popper.Utils
* @argument {Object} offsets
* @returns {Object} ClientRect like output
*/
function getClientRect(offsets) {
return _extends({}, offsets, {
right: offsets.left + offsets.width,
bottom: offsets.top + offsets.height
});
}
/**
* Get bounding client rect of given element
* @method
* @memberof Popper.Utils
* @param {HTMLElement} element
* @return {Object} client rect
*/
function getBoundingClientRect(element) {
var rect = {}; // IE10 10 FIX: Please, don't ask, the element isn't
// considered in DOM in some circumstances...
// This isn't reproducible in IE10 compatibility mode of IE11
try {
if (isIE(10)) {
rect = element.getBoundingClientRect();
var scrollTop = getScroll(element, 'top');
var scrollLeft = getScroll(element, 'left');
rect.top += scrollTop;
rect.left += scrollLeft;
rect.bottom += scrollTop;
rect.right += scrollLeft;
} else {
rect = element.getBoundingClientRect();
}
} catch (e) {}
var result = {
left: rect.left,
top: rect.top,
width: rect.right - rect.left,
height: rect.bottom - rect.top
}; // subtract scrollbar size from sizes
var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
var width = sizes.width || element.clientWidth || result.width;
var height = sizes.height || element.clientHeight || result.height;
var horizScrollbar = element.offsetWidth - width;
var vertScrollbar = element.offsetHeight - height; // if an hypothetical scrollbar is detected, we must be sure it's not a `border`
// we make this check conditional for performance reasons
if (horizScrollbar || vertScrollbar) {
var styles = getStyleComputedProperty(element);
horizScrollbar -= getBordersSize(styles, 'x');
vertScrollbar -= getBordersSize(styles, 'y');
result.width -= horizScrollbar;
result.height -= vertScrollbar;
}
return getClientRect(result);
}
function getOffsetRectRelativeToArbitraryNode(children, parent) {
var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var isIE10 = isIE(10);
var isHTML = parent.nodeName === 'HTML';
var childrenRect = getBoundingClientRect(children);
var parentRect = getBoundingClientRect(parent);
var scrollParent = getScrollParent(children);
var styles = getStyleComputedProperty(parent);
var borderTopWidth = parseFloat(styles.borderTopWidth);
var borderLeftWidth = parseFloat(styles.borderLeftWidth); // In cases where the parent is fixed, we must ignore negative scroll in offset calc
if (fixedPosition && isHTML) {
parentRect.top = Math.max(parentRect.top, 0);
parentRect.left = Math.max(parentRect.left, 0);
}
var offsets = getClientRect({
top: childrenRect.top - parentRect.top - borderTopWidth,
left: childrenRect.left - parentRect.left - borderLeftWidth,
width: childrenRect.width,
height: childrenRect.height
});
offsets.marginTop = 0;
offsets.marginLeft = 0; // Subtract margins of documentElement in case it's being used as parent
// we do this only on HTML because it's the only element that behaves
// differently when margins are applied to it. The margins are included in
// the box of the documentElement, in the other cases not.
if (!isIE10 && isHTML) {
var marginTop = parseFloat(styles.marginTop);
var marginLeft = parseFloat(styles.marginLeft);
offsets.top -= borderTopWidth - marginTop;
offsets.bottom -= borderTopWidth - marginTop;
offsets.left -= borderLeftWidth - marginLeft;
offsets.right -= borderLeftWidth - marginLeft; // Attach marginTop and marginLeft because in some circumstances we may need them
offsets.marginTop = marginTop;
offsets.marginLeft = marginLeft;
}
if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
offsets = includeScroll(offsets, parent);
}
return offsets;
}
function getViewportOffsetRectRelativeToArtbitraryNode(element) {
var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var html = element.ownerDocument.documentElement;
var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
var width = Math.max(html.clientWidth, window.innerWidth || 0);
var height = Math.max(html.clientHeight, window.innerHeight || 0);
var scrollTop = !excludeScroll ? getScroll(html) : 0;
var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
var offset = {
top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
width: width,
height: height
};
return getClientRect(offset);
}
/**
* Check if the given element is fixed or is inside a fixed parent
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @argument {Element} customContainer
* @returns {Boolean} answer to "isFixed?"
*/
function isFixed(element) {
var nodeName = element.nodeName;
if (nodeName === 'BODY' || nodeName === 'HTML') {
return false;
}
if (getStyleComputedProperty(element, 'position') === 'fixed') {
return true;
}
var parentNode = getParentNode(element);
if (!parentNode) {
return false;
}
return isFixed(parentNode);
}
/**
* Finds the first parent of an element that has a transformed property defined
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} first transformed parent or documentElement
*/
function getFixedPositionOffsetParent(element) {
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
if (!element || !element.parentElement || isIE()) {
return document.documentElement;
}
var el = element.parentElement;
while (el && getStyleComputedProperty(el, 'transform') === 'none') {
el = el.parentElement;
}
return el || document.documentElement;
}
/**
* Computed the boundaries limits and return them
* @method
* @memberof Popper.Utils
* @param {HTMLElement} popper
* @param {HTMLElement} reference
* @param {number} padding
* @param {HTMLElement} boundariesElement - Element used to define the boundaries
* @param {Boolean} fixedPosition - Is in fixed position mode
* @returns {Object} Coordinates of the boundaries
*/
function getBoundaries(popper, reference, padding, boundariesElement) {
var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; // NOTE: 1 DOM access here
var boundaries = {
top: 0,
left: 0
};
var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference)); // Handle viewport case
if (boundariesElement === 'viewport') {
boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
} else {
// Handle other cases based on DOM element used as boundaries
var boundariesNode = void 0;
if (boundariesElement === 'scrollParent') {
boundariesNode = getScrollParent(getParentNode(reference));
if (boundariesNode.nodeName === 'BODY') {
boundariesNode = popper.ownerDocument.documentElement;
}
} else if (boundariesElement === 'window') {
boundariesNode = popper.ownerDocument.documentElement;
} else {
boundariesNode = boundariesElement;
}
var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition); // In case of HTML, we need a different computation
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
var _getWindowSizes = getWindowSizes(popper.ownerDocument),
height = _getWindowSizes.height,
width = _getWindowSizes.width;
boundaries.top += offsets.top - offsets.marginTop;
boundaries.bottom = height + offsets.top;
boundaries.left += offsets.left - offsets.marginLeft;
boundaries.right = width + offsets.left;
} else {
// for all the other DOM elements, this one is good
boundaries = offsets;
}
} // Add paddings
padding = padding || 0;
var isPaddingNumber = typeof padding === 'number';
boundaries.left += isPaddingNumber ? padding : padding.left || 0;
boundaries.top += isPaddingNumber ? padding : padding.top || 0;
boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
return boundaries;
}
function getArea(_ref) {
var width = _ref.width,
height = _ref.height;
return width * height;
}
/**
* Utility used to transform the `auto` placement to the placement with more
* available space.
* @method
* @memberof Popper.Utils
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
if (placement.indexOf('auto') === -1) {
return placement;
}
var boundaries = getBoundaries(popper, reference, padding, boundariesElement);
var rects = {
top: {
width: boundaries.width,
height: refRect.top - boundaries.top
},
right: {
width: boundaries.right - refRect.right,
height: boundaries.height
},
bottom: {
width: boundaries.width,
height: boundaries.bottom - refRect.bottom
},
left: {
width: refRect.left - boundaries.left,
height: boundaries.height
}
};
var sortedAreas = Object.keys(rects).map(function (key) {
return _extends({
key: key
}, rects[key], {
area: getArea(rects[key])
});
}).sort(function (a, b) {
return b.area - a.area;
});
var filteredAreas = sortedAreas.filter(function (_ref2) {
var width = _ref2.width,
height = _ref2.height;
return width >= popper.clientWidth && height >= popper.clientHeight;
});
var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
var variation = placement.split('-')[1];
return computedPlacement + (variation ? '-' + variation : '');
}
/**
* Get offsets to the reference element
* @method
* @memberof Popper.Utils
* @param {Object} state
* @param {Element} popper - the popper element
* @param {Element} reference - the reference element (the popper will be relative to this)
* @param {Element} fixedPosition - is in fixed position mode
* @returns {Object} An object containing the offsets which will be applied to the popper
*/
function getReferenceOffsets(state, popper, reference) {
var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
}
/**
* Get the outer sizes of the given element (offset size + margins)
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Object} object containing width and height properties
*/
function getOuterSizes(element) {
var window = element.ownerDocument.defaultView;
var styles = window.getComputedStyle(element);
var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
var result = {
width: element.offsetWidth + y,
height: element.offsetHeight + x
};
return result;
}
/**
* Get the opposite placement of the given one
* @method
* @memberof Popper.Utils
* @argument {String} placement
* @returns {String} flipped placement
*/
function getOppositePlacement(placement) {
var hash = {
left: 'right',
right: 'left',
bottom: 'top',
top: 'bottom'
};
return placement.replace(/left|right|bottom|top/g, function (matched) {
return hash[matched];
});
}
/**
* Get offsets to the popper
* @method
* @memberof Popper.Utils
* @param {Object} position - CSS position the Popper will get applied
* @param {HTMLElement} popper - the popper element
* @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
* @param {String} placement - one of the valid placement options
* @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
*/
function getPopperOffsets(popper, referenceOffsets, placement) {
placement = placement.split('-')[0]; // Get popper node sizes
var popperRect = getOuterSizes(popper); // Add position, width and height to our offsets object
var popperOffsets = {
width: popperRect.width,
height: popperRect.height
}; // depending by the popper placement we have to compute its offsets slightly differently
var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
var mainSide = isHoriz ? 'top' : 'left';
var secondarySide = isHoriz ? 'left' : 'top';
var measurement = isHoriz ? 'height' : 'width';
var secondaryMeasurement = !isHoriz ? 'height' : 'width';
popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
if (placement === secondarySide) {
popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
} else {
popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];
}
return popperOffsets;
}
/**
* Mimics the `find` method of Array
* @method
* @memberof Popper.Utils
* @argument {Array} arr
* @argument prop
* @argument value
* @returns index or -1
*/
function find(arr, check) {
// use native find if supported
if (Array.prototype.find) {
return arr.find(check);
} // use `filter` to obtain the same behavior of `find`
return arr.filter(check)[0];
}
/**
* Return the index of the matching object
* @method
* @memberof Popper.Utils
* @argument {Array} arr
* @argument prop
* @argument value
* @returns index or -1
*/
function findIndex(arr, prop, value) {
// use native findIndex if supported
if (Array.prototype.findIndex) {
return arr.findIndex(function (cur) {
return cur[prop] === value;
});
} // use `find` + `indexOf` if `findIndex` isn't supported
var match = find(arr, function (obj) {
return obj[prop] === value;
});
return arr.indexOf(match);
}
/**
* Loop trough the list of modifiers and run them in order,
* each of them will then edit the data object.
* @method
* @memberof Popper.Utils
* @param {dataObject} data
* @param {Array} modifiers
* @param {String} ends - Optional modifier name used as stopper
* @returns {dataObject}
*/
function runModifiers(modifiers, data, ends) {
var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
modifiersToRun.forEach(function (modifier) {
if (modifier['function']) {
// eslint-disable-line dot-notation
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
}
var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
if (modifier.enabled && isFunction(fn)) {
// Add properties to offsets to make them a complete clientRect object
// we do this before each modifier to make sure the previous one doesn't
// mess with these values
data.offsets.popper = getClientRect(data.offsets.popper);
data.offsets.reference = getClientRect(data.offsets.reference);
data = fn(data, modifier);
}
});
return data;
}
/**
* Updates the position of the popper, computing the new offsets and applying
* the new style.<br />
* Prefer `scheduleUpdate` over `update` because of performance reasons.
* @method
* @memberof Popper
*/
function update() {
// if popper is destroyed, don't perform any further update
if (this.state.isDestroyed) {
return;
}
var data = {
instance: this,
styles: {},
arrowStyles: {},
attributes: {},
flipped: false,
offsets: {}
}; // compute reference element offsets
data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed); // compute auto placement, store placement inside the data object,
// modifiers will be able to edit `placement` if needed
// and refer to originalPlacement to know the original value
data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding); // store the computed placement inside `originalPlacement`
data.originalPlacement = data.placement;
data.positionFixed = this.options.positionFixed; // compute the popper offsets
data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);
data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute'; // run the modifiers
data = runModifiers(this.modifiers, data); // the first `update` will call `onCreate` callback
// the other ones will call `onUpdate` callback
if (!this.state.isCreated) {
this.state.isCreated = true;
this.options.onCreate(data);
} else {
this.options.onUpdate(data);
}
}
/**
* Helper used to know if the given modifier is enabled.
* @method
* @memberof Popper.Utils
* @returns {Boolean}
*/
function isModifierEnabled(modifiers, modifierName) {
return modifiers.some(function (_ref) {
var name = _ref.name,
enabled = _ref.enabled;
return enabled && name === modifierName;
});
}
/**
* Get the prefixed supported property name
* @method
* @memberof Popper.Utils
* @argument {String} property (camelCase)
* @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
*/
function getSupportedPropertyName(property) {
var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
var toCheck = prefix ? '' + prefix + upperProp : property;
if (typeof document.body.style[toCheck] !== 'undefined') {
return toCheck;
}
}
return null;
}
/**
* Destroys the popper.
* @method
* @memberof Popper
*/
function destroy() {
this.state.isDestroyed = true; // touch DOM only if `applyStyle` modifier is enabled
if (isModifierEnabled(this.modifiers, 'applyStyle')) {
this.popper.removeAttribute('x-placement');
this.popper.style.position = '';
this.popper.style.top = '';
this.popper.style.left = '';
this.popper.style.right = '';
this.popper.style.bottom = '';
this.popper.style.willChange = '';
this.popper.style[getSupportedPropertyName('transform')] = '';
}
this.disableEventListeners(); // remove the popper if user explicitly asked for the deletion on destroy
// do not use `remove` because IE11 doesn't support it
if (this.options.removeOnDestroy) {
this.popper.parentNode.removeChild(this.popper);
}
return this;
}
/**
* Get the window associated with the element
* @argument {Element} element
* @returns {Window}
*/
function getWindow(element) {
var ownerDocument = element.ownerDocument;
return ownerDocument ? ownerDocument.defaultView : window;
}
function attachToScrollParents(scrollParent, event, callback, scrollParents) {
var isBody = scrollParent.nodeName === 'BODY';
var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
target.addEventListener(event, callback, {
passive: true
});
if (!isBody) {
attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);
}
scrollParents.push(target);
}
/**
* Setup needed event listeners used to update the popper position
* @method
* @memberof Popper.Utils
* @private
*/
function setupEventListeners(reference, options, state, updateBound) {
// Resize event listener on window
state.updateBound = updateBound;
getWindow(reference).addEventListener('resize', state.updateBound, {
passive: true
}); // Scroll event listener on scroll parents
var scrollElement = getScrollParent(reference);
attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
state.scrollElement = scrollElement;
state.eventsEnabled = true;
return state;
}
/**
* It will add resize/scroll events and start recalculating
* position of the popper element when they are triggered.
* @method
* @memberof Popper
*/
function enableEventListeners() {
if (!this.state.eventsEnabled) {
this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
}
}
/**
* Remove event listeners used to update the popper position
* @method
* @memberof Popper.Utils
* @private
*/
function removeEventListeners(reference, state) {
// Remove resize event listener on window
getWindow(reference).removeEventListener('resize', state.updateBound); // Remove scroll event listener on scroll parents
state.scrollParents.forEach(function (target) {
target.removeEventListener('scroll', state.updateBound);
}); // Reset state
state.updateBound = null;
state.scrollParents = [];
state.scrollElement = null;
state.eventsEnabled = false;
return state;
}
/**
* It will remove resize/scroll events and won't recalculate popper position
* when they are triggered. It also won't trigger `onUpdate` callback anymore,
* unless you call `update` method manually.
* @method
* @memberof Popper
*/
function disableEventListeners() {
if (this.state.eventsEnabled) {
cancelAnimationFrame(this.scheduleUpdate);
this.state = removeEventListeners(this.reference, this.state);
}
}
/**
* Tells if a given input is a number
* @method
* @memberof Popper.Utils
* @param {*} input to check
* @return {Boolean}
*/
function isNumeric(n) {
return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
}
/**
* Set the style to the given popper
* @method
* @memberof Popper.Utils
* @argument {Element} element - Element to apply the style to
* @argument {Object} styles
* Object with a list of properties and values which will be applied to the element
*/
function setStyles(element, styles) {
Object.keys(styles).forEach(function (prop) {
var unit = ''; // add unit if the value is numeric and is one of the following
if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
unit = 'px';
}
element.style[prop] = styles[prop] + unit;
});
}
/**
* Set the attributes to the given popper
* @method
* @memberof Popper.Utils
* @argument {Element} element - Element to apply the attributes to
* @argument {Object} styles
* Object with a list of properties and values which will be applied to the element
*/
function setAttributes(element, attributes) {
Object.keys(attributes).forEach(function (prop) {
var value = attributes[prop];
if (value !== false) {
element.setAttribute(prop, attributes[prop]);
} else {
element.removeAttribute(prop);
}
});
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} data.styles - List of style properties - values to apply to popper element
* @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The same data object
*/
function applyStyle(data) {
// any property present in `data.styles` will be applied to the popper,
// in this way we can make the 3rd party modifiers add custom styles to it
// Be aware, modifiers could override the properties defined in the previous
// lines of this modifier!
setStyles(data.instance.popper, data.styles); // any property present in `data.attributes` will be applied to the popper,
// they will be set as HTML attributes of the element
setAttributes(data.instance.popper, data.attributes); // if arrowElement is defined and arrowStyles has some properties
if (data.arrowElement && Object.keys(data.arrowStyles).length) {
setStyles(data.arrowElement, data.arrowStyles);
}
return data;
}
/**
* Set the x-placement attribute before everything else because it could be used
* to add margins to the popper margins needs to be calculated to get the
* correct popper offsets.
* @method
* @memberof Popper.modifiers
* @param {HTMLElement} reference - The reference element used to position the popper
* @param {HTMLElement} popper - The HTML element used as popper
* @param {Object} options - Popper.js options
*/
function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
// compute reference element offsets
var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed); // compute auto placement, store placement inside the data object,
// modifiers will be able to edit `placement` if needed
// and refer to originalPlacement to know the original value
var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);
popper.setAttribute('x-placement', placement); // Apply `position` to popper before anything else because
// without the position applied we can't guarantee correct computations
setStyles(popper, {
position: options.positionFixed ? 'fixed' : 'absolute'
});
return options;
}
/**
* @function
* @memberof Popper.Utils
* @argument {Object} data - The data object generated by `update` method
* @argument {Boolean} shouldRound - If the offsets should be rounded at all
* @returns {Object} The popper's position offsets rounded
*
* The tale of pixel-perfect positioning. It's still not 100% perfect, but as
* good as it can be within reason.
* Discussion here: https://github.com/FezVrasta/popper.js/pull/715
*
* Low DPI screens cause a popper to be blurry if not using full pixels (Safari
* as well on High DPI screens).
*
* Firefox prefers no rounding for positioning and does not have blurriness on
* high DPI screens.
*
* Only horizontal placement and left/right values need to be considered.
*/
function getRoundedOffsets(data, shouldRound) {
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var round = Math.round,
floor = Math.floor;
var noRound = function noRound(v) {
return v;
};
var referenceWidth = round(reference.width);
var popperWidth = round(popper.width);
var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
var isVariation = data.placement.indexOf('-') !== -1;
var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
var verticalToInteger = !shouldRound ? noRound : round;
return {
left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
top: verticalToInteger(popper.top),
bottom: verticalToInteger(popper.bottom),
right: horizontalToInteger(popper.right)
};
}
var isFirefox = isBrowser && /Firefox/i.test(navigator.userAgent);
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function computeStyle(data, options) {
var x = options.x,
y = options.y;
var popper = data.offsets.popper; // Remove this legacy support in Popper.js v2
var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
return modifier.name === 'applyStyle';
}).gpuAcceleration;
if (legacyGpuAccelerationOption !== undefined) {
console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
}
var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;
var offsetParent = getOffsetParent(data.instance.popper);
var offsetParentRect = getBoundingClientRect(offsetParent); // Styles
var styles = {
position: popper.position
};
var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);
var sideA = x === 'bottom' ? 'top' : 'bottom';
var sideB = y === 'right' ? 'left' : 'right'; // if gpuAcceleration is set to `true` and transform is supported,
// we use `translate3d` to apply the position to the popper we
// automatically use the supported prefixed version if needed
var prefixedProperty = getSupportedPropertyName('transform'); // now, let's make a step back and look at this code closely (wtf?)
// If the content of the popper grows once it's been positioned, it
// may happen that the popper gets misplaced because of the new content
// overflowing its reference element
// To avoid this problem, we provide two options (x and y), which allow
// the consumer to define the offset origin.
// If we position a popper on top of a reference element, we can set
// `x` to `top` to make the popper grow towards its top instead of
// its bottom.
var left = void 0,
top = void 0;
if (sideA === 'bottom') {
// when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)
// and not the bottom of the html element
if (offsetParent.nodeName === 'HTML') {
top = -offsetParent.clientHeight + offsets.bottom;
} else {
top = -offsetParentRect.height + offsets.bottom;
}
} else {
top = offsets.top;
}
if (sideB === 'right') {
if (offsetParent.nodeName === 'HTML') {
left = -offsetParent.clientWidth + offsets.right;
} else {
left = -offsetParentRect.width + offsets.right;
}
} else {
left = offsets.left;
}
if (gpuAcceleration && prefixedProperty) {
styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
styles[sideA] = 0;
styles[sideB] = 0;
styles.willChange = 'transform';
} else {
// othwerise, we use the standard `top`, `left`, `bottom` and `right` properties
var invertTop = sideA === 'bottom' ? -1 : 1;
var invertLeft = sideB === 'right' ? -1 : 1;
styles[sideA] = top * invertTop;
styles[sideB] = left * invertLeft;
styles.willChange = sideA + ', ' + sideB;
} // Attributes
var attributes = {
'x-placement': data.placement
}; // Update `data` attributes, styles and arrowStyles
data.attributes = _extends({}, attributes, data.attributes);
data.styles = _extends({}, styles, data.styles);
data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
return data;
}
/**
* Helper used to know if the given modifier depends from another one.<br />
* It checks if the needed modifier is listed and enabled.
* @method
* @memberof Popper.Utils
* @param {Array} modifiers - list of modifiers
* @param {String} requestingName - name of requesting modifier
* @param {String} requestedName - name of requested modifier
* @returns {Boolean}
*/
function isModifierRequired(modifiers, requestingName, requestedName) {
var requesting = find(modifiers, function (_ref) {
var name = _ref.name;
return name === requestingName;
});
var isRequired = !!requesting && modifiers.some(function (modifier) {
return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
});
if (!isRequired) {
var _requesting = '`' + requestingName + '`';
var requested = '`' + requestedName + '`';
console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
}
return isRequired;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function arrow(data, options) {
var _data$offsets$arrow; // arrow depends on keepTogether in order to work
if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
return data;
}
var arrowElement = options.element; // if arrowElement is a string, suppose it's a CSS selector
if (typeof arrowElement === 'string') {
arrowElement = data.instance.popper.querySelector(arrowElement); // if arrowElement is not found, don't run the modifier
if (!arrowElement) {
return data;
}
} else {
// if the arrowElement isn't a query selector we must check that the
// provided DOM node is child of its popper node
if (!data.instance.popper.contains(arrowElement)) {
console.warn('WARNING: `arrow.element` must be child of its popper element!');
return data;
}
}
var placement = data.placement.split('-')[0];
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var isVertical = ['left', 'right'].indexOf(placement) !== -1;
var len = isVertical ? 'height' : 'width';
var sideCapitalized = isVertical ? 'Top' : 'Left';
var side = sideCapitalized.toLowerCase();
var altSide = isVertical ? 'left' : 'top';
var opSide = isVertical ? 'bottom' : 'right';
var arrowElementSize = getOuterSizes(arrowElement)[len]; //
// extends keepTogether behavior making sure the popper and its
// reference have enough pixels in conjunction
//
// top/left side
if (reference[opSide] - arrowElementSize < popper[side]) {
data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
} // bottom/right side
if (reference[side] + arrowElementSize > popper[opSide]) {
data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
}
data.offsets.popper = getClientRect(data.offsets.popper); // compute center of the popper
var center = reference[side] + reference[len] / 2 - arrowElementSize / 2; // Compute the sideValue using the updated popper offsets
// take popper margin in account because we don't have this info available
var css = getStyleComputedProperty(data.instance.popper);
var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);
var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);
var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide; // prevent arrowElement from being placed not contiguously to its popper
sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
data.arrowElement = arrowElement;
data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);
return data;
}
/**
* Get the opposite placement variation of the given one
* @method
* @memberof Popper.Utils
* @argument {String} placement variation
* @returns {String} flipped placement variation
*/
function getOppositeVariation(variation) {
if (variation === 'end') {
return 'start';
} else if (variation === 'start') {
return 'end';
}
return variation;
}
/**
* List of accepted placements to use as values of the `placement` option.<br />
* Valid placements are:
* - `auto`
* - `top`
* - `right`
* - `bottom`
* - `left`
*
* Each placement can have a variation from this list:
* - `-start`
* - `-end`
*
* Variations are interpreted easily if you think of them as the left to right
* written languages. Horizontally (`top` and `bottom`), `start` is left and `end`
* is right.<br />
* Vertically (`left` and `right`), `start` is top and `end` is bottom.
*
* Some valid examples are:
* - `top-end` (on top of reference, right aligned)
* - `right-start` (on right of reference, top aligned)
* - `bottom` (on bottom, centered)
* - `auto-end` (on the side with more space available, alignment depends by placement)
*
* @static
* @type {Array}
* @enum {String}
* @readonly
* @method placements
* @memberof Popper
*/
var placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']; // Get rid of `auto` `auto-start` and `auto-end`
var validPlacements = placements.slice(3);
/**
* Given an initial placement, returns all the subsequent placements
* clockwise (or counter-clockwise).
*
* @method
* @memberof Popper.Utils
* @argument {String} placement - A valid placement (it accepts variations)
* @argument {Boolean} counter - Set to true to walk the placements counterclockwise
* @returns {Array} placements including their variations
*/
function clockwise(placement) {
var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var index = validPlacements.indexOf(placement);
var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
return counter ? arr.reverse() : arr;
}
var BEHAVIORS = {
FLIP: 'flip',
CLOCKWISE: 'clockwise',
COUNTERCLOCKWISE: 'counterclockwise'
};
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function flip(data, options) {
// if `inner` modifier is enabled, we can't use the `flip` modifier
if (isModifierEnabled(data.instance.modifiers, 'inner')) {
return data;
}
if (data.flipped && data.placement === data.originalPlacement) {
// seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
return data;
}
var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);
var placement = data.placement.split('-')[0];
var placementOpposite = getOppositePlacement(placement);
var variation = data.placement.split('-')[1] || '';
var flipOrder = [];
switch (options.behavior) {
case BEHAVIORS.FLIP:
flipOrder = [placement, placementOpposite];
break;
case BEHAVIORS.CLOCKWISE:
flipOrder = clockwise(placement);
break;
case BEHAVIORS.COUNTERCLOCKWISE:
flipOrder = clockwise(placement, true);
break;
default:
flipOrder = options.behavior;
}
flipOrder.forEach(function (step, index) {
if (placement !== step || flipOrder.length === index + 1) {
return data;
}
placement = data.placement.split('-')[0];
placementOpposite = getOppositePlacement(placement);
var popperOffsets = data.offsets.popper;
var refOffsets = data.offsets.reference; // using floor because the reference offsets may contain decimals we are not going to consider here
var floor = Math.floor;
var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);
var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom; // flip the variation if required
var isVertical = ['top', 'bottom'].indexOf(placement) !== -1; // flips variation if reference element overflows boundaries
var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom); // flips variation if popper content overflows boundaries
var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);
var flippedVariation = flippedVariationByRef || flippedVariationByContent;
if (overlapsRef || overflowsBoundaries || flippedVariation) {
// this boolean to detect any flip loop
data.flipped = true;
if (overlapsRef || overflowsBoundaries) {
placement = flipOrder[index + 1];
}
if (flippedVariation) {
variation = getOppositeVariation(variation);
}
data.placement = placement + (variation ? '-' + variation : ''); // this object contains `position`, we want to preserve it along with
// any additional property we may add in the future
data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
data = runModifiers(data.instance.modifiers, data, 'flip');
}
});
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function keepTogether(data) {
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var placement = data.placement.split('-')[0];
var floor = Math.floor;
var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
var side = isVertical ? 'right' : 'bottom';
var opSide = isVertical ? 'left' : 'top';
var measurement = isVertical ? 'width' : 'height';
if (popper[side] < floor(reference[opSide])) {
data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
}
if (popper[opSide] > floor(reference[side])) {
data.offsets.popper[opSide] = floor(reference[side]);
}
return data;
}
/**
* Converts a string containing value + unit into a px value number
* @function
* @memberof {modifiers~offset}
* @private
* @argument {String} str - Value + unit string
* @argument {String} measurement - `height` or `width`
* @argument {Object} popperOffsets
* @argument {Object} referenceOffsets
* @returns {Number|String}
* Value in pixels, or original string if no values were extracted
*/
function toValue(str, measurement, popperOffsets, referenceOffsets) {
// separate value from unit
var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
var value = +split[1];
var unit = split[2]; // If it's not a number it's an operator, I guess
if (!value) {
return str;
}
if (unit.indexOf('%') === 0) {
var element = void 0;
switch (unit) {
case '%p':
element = popperOffsets;
break;
case '%':
case '%r':
default:
element = referenceOffsets;
}
var rect = getClientRect(element);
return rect[measurement] / 100 * value;
} else if (unit === 'vh' || unit === 'vw') {
// if is a vh or vw, we calculate the size based on the viewport
var size = void 0;
if (unit === 'vh') {
size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
} else {
size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
}
return size / 100 * value;
} else {
// if is an explicit pixel unit, we get rid of the unit and keep the value
// if is an implicit unit, it's px, and we return just the value
return value;
}
}
/**
* Parse an `offset` string to extrapolate `x` and `y` numeric offsets.
* @function
* @memberof {modifiers~offset}
* @private
* @argument {String} offset
* @argument {Object} popperOffsets
* @argument {Object} referenceOffsets
* @argument {String} basePlacement
* @returns {Array} a two cells array with x and y offsets in numbers
*/
function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {
var offsets = [0, 0]; // Use height if placement is left or right and index is 0 otherwise use width
// in this way the first offset will use an axis and the second one
// will use the other one
var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1; // Split the offset string to obtain a list of values and operands
// The regex addresses values with the plus or minus sign in front (+10, -20, etc)
var fragments = offset.split(/(\+|\-)/).map(function (frag) {
return frag.trim();
}); // Detect if the offset string contains a pair of values or a single one
// they could be separated by comma or space
var divider = fragments.indexOf(find(fragments, function (frag) {
return frag.search(/,|\s/) !== -1;
}));
if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
} // If divider is found, we divide the list of values and operands to divide
// them by ofset X and Y.
var splitRegex = /\s*,\s*|\s+/;
var ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments]; // Convert the values with units to absolute pixels to allow our computations
ops = ops.map(function (op, index) {
// Most of the units rely on the orientation of the popper
var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
var mergeWithPrevious = false;
return op // This aggregates any `+` or `-` sign that aren't considered operators
// e.g.: 10 + +5 => [10, +, +5]
.reduce(function (a, b) {
if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
a[a.length - 1] = b;
mergeWithPrevious = true;
return a;
} else if (mergeWithPrevious) {
a[a.length - 1] += b;
mergeWithPrevious = false;
return a;
} else {
return a.concat(b);
}
}, []) // Here we convert the string values into number values (in px)
.map(function (str) {
return toValue(str, measurement, popperOffsets, referenceOffsets);
});
}); // Loop trough the offsets arrays and execute the operations
ops.forEach(function (op, index) {
op.forEach(function (frag, index2) {
if (isNumeric(frag)) {
offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
}
});
});
return offsets;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @argument {Number|String} options.offset=0
* The offset value as described in the modifier description
* @returns {Object} The data object, properly modified
*/
function offset(data, _ref) {
var offset = _ref.offset;
var placement = data.placement,
_data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var basePlacement = placement.split('-')[0];
var offsets = void 0;
if (isNumeric(+offset)) {
offsets = [+offset, 0];
} else {
offsets = parseOffset(offset, popper, reference, basePlacement);
}
if (basePlacement === 'left') {
popper.top += offsets[0];
popper.left -= offsets[1];
} else if (basePlacement === 'right') {
popper.top += offsets[0];
popper.left += offsets[1];
} else if (basePlacement === 'top') {
popper.left += offsets[0];
popper.top -= offsets[1];
} else if (basePlacement === 'bottom') {
popper.left += offsets[0];
popper.top += offsets[1];
}
data.popper = popper;
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function preventOverflow(data, options) {
var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper); // If offsetParent is the reference element, we really want to
// go one step up and use the next offsetParent as reference to
// avoid to make this modifier completely useless and look like broken
if (data.instance.reference === boundariesElement) {
boundariesElement = getOffsetParent(boundariesElement);
} // NOTE: DOM access here
// resets the popper's position so that the document size can be calculated excluding
// the size of the popper element itself
var transformProp = getSupportedPropertyName('transform');
var popperStyles = data.instance.popper.style; // assignment to help minification
var top = popperStyles.top,
left = popperStyles.left,
transform = popperStyles[transformProp];
popperStyles.top = '';
popperStyles.left = '';
popperStyles[transformProp] = '';
var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed); // NOTE: DOM access here
// restores the original style properties after the offsets have been computed
popperStyles.top = top;
popperStyles.left = left;
popperStyles[transformProp] = transform;
options.boundaries = boundaries;
var order = options.priority;
var popper = data.offsets.popper;
var check = {
primary: function primary(placement) {
var value = popper[placement];
if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
value = Math.max(popper[placement], boundaries[placement]);
}
return defineProperty({}, placement, value);
},
secondary: function secondary(placement) {
var mainSide = placement === 'right' ? 'left' : 'top';
var value = popper[mainSide];
if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
}
return defineProperty({}, mainSide, value);
}
};
order.forEach(function (placement) {
var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
popper = _extends({}, popper, check[side](placement));
});
data.offsets.popper = popper;
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function shift(data) {
var placement = data.placement;
var basePlacement = placement.split('-')[0];
var shiftvariation = placement.split('-')[1]; // if shift shiftvariation is specified, run the modifier
if (shiftvariation) {
var _data$offsets = data.offsets,
reference = _data$offsets.reference,
popper = _data$offsets.popper;
var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
var side = isVertical ? 'left' : 'top';
var measurement = isVertical ? 'width' : 'height';
var shiftOffsets = {
start: defineProperty({}, side, reference[side]),
end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
};
data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
}
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function hide(data) {
if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
return data;
}
var refRect = data.offsets.reference;
var bound = find(data.instance.modifiers, function (modifier) {
return modifier.name === 'preventOverflow';
}).boundaries;
if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
// Avoid unnecessary DOM access if visibility hasn't changed
if (data.hide === true) {
return data;
}
data.hide = true;
data.attributes['x-out-of-boundaries'] = '';
} else {
// Avoid unnecessary DOM access if visibility hasn't changed
if (data.hide === false) {
return data;
}
data.hide = false;
data.attributes['x-out-of-boundaries'] = false;
}
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function inner(data) {
var placement = data.placement;
var basePlacement = placement.split('-')[0];
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
data.placement = getOppositePlacement(placement);
data.offsets.popper = getClientRect(popper);
return data;
}
/**
* Modifier function, each modifier can have a function of this type assigned
* to its `fn` property.<br />
* These functions will be called on each update, this means that you must
* make sure they are performant enough to avoid performance bottlenecks.
*
* @function ModifierFn
* @argument {dataObject} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {dataObject} The data object, properly modified
*/
/**
* Modifiers are plugins used to alter the behavior of your poppers.<br />
* Popper.js uses a set of 9 modifiers to provide all the basic functionalities
* needed by the library.
*
* Usually you don't want to override the `order`, `fn` and `onLoad` props.
* All the other properties are configurations that could be tweaked.
* @namespace modifiers
*/
var modifiers = {
/**
* Modifier used to shift the popper on the start or end of its reference
* element.<br />
* It will read the variation of the `placement` property.<br />
* It can be one either `-end` or `-start`.
* @memberof modifiers
* @inner
*/
shift: {
/** @prop {number} order=100 - Index used to define the order of execution */
order: 100,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: shift
},
/**
* The `offset` modifier can shift your popper on both its axis.
*
* It accepts the following units:
* - `px` or unit-less, interpreted as pixels
* - `%` or `%r`, percentage relative to the length of the reference element
* - `%p`, percentage relative to the length of the popper element
* - `vw`, CSS viewport width unit
* - `vh`, CSS viewport height unit
*
* For length is intended the main axis relative to the placement of the popper.<br />
* This means that if the placement is `top` or `bottom`, the length will be the
* `width`. In case of `left` or `right`, it will be the `height`.
*
* You can provide a single value (as `Number` or `String`), or a pair of values
* as `String` divided by a comma or one (or more) white spaces.<br />
* The latter is a deprecated method because it leads to confusion and will be
* removed in v2.<br />
* Additionally, it accepts additions and subtractions between different units.
* Note that multiplications and divisions aren't supported.
*
* Valid examples are:
* ```
* 10
* '10%'
* '10, 10'
* '10%, 10'
* '10 + 10%'
* '10 - 5vh + 3%'
* '-10px + 5vh, 5px - 6%'
* ```
* > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
* > with their reference element, unfortunately, you will have to disable the `flip` modifier.
* > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
*
* @memberof modifiers
* @inner
*/
offset: {
/** @prop {number} order=200 - Index used to define the order of execution */
order: 200,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: offset,
/** @prop {Number|String} offset=0
* The offset value as described in the modifier description
*/
offset: 0
},
/**
* Modifier used to prevent the popper from being positioned outside the boundary.
*
* A scenario exists where the reference itself is not within the boundaries.<br />
* We can say it has "escaped the boundaries" — or just "escaped".<br />
* In this case we need to decide whether the popper should either:
*
* - detach from the reference and remain "trapped" in the boundaries, or
* - if it should ignore the boundary and "escape with its reference"
*
* When `escapeWithReference` is set to`true` and reference is completely
* outside its boundaries, the popper will overflow (or completely leave)
* the boundaries in order to remain attached to the edge of the reference.
*
* @memberof modifiers
* @inner
*/
preventOverflow: {
/** @prop {number} order=300 - Index used to define the order of execution */
order: 300,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: preventOverflow,
/**
* @prop {Array} [priority=['left','right','top','bottom']]
* Popper will try to prevent overflow following these priorities by default,
* then, it could overflow on the left and on top of the `boundariesElement`
*/
priority: ['left', 'right', 'top', 'bottom'],
/**
* @prop {number} padding=5
* Amount of pixel used to define a minimum distance between the boundaries
* and the popper. This makes sure the popper always has a little padding
* between the edges of its container
*/
padding: 5,
/**
* @prop {String|HTMLElement} boundariesElement='scrollParent'
* Boundaries used by the modifier. Can be `scrollParent`, `window`,
* `viewport` or any DOM element.
*/
boundariesElement: 'scrollParent'
},
/**
* Modifier used to make sure the reference and its popper stay near each other
* without leaving any gap between the two. Especially useful when the arrow is
* enabled and you want to ensure that it points to its reference element.
* It cares only about the first axis. You can still have poppers with margin
* between the popper and its reference element.
* @memberof modifiers
* @inner
*/
keepTogether: {
/** @prop {number} order=400 - Index used to define the order of execution */
order: 400,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: keepTogether
},
/**
* This modifier is used to move the `arrowElement` of the popper to make
* sure it is positioned between the reference element and its popper element.
* It will read the outer size of the `arrowElement` node to detect how many
* pixels of conjunction are needed.
*
* It has no effect if no `arrowElement` is provided.
* @memberof modifiers
* @inner
*/
arrow: {
/** @prop {number} order=500 - Index used to define the order of execution */
order: 500,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: arrow,
/** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
element: '[x-arrow]'
},
/**
* Modifier used to flip the popper's placement when it starts to overlap its
* reference element.
*
* Requires the `preventOverflow` modifier before it in order to work.
*
* **NOTE:** this modifier will interrupt the current update cycle and will
* restart it if it detects the need to flip the placement.
* @memberof modifiers
* @inner
*/
flip: {
/** @prop {number} order=600 - Index used to define the order of execution */
order: 600,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: flip,
/**
* @prop {String|Array} behavior='flip'
* The behavior used to change the popper's placement. It can be one of
* `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
* placements (with optional variations)
*/
behavior: 'flip',
/**
* @prop {number} padding=5
* The popper will flip if it hits the edges of the `boundariesElement`
*/
padding: 5,
/**
* @prop {String|HTMLElement} boundariesElement='viewport'
* The element which will define the boundaries of the popper position.
* The popper will never be placed outside of the defined boundaries
* (except if `keepTogether` is enabled)
*/
boundariesElement: 'viewport',
/**
* @prop {Boolean} flipVariations=false
* The popper will switch placement variation between `-start` and `-end` when
* the reference element overlaps its boundaries.
*
* The original placement should have a set variation.
*/
flipVariations: false,
/**
* @prop {Boolean} flipVariationsByContent=false
* The popper will switch placement variation between `-start` and `-end` when
* the popper element overlaps its reference boundaries.
*
* The original placement should have a set variation.
*/
flipVariationsByContent: false
},
/**
* Modifier used to make the popper flow toward the inner of the reference element.
* By default, when this modifier is disabled, the popper will be placed outside
* the reference element.
* @memberof modifiers
* @inner
*/
inner: {
/** @prop {number} order=700 - Index used to define the order of execution */
order: 700,
/** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
enabled: false,
/** @prop {ModifierFn} */
fn: inner
},
/**
* Modifier used to hide the popper when its reference element is outside of the
* popper boundaries. It will set a `x-out-of-boundaries` attribute which can
* be used to hide with a CSS selector the popper when its reference is
* out of boundaries.
*
* Requires the `preventOverflow` modifier before it in order to work.
* @memberof modifiers
* @inner
*/
hide: {
/** @prop {number} order=800 - Index used to define the order of execution */
order: 800,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: hide
},
/**
* Computes the style that will be applied to the popper element to gets
* properly positioned.
*
* Note that this modifier will not touch the DOM, it just prepares the styles
* so that `applyStyle` modifier can apply it. This separation is useful
* in case you need to replace `applyStyle` with a custom implementation.
*
* This modifier has `850` as `order` value to maintain backward compatibility
* with previous versions of Popper.js. Expect the modifiers ordering method
* to change in future major versions of the library.
*
* @memberof modifiers
* @inner
*/
computeStyle: {
/** @prop {number} order=850 - Index used to define the order of execution */
order: 850,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: computeStyle,
/**
* @prop {Boolean} gpuAcceleration=true
* If true, it uses the CSS 3D transformation to position the popper.
* Otherwise, it will use the `top` and `left` properties
*/
gpuAcceleration: true,
/**
* @prop {string} [x='bottom']
* Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
* Change this if your popper should grow in a direction different from `bottom`
*/
x: 'bottom',
/**
* @prop {string} [x='left']
* Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
* Change this if your popper should grow in a direction different from `right`
*/
y: 'right'
},
/**
* Applies the computed styles to the popper element.
*
* All the DOM manipulations are limited to this modifier. This is useful in case
* you want to integrate Popper.js inside a framework or view library and you
* want to delegate all the DOM manipulations to it.
*
* Note that if you disable this modifier, you must make sure the popper element
* has its position set to `absolute` before Popper.js can do its work!
*
* Just disable this modifier and define your own to achieve the desired effect.
*
* @memberof modifiers
* @inner
*/
applyStyle: {
/** @prop {number} order=900 - Index used to define the order of execution */
order: 900,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: applyStyle,
/** @prop {Function} */
onLoad: applyStyleOnLoad,
/**
* @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
* @prop {Boolean} gpuAcceleration=true
* If true, it uses the CSS 3D transformation to position the popper.
* Otherwise, it will use the `top` and `left` properties
*/
gpuAcceleration: undefined
}
};
/**
* The `dataObject` is an object containing all the information used by Popper.js.
* This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
* @name dataObject
* @property {Object} data.instance The Popper.js instance
* @property {String} data.placement Placement applied to popper
* @property {String} data.originalPlacement Placement originally defined on init
* @property {Boolean} data.flipped True if popper has been flipped by flip modifier
* @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
* @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
* @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
* @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
* @property {Object} data.boundaries Offsets of the popper boundaries
* @property {Object} data.offsets The measurements of popper, reference and arrow elements
* @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
* @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
* @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
*/
/**
* Default options provided to Popper.js constructor.<br />
* These can be overridden using the `options` argument of Popper.js.<br />
* To override an option, simply pass an object with the same
* structure of the `options` object, as the 3rd argument. For example:
* ```
* new Popper(ref, pop, {
* modifiers: {
* preventOverflow: { enabled: false }
* }
* })
* ```
* @type {Object}
* @static
* @memberof Popper
*/
var Defaults = {
/**
* Popper's placement.
* @prop {Popper.placements} placement='bottom'
*/
placement: 'bottom',
/**
* Set this to true if you want popper to position it self in 'fixed' mode
* @prop {Boolean} positionFixed=false
*/
positionFixed: false,
/**
* Whether events (resize, scroll) are initially enabled.
* @prop {Boolean} eventsEnabled=true
*/
eventsEnabled: true,
/**
* Set to true if you want to automatically remove the popper when
* you call the `destroy` method.
* @prop {Boolean} removeOnDestroy=false
*/
removeOnDestroy: false,
/**
* Callback called when the popper is created.<br />
* By default, it is set to no-op.<br />
* Access Popper.js instance with `data.instance`.
* @prop {onCreate}
*/
onCreate: function onCreate() {},
/**
* Callback called when the popper is updated. This callback is not called
* on the initialization/creation of the popper, but only on subsequent
* updates.<br />
* By default, it is set to no-op.<br />
* Access Popper.js instance with `data.instance`.
* @prop {onUpdate}
*/
onUpdate: function onUpdate() {},
/**
* List of modifiers used to modify the offsets before they are applied to the popper.
* They provide most of the functionalities of Popper.js.
* @prop {modifiers}
*/
modifiers: modifiers
};
/**
* @callback onCreate
* @param {dataObject} data
*/
/**
* @callback onUpdate
* @param {dataObject} data
*/
// Utils
// Methods
var Popper$1 = function () {
/**
* Creates a new Popper.js instance.
* @class Popper
* @param {Element|referenceObject} reference - The reference element used to position the popper
* @param {Element} popper - The HTML / XML element used as the popper
* @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
* @return {Object} instance - The generated Popper.js instance
*/
function Popper(reference, popper) {
var _this = this;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
classCallCheck(this, Popper);
this.scheduleUpdate = function () {
return requestAnimationFrame(_this.update);
}; // make update() debounced, so that it only runs at most once-per-tick
this.update = debounce(this.update.bind(this)); // with {} we create a new object with the options inside it
this.options = _extends({}, Popper.Defaults, options); // init state
this.state = {
isDestroyed: false,
isCreated: false,
scrollParents: []
}; // get reference and popper elements (allow jQuery wrappers)
this.reference = reference && reference.jquery ? reference[0] : reference;
this.popper = popper && popper.jquery ? popper[0] : popper; // Deep merge modifiers options
this.options.modifiers = {};
Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
_this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
}); // Refactoring modifiers' list (Object => Array)
this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
return _extends({
name: name
}, _this.options.modifiers[name]);
}) // sort the modifiers by order
.sort(function (a, b) {
return a.order - b.order;
}); // modifiers have the ability to execute arbitrary code when Popper.js get inited
// such code is executed in the same order of its modifier
// they could add new properties to their options configuration
// BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!
this.modifiers.forEach(function (modifierOptions) {
if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {
modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
}
}); // fire the first update to position the popper in the right place
this.update();
var eventsEnabled = this.options.eventsEnabled;
if (eventsEnabled) {
// setup event listeners, they will take care of update the position in specific situations
this.enableEventListeners();
}
this.state.eventsEnabled = eventsEnabled;
} // We can't use class properties because they don't get listed in the
// class prototype and break stuff like Sinon stubs
createClass(Popper, [{
key: 'update',
value: function update$$1() {
return update.call(this);
}
}, {
key: 'destroy',
value: function destroy$$1() {
return destroy.call(this);
}
}, {
key: 'enableEventListeners',
value: function enableEventListeners$$1() {
return enableEventListeners.call(this);
}
}, {
key: 'disableEventListeners',
value: function disableEventListeners$$1() {
return disableEventListeners.call(this);
}
/**
* Schedules an update. It will run on the next UI update available.
* @method scheduleUpdate
* @memberof Popper
*/
/**
* Collection of utilities useful when writing custom modifiers.
* Starting from version 1.7, this method is available only if you
* include `popper-utils.js` before `popper.js`.
*
* **DEPRECATION**: This way to access PopperUtils is deprecated
* and will be removed in v2! Use the PopperUtils module directly instead.
* Due to the high instability of the methods contained in Utils, we can't
* guarantee them to follow semver. Use them at your own risk!
* @static
* @private
* @type {Object}
* @deprecated since version 1.8
* @member Utils
* @memberof Popper
*/
}]);
return Popper;
}();
/**
* The `referenceObject` is an object that provides an interface compatible with Popper.js
* and lets you use it as replacement of a real DOM node.<br />
* You can use this method to position a popper relatively to a set of coordinates
* in case you don't have a DOM node to use as reference.
*
* ```
* new Popper(referenceObject, popperNode);
* ```
*
* NB: This feature isn't supported in Internet Explorer 10.
* @name referenceObject
* @property {Function} data.getBoundingClientRect
* A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
* @property {number} data.clientWidth
* An ES6 getter that will return the width of the virtual reference element.
* @property {number} data.clientHeight
* An ES6 getter that will return the height of the virtual reference element.
*/
Popper$1.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;
Popper$1.placements = placements;
Popper$1.Defaults = Defaults;
function flipPlacement(placement, theme) {
var direction = theme && theme.direction || 'ltr';
if (direction === 'ltr') {
return placement;
}
switch (placement) {
case 'bottom-end':
return 'bottom-start';
case 'bottom-start':
return 'bottom-end';
case 'top-end':
return 'top-start';
case 'top-start':
return 'top-end';
default:
return placement;
}
}
function getAnchorEl(anchorEl) {
return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
}
var useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
var defaultPopperOptions = {};
/**
* Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v1/) for positioning.
*/
var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, ref) {
var anchorEl = props.anchorEl,
children = props.children,
container = props.container,
_props$disablePortal = props.disablePortal,
disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
_props$keepMounted = props.keepMounted,
keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
modifiers = props.modifiers,
open = props.open,
_props$placement = props.placement,
initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
_props$popperOptions = props.popperOptions,
popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,
popperRefProp = props.popperRef,
style = props.style,
_props$transition = props.transition,
transition = _props$transition === void 0 ? false : _props$transition,
other = _objectWithoutProperties(props, ["anchorEl", "children", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"]);
var tooltipRef = React__namespace.useRef(null);
var ownRef = useForkRef(tooltipRef, ref);
var popperRef = React__namespace.useRef(null);
var handlePopperRef = useForkRef(popperRef, popperRefProp);
var handlePopperRefRef = React__namespace.useRef(handlePopperRef);
useEnhancedEffect(function () {
handlePopperRefRef.current = handlePopperRef;
}, [handlePopperRef]);
React__namespace.useImperativeHandle(popperRefProp, function () {
return popperRef.current;
}, []);
var _React$useState = React__namespace.useState(true),
exited = _React$useState[0],
setExited = _React$useState[1];
var theme = useTheme$1();
var rtlPlacement = flipPlacement(initialPlacement, theme);
/**
* placement initialized from prop but can change during lifetime if modifiers.flip.
* modifiers.flip is essentially a flip for controlled/uncontrolled behavior
*/
var _React$useState2 = React__namespace.useState(rtlPlacement),
placement = _React$useState2[0],
setPlacement = _React$useState2[1];
React__namespace.useEffect(function () {
if (popperRef.current) {
popperRef.current.update();
}
});
var handleOpen = React__namespace.useCallback(function () {
if (!tooltipRef.current || !anchorEl || !open) {
return;
}
if (popperRef.current) {
popperRef.current.destroy();
handlePopperRefRef.current(null);
}
var handlePopperUpdate = function handlePopperUpdate(data) {
setPlacement(data.placement);
};
getAnchorEl(anchorEl);
var popper = new Popper$1(getAnchorEl(anchorEl), tooltipRef.current, _extends$1({
placement: rtlPlacement
}, popperOptions, {
modifiers: _extends$1({}, disablePortal ? {} : {
// It's using scrollParent by default, we can use the viewport when using a portal.
preventOverflow: {
boundariesElement: 'window'
}
}, modifiers, popperOptions.modifiers),
// We could have been using a custom modifier like react-popper is doing.
// But it seems this is the best public API for this use case.
onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),
onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate)
}));
handlePopperRefRef.current(popper);
}, [anchorEl, disablePortal, modifiers, open, rtlPlacement, popperOptions]);
var handleRef = React__namespace.useCallback(function (node) {
setRef(ownRef, node);
handleOpen();
}, [ownRef, handleOpen]);
var handleEnter = function handleEnter() {
setExited(false);
};
var handleClose = function handleClose() {
if (!popperRef.current) {
return;
}
popperRef.current.destroy();
handlePopperRefRef.current(null);
};
var handleExited = function handleExited() {
setExited(true);
handleClose();
};
React__namespace.useEffect(function () {
return function () {
handleClose();
};
}, []);
React__namespace.useEffect(function () {
if (!open && !transition) {
// Otherwise handleExited will call this.
handleClose();
}
}, [open, transition]);
if (!keepMounted && !open && (!transition || exited)) {
return null;
}
var childProps = {
placement: placement
};
if (transition) {
childProps.TransitionProps = {
in: open,
onEnter: handleEnter,
onExited: handleExited
};
}
return /*#__PURE__*/React__namespace.createElement(Portal, {
disablePortal: disablePortal,
container: container
}, /*#__PURE__*/React__namespace.createElement("div", _extends$1({
ref: handleRef,
role: "tooltip"
}, other, {
style: _extends$1({
// Prevents scroll issue, waiting for Popper.js to add this style once initiated.
position: 'fixed',
// Fix Popper.js display issue
top: 0,
left: 0,
display: !open && keepMounted && !transition ? 'none' : null
}, style)
}), typeof children === 'function' ? children(childProps) : children));
});
var styles$3 = function styles(theme) {
return {
thumb: {
'&$open': {
'& $offset': {
transform: 'scale(1) translateY(-10px)'
}
}
},
open: {},
offset: _extends$1({
zIndex: 1
}, theme.typography.body2, {
fontSize: theme.typography.pxToRem(12),
lineHeight: 1.2,
transition: theme.transitions.create(['transform'], {
duration: theme.transitions.duration.shortest
}),
top: -34,
transformOrigin: 'bottom center',
transform: 'scale(0)',
position: 'absolute'
}),
circle: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 32,
height: 32,
borderRadius: '50% 50% 50% 0',
backgroundColor: 'currentColor',
transform: 'rotate(-45deg)'
},
label: {
color: theme.palette.primary.contrastText,
transform: 'rotate(45deg)'
}
};
};
/**
* @ignore - internal component.
*/
function ValueLabel(props) {
var children = props.children,
classes = props.classes,
className = props.className,
open = props.open,
value = props.value,
valueLabelDisplay = props.valueLabelDisplay;
if (valueLabelDisplay === 'off') {
return children;
}
return /*#__PURE__*/React__namespace.cloneElement(children, {
className: clsx(children.props.className, (open || valueLabelDisplay === 'on') && classes.open, classes.thumb)
}, /*#__PURE__*/React__namespace.createElement("span", {
className: clsx(classes.offset, className)
}, /*#__PURE__*/React__namespace.createElement("span", {
className: classes.circle
}, /*#__PURE__*/React__namespace.createElement("span", {
className: classes.label
}, value))));
}
var ValueLabel$1 = withStyles(styles$3, {
name: 'PrivateValueLabel'
})(ValueLabel);
function asc(a, b) {
return a - b;
}
function clamp(value, min, max) {
return Math.min(Math.max(min, value), max);
}
function findClosest(values, currentValue) {
var _values$reduce = values.reduce(function (acc, value, index) {
var distance = Math.abs(currentValue - value);
if (acc === null || distance < acc.distance || distance === acc.distance) {
return {
distance: distance,
index: index
};
}
return acc;
}, null),
closestIndex = _values$reduce.index;
return closestIndex;
}
function trackFinger(event, touchId) {
if (touchId.current !== undefined && event.changedTouches) {
for (var i = 0; i < event.changedTouches.length; i += 1) {
var touch = event.changedTouches[i];
if (touch.identifier === touchId.current) {
return {
x: touch.clientX,
y: touch.clientY
};
}
}
return false;
}
return {
x: event.clientX,
y: event.clientY
};
}
function valueToPercent(value, min, max) {
return (value - min) * 100 / (max - min);
}
function percentToValue(percent, min, max) {
return (max - min) * percent + min;
}
function getDecimalPrecision(num) {
// This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
// When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
if (Math.abs(num) < 1) {
var parts = num.toExponential().split('e-');
var matissaDecimalPart = parts[0].split('.')[1];
return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
}
var decimalPart = num.toString().split('.')[1];
return decimalPart ? decimalPart.length : 0;
}
function roundValueToStep(value, step, min) {
var nearest = Math.round((value - min) / step) * step + min;
return Number(nearest.toFixed(getDecimalPrecision(step)));
}
function setValueIndex(_ref) {
var values = _ref.values,
source = _ref.source,
newValue = _ref.newValue,
index = _ref.index; // Performance shortcut
if (values[index] === newValue) {
return source;
}
var output = values.slice();
output[index] = newValue;
return output;
}
function focusThumb(_ref2) {
var sliderRef = _ref2.sliderRef,
activeIndex = _ref2.activeIndex,
setActive = _ref2.setActive;
if (!sliderRef.current.contains(document.activeElement) || Number(document.activeElement.getAttribute('data-index')) !== activeIndex) {
sliderRef.current.querySelector("[role=\"slider\"][data-index=\"".concat(activeIndex, "\"]")).focus();
}
if (setActive) {
setActive(activeIndex);
}
}
var axisProps = {
horizontal: {
offset: function offset(percent) {
return {
left: "".concat(percent, "%")
};
},
leap: function leap(percent) {
return {
width: "".concat(percent, "%")
};
}
},
'horizontal-reverse': {
offset: function offset(percent) {
return {
right: "".concat(percent, "%")
};
},
leap: function leap(percent) {
return {
width: "".concat(percent, "%")
};
}
},
vertical: {
offset: function offset(percent) {
return {
bottom: "".concat(percent, "%")
};
},
leap: function leap(percent) {
return {
height: "".concat(percent, "%")
};
}
}
};
var Identity = function Identity(x) {
return x;
};
var styles$2 = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
height: 2,
width: '100%',
boxSizing: 'content-box',
padding: '13px 0',
display: 'inline-block',
position: 'relative',
cursor: 'pointer',
touchAction: 'none',
color: theme.palette.primary.main,
WebkitTapHighlightColor: 'transparent',
'&$disabled': {
pointerEvents: 'none',
cursor: 'default',
color: theme.palette.grey[400]
},
'&$vertical': {
width: 2,
height: '100%',
padding: '0 13px'
},
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0',
'&$vertical': {
padding: '0 20px'
}
},
'@media print': {
colorAdjust: 'exact'
}
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {// TODO v5: move the style here
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
color: theme.palette.secondary.main
},
/* Styles applied to the root element if `marks` is provided with at least one label. */
marked: {
marginBottom: 20,
'&$vertical': {
marginBottom: 'auto',
marginRight: 20
}
},
/* Pseudo-class applied to the root element if `orientation="vertical"`. */
vertical: {},
/* Pseudo-class applied to the root and thumb element if `disabled={true}`. */
disabled: {},
/* Styles applied to the rail element. */
rail: {
display: 'block',
position: 'absolute',
width: '100%',
height: 2,
borderRadius: 1,
backgroundColor: 'currentColor',
opacity: 0.38,
'$vertical &': {
height: '100%',
width: 2
}
},
/* Styles applied to the track element. */
track: {
display: 'block',
position: 'absolute',
height: 2,
borderRadius: 1,
backgroundColor: 'currentColor',
'$vertical &': {
width: 2
}
},
/* Styles applied to the track element if `track={false}`. */
trackFalse: {
'& $track': {
display: 'none'
}
},
/* Styles applied to the track element if `track="inverted"`. */
trackInverted: {
'& $track': {
backgroundColor: // Same logic as the LinearProgress track color
theme.palette.type === 'light' ? lighten(theme.palette.primary.main, 0.62) : darken(theme.palette.primary.main, 0.5)
},
'& $rail': {
opacity: 1
}
},
/* Styles applied to the thumb element. */
thumb: {
position: 'absolute',
width: 12,
height: 12,
marginLeft: -6,
marginTop: -5,
boxSizing: 'border-box',
borderRadius: '50%',
outline: 0,
backgroundColor: 'currentColor',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: theme.transitions.create(['box-shadow'], {
duration: theme.transitions.duration.shortest
}),
'&::after': {
position: 'absolute',
content: '""',
borderRadius: '50%',
// reach 42px hit target (2 * 15 + thumb diameter)
left: -15,
top: -15,
right: -15,
bottom: -15
},
'&$focusVisible,&:hover': {
boxShadow: "0px 0px 0px 8px ".concat(fade(theme.palette.primary.main, 0.16)),
'@media (hover: none)': {
boxShadow: 'none'
}
},
'&$active': {
boxShadow: "0px 0px 0px 14px ".concat(fade(theme.palette.primary.main, 0.16))
},
'&$disabled': {
width: 8,
height: 8,
marginLeft: -4,
marginTop: -3,
'&:hover': {
boxShadow: 'none'
}
},
'$vertical &': {
marginLeft: -5,
marginBottom: -6
},
'$vertical &$disabled': {
marginLeft: -3,
marginBottom: -4
}
},
/* Styles applied to the thumb element if `color="primary"`. */
thumbColorPrimary: {// TODO v5: move the style here
},
/* Styles applied to the thumb element if `color="secondary"`. */
thumbColorSecondary: {
'&$focusVisible,&:hover': {
boxShadow: "0px 0px 0px 8px ".concat(fade(theme.palette.secondary.main, 0.16))
},
'&$active': {
boxShadow: "0px 0px 0px 14px ".concat(fade(theme.palette.secondary.main, 0.16))
}
},
/* Pseudo-class applied to the thumb element if it's active. */
active: {},
/* Pseudo-class applied to the thumb element if keyboard focused. */
focusVisible: {},
/* Styles applied to the thumb label element. */
valueLabel: {
// IE 11 centering bug, to remove from the customization demos once no longer supported
left: 'calc(-50% - 4px)'
},
/* Styles applied to the mark element. */
mark: {
position: 'absolute',
width: 2,
height: 2,
borderRadius: 1,
backgroundColor: 'currentColor'
},
/* Styles applied to the mark element if active (depending on the value). */
markActive: {
backgroundColor: theme.palette.background.paper,
opacity: 0.8
},
/* Styles applied to the mark label element. */
markLabel: _extends$1({}, theme.typography.body2, {
color: theme.palette.text.secondary,
position: 'absolute',
top: 26,
transform: 'translateX(-50%)',
whiteSpace: 'nowrap',
'$vertical &': {
top: 'auto',
left: 26,
transform: 'translateY(50%)'
},
'@media (pointer: coarse)': {
top: 40,
'$vertical &': {
left: 31
}
}
}),
/* Styles applied to the mark label element if active (depending on the value). */
markLabelActive: {
color: theme.palette.text.primary
}
};
};
var Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(props, ref) {
var ariaLabel = props['aria-label'],
ariaLabelledby = props['aria-labelledby'],
ariaValuetext = props['aria-valuetext'],
classes = props.classes,
className = props.className,
_props$color = props.color,
color = _props$color === void 0 ? 'primary' : _props$color,
_props$component = props.component,
Component = _props$component === void 0 ? 'span' : _props$component,
defaultValue = props.defaultValue,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
getAriaLabel = props.getAriaLabel,
getAriaValueText = props.getAriaValueText,
_props$marks = props.marks,
marksProp = _props$marks === void 0 ? false : _props$marks,
_props$max = props.max,
max = _props$max === void 0 ? 100 : _props$max,
_props$min = props.min,
min = _props$min === void 0 ? 0 : _props$min,
name = props.name,
onChange = props.onChange,
onChangeCommitted = props.onChangeCommitted,
onMouseDown = props.onMouseDown,
_props$orientation = props.orientation,
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
_props$scale = props.scale,
scale = _props$scale === void 0 ? Identity : _props$scale,
_props$step = props.step,
step = _props$step === void 0 ? 1 : _props$step,
_props$ThumbComponent = props.ThumbComponent,
ThumbComponent = _props$ThumbComponent === void 0 ? 'span' : _props$ThumbComponent,
_props$track = props.track,
track = _props$track === void 0 ? 'normal' : _props$track,
valueProp = props.value,
_props$ValueLabelComp = props.ValueLabelComponent,
ValueLabelComponent = _props$ValueLabelComp === void 0 ? ValueLabel$1 : _props$ValueLabelComp,
_props$valueLabelDisp = props.valueLabelDisplay,
valueLabelDisplay = _props$valueLabelDisp === void 0 ? 'off' : _props$valueLabelDisp,
_props$valueLabelForm = props.valueLabelFormat,
valueLabelFormat = _props$valueLabelForm === void 0 ? Identity : _props$valueLabelForm,
other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-valuetext", "classes", "className", "color", "component", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "ThumbComponent", "track", "value", "ValueLabelComponent", "valueLabelDisplay", "valueLabelFormat"]);
var theme = useTheme();
var touchId = React__namespace.useRef(); // We can't use the :active browser pseudo-classes.
// - The active state isn't triggered when clicking on the rail.
// - The active state isn't transfered when inversing a range slider.
var _React$useState = React__namespace.useState(-1),
active = _React$useState[0],
setActive = _React$useState[1];
var _React$useState2 = React__namespace.useState(-1),
open = _React$useState2[0],
setOpen = _React$useState2[1];
var _useControlled = useControlled({
controlled: valueProp,
default: defaultValue,
name: 'Slider'
}),
_useControlled2 = _slicedToArray$1(_useControlled, 2),
valueDerived = _useControlled2[0],
setValueState = _useControlled2[1];
var range = Array.isArray(valueDerived);
var values = range ? valueDerived.slice().sort(asc) : [valueDerived];
values = values.map(function (value) {
return clamp(value, min, max);
});
var marks = marksProp === true && step !== null ? _toConsumableArray(Array(Math.floor((max - min) / step) + 1)).map(function (_, index) {
return {
value: min + step * index
};
}) : marksProp || [];
var _useIsFocusVisible = useIsFocusVisible(),
isFocusVisible = _useIsFocusVisible.isFocusVisible,
onBlurVisible = _useIsFocusVisible.onBlurVisible,
focusVisibleRef = _useIsFocusVisible.ref;
var _React$useState3 = React__namespace.useState(-1),
focusVisible = _React$useState3[0],
setFocusVisible = _React$useState3[1];
var sliderRef = React__namespace.useRef();
var handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
var handleRef = useForkRef(ref, handleFocusRef);
var handleFocus = useEventCallback(function (event) {
var index = Number(event.currentTarget.getAttribute('data-index'));
if (isFocusVisible(event)) {
setFocusVisible(index);
}
setOpen(index);
});
var handleBlur = useEventCallback(function () {
if (focusVisible !== -1) {
setFocusVisible(-1);
onBlurVisible();
}
setOpen(-1);
});
var handleMouseOver = useEventCallback(function (event) {
var index = Number(event.currentTarget.getAttribute('data-index'));
setOpen(index);
});
var handleMouseLeave = useEventCallback(function () {
setOpen(-1);
});
var isRtl = theme.direction === 'rtl';
var handleKeyDown = useEventCallback(function (event) {
var index = Number(event.currentTarget.getAttribute('data-index'));
var value = values[index];
var tenPercents = (max - min) / 10;
var marksValues = marks.map(function (mark) {
return mark.value;
});
var marksIndex = marksValues.indexOf(value);
var newValue;
var increaseKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
var decreaseKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
switch (event.key) {
case 'Home':
newValue = min;
break;
case 'End':
newValue = max;
break;
case 'PageUp':
if (step) {
newValue = value + tenPercents;
}
break;
case 'PageDown':
if (step) {
newValue = value - tenPercents;
}
break;
case increaseKey:
case 'ArrowUp':
if (step) {
newValue = value + step;
} else {
newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1];
}
break;
case decreaseKey:
case 'ArrowDown':
if (step) {
newValue = value - step;
} else {
newValue = marksValues[marksIndex - 1] || marksValues[0];
}
break;
default:
return;
} // Prevent scroll of the page
event.preventDefault();
if (step) {
newValue = roundValueToStep(newValue, step, min);
}
newValue = clamp(newValue, min, max);
if (range) {
var previousValue = newValue;
newValue = setValueIndex({
values: values,
source: valueDerived,
newValue: newValue,
index: index
}).sort(asc);
focusThumb({
sliderRef: sliderRef,
activeIndex: newValue.indexOf(previousValue)
});
}
setValueState(newValue);
setFocusVisible(index);
if (onChange) {
onChange(event, newValue);
}
if (onChangeCommitted) {
onChangeCommitted(event, newValue);
}
});
var previousIndex = React__namespace.useRef();
var axis = orientation;
if (isRtl && orientation !== "vertical") {
axis += '-reverse';
}
var getFingerNewValue = function getFingerNewValue(_ref3) {
var finger = _ref3.finger,
_ref3$move = _ref3.move,
move = _ref3$move === void 0 ? false : _ref3$move,
values2 = _ref3.values,
source = _ref3.source;
var slider = sliderRef.current;
var _slider$getBoundingCl = slider.getBoundingClientRect(),
width = _slider$getBoundingCl.width,
height = _slider$getBoundingCl.height,
bottom = _slider$getBoundingCl.bottom,
left = _slider$getBoundingCl.left;
var percent;
if (axis.indexOf('vertical') === 0) {
percent = (bottom - finger.y) / height;
} else {
percent = (finger.x - left) / width;
}
if (axis.indexOf('-reverse') !== -1) {
percent = 1 - percent;
}
var newValue;
newValue = percentToValue(percent, min, max);
if (step) {
newValue = roundValueToStep(newValue, step, min);
} else {
var marksValues = marks.map(function (mark) {
return mark.value;
});
var closestIndex = findClosest(marksValues, newValue);
newValue = marksValues[closestIndex];
}
newValue = clamp(newValue, min, max);
var activeIndex = 0;
if (range) {
if (!move) {
activeIndex = findClosest(values2, newValue);
} else {
activeIndex = previousIndex.current;
}
var previousValue = newValue;
newValue = setValueIndex({
values: values2,
source: source,
newValue: newValue,
index: activeIndex
}).sort(asc);
activeIndex = newValue.indexOf(previousValue);
previousIndex.current = activeIndex;
}
return {
newValue: newValue,
activeIndex: activeIndex
};
};
var handleTouchMove = useEventCallback(function (event) {
var finger = trackFinger(event, touchId);
if (!finger) {
return;
}
var _getFingerNewValue = getFingerNewValue({
finger: finger,
move: true,
values: values,
source: valueDerived
}),
newValue = _getFingerNewValue.newValue,
activeIndex = _getFingerNewValue.activeIndex;
focusThumb({
sliderRef: sliderRef,
activeIndex: activeIndex,
setActive: setActive
});
setValueState(newValue);
if (onChange) {
onChange(event, newValue);
}
});
var handleTouchEnd = useEventCallback(function (event) {
var finger = trackFinger(event, touchId);
if (!finger) {
return;
}
var _getFingerNewValue2 = getFingerNewValue({
finger: finger,
values: values,
source: valueDerived
}),
newValue = _getFingerNewValue2.newValue;
setActive(-1);
if (event.type === 'touchend') {
setOpen(-1);
}
if (onChangeCommitted) {
onChangeCommitted(event, newValue);
}
touchId.current = undefined;
var doc = ownerDocument(sliderRef.current);
doc.removeEventListener('mousemove', handleTouchMove);
doc.removeEventListener('mouseup', handleTouchEnd);
doc.removeEventListener('touchmove', handleTouchMove);
doc.removeEventListener('touchend', handleTouchEnd);
});
var handleTouchStart = useEventCallback(function (event) {
// Workaround as Safari has partial support for touchAction: 'none'.
event.preventDefault();
var touch = event.changedTouches[0];
if (touch != null) {
// A number that uniquely identifies the current finger in the touch session.
touchId.current = touch.identifier;
}
var finger = trackFinger(event, touchId);
var _getFingerNewValue3 = getFingerNewValue({
finger: finger,
values: values,
source: valueDerived
}),
newValue = _getFingerNewValue3.newValue,
activeIndex = _getFingerNewValue3.activeIndex;
focusThumb({
sliderRef: sliderRef,
activeIndex: activeIndex,
setActive: setActive
});
setValueState(newValue);
if (onChange) {
onChange(event, newValue);
}
var doc = ownerDocument(sliderRef.current);
doc.addEventListener('touchmove', handleTouchMove);
doc.addEventListener('touchend', handleTouchEnd);
});
React__namespace.useEffect(function () {
var slider = sliderRef.current;
slider.addEventListener('touchstart', handleTouchStart);
var doc = ownerDocument(slider);
return function () {
slider.removeEventListener('touchstart', handleTouchStart);
doc.removeEventListener('mousemove', handleTouchMove);
doc.removeEventListener('mouseup', handleTouchEnd);
doc.removeEventListener('touchmove', handleTouchMove);
doc.removeEventListener('touchend', handleTouchEnd);
};
}, [handleTouchEnd, handleTouchMove, handleTouchStart]);
var handleMouseDown = useEventCallback(function (event) {
if (onMouseDown) {
onMouseDown(event);
}
event.preventDefault();
var finger = trackFinger(event, touchId);
var _getFingerNewValue4 = getFingerNewValue({
finger: finger,
values: values,
source: valueDerived
}),
newValue = _getFingerNewValue4.newValue,
activeIndex = _getFingerNewValue4.activeIndex;
focusThumb({
sliderRef: sliderRef,
activeIndex: activeIndex,
setActive: setActive
});
setValueState(newValue);
if (onChange) {
onChange(event, newValue);
}
var doc = ownerDocument(sliderRef.current);
doc.addEventListener('mousemove', handleTouchMove);
doc.addEventListener('mouseup', handleTouchEnd);
});
var trackOffset = valueToPercent(range ? values[0] : min, min, max);
var trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
var trackStyle = _extends$1({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
ref: handleRef,
className: clsx(classes.root, classes["color".concat(capitalize$1(color))], className, disabled && classes.disabled, marks.length > 0 && marks.some(function (mark) {
return mark.label;
}) && classes.marked, track === false && classes.trackFalse, orientation === 'vertical' && classes.vertical, track === 'inverted' && classes.trackInverted),
onMouseDown: handleMouseDown
}, other), /*#__PURE__*/React__namespace.createElement("span", {
className: classes.rail
}), /*#__PURE__*/React__namespace.createElement("span", {
className: classes.track,
style: trackStyle
}), /*#__PURE__*/React__namespace.createElement("input", {
value: values.join(','),
name: name,
type: "hidden"
}), marks.map(function (mark, index) {
var percent = valueToPercent(mark.value, min, max);
var style = axisProps[axis].offset(percent);
var markActive;
if (track === false) {
markActive = values.indexOf(mark.value) !== -1;
} else {
markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
}
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
key: mark.value
}, /*#__PURE__*/React__namespace.createElement("span", {
style: style,
"data-index": index,
className: clsx(classes.mark, markActive && classes.markActive)
}), mark.label != null ? /*#__PURE__*/React__namespace.createElement("span", {
"aria-hidden": true,
"data-index": index,
style: style,
className: clsx(classes.markLabel, markActive && classes.markLabelActive)
}, mark.label) : null);
}), values.map(function (value, index) {
var percent = valueToPercent(value, min, max);
var style = axisProps[axis].offset(percent);
return /*#__PURE__*/React__namespace.createElement(ValueLabelComponent, {
key: index,
valueLabelFormat: valueLabelFormat,
valueLabelDisplay: valueLabelDisplay,
className: classes.valueLabel,
value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
index: index,
open: open === index || active === index || valueLabelDisplay === 'on',
disabled: disabled
}, /*#__PURE__*/React__namespace.createElement(ThumbComponent, {
className: clsx(classes.thumb, classes["thumbColor".concat(capitalize$1(color))], active === index && classes.active, disabled && classes.disabled, focusVisible === index && classes.focusVisible),
tabIndex: disabled ? null : 0,
role: "slider",
style: style,
"data-index": index,
"aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-orientation": orientation,
"aria-valuemax": scale(max),
"aria-valuemin": scale(min),
"aria-valuenow": scale(value),
"aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
onKeyDown: handleKeyDown,
onFocus: handleFocus,
onBlur: handleBlur,
onMouseOver: handleMouseOver,
onMouseLeave: handleMouseLeave
}));
}));
});
var Slider$1 = withStyles(styles$2, {
name: 'MuiSlider'
})(Slider);
var styles$1 = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
display: 'inline-flex',
width: 34 + 12 * 2,
height: 14 + 12 * 2,
overflow: 'hidden',
padding: 12,
boxSizing: 'border-box',
position: 'relative',
flexShrink: 0,
zIndex: 0,
// Reset the stacking context.
verticalAlign: 'middle',
// For correct alignment with the text.
'@media print': {
colorAdjust: 'exact'
}
},
/* Styles applied to the root element if `edge="start"`. */
edgeStart: {
marginLeft: -8
},
/* Styles applied to the root element if `edge="end"`. */
edgeEnd: {
marginRight: -8
},
/* Styles applied to the internal `SwitchBase` component's `root` class. */
switchBase: {
position: 'absolute',
top: 0,
left: 0,
zIndex: 1,
// Render above the focus ripple.
color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
transition: theme.transitions.create(['left', 'transform'], {
duration: theme.transitions.duration.shortest
}),
'&$checked': {
transform: 'translateX(20px)'
},
'&$disabled': {
color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
},
'&$checked + $track': {
opacity: 0.5
},
'&$disabled + $track': {
opacity: theme.palette.type === 'light' ? 0.12 : 0.1
}
},
/* Styles applied to the internal SwitchBase component's root element if `color="primary"`. */
colorPrimary: {
'&$checked': {
color: theme.palette.primary.main,
'&:hover': {
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
'&$disabled': {
color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
},
'&$checked + $track': {
backgroundColor: theme.palette.primary.main
},
'&$disabled + $track': {
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
}
},
/* Styles applied to the internal SwitchBase component's root element if `color="secondary"`. */
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main,
'&:hover': {
backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
'&$disabled': {
color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
},
'&$checked + $track': {
backgroundColor: theme.palette.secondary.main
},
'&$disabled + $track': {
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
}
},
/* Styles applied to the root element if `size="small"`. */
sizeSmall: {
width: 40,
height: 24,
padding: 7,
'& $thumb': {
width: 16,
height: 16
},
'& $switchBase': {
padding: 4,
'&$checked': {
transform: 'translateX(16px)'
}
}
},
/* Pseudo-class applied to the internal `SwitchBase` component's `checked` class. */
checked: {},
/* Pseudo-class applied to the internal SwitchBase component's disabled class. */
disabled: {},
/* Styles applied to the internal SwitchBase component's input element. */
input: {
left: '-100%',
width: '300%'
},
/* Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop. */
thumb: {
boxShadow: theme.shadows[1],
backgroundColor: 'currentColor',
width: 20,
height: 20,
borderRadius: '50%'
},
/* Styles applied to the track element. */
track: {
height: '100%',
width: '100%',
borderRadius: 14 / 2,
zIndex: -1,
transition: theme.transitions.create(['opacity', 'background-color'], {
duration: theme.transitions.duration.shortest
}),
backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
opacity: theme.palette.type === 'light' ? 0.38 : 0.3
}
};
};
var Switch = /*#__PURE__*/React__namespace.forwardRef(function Switch(props, ref) {
var classes = props.classes,
className = props.className,
_props$color = props.color,
color = _props$color === void 0 ? 'secondary' : _props$color,
_props$edge = props.edge,
edge = _props$edge === void 0 ? false : _props$edge,
_props$size = props.size,
size = _props$size === void 0 ? 'medium' : _props$size,
other = _objectWithoutProperties(props, ["classes", "className", "color", "edge", "size"]);
var icon = /*#__PURE__*/React__namespace.createElement("span", {
className: classes.thumb
});
return /*#__PURE__*/React__namespace.createElement("span", {
className: clsx(classes.root, className, {
'start': classes.edgeStart,
'end': classes.edgeEnd
}[edge], size === "small" && classes["size".concat(capitalize$1(size))])
}, /*#__PURE__*/React__namespace.createElement(SwitchBase$1, _extends$1({
type: "checkbox",
icon: icon,
checkedIcon: icon,
classes: {
root: clsx(classes.switchBase, classes["color".concat(capitalize$1(color))]),
input: classes.input,
checked: classes.checked,
disabled: classes.disabled
},
ref: ref
}, other)), /*#__PURE__*/React__namespace.createElement("span", {
className: classes.track
}));
});
var Switch$1 = withStyles(styles$1, {
name: 'MuiSwitch'
})(Switch);
function round(value) {
return Math.round(value * 1e5) / 1e5;
}
function arrowGenerator() {
return {
'&[x-placement*="bottom"] $arrow': {
top: 0,
left: 0,
marginTop: '-0.71em',
marginLeft: 4,
marginRight: 4,
'&::before': {
transformOrigin: '0 100%'
}
},
'&[x-placement*="top"] $arrow': {
bottom: 0,
left: 0,
marginBottom: '-0.71em',
marginLeft: 4,
marginRight: 4,
'&::before': {
transformOrigin: '100% 0'
}
},
'&[x-placement*="right"] $arrow': {
left: 0,
marginLeft: '-0.71em',
height: '1em',
width: '0.71em',
marginTop: 4,
marginBottom: 4,
'&::before': {
transformOrigin: '100% 100%'
}
},
'&[x-placement*="left"] $arrow': {
right: 0,
marginRight: '-0.71em',
height: '1em',
width: '0.71em',
marginTop: 4,
marginBottom: 4,
'&::before': {
transformOrigin: '0 0'
}
}
};
}
var styles = function styles(theme) {
return {
/* Styles applied to the Popper component. */
popper: {
zIndex: theme.zIndex.tooltip,
pointerEvents: 'none' // disable jss-rtl plugin
},
/* Styles applied to the Popper component if `interactive={true}`. */
popperInteractive: {
pointerEvents: 'auto'
},
/* Styles applied to the Popper component if `arrow={true}`. */
popperArrow: arrowGenerator(),
/* Styles applied to the tooltip (label wrapper) element. */
tooltip: {
backgroundColor: fade(theme.palette.grey[700], 0.9),
borderRadius: theme.shape.borderRadius,
color: theme.palette.common.white,
fontFamily: theme.typography.fontFamily,
padding: '4px 8px',
fontSize: theme.typography.pxToRem(10),
lineHeight: "".concat(round(14 / 10), "em"),
maxWidth: 300,
wordWrap: 'break-word',
fontWeight: theme.typography.fontWeightMedium
},
/* Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
tooltipArrow: {
position: 'relative',
margin: '0'
},
/* Styles applied to the arrow element. */
arrow: {
overflow: 'hidden',
position: 'absolute',
width: '1em',
height: '0.71em'
/* = width / sqrt(2) = (length of the hypotenuse) */
,
boxSizing: 'border-box',
color: fade(theme.palette.grey[700], 0.9),
'&::before': {
content: '""',
margin: 'auto',
display: 'block',
width: '100%',
height: '100%',
backgroundColor: 'currentColor',
transform: 'rotate(45deg)'
}
},
/* Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
touch: {
padding: '8px 16px',
fontSize: theme.typography.pxToRem(14),
lineHeight: "".concat(round(16 / 14), "em"),
fontWeight: theme.typography.fontWeightRegular
},
/* Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
tooltipPlacementLeft: _defineProperty$3({
transformOrigin: 'right center',
margin: '0 24px '
}, theme.breakpoints.up('sm'), {
margin: '0 14px'
}),
/* Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
tooltipPlacementRight: _defineProperty$3({
transformOrigin: 'left center',
margin: '0 24px'
}, theme.breakpoints.up('sm'), {
margin: '0 14px'
}),
/* Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
tooltipPlacementTop: _defineProperty$3({
transformOrigin: 'center bottom',
margin: '24px 0'
}, theme.breakpoints.up('sm'), {
margin: '14px 0'
}),
/* Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
tooltipPlacementBottom: _defineProperty$3({
transformOrigin: 'center top',
margin: '24px 0'
}, theme.breakpoints.up('sm'), {
margin: '14px 0'
})
};
};
var hystersisOpen = false;
var hystersisTimer = null;
var Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(props, ref) {
var _props$arrow = props.arrow,
arrow = _props$arrow === void 0 ? false : _props$arrow,
children = props.children,
classes = props.classes,
_props$disableFocusLi = props.disableFocusListener,
disableFocusListener = _props$disableFocusLi === void 0 ? false : _props$disableFocusLi,
_props$disableHoverLi = props.disableHoverListener,
disableHoverListener = _props$disableHoverLi === void 0 ? false : _props$disableHoverLi,
_props$disableTouchLi = props.disableTouchListener,
disableTouchListener = _props$disableTouchLi === void 0 ? false : _props$disableTouchLi,
_props$enterDelay = props.enterDelay,
enterDelay = _props$enterDelay === void 0 ? 100 : _props$enterDelay,
_props$enterNextDelay = props.enterNextDelay,
enterNextDelay = _props$enterNextDelay === void 0 ? 0 : _props$enterNextDelay,
_props$enterTouchDela = props.enterTouchDelay,
enterTouchDelay = _props$enterTouchDela === void 0 ? 700 : _props$enterTouchDela,
idProp = props.id,
_props$interactive = props.interactive,
interactive = _props$interactive === void 0 ? false : _props$interactive,
_props$leaveDelay = props.leaveDelay,
leaveDelay = _props$leaveDelay === void 0 ? 0 : _props$leaveDelay,
_props$leaveTouchDela = props.leaveTouchDelay,
leaveTouchDelay = _props$leaveTouchDela === void 0 ? 1500 : _props$leaveTouchDela,
onClose = props.onClose,
onOpen = props.onOpen,
openProp = props.open,
_props$placement = props.placement,
placement = _props$placement === void 0 ? 'bottom' : _props$placement,
_props$PopperComponen = props.PopperComponent,
PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
PopperProps = props.PopperProps,
title = props.title,
_props$TransitionComp = props.TransitionComponent,
TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
TransitionProps = props.TransitionProps,
other = _objectWithoutProperties(props, ["arrow", "children", "classes", "disableFocusListener", "disableHoverListener", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "id", "interactive", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"]);
var theme = useTheme();
var _React$useState = React__namespace.useState(),
childNode = _React$useState[0],
setChildNode = _React$useState[1];
var _React$useState2 = React__namespace.useState(null),
arrowRef = _React$useState2[0],
setArrowRef = _React$useState2[1];
var ignoreNonTouchEvents = React__namespace.useRef(false);
var closeTimer = React__namespace.useRef();
var enterTimer = React__namespace.useRef();
var leaveTimer = React__namespace.useRef();
var touchTimer = React__namespace.useRef();
var _useControlled = useControlled({
controlled: openProp,
default: false,
name: 'Tooltip',
state: 'open'
}),
_useControlled2 = _slicedToArray$1(_useControlled, 2),
openState = _useControlled2[0],
setOpenState = _useControlled2[1];
var open = openState;
var id = useId(idProp);
React__namespace.useEffect(function () {
return function () {
clearTimeout(closeTimer.current);
clearTimeout(enterTimer.current);
clearTimeout(leaveTimer.current);
clearTimeout(touchTimer.current);
};
}, []);
var handleOpen = function handleOpen(event) {
clearTimeout(hystersisTimer);
hystersisOpen = true; // The mouseover event will trigger for every nested element in the tooltip.
// We can skip rerendering when the tooltip is already open.
// We are using the mouseover event instead of the mouseenter event to fix a hide/show issue.
setOpenState(true);
if (onOpen) {
onOpen(event);
}
};
var handleEnter = function handleEnter() {
var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
return function (event) {
var childrenProps = children.props;
if (event.type === 'mouseover' && childrenProps.onMouseOver && forward) {
childrenProps.onMouseOver(event);
}
if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
return;
} // Remove the title ahead of time.
// We don't want to wait for the next render commit.
// We would risk displaying two tooltips at the same time (native + this one).
if (childNode) {
childNode.removeAttribute('title');
}
clearTimeout(enterTimer.current);
clearTimeout(leaveTimer.current);
if (enterDelay || hystersisOpen && enterNextDelay) {
event.persist();
enterTimer.current = setTimeout(function () {
handleOpen(event);
}, hystersisOpen ? enterNextDelay : enterDelay);
} else {
handleOpen(event);
}
};
};
var _useIsFocusVisible = useIsFocusVisible(),
isFocusVisible = _useIsFocusVisible.isFocusVisible,
onBlurVisible = _useIsFocusVisible.onBlurVisible,
focusVisibleRef = _useIsFocusVisible.ref;
var _React$useState3 = React__namespace.useState(false),
childIsFocusVisible = _React$useState3[0],
setChildIsFocusVisible = _React$useState3[1];
var handleBlur = function handleBlur() {
if (childIsFocusVisible) {
setChildIsFocusVisible(false);
onBlurVisible();
}
};
var handleFocus = function handleFocus() {
var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
return function (event) {
// Workaround for https://github.com/facebook/react/issues/7769
// The autoFocus of React might trigger the event before the componentDidMount.
// We need to account for this eventuality.
if (!childNode) {
setChildNode(event.currentTarget);
}
if (isFocusVisible(event)) {
setChildIsFocusVisible(true);
handleEnter()(event);
}
var childrenProps = children.props;
if (childrenProps.onFocus && forward) {
childrenProps.onFocus(event);
}
};
};
var handleClose = function handleClose(event) {
clearTimeout(hystersisTimer);
hystersisTimer = setTimeout(function () {
hystersisOpen = false;
}, 800 + leaveDelay);
setOpenState(false);
if (onClose) {
onClose(event);
}
clearTimeout(closeTimer.current);
closeTimer.current = setTimeout(function () {
ignoreNonTouchEvents.current = false;
}, theme.transitions.duration.shortest);
};
var handleLeave = function handleLeave() {
var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
return function (event) {
var childrenProps = children.props;
if (event.type === 'blur') {
if (childrenProps.onBlur && forward) {
childrenProps.onBlur(event);
}
handleBlur();
}
if (event.type === 'mouseleave' && childrenProps.onMouseLeave && event.currentTarget === childNode) {
childrenProps.onMouseLeave(event);
}
clearTimeout(enterTimer.current);
clearTimeout(leaveTimer.current);
event.persist();
leaveTimer.current = setTimeout(function () {
handleClose(event);
}, leaveDelay);
};
};
var detectTouchStart = function detectTouchStart(event) {
ignoreNonTouchEvents.current = true;
var childrenProps = children.props;
if (childrenProps.onTouchStart) {
childrenProps.onTouchStart(event);
}
};
var handleTouchStart = function handleTouchStart(event) {
detectTouchStart(event);
clearTimeout(leaveTimer.current);
clearTimeout(closeTimer.current);
clearTimeout(touchTimer.current);
event.persist();
touchTimer.current = setTimeout(function () {
handleEnter()(event);
}, enterTouchDelay);
};
var handleTouchEnd = function handleTouchEnd(event) {
if (children.props.onTouchEnd) {
children.props.onTouchEnd(event);
}
clearTimeout(touchTimer.current);
clearTimeout(leaveTimer.current);
event.persist();
leaveTimer.current = setTimeout(function () {
handleClose(event);
}, leaveTouchDelay);
};
var handleUseRef = useForkRef(setChildNode, ref);
var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef); // can be removed once we drop support for non ref forwarding class components
var handleOwnRef = React__namespace.useCallback(function (instance) {
// #StrictMode ready
setRef(handleFocusRef, ReactDOM__namespace.findDOMNode(instance));
}, [handleFocusRef]);
var handleRef = useForkRef(children.ref, handleOwnRef); // There is no point in displaying an empty tooltip.
if (title === '') {
open = false;
} // For accessibility and SEO concerns, we render the title to the DOM node when
// the tooltip is hidden. However, we have made a tradeoff when
// `disableHoverListener` is set. This title logic is disabled.
// It's allowing us to keep the implementation size minimal.
// We are open to change the tradeoff.
var shouldShowNativeTitle = !open && !disableHoverListener;
var childrenProps = _extends$1({
'aria-describedby': open ? id : null,
title: shouldShowNativeTitle && typeof title === 'string' ? title : null
}, other, children.props, {
className: clsx(other.className, children.props.className),
onTouchStart: detectTouchStart,
ref: handleRef
});
var interactiveWrapperListeners = {};
if (!disableTouchListener) {
childrenProps.onTouchStart = handleTouchStart;
childrenProps.onTouchEnd = handleTouchEnd;
}
if (!disableHoverListener) {
childrenProps.onMouseOver = handleEnter();
childrenProps.onMouseLeave = handleLeave();
if (interactive) {
interactiveWrapperListeners.onMouseOver = handleEnter(false);
interactiveWrapperListeners.onMouseLeave = handleLeave(false);
}
}
if (!disableFocusListener) {
childrenProps.onFocus = handleFocus();
childrenProps.onBlur = handleLeave();
if (interactive) {
interactiveWrapperListeners.onFocus = handleFocus(false);
interactiveWrapperListeners.onBlur = handleLeave(false);
}
}
var mergedPopperProps = React__namespace.useMemo(function () {
return deepmerge({
popperOptions: {
modifiers: {
arrow: {
enabled: Boolean(arrowRef),
element: arrowRef
}
}
}
}, PopperProps);
}, [arrowRef, PopperProps]);
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.cloneElement(children, childrenProps), /*#__PURE__*/React__namespace.createElement(PopperComponent, _extends$1({
className: clsx(classes.popper, interactive && classes.popperInteractive, arrow && classes.popperArrow),
placement: placement,
anchorEl: childNode,
open: childNode ? open : false,
id: childrenProps['aria-describedby'],
transition: true
}, interactiveWrapperListeners, mergedPopperProps), function (_ref) {
var placementInner = _ref.placement,
TransitionPropsInner = _ref.TransitionProps;
return /*#__PURE__*/React__namespace.createElement(TransitionComponent, _extends$1({
timeout: theme.transitions.duration.shorter
}, TransitionPropsInner, TransitionProps), /*#__PURE__*/React__namespace.createElement("div", {
className: clsx(classes.tooltip, classes["tooltipPlacement".concat(capitalize$1(placementInner.split('-')[0]))], ignoreNonTouchEvents.current && classes.touch, arrow && classes.tooltipArrow)
}, title, arrow ? /*#__PURE__*/React__namespace.createElement("span", {
className: classes.arrow,
ref: setArrowRef
}) : null));
}));
});
var Tooltip$1 = withStyles(styles, {
name: 'MuiTooltip',
flip: false
})(Tooltip);
function _defineProperty$2(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _classCallCheck$1(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties$1(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass$1(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
if (staticProps) _defineProperties$1(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function ownKeys$8(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread$8(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys$8(Object(source), true).forEach(function (key) {
_defineProperty$2(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys$8(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
var defaultOptions = {
bindI18n: 'languageChanged',
bindI18nStore: '',
transEmptyNodeValue: '',
transSupportBasicHtmlNodes: true,
transWrapTextNodes: '',
transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
useSuspense: true
};
var i18nInstance;
var I18nContext = /*#__PURE__*/React__default['default'].createContext();
function setDefaults() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
defaultOptions = _objectSpread$8(_objectSpread$8({}, defaultOptions), options);
}
function getDefaults() {
return defaultOptions;
}
var ReportNamespaces = function () {
function ReportNamespaces() {
_classCallCheck$1(this, ReportNamespaces);
this.usedNamespaces = {};
}
_createClass$1(ReportNamespaces, [{
key: "addUsedNamespaces",
value: function addUsedNamespaces(namespaces) {
var _this = this;
namespaces.forEach(function (ns) {
if (!_this.usedNamespaces[ns]) _this.usedNamespaces[ns] = true;
});
}
}, {
key: "getUsedNamespaces",
value: function getUsedNamespaces() {
return Object.keys(this.usedNamespaces);
}
}]);
return ReportNamespaces;
}();
function setI18n(instance) {
i18nInstance = instance;
}
function getI18n() {
return i18nInstance;
}
var initReactI18next = {
type: '3rdParty',
init: function init(instance) {
setDefaults(instance.options.react);
setI18n(instance);
}
};
function warn() {
if (console && console.warn) {
var _console;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (typeof args[0] === 'string') args[0] = "react-i18next:: ".concat(args[0]);
(_console = console).warn.apply(_console, args);
}
}
var alreadyWarned = {};
function warnOnce() {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
warn.apply(void 0, args);
}
function loadNamespaces(i18n, ns, cb) {
i18n.loadNamespaces(ns, function () {
if (i18n.isInitialized) {
cb();
} else {
var initialized = function initialized() {
setTimeout(function () {
i18n.off('initialized', initialized);
}, 0);
cb();
};
i18n.on('initialized', initialized);
}
});
}
function oldI18nextHasLoadedNamespace(ns, i18n) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var lng = i18n.languages[0];
var fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
var lastLng = i18n.languages[i18n.languages.length - 1];
if (lng.toLowerCase() === 'cimode') return true;
var loadNotPending = function loadNotPending(l, n) {
var loadState = i18n.services.backendConnector.state["".concat(l, "|").concat(n)];
return loadState === -1 || loadState === 2;
};
if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
if (i18n.hasResourceBundle(lng, ns)) return true;
if (!i18n.services.backendConnector.backend || i18n.options.resources && !i18n.options.partialBundledLanguages) return true;
if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
return false;
}
function hasLoadedNamespace(ns, i18n) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
if (!i18n.languages || !i18n.languages.length) {
warnOnce('i18n.languages were undefined or empty', i18n.languages);
return true;
}
var isNewerI18next = i18n.options.ignoreJSONStructure !== undefined;
if (!isNewerI18next) {
return oldI18nextHasLoadedNamespace(ns, i18n, options);
}
return i18n.hasLoadedNamespace(ns, {
precheck: function precheck(i18nInstance, loadNotPending) {
if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
}
});
}
function _arrayWithHoles$1(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _arrayLikeToArray$1(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _unsupportedIterableToArray$1(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
}
function _nonIterableRest$1() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles$1(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1();
}
function ownKeys$7(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread$7(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys$7(Object(source), true).forEach(function (key) {
_defineProperty$2(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys$7(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
var usePrevious = function usePrevious(value, ignore) {
var ref = React$3.useRef();
React$3.useEffect(function () {
ref.current = ignore ? ref.current : value;
}, [value, ignore]);
return ref.current;
};
function useTranslation(ns) {
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var i18nFromProps = props.i18n;
var _ref = React$3.useContext(I18nContext) || {},
i18nFromContext = _ref.i18n,
defaultNSFromContext = _ref.defaultNS;
var i18n = i18nFromProps || i18nFromContext || getI18n();
if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
if (!i18n) {
warnOnce('You will need to pass in an i18next instance by using initReactI18next');
var notReadyT = function notReadyT(k) {
return Array.isArray(k) ? k[k.length - 1] : k;
};
var retNotReady = [notReadyT, {}, false];
retNotReady.t = notReadyT;
retNotReady.i18n = {};
retNotReady.ready = false;
return retNotReady;
}
if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
var i18nOptions = _objectSpread$7(_objectSpread$7(_objectSpread$7({}, getDefaults()), i18n.options.react), props);
var useSuspense = i18nOptions.useSuspense,
keyPrefix = i18nOptions.keyPrefix;
var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
var ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(function (n) {
return hasLoadedNamespace(n, i18n, i18nOptions);
});
function getT() {
return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
}
var _useState = React$3.useState(getT),
_useState2 = _slicedToArray(_useState, 2),
t = _useState2[0],
setT = _useState2[1];
var joinedNS = namespaces.join();
var previousJoinedNS = usePrevious(joinedNS);
var isMounted = React$3.useRef(true);
React$3.useEffect(function () {
var bindI18n = i18nOptions.bindI18n,
bindI18nStore = i18nOptions.bindI18nStore;
isMounted.current = true;
if (!ready && !useSuspense) {
loadNamespaces(i18n, namespaces, function () {
if (isMounted.current) setT(getT);
});
}
if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
setT(getT);
}
function boundReset() {
if (isMounted.current) setT(getT);
}
if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
return function () {
isMounted.current = false;
if (bindI18n && i18n) bindI18n.split(' ').forEach(function (e) {
return i18n.off(e, boundReset);
});
if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(function (e) {
return i18n.store.off(e, boundReset);
});
};
}, [i18n, joinedNS]);
var isInitial = React$3.useRef(true);
React$3.useEffect(function () {
if (isMounted.current && !isInitial.current) {
setT(getT);
}
isInitial.current = false;
}, [i18n]);
var ret = [t, i18n, ready];
ret.t = t;
ret.i18n = i18n;
ret.ready = ready;
if (ready) return ret;
if (!ready && !useSuspense) return ret;
throw new Promise(function (resolve) {
loadNamespaces(i18n, namespaces, function () {
resolve();
});
});
}
/**
*
* @export
* @param {HTMLElement} panel
*/
function getPanelSize(panel) {
const clone = panel.cloneNode(true);
clone.style.opacity = 0;
clone.style.position = 'absolute';
clone.removeAttribute('hidden');
panel.parentNode.appendChild(clone);
const width = clone.scrollWidth;
const height = clone.scrollHeight;
clone.remove();
return {
width,
height
};
}
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = location.search.substr(1).match(reg);
if (r != null) return unescape(decodeURI(r[2]));
return null;
}
var ArrowForwardIos = {};
var interopRequireDefault = {exports: {}};
(function (module) {
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
"default": obj
};
}
module.exports = _interopRequireDefault;
module.exports["default"] = module.exports, module.exports.__esModule = true;
}(interopRequireDefault));
var interopRequireWildcard = {exports: {}};
var _typeof$1 = {exports: {}};
(function (module) {
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
module.exports = _typeof = function _typeof(obj) {
return typeof obj;
};
module.exports["default"] = module.exports, module.exports.__esModule = true;
} else {
module.exports = _typeof = function _typeof(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
module.exports["default"] = module.exports, module.exports.__esModule = true;
}
return _typeof(obj);
}
module.exports = _typeof;
module.exports["default"] = module.exports, module.exports.__esModule = true;
}(_typeof$1));
(function (module) {
var _typeof = _typeof$1.exports["default"];
function _getRequireWildcardCache(nodeInterop) {
if (typeof WeakMap !== "function") return null;
var cacheBabelInterop = new WeakMap();
var cacheNodeInterop = new WeakMap();
return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
})(nodeInterop);
}
function _interopRequireWildcard(obj, nodeInterop) {
if (!nodeInterop && obj && obj.__esModule) {
return obj;
}
if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") {
return {
"default": obj
};
}
var cache = _getRequireWildcardCache(nodeInterop);
if (cache && cache.has(obj)) {
return cache.get(obj);
}
var newObj = {};
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var key in obj) {
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
if (desc && (desc.get || desc.set)) {
Object.defineProperty(newObj, key, desc);
} else {
newObj[key] = obj[key];
}
}
}
newObj["default"] = obj;
if (cache) {
cache.set(obj, newObj);
}
return newObj;
}
module.exports = _interopRequireWildcard;
module.exports["default"] = module.exports, module.exports.__esModule = true;
}(interopRequireWildcard));
var createSvgIcon = {};
var require$$0 = /*@__PURE__*/getAugmentedNamespace(utils);
(function (exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function get() {
return _utils.createSvgIcon;
}
});
var _utils = require$$0;
}(createSvgIcon));
var _interopRequireDefault$2 = interopRequireDefault.exports;
var _interopRequireWildcard$2 = interopRequireWildcard.exports;
Object.defineProperty(ArrowForwardIos, "__esModule", {
value: true
});
var default_1$2 = ArrowForwardIos.default = void 0;
var React$2 = _interopRequireWildcard$2(React__default['default']);
var _createSvgIcon$2 = _interopRequireDefault$2(createSvgIcon);
var _default$2 = (0, _createSvgIcon$2.default)( /*#__PURE__*/React$2.createElement("path", {
d: "M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"
}), 'ArrowForwardIos');
default_1$2 = ArrowForwardIos.default = _default$2;
function _defineProperty$1(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
let sendDanmakuLock = false;
let playing = false;
let prevID = [];
/** @type {Danmaku} */
let core;
/**
* @type {MutationObserver}
*/
let videoObserver;
/**
* @type {MutationObserver}
*/
let bodyObserver;
class DanmakuOptions {
constructor() {
_defineProperty$1(this, "use", true);
_defineProperty$1(this, "opacity", 0.7);
_defineProperty$1(this, "showSuperChat", false);
_defineProperty$1(this, "showStickers", true);
_defineProperty$1(this, "scale", 0.5);
_defineProperty$1(this, "fontSize", 24);
_defineProperty$1(this, "filterList", []);
_defineProperty$1(this, "filterUse", false);
mobx.makeAutoObservable(this);
Object.assign(this, {
use: true,
showStickers: true,
showSuperChat: false,
scale: 1,
opacity: 0.7,
filterList: [],
filterUse: false,
fontSize: 24
}, JSON.parse(localStorage.getItem('ytb-danmaku-config')));
}
/**
* @param {boolean} use
*/
toggleDanmaku(use) {
config.use = use;
if (use) {
playing = true;
core.show();
rAFDanmaku();
} else {
playing = false;
core.hide();
}
}
/**
* @param {number} scale
*/
changeDanmakuSpeed(scale) {
this.scale = scale;
core.speed = 144 * scale;
}
/**
* @param {number} opacity
*/
changeDanmakuOpacity(opacity) {
this.opacity = opacity;
core.opacity = opacity;
}
/**
* @param {number} fontSize
*/
changeDanmakuFontSize(fontSize) {
var _document$querySelect;
this.fontSize = fontSize;
(_document$querySelect = document.querySelector('.danmaku-stage')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.style.setProperty('--danmaku-font-size', `${fontSize}px`);
}
/**
* @param {boolean} showStickers
*/
toggleShowSticker(showStickers) {
this.showStickers = showStickers;
}
/**
* @param {boolean} showSuperChat
*/
toggleShowSuperChat(showSuperChat) {
this.showSuperChat = showSuperChat;
}
/**
* @param {string} content
*/
addFilter(content) {
if (content.trim().length === 0) return;
config.filterList.push({
content,
isuse: true,
id: Math.random().toString(16).slice(2)
});
}
changeFilterUse(id) {
const target = config.filterList.find(o => o.id === id);
target.isuse = !target.isuse;
}
deleteFilter(id) {
config.filterList = config.filterList.filter(o => o.id !== id);
}
toggleFilterUse(bool) {
config.filterUse = bool;
}
}
const config = new DanmakuOptions();
mobx.autorun(() => {
localStorage.setItem('ytb-danmaku-config', JSON.stringify(config));
});
function init(cb) {
let prevVID;
let inited = false;
if (bodyObserver) bodyObserver.disconnect();
bodyObserver = new MutationObserver(() => {
if (location.pathname === '/watch') {
const VID = getQueryString('v');
if (prevVID !== VID) {
prevVID = VID;
inited = true;
inject(cb);
} else {
if (!inited) {
inited = true;
inject(cb);
}
}
} else {
inited = false;
prevVID = null;
playing = false;
}
});
bodyObserver.observe(document.body, {
childList: true,
subtree: true
});
}
function inject(cb) {
try {
var _core;
console.trace('ytb-danmaku-inited');
const player = document.getElementById('movie_player');
if (!player) throw new Error('not find player');
document.querySelector('ytd-watch-flexy .ytp-left-controls').setAttribute('style', 'overflow: unset;');
(_core = core) === null || _core === void 0 ? void 0 : _core.destroy();
core = new Danmaku__default['default']({
container: player
});
document.querySelector('#movie_player').prepend(core._.stage);
config.changeDanmakuSpeed(config.scale);
config.changeDanmakuOpacity(config.opacity);
config.changeDanmakuFontSize(config.fontSize);
buildControls();
subEvent();
config.toggleDanmaku(config.use);
cb && cb();
} catch (e) {
console.error(e);
setTimeout(() => {
inject(cb);
}, 3000);
}
}
function getDanmaku() {
const iframe = document.querySelector('iframe#chatframe');
if (iframe) {
/**
* @type {Document}
*/
const idoc = iframe.contentDocument;
const messagesNode = Array.from(idoc.querySelectorAll(config.showSuperChat ? 'yt-live-chat-paid-message-renderer,yt-live-chat-text-message-renderer' : 'yt-live-chat-text-message-renderer'));
const lastMessageNodes = messagesNode.slice(-10);
lastMessageNodes.forEach(lastMessageNode => {
const nextID = lastMessageNode.id;
if (!playing || prevID.includes(nextID)) return;
prevID = [...prevID, nextID].slice(-20);
if (config.filterUse) {
const filterList = config.filterList.filter(o => o.isuse);
const messageText = lastMessageNode.querySelector('#message').innerText || '';
if (filterList.some(o => messageText.includes(o.content))) return;
}
const message = config.showStickers ? lastMessageNode.querySelector('#message').innerHTML : lastMessageNode.querySelector('#message').innerText;
const isPaidMessage = lastMessageNode.tagName.toLowerCase() === 'yt-live-chat-paid-message-renderer';
const color = isPaidMessage ? getComputedStyle(lastMessageNode).getPropertyValue('--yt-live-chat-paid-message-primary-color') : 'white';
core.emit({
mode: 'rtl',
style: {
color
},
...(config.showStickers ? {
render: () => {
const div = document.createElement('div');
div.innerHTML = message;
div.style.color = color;
return div;
}
} : {
text: message
})
});
});
}
}
function rAFDanmaku() {
if (playing) requestAnimationFrame(rAFDanmaku);
if (sendDanmakuLock) return;
sendDanmakuLock = true;
getDanmaku();
sendDanmakuLock = false;
}
function buildControls() {
if (document.getElementById('ytb-danmaku-config')) return;
const div = document.createElement('div');
div.style.width = 'auto';
div.id = 'ytb-danmaku-config';
document.querySelector('ytd-watch-flexy .ytp-left-controls').append(div);
}
function subEvent() {
const video = document.querySelector('video');
video.addEventListener('pause', () => {
if (!config.use) return;
playing = false;
core.hide();
});
video.addEventListener('play', () => {
if (!config.use) return;
playing = true;
core.show();
rAFDanmaku();
});
window.addEventListener('resize', () => {
core.resize();
});
if (videoObserver) videoObserver.disconnect();
videoObserver = new MutationObserver(() => {
setTimeout(() => {
core.resize();
}, 500);
});
videoObserver.observe(video, {
attributes: true
});
}
const useStyles$1 = makeStyles(theme => createStyles({
root: {
'& .ytp-menuitem-label': {
minWidth: 60
}
},
sliderRoot: {
display: 'flex',
alignItems: 'center'
},
slider: {
margin: theme.spacing(0, 1, 0, 2),
flex: 1
},
listButton: {
'&:hover': {
backgroundColor: 'rgba(255,255,255,.1)'
}
}
}));
const BaseConfig = ({
switchPanel
}) => {
const classes = useStyles$1();
const [t] = useTranslation();
const handleUse = () => {
config.toggleDanmaku(!config.use);
};
const handleShowSticker = () => {
config.toggleShowSticker(!config.showStickers);
};
const handleShowSuperChat = () => {
config.toggleShowSuperChat(!config.showSuperChat);
};
return /*#__PURE__*/React__default['default'].createElement(List$1, {
id: "k-base",
className: classes.root
}, /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
button: true,
className: classes.listButton,
onClick: handleUse
}, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
primary: t('showDanmaku'),
primaryTypographyProps: {
className: 'ytp-menuitem-label',
style: {
fontWeight: 500
}
}
}), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(Switch$1, {
checked: config.use,
onClick: handleUse
}))), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
button: true,
className: classes.listButton,
onClick: handleShowSticker
}, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
primary: t('showEmoji'),
primaryTypographyProps: {
className: 'ytp-menuitem-label',
style: {
fontWeight: 500
}
}
}), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(Switch$1, {
checked: config.showStickers,
onClick: handleShowSticker
}))), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
button: true,
className: classes.listButton,
onClick: handleShowSuperChat
}, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
primary: t('showSuperChat'),
primaryTypographyProps: {
className: 'ytp-menuitem-label',
style: {
fontWeight: 500
}
}
}), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(Switch$1, {
checked: config.showSuperChat,
onClick: handleShowSuperChat
}))), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
className: classes.listButton
}, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
primary: /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.sliderRoot
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "ytp-menuitem-label"
}, t('fontSize')), /*#__PURE__*/React__default['default'].createElement(Slider$1, {
color: "secondary",
max: 40,
step: 1,
min: 12,
value: config.fontSize,
valueLabelDisplay: "auto",
className: classes.slider,
onChange: (e, v) => {
config.changeDanmakuFontSize(v);
}
}))
})), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
className: classes.listButton
}, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
primary: /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.sliderRoot
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "ytp-menuitem-label"
}, t('danmakuSpeed')), /*#__PURE__*/React__default['default'].createElement(Slider$1, {
color: "secondary",
max: 2,
step: 0.1,
min: 0.1,
value: config.scale,
valueLabelDisplay: "auto",
className: classes.slider,
onChange: (e, v) => {
config.changeDanmakuSpeed(v);
}
}))
})), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
className: classes.listButton
}, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
primary: /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.sliderRoot
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "ytp-menuitem-label"
}, t('opacity')), /*#__PURE__*/React__default['default'].createElement(Slider$1, {
color: "secondary",
max: 1,
step: 0.1,
min: 0,
value: config.opacity,
valueLabelDisplay: "auto",
className: classes.slider,
onChange: (e, v) => {
config.changeDanmakuOpacity(v);
}
}))
})), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
className: classes.listButton,
button: true,
onClick: () => switchPanel('filter')
}, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
primary: t('filter.label')
}), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(default_1$2, null))));
};
var BaseConfig$1 = mobxReact.observer(BaseConfig);
var ArrowBackIos = {};
var _interopRequireDefault$1 = interopRequireDefault.exports;
var _interopRequireWildcard$1 = interopRequireWildcard.exports;
Object.defineProperty(ArrowBackIos, "__esModule", {
value: true
});
var default_1$1 = ArrowBackIos.default = void 0;
var React$1 = _interopRequireWildcard$1(React__default['default']);
var _createSvgIcon$1 = _interopRequireDefault$1(createSvgIcon);
var _default$1 = (0, _createSvgIcon$1.default)( /*#__PURE__*/React$1.createElement("path", {
d: "M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"
}), 'ArrowBackIos');
default_1$1 = ArrowBackIos.default = _default$1;
var Delete = {};
var _interopRequireDefault = interopRequireDefault.exports;
var _interopRequireWildcard = interopRequireWildcard.exports;
Object.defineProperty(Delete, "__esModule", {
value: true
});
var default_1 = Delete.default = void 0;
var React = _interopRequireWildcard(React__default['default']);
var _createSvgIcon = _interopRequireDefault(createSvgIcon);
var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
}), 'Delete');
default_1 = Delete.default = _default;
const useFilterStyles = makeStyles(theme => createStyles({
root: {
width: '100%',
display: 'flex',
flexDirection: 'column',
height: 350
},
filterRoot: {
flex: 1,
overflow: 'hidden',
textAlign: 'left',
padding: theme.spacing(1, 2),
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column'
},
inputContainer: {
display: 'flex'
},
input: {
padding: theme.spacing(0.25, 1),
border: '1px solid rgba(255,255,255,.4)',
borderRadius: 2,
flex: 1,
'&:focus': {
outline: 0
}
},
addBtn: {
border: '1px solid rgba(255,255,255,.4)',
borderRadius: 2,
marginLeft: 8,
backgroundColor: 'transparent',
padding: theme.spacing(0.25, 1),
color: 'white'
},
listButton: {
'&:hover': {
backgroundColor: 'rgba(255,255,255,.1)'
}
},
cell: {
padding: theme.spacing(0.25, 0),
lineHeight: 1.2,
'& + &': {
paddingLeft: theme.spacing(1)
}
},
contentCell: {
width: 180,
wordBreak: 'break-all'
},
op: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'space-between',
'& > * + *': {
marginLeft: theme.spacing(1)
}
},
tableContainer: {
flex: 1,
minHeight: 0
},
table: {
height: '100%',
overflow: 'auto',
'& table': {
width: '100%'
}
}
}));
const FilterDanmaku = ({
switchPanel
}) => {
const classes = useFilterStyles();
const [state, setState] = React$3.useState('');
const [t] = useTranslation();
const handleAdd = () => {
config.addFilter(state);
setState('');
};
const handleFilterUse = () => {
config.toggleFilterUse(!config.filterUse);
};
return /*#__PURE__*/React__default['default'].createElement("div", {
id: "k-filter",
className: classes.root
}, /*#__PURE__*/React__default['default'].createElement(List$1, null, /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
className: classes.listButton,
button: true,
onClick: () => switchPanel('base', true)
}, /*#__PURE__*/React__default['default'].createElement(default_1$1, {
color: "inherit"
}), /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
primary: t('filter.label')
}), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(Switch$1, {
checked: config.filterUse,
onClick: handleFilterUse
}))), /*#__PURE__*/React__default['default'].createElement(Divider$1, {
style: {
backgroundColor: '#444'
}
})), /*#__PURE__*/React__default['default'].createElement(Fade, {
in: config.filterUse,
unmountOnExit: true
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.filterRoot
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.inputContainer
}, /*#__PURE__*/React__default['default'].createElement("input", {
placeholder: t('filter.enterContent'),
className: classes.input,
value: state,
onChange: e => {
setState(e.target.value);
},
onKeyDownCapture: e => {
if (e.key === 'Enter') {
handleAdd();
}
}
}), /*#__PURE__*/React__default['default'].createElement("button", {
className: classes.addBtn,
onClick: handleAdd
}, t('filter.add'))), /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.tableContainer
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.table
}, /*#__PURE__*/React__default['default'].createElement("table", null, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
className: classes.cell
}, t('filter.content'), "(", config.filterList.length, ")"), /*#__PURE__*/React__default['default'].createElement("th", {
className: classes.cell,
align: "right"
}, t('filter.operation')))), /*#__PURE__*/React__default['default'].createElement("tbody", null, config.filterList.map(o => /*#__PURE__*/React__default['default'].createElement("tr", {
key: o.id
}, /*#__PURE__*/React__default['default'].createElement("td", {
className: `${classes.contentCell} ${classes.cell}`
}, o.content), /*#__PURE__*/React__default['default'].createElement("td", {
className: classes.cell,
align: "right"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.op
}, /*#__PURE__*/React__default['default'].createElement("span", {
style: {
cursor: 'pointer'
},
onClick: () => config.changeFilterUse(o.id)
}, o.isuse ? t('filter.on') : t('filter.off')), /*#__PURE__*/React__default['default'].createElement("span", {
style: {
fontSize: '1em',
cursor: 'pointer'
},
onClick: () => {
config.deleteFilter(o.id);
}
}, /*#__PURE__*/React__default['default'].createElement(default_1, null)))))))))))));
};
var FilterDanmaku$1 = mobxReact.observer(FilterDanmaku);
const muiTheme = createMuiTheme({
palette: {
secondary: {
main: '#f00'
}
},
overrides: {
MuiSwitch: {
thumb: {
backgroundColor: 'white'
},
track: {
opacity: '1 !important'
}
}
}
});
const useStyles = makeStyles(theme => createStyles({
root: {
position: 'relative'
},
controls: {
backgroundColor: 'rgba(28,28,28,0.9)',
position: 'absolute',
bottom: 40,
color: 'white',
left: '50%',
transform: 'translateX(-50%)',
zIndex: theme.zIndex.tooltip,
width: 300,
borderRadius: 12
},
tooltip: {
padding: '4px 10px',
backgroundColor: 'rgba(28,28,28,0.9)',
fontSize: 13,
borderRadius: 4,
fontWeight: 400
},
container: {
width: 300,
'&>div': {
width: 300,
display: 'flex',
overflow: 'hidden',
transition: theme.transitions.create(['height']),
'&>*': {
flexShrink: 0,
width: 300
}
}
}
}));
const Danmaku = () => {
const [open, setOpen] = React$3.useState(false);
const classes = useStyles();
const containerRef = React$3.useRef();
const theme = useTheme();
const [t] = useTranslation();
const btnRef = React$3.useRef();
const popoverRef = React$3.useRef();
React$3.useEffect(() => {
if (open) {
const rect = btnRef.current.getBoundingClientRect();
popoverRef.current.style.position = `absolute`;
popoverRef.current.style.left = `${rect.x}px`;
popoverRef.current.style.top = `${rect.y + document.scrollingElement.scrollTop}px`;
popoverRef.current.style.width = `${rect.width}px`;
popoverRef.current.style.height = `${rect.height}px`;
Array.from(containerRef.current.children).forEach((o, i) => o.hidden = i !== 0);
}
}, [open]);
const switchPanel = React$3.useCallback((key, isBack) => {
const target = document.getElementById(`k-${key}`);
const current = Array.from(containerRef.current.children).find(o => !o.hidden);
const currentSize = current.getBoundingClientRect();
containerRef.current.style.height = `${currentSize.height}px`;
const restore = e => {
if (e.target !== containerRef.current && !['height'].includes(e.propertyName)) return;
containerRef.current.style.height = '';
[current, target].forEach(o => {
o.style.transform = '';
o.style.transition = '';
});
current.hidden = true;
containerRef.current.removeEventListener('transitionend', restore);
};
containerRef.current.addEventListener('transitionend', restore);
const size = getPanelSize(target);
containerRef.current.style.height = `${size.height}px`;
target.hidden = false;
Array.from(containerRef.current.children).forEach(o => {
o.style.transform = `translateX(${isBack ? '-300' : '0'}px)`;
requestAnimationFrame(() => {
o.style.transform = `translateX(${isBack ? '0' : '-300'}px)`;
o.style.transition = theme.transitions.create(['transform']);
});
});
}, []);
return /*#__PURE__*/React__default['default'].createElement(ThemeProvider, {
theme: muiTheme
}, /*#__PURE__*/React__default['default'].createElement("style", {
jsx: true
}, `
[hidden] {
display: none !important;
}
`), /*#__PURE__*/React__default['default'].createElement("span", {
className: classes.root
}, /*#__PURE__*/React__default['default'].createElement(Tooltip$1, {
title: t('danmaku'),
placement: "top",
classes: {
tooltip: classes.tooltip
}
}, /*#__PURE__*/React__default['default'].createElement("button", {
ref: btnRef,
style: {
textAlign: 'center',
width: 'auto'
},
onClick: () => setOpen(true),
className: "ytp-button"
}, t('danmaku'))), /*#__PURE__*/React__default['default'].createElement(Portal, null, /*#__PURE__*/React__default['default'].createElement(Fade, {
in: open,
unmountOnExit: true
}, /*#__PURE__*/React__default['default'].createElement("div", {
ref: popoverRef
}, /*#__PURE__*/React__default['default'].createElement(Box, {
className: classes.controls
}, /*#__PURE__*/React__default['default'].createElement(ClickAwayListener, {
onClickAway: () => setOpen(false)
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: classes.container
}, /*#__PURE__*/React__default['default'].createElement("div", {
ref: containerRef
}, /*#__PURE__*/React__default['default'].createElement(BaseConfig$1, {
switchPanel: switchPanel
}), /*#__PURE__*/React__default['default'].createElement(FilterDanmaku$1, {
switchPanel: switchPanel
}))))))))));
};
var Danmaku$1 = mobxReact.observer(Danmaku);
function _typeof(obj) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
}, _typeof(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
Object.defineProperty(subClass, "prototype", {
writable: false
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _possibleConstructorReturn(self, call) {
if (call && (_typeof(call) === "object" || typeof call === "function")) {
return call;
} else if (call !== void 0) {
throw new TypeError("Derived constructors may only return object or undefined");
}
return _assertThisInitialized(self);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toArray(arr) {
return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
var consoleLogger = {
type: 'logger',
log: function log(args) {
this.output('log', args);
},
warn: function warn(args) {
this.output('warn', args);
},
error: function error(args) {
this.output('error', args);
},
output: function output(type, args) {
if (console && console[type]) console[type].apply(console, args);
}
};
var Logger = function () {
function Logger(concreteLogger) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, Logger);
this.init(concreteLogger, options);
}
_createClass(Logger, [{
key: "init",
value: function init(concreteLogger) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
this.prefix = options.prefix || 'i18next:';
this.logger = concreteLogger || consoleLogger;
this.options = options;
this.debug = options.debug;
}
}, {
key: "setDebug",
value: function setDebug(bool) {
this.debug = bool;
}
}, {
key: "log",
value: function log() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return this.forward(args, 'log', '', true);
}
}, {
key: "warn",
value: function warn() {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return this.forward(args, 'warn', '', true);
}
}, {
key: "error",
value: function error() {
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
return this.forward(args, 'error', '');
}
}, {
key: "deprecate",
value: function deprecate() {
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
args[_key4] = arguments[_key4];
}
return this.forward(args, 'warn', 'WARNING DEPRECATED: ', true);
}
}, {
key: "forward",
value: function forward(args, lvl, prefix, debugOnly) {
if (debugOnly && !this.debug) return null;
if (typeof args[0] === 'string') args[0] = "".concat(prefix).concat(this.prefix, " ").concat(args[0]);
return this.logger[lvl](args);
}
}, {
key: "create",
value: function create(moduleName) {
return new Logger(this.logger, _objectSpread(_objectSpread({}, {
prefix: "".concat(this.prefix, ":").concat(moduleName, ":")
}), this.options));
}
}]);
return Logger;
}();
var baseLogger = new Logger();
var EventEmitter = function () {
function EventEmitter() {
_classCallCheck(this, EventEmitter);
this.observers = {};
}
_createClass(EventEmitter, [{
key: "on",
value: function on(events, listener) {
var _this = this;
events.split(' ').forEach(function (event) {
_this.observers[event] = _this.observers[event] || [];
_this.observers[event].push(listener);
});
return this;
}
}, {
key: "off",
value: function off(event, listener) {
if (!this.observers[event]) return;
if (!listener) {
delete this.observers[event];
return;
}
this.observers[event] = this.observers[event].filter(function (l) {
return l !== listener;
});
}
}, {
key: "emit",
value: function emit(event) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (this.observers[event]) {
var cloned = [].concat(this.observers[event]);
cloned.forEach(function (observer) {
observer.apply(void 0, args);
});
}
if (this.observers['*']) {
var _cloned = [].concat(this.observers['*']);
_cloned.forEach(function (observer) {
observer.apply(observer, [event].concat(args));
});
}
}
}]);
return EventEmitter;
}();
function defer() {
var res;
var rej;
var promise = new Promise(function (resolve, reject) {
res = resolve;
rej = reject;
});
promise.resolve = res;
promise.reject = rej;
return promise;
}
function makeString(object) {
if (object == null) return '';
return '' + object;
}
function copy(a, s, t) {
a.forEach(function (m) {
if (s[m]) t[m] = s[m];
});
}
function getLastOfPath(object, path, Empty) {
function cleanKey(key) {
return key && key.indexOf('###') > -1 ? key.replace(/###/g, '.') : key;
}
function canNotTraverseDeeper() {
return !object || typeof object === 'string';
}
var stack = typeof path !== 'string' ? [].concat(path) : path.split('.');
while (stack.length > 1) {
if (canNotTraverseDeeper()) return {};
var key = cleanKey(stack.shift());
if (!object[key] && Empty) object[key] = new Empty();
if (Object.prototype.hasOwnProperty.call(object, key)) {
object = object[key];
} else {
object = {};
}
}
if (canNotTraverseDeeper()) return {};
return {
obj: object,
k: cleanKey(stack.shift())
};
}
function setPath(object, path, newValue) {
var _getLastOfPath = getLastOfPath(object, path, Object),
obj = _getLastOfPath.obj,
k = _getLastOfPath.k;
obj[k] = newValue;
}
function pushPath(object, path, newValue, concat) {
var _getLastOfPath2 = getLastOfPath(object, path, Object),
obj = _getLastOfPath2.obj,
k = _getLastOfPath2.k;
obj[k] = obj[k] || [];
if (concat) obj[k] = obj[k].concat(newValue);
if (!concat) obj[k].push(newValue);
}
function getPath(object, path) {
var _getLastOfPath3 = getLastOfPath(object, path),
obj = _getLastOfPath3.obj,
k = _getLastOfPath3.k;
if (!obj) return undefined;
return obj[k];
}
function getPathWithDefaults(data, defaultData, key) {
var value = getPath(data, key);
if (value !== undefined) {
return value;
}
return getPath(defaultData, key);
}
function deepExtend(target, source, overwrite) {
for (var prop in source) {
if (prop !== '__proto__' && prop !== 'constructor') {
if (prop in target) {
if (typeof target[prop] === 'string' || target[prop] instanceof String || typeof source[prop] === 'string' || source[prop] instanceof String) {
if (overwrite) target[prop] = source[prop];
} else {
deepExtend(target[prop], source[prop], overwrite);
}
} else {
target[prop] = source[prop];
}
}
}
return target;
}
function regexEscape(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
var _entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/'
};
function escape(data) {
if (typeof data === 'string') {
return data.replace(/[&<>"'\/]/g, function (s) {
return _entityMap[s];
});
}
return data;
}
var isIE10 = typeof window !== 'undefined' && window.navigator && typeof window.navigator.userAgentData === 'undefined' && window.navigator.userAgent && window.navigator.userAgent.indexOf('MSIE') > -1;
var chars = [' ', ',', '?', '!', ';'];
function looksLikeObjectPath(key, nsSeparator, keySeparator) {
nsSeparator = nsSeparator || '';
keySeparator = keySeparator || '';
var possibleChars = chars.filter(function (c) {
return nsSeparator.indexOf(c) < 0 && keySeparator.indexOf(c) < 0;
});
if (possibleChars.length === 0) return true;
var r = new RegExp("(".concat(possibleChars.map(function (c) {
return c === '?' ? '\\?' : c;
}).join('|'), ")"));
var matched = !r.test(key);
if (!matched) {
var ki = key.indexOf(keySeparator);
if (ki > 0 && !r.test(key.substring(0, ki))) {
matched = true;
}
}
return matched;
}
function ownKeys$1(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread$1(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys$1(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys$1(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _createSuper(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function deepFind(obj, path) {
var keySeparator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '.';
if (!obj) return undefined;
if (obj[path]) return obj[path];
var paths = path.split(keySeparator);
var current = obj;
for (var i = 0; i < paths.length; ++i) {
if (!current) return undefined;
if (typeof current[paths[i]] === 'string' && i + 1 < paths.length) {
return undefined;
}
if (current[paths[i]] === undefined) {
var j = 2;
var p = paths.slice(i, i + j).join(keySeparator);
var mix = current[p];
while (mix === undefined && paths.length > i + j) {
j++;
p = paths.slice(i, i + j).join(keySeparator);
mix = current[p];
}
if (mix === undefined) return undefined;
if (mix === null) return null;
if (path.endsWith(p)) {
if (typeof mix === 'string') return mix;
if (p && typeof mix[p] === 'string') return mix[p];
}
var joinedPath = paths.slice(i + j).join(keySeparator);
if (joinedPath) return deepFind(mix, joinedPath, keySeparator);
return undefined;
}
current = current[paths[i]];
}
return current;
}
var ResourceStore = function (_EventEmitter) {
_inherits(ResourceStore, _EventEmitter);
var _super = _createSuper(ResourceStore);
function ResourceStore(data) {
var _this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
ns: ['translation'],
defaultNS: 'translation'
};
_classCallCheck(this, ResourceStore);
_this = _super.call(this);
if (isIE10) {
EventEmitter.call(_assertThisInitialized(_this));
}
_this.data = data || {};
_this.options = options;
if (_this.options.keySeparator === undefined) {
_this.options.keySeparator = '.';
}
if (_this.options.ignoreJSONStructure === undefined) {
_this.options.ignoreJSONStructure = true;
}
return _this;
}
_createClass(ResourceStore, [{
key: "addNamespaces",
value: function addNamespaces(ns) {
if (this.options.ns.indexOf(ns) < 0) {
this.options.ns.push(ns);
}
}
}, {
key: "removeNamespaces",
value: function removeNamespaces(ns) {
var index = this.options.ns.indexOf(ns);
if (index > -1) {
this.options.ns.splice(index, 1);
}
}
}, {
key: "getResource",
value: function getResource(lng, ns, key) {
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
var ignoreJSONStructure = options.ignoreJSONStructure !== undefined ? options.ignoreJSONStructure : this.options.ignoreJSONStructure;
var path = [lng, ns];
if (key && typeof key !== 'string') path = path.concat(key);
if (key && typeof key === 'string') path = path.concat(keySeparator ? key.split(keySeparator) : key);
if (lng.indexOf('.') > -1) {
path = lng.split('.');
}
var result = getPath(this.data, path);
if (result || !ignoreJSONStructure || typeof key !== 'string') return result;
return deepFind(this.data && this.data[lng] && this.data[lng][ns], key, keySeparator);
}
}, {
key: "addResource",
value: function addResource(lng, ns, key, value) {
var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
silent: false
};
var keySeparator = this.options.keySeparator;
if (keySeparator === undefined) keySeparator = '.';
var path = [lng, ns];
if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
if (lng.indexOf('.') > -1) {
path = lng.split('.');
value = ns;
ns = path[1];
}
this.addNamespaces(ns);
setPath(this.data, path, value);
if (!options.silent) this.emit('added', lng, ns, key, value);
}
}, {
key: "addResources",
value: function addResources(lng, ns, resources) {
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
silent: false
};
for (var m in resources) {
if (typeof resources[m] === 'string' || Object.prototype.toString.apply(resources[m]) === '[object Array]') this.addResource(lng, ns, m, resources[m], {
silent: true
});
}
if (!options.silent) this.emit('added', lng, ns, resources);
}
}, {
key: "addResourceBundle",
value: function addResourceBundle(lng, ns, resources, deep, overwrite) {
var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
silent: false
};
var path = [lng, ns];
if (lng.indexOf('.') > -1) {
path = lng.split('.');
deep = resources;
resources = ns;
ns = path[1];
}
this.addNamespaces(ns);
var pack = getPath(this.data, path) || {};
if (deep) {
deepExtend(pack, resources, overwrite);
} else {
pack = _objectSpread$1(_objectSpread$1({}, pack), resources);
}
setPath(this.data, path, pack);
if (!options.silent) this.emit('added', lng, ns, resources);
}
}, {
key: "removeResourceBundle",
value: function removeResourceBundle(lng, ns) {
if (this.hasResourceBundle(lng, ns)) {
delete this.data[lng][ns];
}
this.removeNamespaces(ns);
this.emit('removed', lng, ns);
}
}, {
key: "hasResourceBundle",
value: function hasResourceBundle(lng, ns) {
return this.getResource(lng, ns) !== undefined;
}
}, {
key: "getResourceBundle",
value: function getResourceBundle(lng, ns) {
if (!ns) ns = this.options.defaultNS;
if (this.options.compatibilityAPI === 'v1') return _objectSpread$1(_objectSpread$1({}, {}), this.getResource(lng, ns));
return this.getResource(lng, ns);
}
}, {
key: "getDataByLanguage",
value: function getDataByLanguage(lng) {
return this.data[lng];
}
}, {
key: "hasLanguageSomeTranslations",
value: function hasLanguageSomeTranslations(lng) {
var data = this.getDataByLanguage(lng);
var n = data && Object.keys(data) || [];
return !!n.find(function (v) {
return data[v] && Object.keys(data[v]).length > 0;
});
}
}, {
key: "toJSON",
value: function toJSON() {
return this.data;
}
}]);
return ResourceStore;
}(EventEmitter);
var postProcessor = {
processors: {},
addPostProcessor: function addPostProcessor(module) {
this.processors[module.name] = module;
},
handle: function handle(processors, value, key, options, translator) {
var _this = this;
processors.forEach(function (processor) {
if (_this.processors[processor]) value = _this.processors[processor].process(value, key, options, translator);
});
return value;
}
};
function ownKeys$2(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread$2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys$2(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys$2(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _createSuper$1(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct$1();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _isNativeReflectConstruct$1() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
var checkedLoadedFor = {};
var Translator = function (_EventEmitter) {
_inherits(Translator, _EventEmitter);
var _super = _createSuper$1(Translator);
function Translator(services) {
var _this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, Translator);
_this = _super.call(this);
if (isIE10) {
EventEmitter.call(_assertThisInitialized(_this));
}
copy(['resourceStore', 'languageUtils', 'pluralResolver', 'interpolator', 'backendConnector', 'i18nFormat', 'utils'], services, _assertThisInitialized(_this));
_this.options = options;
if (_this.options.keySeparator === undefined) {
_this.options.keySeparator = '.';
}
_this.logger = baseLogger.create('translator');
return _this;
}
_createClass(Translator, [{
key: "changeLanguage",
value: function changeLanguage(lng) {
if (lng) this.language = lng;
}
}, {
key: "exists",
value: function exists(key) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
interpolation: {}
};
if (key === undefined || key === null) {
return false;
}
var resolved = this.resolve(key, options);
return resolved && resolved.res !== undefined;
}
}, {
key: "extractFromKey",
value: function extractFromKey(key, options) {
var nsSeparator = options.nsSeparator !== undefined ? options.nsSeparator : this.options.nsSeparator;
if (nsSeparator === undefined) nsSeparator = ':';
var keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
var namespaces = options.ns || this.options.defaultNS || [];
var wouldCheckForNsInKey = nsSeparator && key.indexOf(nsSeparator) > -1;
var seemsNaturalLanguage = !this.options.userDefinedKeySeparator && !options.keySeparator && !this.options.userDefinedNsSeparator && !options.nsSeparator && !looksLikeObjectPath(key, nsSeparator, keySeparator);
if (wouldCheckForNsInKey && !seemsNaturalLanguage) {
var m = key.match(this.interpolator.nestingRegexp);
if (m && m.length > 0) {
return {
key: key,
namespaces: namespaces
};
}
var parts = key.split(nsSeparator);
if (nsSeparator !== keySeparator || nsSeparator === keySeparator && this.options.ns.indexOf(parts[0]) > -1) namespaces = parts.shift();
key = parts.join(keySeparator);
}
if (typeof namespaces === 'string') namespaces = [namespaces];
return {
key: key,
namespaces: namespaces
};
}
}, {
key: "translate",
value: function translate(keys, options, lastKey) {
var _this2 = this;
if (_typeof(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
options = this.options.overloadTranslationOptionHandler(arguments);
}
if (!options) options = {};
if (keys === undefined || keys === null) return '';
if (!Array.isArray(keys)) keys = [String(keys)];
var returnDetails = options.returnDetails !== undefined ? options.returnDetails : this.options.returnDetails;
var keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
var _this$extractFromKey = this.extractFromKey(keys[keys.length - 1], options),
key = _this$extractFromKey.key,
namespaces = _this$extractFromKey.namespaces;
var namespace = namespaces[namespaces.length - 1];
var lng = options.lng || this.language;
var appendNamespaceToCIMode = options.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
if (lng && lng.toLowerCase() === 'cimode') {
if (appendNamespaceToCIMode) {
var nsSeparator = options.nsSeparator || this.options.nsSeparator;
if (returnDetails) {
resolved.res = "".concat(namespace).concat(nsSeparator).concat(key);
return resolved;
}
return "".concat(namespace).concat(nsSeparator).concat(key);
}
if (returnDetails) {
resolved.res = key;
return resolved;
}
return key;
}
var resolved = this.resolve(keys, options);
var res = resolved && resolved.res;
var resUsedKey = resolved && resolved.usedKey || key;
var resExactUsedKey = resolved && resolved.exactUsedKey || key;
var resType = Object.prototype.toString.apply(res);
var noObject = ['[object Number]', '[object Function]', '[object RegExp]'];
var joinArrays = options.joinArrays !== undefined ? options.joinArrays : this.options.joinArrays;
var handleAsObjectInI18nFormat = !this.i18nFormat || this.i18nFormat.handleAsObject;
var handleAsObject = typeof res !== 'string' && typeof res !== 'boolean' && typeof res !== 'number';
if (handleAsObjectInI18nFormat && res && handleAsObject && noObject.indexOf(resType) < 0 && !(typeof joinArrays === 'string' && resType === '[object Array]')) {
if (!options.returnObjects && !this.options.returnObjects) {
if (!this.options.returnedObjectHandler) {
this.logger.warn('accessing an object - but returnObjects options is not enabled!');
}
var r = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(resUsedKey, res, _objectSpread$2(_objectSpread$2({}, options), {}, {
ns: namespaces
})) : "key '".concat(key, " (").concat(this.language, ")' returned an object instead of string.");
if (returnDetails) {
resolved.res = r;
return resolved;
}
return r;
}
if (keySeparator) {
var resTypeIsArray = resType === '[object Array]';
var copy = resTypeIsArray ? [] : {};
var newKeyToUse = resTypeIsArray ? resExactUsedKey : resUsedKey;
for (var m in res) {
if (Object.prototype.hasOwnProperty.call(res, m)) {
var deepKey = "".concat(newKeyToUse).concat(keySeparator).concat(m);
copy[m] = this.translate(deepKey, _objectSpread$2(_objectSpread$2({}, options), {
joinArrays: false,
ns: namespaces
}));
if (copy[m] === deepKey) copy[m] = res[m];
}
}
res = copy;
}
} else if (handleAsObjectInI18nFormat && typeof joinArrays === 'string' && resType === '[object Array]') {
res = res.join(joinArrays);
if (res) res = this.extendTranslation(res, keys, options, lastKey);
} else {
var usedDefault = false;
var usedKey = false;
var needsPluralHandling = options.count !== undefined && typeof options.count !== 'string';
var hasDefaultValue = Translator.hasDefaultValue(options);
var defaultValueSuffix = needsPluralHandling ? this.pluralResolver.getSuffix(lng, options.count, options) : '';
var defaultValue = options["defaultValue".concat(defaultValueSuffix)] || options.defaultValue;
if (!this.isValidLookup(res) && hasDefaultValue) {
usedDefault = true;
res = defaultValue;
}
if (!this.isValidLookup(res)) {
usedKey = true;
res = key;
}
var missingKeyNoValueFallbackToKey = options.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey;
var resForMissing = missingKeyNoValueFallbackToKey && usedKey ? undefined : res;
var updateMissing = hasDefaultValue && defaultValue !== res && this.options.updateMissing;
if (usedKey || usedDefault || updateMissing) {
this.logger.log(updateMissing ? 'updateKey' : 'missingKey', lng, namespace, key, updateMissing ? defaultValue : res);
if (keySeparator) {
var fk = this.resolve(key, _objectSpread$2(_objectSpread$2({}, options), {}, {
keySeparator: false
}));
if (fk && fk.res) this.logger.warn('Seems the loaded translations were in flat JSON format instead of nested. Either set keySeparator: false on init or make sure your translations are published in nested format.');
}
var lngs = [];
var fallbackLngs = this.languageUtils.getFallbackCodes(this.options.fallbackLng, options.lng || this.language);
if (this.options.saveMissingTo === 'fallback' && fallbackLngs && fallbackLngs[0]) {
for (var i = 0; i < fallbackLngs.length; i++) {
lngs.push(fallbackLngs[i]);
}
} else if (this.options.saveMissingTo === 'all') {
lngs = this.languageUtils.toResolveHierarchy(options.lng || this.language);
} else {
lngs.push(options.lng || this.language);
}
var send = function send(l, k, specificDefaultValue) {
var defaultForMissing = hasDefaultValue && specificDefaultValue !== res ? specificDefaultValue : resForMissing;
if (_this2.options.missingKeyHandler) {
_this2.options.missingKeyHandler(l, namespace, k, defaultForMissing, updateMissing, options);
} else if (_this2.backendConnector && _this2.backendConnector.saveMissing) {
_this2.backendConnector.saveMissing(l, namespace, k, defaultForMissing, updateMissing, options);
}
_this2.emit('missingKey', l, namespace, k, res);
};
if (this.options.saveMissing) {
if (this.options.saveMissingPlurals && needsPluralHandling) {
lngs.forEach(function (language) {
_this2.pluralResolver.getSuffixes(language, options).forEach(function (suffix) {
send([language], key + suffix, options["defaultValue".concat(suffix)] || defaultValue);
});
});
} else {
send(lngs, key, defaultValue);
}
}
}
res = this.extendTranslation(res, keys, options, resolved, lastKey);
if (usedKey && res === key && this.options.appendNamespaceToMissingKey) res = "".concat(namespace, ":").concat(key);
if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
if (this.options.compatibilityAPI !== 'v1') {
res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? "".concat(namespace, ":").concat(key) : key, usedDefault ? res : undefined);
} else {
res = this.options.parseMissingKeyHandler(res);
}
}
}
if (returnDetails) {
resolved.res = res;
return resolved;
}
return res;
}
}, {
key: "extendTranslation",
value: function extendTranslation(res, key, options, resolved, lastKey) {
var _this3 = this;
if (this.i18nFormat && this.i18nFormat.parse) {
res = this.i18nFormat.parse(res, _objectSpread$2(_objectSpread$2({}, this.options.interpolation.defaultVariables), options), resolved.usedLng, resolved.usedNS, resolved.usedKey, {
resolved: resolved
});
} else if (!options.skipInterpolation) {
if (options.interpolation) this.interpolator.init(_objectSpread$2(_objectSpread$2({}, options), {
interpolation: _objectSpread$2(_objectSpread$2({}, this.options.interpolation), options.interpolation)
}));
var skipOnVariables = typeof res === 'string' && (options && options.interpolation && options.interpolation.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables);
var nestBef;
if (skipOnVariables) {
var nb = res.match(this.interpolator.nestingRegexp);
nestBef = nb && nb.length;
}
var data = options.replace && typeof options.replace !== 'string' ? options.replace : options;
if (this.options.interpolation.defaultVariables) data = _objectSpread$2(_objectSpread$2({}, this.options.interpolation.defaultVariables), data);
res = this.interpolator.interpolate(res, data, options.lng || this.language, options);
if (skipOnVariables) {
var na = res.match(this.interpolator.nestingRegexp);
var nestAft = na && na.length;
if (nestBef < nestAft) options.nest = false;
}
if (options.nest !== false) res = this.interpolator.nest(res, function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (lastKey && lastKey[0] === args[0] && !options.context) {
_this3.logger.warn("It seems you are nesting recursively key: ".concat(args[0], " in key: ").concat(key[0]));
return null;
}
return _this3.translate.apply(_this3, args.concat([key]));
}, options);
if (options.interpolation) this.interpolator.reset();
}
var postProcess = options.postProcess || this.options.postProcess;
var postProcessorNames = typeof postProcess === 'string' ? [postProcess] : postProcess;
if (res !== undefined && res !== null && postProcessorNames && postProcessorNames.length && options.applyPostProcessor !== false) {
res = postProcessor.handle(postProcessorNames, res, key, this.options && this.options.postProcessPassResolved ? _objectSpread$2({
i18nResolved: resolved
}, options) : options, this);
}
return res;
}
}, {
key: "resolve",
value: function resolve(keys) {
var _this4 = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var found;
var usedKey;
var exactUsedKey;
var usedLng;
var usedNS;
if (typeof keys === 'string') keys = [keys];
keys.forEach(function (k) {
if (_this4.isValidLookup(found)) return;
var extracted = _this4.extractFromKey(k, options);
var key = extracted.key;
usedKey = key;
var namespaces = extracted.namespaces;
if (_this4.options.fallbackNS) namespaces = namespaces.concat(_this4.options.fallbackNS);
var needsPluralHandling = options.count !== undefined && typeof options.count !== 'string';
var needsZeroSuffixLookup = needsPluralHandling && !options.ordinal && options.count === 0 && _this4.pluralResolver.shouldUseIntlApi();
var needsContextHandling = options.context !== undefined && (typeof options.context === 'string' || typeof options.context === 'number') && options.context !== '';
var codes = options.lngs ? options.lngs : _this4.languageUtils.toResolveHierarchy(options.lng || _this4.language, options.fallbackLng);
namespaces.forEach(function (ns) {
if (_this4.isValidLookup(found)) return;
usedNS = ns;
if (!checkedLoadedFor["".concat(codes[0], "-").concat(ns)] && _this4.utils && _this4.utils.hasLoadedNamespace && !_this4.utils.hasLoadedNamespace(usedNS)) {
checkedLoadedFor["".concat(codes[0], "-").concat(ns)] = true;
_this4.logger.warn("key \"".concat(usedKey, "\" for languages \"").concat(codes.join(', '), "\" won't get resolved as namespace \"").concat(usedNS, "\" was not yet loaded"), 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
}
codes.forEach(function (code) {
if (_this4.isValidLookup(found)) return;
usedLng = code;
var finalKeys = [key];
if (_this4.i18nFormat && _this4.i18nFormat.addLookupKeys) {
_this4.i18nFormat.addLookupKeys(finalKeys, key, code, ns, options);
} else {
var pluralSuffix;
if (needsPluralHandling) pluralSuffix = _this4.pluralResolver.getSuffix(code, options.count, options);
var zeroSuffix = '_zero';
if (needsPluralHandling) {
finalKeys.push(key + pluralSuffix);
if (needsZeroSuffixLookup) {
finalKeys.push(key + zeroSuffix);
}
}
if (needsContextHandling) {
var contextKey = "".concat(key).concat(_this4.options.contextSeparator).concat(options.context);
finalKeys.push(contextKey);
if (needsPluralHandling) {
finalKeys.push(contextKey + pluralSuffix);
if (needsZeroSuffixLookup) {
finalKeys.push(contextKey + zeroSuffix);
}
}
}
}
var possibleKey;
while (possibleKey = finalKeys.pop()) {
if (!_this4.isValidLookup(found)) {
exactUsedKey = possibleKey;
found = _this4.getResource(code, ns, possibleKey, options);
}
}
});
});
});
return {
res: found,
usedKey: usedKey,
exactUsedKey: exactUsedKey,
usedLng: usedLng,
usedNS: usedNS
};
}
}, {
key: "isValidLookup",
value: function isValidLookup(res) {
return res !== undefined && !(!this.options.returnNull && res === null) && !(!this.options.returnEmptyString && res === '');
}
}, {
key: "getResource",
value: function getResource(code, ns, key) {
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
if (this.i18nFormat && this.i18nFormat.getResource) return this.i18nFormat.getResource(code, ns, key, options);
return this.resourceStore.getResource(code, ns, key, options);
}
}], [{
key: "hasDefaultValue",
value: function hasDefaultValue(options) {
var prefix = 'defaultValue';
for (var option in options) {
if (Object.prototype.hasOwnProperty.call(options, option) && prefix === option.substring(0, prefix.length) && undefined !== options[option]) {
return true;
}
}
return false;
}
}]);
return Translator;
}(EventEmitter);
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var LanguageUtil = function () {
function LanguageUtil(options) {
_classCallCheck(this, LanguageUtil);
this.options = options;
this.supportedLngs = this.options.supportedLngs || false;
this.logger = baseLogger.create('languageUtils');
}
_createClass(LanguageUtil, [{
key: "getScriptPartFromCode",
value: function getScriptPartFromCode(code) {
if (!code || code.indexOf('-') < 0) return null;
var p = code.split('-');
if (p.length === 2) return null;
p.pop();
if (p[p.length - 1].toLowerCase() === 'x') return null;
return this.formatLanguageCode(p.join('-'));
}
}, {
key: "getLanguagePartFromCode",
value: function getLanguagePartFromCode(code) {
if (!code || code.indexOf('-') < 0) return code;
var p = code.split('-');
return this.formatLanguageCode(p[0]);
}
}, {
key: "formatLanguageCode",
value: function formatLanguageCode(code) {
if (typeof code === 'string' && code.indexOf('-') > -1) {
var specialCases = ['hans', 'hant', 'latn', 'cyrl', 'cans', 'mong', 'arab'];
var p = code.split('-');
if (this.options.lowerCaseLng) {
p = p.map(function (part) {
return part.toLowerCase();
});
} else if (p.length === 2) {
p[0] = p[0].toLowerCase();
p[1] = p[1].toUpperCase();
if (specialCases.indexOf(p[1].toLowerCase()) > -1) p[1] = capitalize(p[1].toLowerCase());
} else if (p.length === 3) {
p[0] = p[0].toLowerCase();
if (p[1].length === 2) p[1] = p[1].toUpperCase();
if (p[0] !== 'sgn' && p[2].length === 2) p[2] = p[2].toUpperCase();
if (specialCases.indexOf(p[1].toLowerCase()) > -1) p[1] = capitalize(p[1].toLowerCase());
if (specialCases.indexOf(p[2].toLowerCase()) > -1) p[2] = capitalize(p[2].toLowerCase());
}
return p.join('-');
}
return this.options.cleanCode || this.options.lowerCaseLng ? code.toLowerCase() : code;
}
}, {
key: "isSupportedCode",
value: function isSupportedCode(code) {
if (this.options.load === 'languageOnly' || this.options.nonExplicitSupportedLngs) {
code = this.getLanguagePartFromCode(code);
}
return !this.supportedLngs || !this.supportedLngs.length || this.supportedLngs.indexOf(code) > -1;
}
}, {
key: "getBestMatchFromCodes",
value: function getBestMatchFromCodes(codes) {
var _this = this;
if (!codes) return null;
var found;
codes.forEach(function (code) {
if (found) return;
var cleanedLng = _this.formatLanguageCode(code);
if (!_this.options.supportedLngs || _this.isSupportedCode(cleanedLng)) found = cleanedLng;
});
if (!found && this.options.supportedLngs) {
codes.forEach(function (code) {
if (found) return;
var lngOnly = _this.getLanguagePartFromCode(code);
if (_this.isSupportedCode(lngOnly)) return found = lngOnly;
found = _this.options.supportedLngs.find(function (supportedLng) {
if (supportedLng.indexOf(lngOnly) === 0) return supportedLng;
});
});
}
if (!found) found = this.getFallbackCodes(this.options.fallbackLng)[0];
return found;
}
}, {
key: "getFallbackCodes",
value: function getFallbackCodes(fallbacks, code) {
if (!fallbacks) return [];
if (typeof fallbacks === 'function') fallbacks = fallbacks(code);
if (typeof fallbacks === 'string') fallbacks = [fallbacks];
if (Object.prototype.toString.apply(fallbacks) === '[object Array]') return fallbacks;
if (!code) return fallbacks["default"] || [];
var found = fallbacks[code];
if (!found) found = fallbacks[this.getScriptPartFromCode(code)];
if (!found) found = fallbacks[this.formatLanguageCode(code)];
if (!found) found = fallbacks[this.getLanguagePartFromCode(code)];
if (!found) found = fallbacks["default"];
return found || [];
}
}, {
key: "toResolveHierarchy",
value: function toResolveHierarchy(code, fallbackCode) {
var _this2 = this;
var fallbackCodes = this.getFallbackCodes(fallbackCode || this.options.fallbackLng || [], code);
var codes = [];
var addCode = function addCode(c) {
if (!c) return;
if (_this2.isSupportedCode(c)) {
codes.push(c);
} else {
_this2.logger.warn("rejecting language code not found in supportedLngs: ".concat(c));
}
};
if (typeof code === 'string' && code.indexOf('-') > -1) {
if (this.options.load !== 'languageOnly') addCode(this.formatLanguageCode(code));
if (this.options.load !== 'languageOnly' && this.options.load !== 'currentOnly') addCode(this.getScriptPartFromCode(code));
if (this.options.load !== 'currentOnly') addCode(this.getLanguagePartFromCode(code));
} else if (typeof code === 'string') {
addCode(this.formatLanguageCode(code));
}
fallbackCodes.forEach(function (fc) {
if (codes.indexOf(fc) < 0) addCode(_this2.formatLanguageCode(fc));
});
return codes;
}
}]);
return LanguageUtil;
}();
var sets = [{
lngs: ['ach', 'ak', 'am', 'arn', 'br', 'fil', 'gun', 'ln', 'mfe', 'mg', 'mi', 'oc', 'pt', 'pt-BR', 'tg', 'tl', 'ti', 'tr', 'uz', 'wa'],
nr: [1, 2],
fc: 1
}, {
lngs: ['af', 'an', 'ast', 'az', 'bg', 'bn', 'ca', 'da', 'de', 'dev', 'el', 'en', 'eo', 'es', 'et', 'eu', 'fi', 'fo', 'fur', 'fy', 'gl', 'gu', 'ha', 'hi', 'hu', 'hy', 'ia', 'it', 'kk', 'kn', 'ku', 'lb', 'mai', 'ml', 'mn', 'mr', 'nah', 'nap', 'nb', 'ne', 'nl', 'nn', 'no', 'nso', 'pa', 'pap', 'pms', 'ps', 'pt-PT', 'rm', 'sco', 'se', 'si', 'so', 'son', 'sq', 'sv', 'sw', 'ta', 'te', 'tk', 'ur', 'yo'],
nr: [1, 2],
fc: 2
}, {
lngs: ['ay', 'bo', 'cgg', 'fa', 'ht', 'id', 'ja', 'jbo', 'ka', 'km', 'ko', 'ky', 'lo', 'ms', 'sah', 'su', 'th', 'tt', 'ug', 'vi', 'wo', 'zh'],
nr: [1],
fc: 3
}, {
lngs: ['be', 'bs', 'cnr', 'dz', 'hr', 'ru', 'sr', 'uk'],
nr: [1, 2, 5],
fc: 4
}, {
lngs: ['ar'],
nr: [0, 1, 2, 3, 11, 100],
fc: 5
}, {
lngs: ['cs', 'sk'],
nr: [1, 2, 5],
fc: 6
}, {
lngs: ['csb', 'pl'],
nr: [1, 2, 5],
fc: 7
}, {
lngs: ['cy'],
nr: [1, 2, 3, 8],
fc: 8
}, {
lngs: ['fr'],
nr: [1, 2],
fc: 9
}, {
lngs: ['ga'],
nr: [1, 2, 3, 7, 11],
fc: 10
}, {
lngs: ['gd'],
nr: [1, 2, 3, 20],
fc: 11
}, {
lngs: ['is'],
nr: [1, 2],
fc: 12
}, {
lngs: ['jv'],
nr: [0, 1],
fc: 13
}, {
lngs: ['kw'],
nr: [1, 2, 3, 4],
fc: 14
}, {
lngs: ['lt'],
nr: [1, 2, 10],
fc: 15
}, {
lngs: ['lv'],
nr: [1, 2, 0],
fc: 16
}, {
lngs: ['mk'],
nr: [1, 2],
fc: 17
}, {
lngs: ['mnk'],
nr: [0, 1, 2],
fc: 18
}, {
lngs: ['mt'],
nr: [1, 2, 11, 20],
fc: 19
}, {
lngs: ['or'],
nr: [2, 1],
fc: 2
}, {
lngs: ['ro'],
nr: [1, 2, 20],
fc: 20
}, {
lngs: ['sl'],
nr: [5, 1, 2, 3],
fc: 21
}, {
lngs: ['he', 'iw'],
nr: [1, 2, 20, 21],
fc: 22
}];
var _rulesPluralsTypes = {
1: function _(n) {
return Number(n > 1);
},
2: function _(n) {
return Number(n != 1);
},
3: function _(n) {
return 0;
},
4: function _(n) {
return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
},
5: function _(n) {
return Number(n == 0 ? 0 : n == 1 ? 1 : n == 2 ? 2 : n % 100 >= 3 && n % 100 <= 10 ? 3 : n % 100 >= 11 ? 4 : 5);
},
6: function _(n) {
return Number(n == 1 ? 0 : n >= 2 && n <= 4 ? 1 : 2);
},
7: function _(n) {
return Number(n == 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
},
8: function _(n) {
return Number(n == 1 ? 0 : n == 2 ? 1 : n != 8 && n != 11 ? 2 : 3);
},
9: function _(n) {
return Number(n >= 2);
},
10: function _(n) {
return Number(n == 1 ? 0 : n == 2 ? 1 : n < 7 ? 2 : n < 11 ? 3 : 4);
},
11: function _(n) {
return Number(n == 1 || n == 11 ? 0 : n == 2 || n == 12 ? 1 : n > 2 && n < 20 ? 2 : 3);
},
12: function _(n) {
return Number(n % 10 != 1 || n % 100 == 11);
},
13: function _(n) {
return Number(n !== 0);
},
14: function _(n) {
return Number(n == 1 ? 0 : n == 2 ? 1 : n == 3 ? 2 : 3);
},
15: function _(n) {
return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
},
16: function _(n) {
return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n !== 0 ? 1 : 2);
},
17: function _(n) {
return Number(n == 1 || n % 10 == 1 && n % 100 != 11 ? 0 : 1);
},
18: function _(n) {
return Number(n == 0 ? 0 : n == 1 ? 1 : 2);
},
19: function _(n) {
return Number(n == 1 ? 0 : n == 0 || n % 100 > 1 && n % 100 < 11 ? 1 : n % 100 > 10 && n % 100 < 20 ? 2 : 3);
},
20: function _(n) {
return Number(n == 1 ? 0 : n == 0 || n % 100 > 0 && n % 100 < 20 ? 1 : 2);
},
21: function _(n) {
return Number(n % 100 == 1 ? 1 : n % 100 == 2 ? 2 : n % 100 == 3 || n % 100 == 4 ? 3 : 0);
},
22: function _(n) {
return Number(n == 1 ? 0 : n == 2 ? 1 : (n < 0 || n > 10) && n % 10 == 0 ? 2 : 3);
}
};
var deprecatedJsonVersions = ['v1', 'v2', 'v3'];
var suffixesOrder = {
zero: 0,
one: 1,
two: 2,
few: 3,
many: 4,
other: 5
};
function createRules() {
var rules = {};
sets.forEach(function (set) {
set.lngs.forEach(function (l) {
rules[l] = {
numbers: set.nr,
plurals: _rulesPluralsTypes[set.fc]
};
});
});
return rules;
}
var PluralResolver = function () {
function PluralResolver(languageUtils) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, PluralResolver);
this.languageUtils = languageUtils;
this.options = options;
this.logger = baseLogger.create('pluralResolver');
if ((!this.options.compatibilityJSON || this.options.compatibilityJSON === 'v4') && (typeof Intl === 'undefined' || !Intl.PluralRules)) {
this.options.compatibilityJSON = 'v3';
this.logger.error('Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling.');
}
this.rules = createRules();
}
_createClass(PluralResolver, [{
key: "addRule",
value: function addRule(lng, obj) {
this.rules[lng] = obj;
}
}, {
key: "getRule",
value: function getRule(code) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (this.shouldUseIntlApi()) {
try {
return new Intl.PluralRules(code, {
type: options.ordinal ? 'ordinal' : 'cardinal'
});
} catch (_unused) {
return;
}
}
return this.rules[code] || this.rules[this.languageUtils.getLanguagePartFromCode(code)];
}
}, {
key: "needsPlural",
value: function needsPlural(code) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var rule = this.getRule(code, options);
if (this.shouldUseIntlApi()) {
return rule && rule.resolvedOptions().pluralCategories.length > 1;
}
return rule && rule.numbers.length > 1;
}
}, {
key: "getPluralFormsOfKey",
value: function getPluralFormsOfKey(code, key) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return this.getSuffixes(code, options).map(function (suffix) {
return "".concat(key).concat(suffix);
});
}
}, {
key: "getSuffixes",
value: function getSuffixes(code) {
var _this = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var rule = this.getRule(code, options);
if (!rule) {
return [];
}
if (this.shouldUseIntlApi()) {
return rule.resolvedOptions().pluralCategories.sort(function (pluralCategory1, pluralCategory2) {
return suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2];
}).map(function (pluralCategory) {
return "".concat(_this.options.prepend).concat(pluralCategory);
});
}
return rule.numbers.map(function (number) {
return _this.getSuffix(code, number, options);
});
}
}, {
key: "getSuffix",
value: function getSuffix(code, count) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var rule = this.getRule(code, options);
if (rule) {
if (this.shouldUseIntlApi()) {
return "".concat(this.options.prepend).concat(rule.select(count));
}
return this.getSuffixRetroCompatible(rule, count);
}
this.logger.warn("no plural rule found for: ".concat(code));
return '';
}
}, {
key: "getSuffixRetroCompatible",
value: function getSuffixRetroCompatible(rule, count) {
var _this2 = this;
var idx = rule.noAbs ? rule.plurals(count) : rule.plurals(Math.abs(count));
var suffix = rule.numbers[idx];
if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
if (suffix === 2) {
suffix = 'plural';
} else if (suffix === 1) {
suffix = '';
}
}
var returnSuffix = function returnSuffix() {
return _this2.options.prepend && suffix.toString() ? _this2.options.prepend + suffix.toString() : suffix.toString();
};
if (this.options.compatibilityJSON === 'v1') {
if (suffix === 1) return '';
if (typeof suffix === 'number') return "_plural_".concat(suffix.toString());
return returnSuffix();
} else if (this.options.compatibilityJSON === 'v2') {
return returnSuffix();
} else if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
return returnSuffix();
}
return this.options.prepend && idx.toString() ? this.options.prepend + idx.toString() : idx.toString();
}
}, {
key: "shouldUseIntlApi",
value: function shouldUseIntlApi() {
return !deprecatedJsonVersions.includes(this.options.compatibilityJSON);
}
}]);
return PluralResolver;
}();
function ownKeys$3(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread$3(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys$3(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys$3(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
var Interpolator = function () {
function Interpolator() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Interpolator);
this.logger = baseLogger.create('interpolator');
this.options = options;
this.format = options.interpolation && options.interpolation.format || function (value) {
return value;
};
this.init(options);
}
_createClass(Interpolator, [{
key: "init",
value: function init() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (!options.interpolation) options.interpolation = {
escapeValue: true
};
var iOpts = options.interpolation;
this.escape = iOpts.escape !== undefined ? iOpts.escape : escape;
this.escapeValue = iOpts.escapeValue !== undefined ? iOpts.escapeValue : true;
this.useRawValueToEscape = iOpts.useRawValueToEscape !== undefined ? iOpts.useRawValueToEscape : false;
this.prefix = iOpts.prefix ? regexEscape(iOpts.prefix) : iOpts.prefixEscaped || '{{';
this.suffix = iOpts.suffix ? regexEscape(iOpts.suffix) : iOpts.suffixEscaped || '}}';
this.formatSeparator = iOpts.formatSeparator ? iOpts.formatSeparator : iOpts.formatSeparator || ',';
this.unescapePrefix = iOpts.unescapeSuffix ? '' : iOpts.unescapePrefix || '-';
this.unescapeSuffix = this.unescapePrefix ? '' : iOpts.unescapeSuffix || '';
this.nestingPrefix = iOpts.nestingPrefix ? regexEscape(iOpts.nestingPrefix) : iOpts.nestingPrefixEscaped || regexEscape('$t(');
this.nestingSuffix = iOpts.nestingSuffix ? regexEscape(iOpts.nestingSuffix) : iOpts.nestingSuffixEscaped || regexEscape(')');
this.nestingOptionsSeparator = iOpts.nestingOptionsSeparator ? iOpts.nestingOptionsSeparator : iOpts.nestingOptionsSeparator || ',';
this.maxReplaces = iOpts.maxReplaces ? iOpts.maxReplaces : 1000;
this.alwaysFormat = iOpts.alwaysFormat !== undefined ? iOpts.alwaysFormat : false;
this.resetRegExp();
}
}, {
key: "reset",
value: function reset() {
if (this.options) this.init(this.options);
}
}, {
key: "resetRegExp",
value: function resetRegExp() {
var regexpStr = "".concat(this.prefix, "(.+?)").concat(this.suffix);
this.regexp = new RegExp(regexpStr, 'g');
var regexpUnescapeStr = "".concat(this.prefix).concat(this.unescapePrefix, "(.+?)").concat(this.unescapeSuffix).concat(this.suffix);
this.regexpUnescape = new RegExp(regexpUnescapeStr, 'g');
var nestingRegexpStr = "".concat(this.nestingPrefix, "(.+?)").concat(this.nestingSuffix);
this.nestingRegexp = new RegExp(nestingRegexpStr, 'g');
}
}, {
key: "interpolate",
value: function interpolate(str, data, lng, options) {
var _this = this;
var match;
var value;
var replaces;
var defaultData = this.options && this.options.interpolation && this.options.interpolation.defaultVariables || {};
function regexSafe(val) {
return val.replace(/\$/g, '$$$$');
}
var handleFormat = function handleFormat(key) {
if (key.indexOf(_this.formatSeparator) < 0) {
var path = getPathWithDefaults(data, defaultData, key);
return _this.alwaysFormat ? _this.format(path, undefined, lng, _objectSpread$3(_objectSpread$3(_objectSpread$3({}, options), data), {}, {
interpolationkey: key
})) : path;
}
var p = key.split(_this.formatSeparator);
var k = p.shift().trim();
var f = p.join(_this.formatSeparator).trim();
return _this.format(getPathWithDefaults(data, defaultData, k), f, lng, _objectSpread$3(_objectSpread$3(_objectSpread$3({}, options), data), {}, {
interpolationkey: k
}));
};
this.resetRegExp();
var missingInterpolationHandler = options && options.missingInterpolationHandler || this.options.missingInterpolationHandler;
var skipOnVariables = options && options.interpolation && options.interpolation.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
var todos = [{
regex: this.regexpUnescape,
safeValue: function safeValue(val) {
return regexSafe(val);
}
}, {
regex: this.regexp,
safeValue: function safeValue(val) {
return _this.escapeValue ? regexSafe(_this.escape(val)) : regexSafe(val);
}
}];
todos.forEach(function (todo) {
replaces = 0;
while (match = todo.regex.exec(str)) {
var matchedVar = match[1].trim();
value = handleFormat(matchedVar);
if (value === undefined) {
if (typeof missingInterpolationHandler === 'function') {
var temp = missingInterpolationHandler(str, match, options);
value = typeof temp === 'string' ? temp : '';
} else if (options && options.hasOwnProperty(matchedVar)) {
value = '';
} else if (skipOnVariables) {
value = match[0];
continue;
} else {
_this.logger.warn("missed to pass in variable ".concat(matchedVar, " for interpolating ").concat(str));
value = '';
}
} else if (typeof value !== 'string' && !_this.useRawValueToEscape) {
value = makeString(value);
}
var safeValue = todo.safeValue(value);
str = str.replace(match[0], safeValue);
if (skipOnVariables) {
todo.regex.lastIndex += value.length;
todo.regex.lastIndex -= match[0].length;
} else {
todo.regex.lastIndex = 0;
}
replaces++;
if (replaces >= _this.maxReplaces) {
break;
}
}
});
return str;
}
}, {
key: "nest",
value: function nest(str, fc) {
var _this2 = this;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var match;
var value;
var clonedOptions = _objectSpread$3({}, options);
clonedOptions.applyPostProcessor = false;
delete clonedOptions.defaultValue;
function handleHasOptions(key, inheritedOptions) {
var sep = this.nestingOptionsSeparator;
if (key.indexOf(sep) < 0) return key;
var c = key.split(new RegExp("".concat(sep, "[ ]*{")));
var optionsString = "{".concat(c[1]);
key = c[0];
optionsString = this.interpolate(optionsString, clonedOptions);
optionsString = optionsString.replace(/'/g, '"');
try {
clonedOptions = JSON.parse(optionsString);
if (inheritedOptions) clonedOptions = _objectSpread$3(_objectSpread$3({}, inheritedOptions), clonedOptions);
} catch (e) {
this.logger.warn("failed parsing options string in nesting for key ".concat(key), e);
return "".concat(key).concat(sep).concat(optionsString);
}
delete clonedOptions.defaultValue;
return key;
}
while (match = this.nestingRegexp.exec(str)) {
var formatters = [];
var doReduce = false;
if (match[0].indexOf(this.formatSeparator) !== -1 && !/{.*}/.test(match[1])) {
var r = match[1].split(this.formatSeparator).map(function (elem) {
return elem.trim();
});
match[1] = r.shift();
formatters = r;
doReduce = true;
}
value = fc(handleHasOptions.call(this, match[1].trim(), clonedOptions), clonedOptions);
if (value && match[0] === str && typeof value !== 'string') return value;
if (typeof value !== 'string') value = makeString(value);
if (!value) {
this.logger.warn("missed to resolve ".concat(match[1], " for nesting ").concat(str));
value = '';
}
if (doReduce) {
value = formatters.reduce(function (v, f) {
return _this2.format(v, f, options.lng, _objectSpread$3(_objectSpread$3({}, options), {}, {
interpolationkey: match[1].trim()
}));
}, value.trim());
}
str = str.replace(match[0], value);
this.regexp.lastIndex = 0;
}
return str;
}
}]);
return Interpolator;
}();
function ownKeys$4(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread$4(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys$4(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys$4(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function parseFormatStr(formatStr) {
var formatName = formatStr.toLowerCase().trim();
var formatOptions = {};
if (formatStr.indexOf('(') > -1) {
var p = formatStr.split('(');
formatName = p[0].toLowerCase().trim();
var optStr = p[1].substring(0, p[1].length - 1);
if (formatName === 'currency' && optStr.indexOf(':') < 0) {
if (!formatOptions.currency) formatOptions.currency = optStr.trim();
} else if (formatName === 'relativetime' && optStr.indexOf(':') < 0) {
if (!formatOptions.range) formatOptions.range = optStr.trim();
} else {
var opts = optStr.split(';');
opts.forEach(function (opt) {
if (!opt) return;
var _opt$split = opt.split(':'),
_opt$split2 = _toArray(_opt$split),
key = _opt$split2[0],
rest = _opt$split2.slice(1);
var val = rest.join(':').trim().replace(/^'+|'+$/g, '');
if (!formatOptions[key.trim()]) formatOptions[key.trim()] = val;
if (val === 'false') formatOptions[key.trim()] = false;
if (val === 'true') formatOptions[key.trim()] = true;
if (!isNaN(val)) formatOptions[key.trim()] = parseInt(val, 10);
});
}
}
return {
formatName: formatName,
formatOptions: formatOptions
};
}
var Formatter = function () {
function Formatter() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Formatter);
this.logger = baseLogger.create('formatter');
this.options = options;
this.formats = {
number: function number(val, lng, options) {
return new Intl.NumberFormat(lng, options).format(val);
},
currency: function currency(val, lng, options) {
return new Intl.NumberFormat(lng, _objectSpread$4(_objectSpread$4({}, options), {}, {
style: 'currency'
})).format(val);
},
datetime: function datetime(val, lng, options) {
return new Intl.DateTimeFormat(lng, _objectSpread$4({}, options)).format(val);
},
relativetime: function relativetime(val, lng, options) {
return new Intl.RelativeTimeFormat(lng, _objectSpread$4({}, options)).format(val, options.range || 'day');
},
list: function list(val, lng, options) {
return new Intl.ListFormat(lng, _objectSpread$4({}, options)).format(val);
}
};
this.init(options);
}
_createClass(Formatter, [{
key: "init",
value: function init(services) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
interpolation: {}
};
var iOpts = options.interpolation;
this.formatSeparator = iOpts.formatSeparator ? iOpts.formatSeparator : iOpts.formatSeparator || ',';
}
}, {
key: "add",
value: function add(name, fc) {
this.formats[name.toLowerCase().trim()] = fc;
}
}, {
key: "format",
value: function format(value, _format, lng, options) {
var _this = this;
var formats = _format.split(this.formatSeparator);
var result = formats.reduce(function (mem, f) {
var _parseFormatStr = parseFormatStr(f),
formatName = _parseFormatStr.formatName,
formatOptions = _parseFormatStr.formatOptions;
if (_this.formats[formatName]) {
var formatted = mem;
try {
var valOptions = options && options.formatParams && options.formatParams[options.interpolationkey] || {};
var l = valOptions.locale || valOptions.lng || options.locale || options.lng || lng;
formatted = _this.formats[formatName](mem, l, _objectSpread$4(_objectSpread$4(_objectSpread$4({}, formatOptions), options), valOptions));
} catch (error) {
_this.logger.warn(error);
}
return formatted;
} else {
_this.logger.warn("there was no format function for ".concat(formatName));
}
return mem;
}, value);
return result;
}
}]);
return Formatter;
}();
function ownKeys$5(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread$5(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys$5(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys$5(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _createSuper$2(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct$2();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _isNativeReflectConstruct$2() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function removePending(q, name) {
if (q.pending[name] !== undefined) {
delete q.pending[name];
q.pendingCount--;
}
}
var Connector = function (_EventEmitter) {
_inherits(Connector, _EventEmitter);
var _super = _createSuper$2(Connector);
function Connector(backend, store, services) {
var _this;
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
_classCallCheck(this, Connector);
_this = _super.call(this);
if (isIE10) {
EventEmitter.call(_assertThisInitialized(_this));
}
_this.backend = backend;
_this.store = store;
_this.services = services;
_this.languageUtils = services.languageUtils;
_this.options = options;
_this.logger = baseLogger.create('backendConnector');
_this.waitingReads = [];
_this.maxParallelReads = options.maxParallelReads || 10;
_this.readingCalls = 0;
_this.state = {};
_this.queue = [];
if (_this.backend && _this.backend.init) {
_this.backend.init(services, options.backend, options);
}
return _this;
}
_createClass(Connector, [{
key: "queueLoad",
value: function queueLoad(languages, namespaces, options, callback) {
var _this2 = this;
var toLoad = {};
var pending = {};
var toLoadLanguages = {};
var toLoadNamespaces = {};
languages.forEach(function (lng) {
var hasAllNamespaces = true;
namespaces.forEach(function (ns) {
var name = "".concat(lng, "|").concat(ns);
if (!options.reload && _this2.store.hasResourceBundle(lng, ns)) {
_this2.state[name] = 2;
} else if (_this2.state[name] < 0) ;else if (_this2.state[name] === 1) {
if (pending[name] === undefined) pending[name] = true;
} else {
_this2.state[name] = 1;
hasAllNamespaces = false;
if (pending[name] === undefined) pending[name] = true;
if (toLoad[name] === undefined) toLoad[name] = true;
if (toLoadNamespaces[ns] === undefined) toLoadNamespaces[ns] = true;
}
});
if (!hasAllNamespaces) toLoadLanguages[lng] = true;
});
if (Object.keys(toLoad).length || Object.keys(pending).length) {
this.queue.push({
pending: pending,
pendingCount: Object.keys(pending).length,
loaded: {},
errors: [],
callback: callback
});
}
return {
toLoad: Object.keys(toLoad),
pending: Object.keys(pending),
toLoadLanguages: Object.keys(toLoadLanguages),
toLoadNamespaces: Object.keys(toLoadNamespaces)
};
}
}, {
key: "loaded",
value: function loaded(name, err, data) {
var s = name.split('|');
var lng = s[0];
var ns = s[1];
if (err) this.emit('failedLoading', lng, ns, err);
if (data) {
this.store.addResourceBundle(lng, ns, data);
}
this.state[name] = err ? -1 : 2;
var loaded = {};
this.queue.forEach(function (q) {
pushPath(q.loaded, [lng], ns);
removePending(q, name);
if (err) q.errors.push(err);
if (q.pendingCount === 0 && !q.done) {
Object.keys(q.loaded).forEach(function (l) {
if (!loaded[l]) loaded[l] = {};
var loadedKeys = q.loaded[l];
if (loadedKeys.length) {
loadedKeys.forEach(function (ns) {
if (loaded[l][ns] === undefined) loaded[l][ns] = true;
});
}
});
q.done = true;
if (q.errors.length) {
q.callback(q.errors);
} else {
q.callback();
}
}
});
this.emit('loaded', loaded);
this.queue = this.queue.filter(function (q) {
return !q.done;
});
}
}, {
key: "read",
value: function read(lng, ns, fcName) {
var _this3 = this;
var tried = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var wait = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 350;
var callback = arguments.length > 5 ? arguments[5] : undefined;
if (!lng.length) return callback(null, {});
if (this.readingCalls >= this.maxParallelReads) {
this.waitingReads.push({
lng: lng,
ns: ns,
fcName: fcName,
tried: tried,
wait: wait,
callback: callback
});
return;
}
this.readingCalls++;
return this.backend[fcName](lng, ns, function (err, data) {
if (err && data && tried < 5) {
setTimeout(function () {
_this3.read.call(_this3, lng, ns, fcName, tried + 1, wait * 2, callback);
}, wait);
return;
}
_this3.readingCalls--;
if (_this3.waitingReads.length > 0) {
var next = _this3.waitingReads.shift();
_this3.read(next.lng, next.ns, next.fcName, next.tried, next.wait, next.callback);
}
callback(err, data);
});
}
}, {
key: "prepareLoading",
value: function prepareLoading(languages, namespaces) {
var _this4 = this;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var callback = arguments.length > 3 ? arguments[3] : undefined;
if (!this.backend) {
this.logger.warn('No backend was added via i18next.use. Will not load resources.');
return callback && callback();
}
if (typeof languages === 'string') languages = this.languageUtils.toResolveHierarchy(languages);
if (typeof namespaces === 'string') namespaces = [namespaces];
var toLoad = this.queueLoad(languages, namespaces, options, callback);
if (!toLoad.toLoad.length) {
if (!toLoad.pending.length) callback();
return null;
}
toLoad.toLoad.forEach(function (name) {
_this4.loadOne(name);
});
}
}, {
key: "load",
value: function load(languages, namespaces, callback) {
this.prepareLoading(languages, namespaces, {}, callback);
}
}, {
key: "reload",
value: function reload(languages, namespaces, callback) {
this.prepareLoading(languages, namespaces, {
reload: true
}, callback);
}
}, {
key: "loadOne",
value: function loadOne(name) {
var _this5 = this;
var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var s = name.split('|');
var lng = s[0];
var ns = s[1];
this.read(lng, ns, 'read', undefined, undefined, function (err, data) {
if (err) _this5.logger.warn("".concat(prefix, "loading namespace ").concat(ns, " for language ").concat(lng, " failed"), err);
if (!err && data) _this5.logger.log("".concat(prefix, "loaded namespace ").concat(ns, " for language ").concat(lng), data);
_this5.loaded(name, err, data);
});
}
}, {
key: "saveMissing",
value: function saveMissing(languages, namespace, key, fallbackValue, isUpdate) {
var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
if (this.services.utils && this.services.utils.hasLoadedNamespace && !this.services.utils.hasLoadedNamespace(namespace)) {
this.logger.warn("did not save key \"".concat(key, "\" as the namespace \"").concat(namespace, "\" was not yet loaded"), 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
return;
}
if (key === undefined || key === null || key === '') return;
if (this.backend && this.backend.create) {
this.backend.create(languages, namespace, key, fallbackValue, null, _objectSpread$5(_objectSpread$5({}, options), {}, {
isUpdate: isUpdate
}));
}
if (!languages || !languages[0]) return;
this.store.addResource(languages[0], namespace, key, fallbackValue);
}
}]);
return Connector;
}(EventEmitter);
function get() {
return {
debug: false,
initImmediate: true,
ns: ['translation'],
defaultNS: ['translation'],
fallbackLng: ['dev'],
fallbackNS: false,
supportedLngs: false,
nonExplicitSupportedLngs: false,
load: 'all',
preload: false,
simplifyPluralSuffix: true,
keySeparator: '.',
nsSeparator: ':',
pluralSeparator: '_',
contextSeparator: '_',
partialBundledLanguages: false,
saveMissing: false,
updateMissing: false,
saveMissingTo: 'fallback',
saveMissingPlurals: true,
missingKeyHandler: false,
missingInterpolationHandler: false,
postProcess: false,
postProcessPassResolved: false,
returnNull: true,
returnEmptyString: true,
returnObjects: false,
joinArrays: false,
returnedObjectHandler: false,
parseMissingKeyHandler: false,
appendNamespaceToMissingKey: false,
appendNamespaceToCIMode: false,
overloadTranslationOptionHandler: function handle(args) {
var ret = {};
if (_typeof(args[1]) === 'object') ret = args[1];
if (typeof args[1] === 'string') ret.defaultValue = args[1];
if (typeof args[2] === 'string') ret.tDescription = args[2];
if (_typeof(args[2]) === 'object' || _typeof(args[3]) === 'object') {
var options = args[3] || args[2];
Object.keys(options).forEach(function (key) {
ret[key] = options[key];
});
}
return ret;
},
interpolation: {
escapeValue: true,
format: function format(value, _format, lng, options) {
return value;
},
prefix: '{{',
suffix: '}}',
formatSeparator: ',',
unescapePrefix: '-',
nestingPrefix: '$t(',
nestingSuffix: ')',
nestingOptionsSeparator: ',',
maxReplaces: 1000,
skipOnVariables: true
}
};
}
function transformOptions(options) {
if (typeof options.ns === 'string') options.ns = [options.ns];
if (typeof options.fallbackLng === 'string') options.fallbackLng = [options.fallbackLng];
if (typeof options.fallbackNS === 'string') options.fallbackNS = [options.fallbackNS];
if (options.supportedLngs && options.supportedLngs.indexOf('cimode') < 0) {
options.supportedLngs = options.supportedLngs.concat(['cimode']);
}
return options;
}
function ownKeys$6(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread$6(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys$6(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys$6(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _createSuper$3(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct$3();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _isNativeReflectConstruct$3() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function noop() {}
function bindMemberFunctions(inst) {
var mems = Object.getOwnPropertyNames(Object.getPrototypeOf(inst));
mems.forEach(function (mem) {
if (typeof inst[mem] === 'function') {
inst[mem] = inst[mem].bind(inst);
}
});
}
var I18n = function (_EventEmitter) {
_inherits(I18n, _EventEmitter);
var _super = _createSuper$3(I18n);
function I18n() {
var _this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var callback = arguments.length > 1 ? arguments[1] : undefined;
_classCallCheck(this, I18n);
_this = _super.call(this);
if (isIE10) {
EventEmitter.call(_assertThisInitialized(_this));
}
_this.options = transformOptions(options);
_this.services = {};
_this.logger = baseLogger;
_this.modules = {
external: []
};
bindMemberFunctions(_assertThisInitialized(_this));
if (callback && !_this.isInitialized && !options.isClone) {
if (!_this.options.initImmediate) {
_this.init(options, callback);
return _possibleConstructorReturn(_this, _assertThisInitialized(_this));
}
setTimeout(function () {
_this.init(options, callback);
}, 0);
}
return _this;
}
_createClass(I18n, [{
key: "init",
value: function init() {
var _this2 = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var callback = arguments.length > 1 ? arguments[1] : undefined;
if (typeof options === 'function') {
callback = options;
options = {};
}
if (!options.defaultNS && options.ns) {
if (typeof options.ns === 'string') {
options.defaultNS = options.ns;
} else if (options.ns.indexOf('translation') < 0) {
options.defaultNS = options.ns[0];
}
}
var defOpts = get();
this.options = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, defOpts), this.options), transformOptions(options));
if (this.options.compatibilityAPI !== 'v1') {
this.options.interpolation = _objectSpread$6(_objectSpread$6({}, defOpts.interpolation), this.options.interpolation);
}
if (options.keySeparator !== undefined) {
this.options.userDefinedKeySeparator = options.keySeparator;
}
if (options.nsSeparator !== undefined) {
this.options.userDefinedNsSeparator = options.nsSeparator;
}
function createClassOnDemand(ClassOrObject) {
if (!ClassOrObject) return null;
if (typeof ClassOrObject === 'function') return new ClassOrObject();
return ClassOrObject;
}
if (!this.options.isClone) {
if (this.modules.logger) {
baseLogger.init(createClassOnDemand(this.modules.logger), this.options);
} else {
baseLogger.init(null, this.options);
}
var formatter;
if (this.modules.formatter) {
formatter = this.modules.formatter;
} else if (typeof Intl !== 'undefined') {
formatter = Formatter;
}
var lu = new LanguageUtil(this.options);
this.store = new ResourceStore(this.options.resources, this.options);
var s = this.services;
s.logger = baseLogger;
s.resourceStore = this.store;
s.languageUtils = lu;
s.pluralResolver = new PluralResolver(lu, {
prepend: this.options.pluralSeparator,
compatibilityJSON: this.options.compatibilityJSON,
simplifyPluralSuffix: this.options.simplifyPluralSuffix
});
if (formatter && (!this.options.interpolation.format || this.options.interpolation.format === defOpts.interpolation.format)) {
s.formatter = createClassOnDemand(formatter);
s.formatter.init(s, this.options);
this.options.interpolation.format = s.formatter.format.bind(s.formatter);
}
s.interpolator = new Interpolator(this.options);
s.utils = {
hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
};
s.backendConnector = new Connector(createClassOnDemand(this.modules.backend), s.resourceStore, s, this.options);
s.backendConnector.on('*', function (event) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
_this2.emit.apply(_this2, [event].concat(args));
});
if (this.modules.languageDetector) {
s.languageDetector = createClassOnDemand(this.modules.languageDetector);
s.languageDetector.init(s, this.options.detection, this.options);
}
if (this.modules.i18nFormat) {
s.i18nFormat = createClassOnDemand(this.modules.i18nFormat);
if (s.i18nFormat.init) s.i18nFormat.init(this);
}
this.translator = new Translator(this.services, this.options);
this.translator.on('*', function (event) {
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
_this2.emit.apply(_this2, [event].concat(args));
});
this.modules.external.forEach(function (m) {
if (m.init) m.init(_this2);
});
}
this.format = this.options.interpolation.format;
if (!callback) callback = noop;
if (this.options.fallbackLng && !this.services.languageDetector && !this.options.lng) {
var codes = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
if (codes.length > 0 && codes[0] !== 'dev') this.options.lng = codes[0];
}
if (!this.services.languageDetector && !this.options.lng) {
this.logger.warn('init: no languageDetector is used and no lng is defined');
}
var storeApi = ['getResource', 'hasResourceBundle', 'getResourceBundle', 'getDataByLanguage'];
storeApi.forEach(function (fcName) {
_this2[fcName] = function () {
var _this2$store;
return (_this2$store = _this2.store)[fcName].apply(_this2$store, arguments);
};
});
var storeApiChained = ['addResource', 'addResources', 'addResourceBundle', 'removeResourceBundle'];
storeApiChained.forEach(function (fcName) {
_this2[fcName] = function () {
var _this2$store2;
(_this2$store2 = _this2.store)[fcName].apply(_this2$store2, arguments);
return _this2;
};
});
var deferred = defer();
var load = function load() {
var finish = function finish(err, t) {
if (_this2.isInitialized && !_this2.initializedStoreOnce) _this2.logger.warn('init: i18next is already initialized. You should call init just once!');
_this2.isInitialized = true;
if (!_this2.options.isClone) _this2.logger.log('initialized', _this2.options);
_this2.emit('initialized', _this2.options);
deferred.resolve(t);
callback(err, t);
};
if (_this2.languages && _this2.options.compatibilityAPI !== 'v1' && !_this2.isInitialized) return finish(null, _this2.t.bind(_this2));
_this2.changeLanguage(_this2.options.lng, finish);
};
if (this.options.resources || !this.options.initImmediate) {
load();
} else {
setTimeout(load, 0);
}
return deferred;
}
}, {
key: "loadResources",
value: function loadResources(language) {
var _this3 = this;
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
var usedCallback = callback;
var usedLng = typeof language === 'string' ? language : this.language;
if (typeof language === 'function') usedCallback = language;
if (!this.options.resources || this.options.partialBundledLanguages) {
if (usedLng && usedLng.toLowerCase() === 'cimode') return usedCallback();
var toLoad = [];
var append = function append(lng) {
if (!lng) return;
var lngs = _this3.services.languageUtils.toResolveHierarchy(lng);
lngs.forEach(function (l) {
if (toLoad.indexOf(l) < 0) toLoad.push(l);
});
};
if (!usedLng) {
var fallbacks = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
fallbacks.forEach(function (l) {
return append(l);
});
} else {
append(usedLng);
}
if (this.options.preload) {
this.options.preload.forEach(function (l) {
return append(l);
});
}
this.services.backendConnector.load(toLoad, this.options.ns, function (e) {
if (!e && !_this3.resolvedLanguage && _this3.language) _this3.setResolvedLanguage(_this3.language);
usedCallback(e);
});
} else {
usedCallback(null);
}
}
}, {
key: "reloadResources",
value: function reloadResources(lngs, ns, callback) {
var deferred = defer();
if (!lngs) lngs = this.languages;
if (!ns) ns = this.options.ns;
if (!callback) callback = noop;
this.services.backendConnector.reload(lngs, ns, function (err) {
deferred.resolve();
callback(err);
});
return deferred;
}
}, {
key: "use",
value: function use(module) {
if (!module) throw new Error('You are passing an undefined module! Please check the object you are passing to i18next.use()');
if (!module.type) throw new Error('You are passing a wrong module! Please check the object you are passing to i18next.use()');
if (module.type === 'backend') {
this.modules.backend = module;
}
if (module.type === 'logger' || module.log && module.warn && module.error) {
this.modules.logger = module;
}
if (module.type === 'languageDetector') {
this.modules.languageDetector = module;
}
if (module.type === 'i18nFormat') {
this.modules.i18nFormat = module;
}
if (module.type === 'postProcessor') {
postProcessor.addPostProcessor(module);
}
if (module.type === 'formatter') {
this.modules.formatter = module;
}
if (module.type === '3rdParty') {
this.modules.external.push(module);
}
return this;
}
}, {
key: "setResolvedLanguage",
value: function setResolvedLanguage(l) {
if (!l || !this.languages) return;
if (['cimode', 'dev'].indexOf(l) > -1) return;
for (var li = 0; li < this.languages.length; li++) {
var lngInLngs = this.languages[li];
if (['cimode', 'dev'].indexOf(lngInLngs) > -1) continue;
if (this.store.hasLanguageSomeTranslations(lngInLngs)) {
this.resolvedLanguage = lngInLngs;
break;
}
}
}
}, {
key: "changeLanguage",
value: function changeLanguage(lng, callback) {
var _this4 = this;
this.isLanguageChangingTo = lng;
var deferred = defer();
this.emit('languageChanging', lng);
var setLngProps = function setLngProps(l) {
_this4.language = l;
_this4.languages = _this4.services.languageUtils.toResolveHierarchy(l);
_this4.resolvedLanguage = undefined;
_this4.setResolvedLanguage(l);
};
var done = function done(err, l) {
if (l) {
setLngProps(l);
_this4.translator.changeLanguage(l);
_this4.isLanguageChangingTo = undefined;
_this4.emit('languageChanged', l);
_this4.logger.log('languageChanged', l);
} else {
_this4.isLanguageChangingTo = undefined;
}
deferred.resolve(function () {
return _this4.t.apply(_this4, arguments);
});
if (callback) callback(err, function () {
return _this4.t.apply(_this4, arguments);
});
};
var setLng = function setLng(lngs) {
if (!lng && !lngs && _this4.services.languageDetector) lngs = [];
var l = typeof lngs === 'string' ? lngs : _this4.services.languageUtils.getBestMatchFromCodes(lngs);
if (l) {
if (!_this4.language) {
setLngProps(l);
}
if (!_this4.translator.language) _this4.translator.changeLanguage(l);
if (_this4.services.languageDetector) _this4.services.languageDetector.cacheUserLanguage(l);
}
_this4.loadResources(l, function (err) {
done(err, l);
});
};
if (!lng && this.services.languageDetector && !this.services.languageDetector.async) {
setLng(this.services.languageDetector.detect());
} else if (!lng && this.services.languageDetector && this.services.languageDetector.async) {
this.services.languageDetector.detect(setLng);
} else {
setLng(lng);
}
return deferred;
}
}, {
key: "getFixedT",
value: function getFixedT(lng, ns, keyPrefix) {
var _this5 = this;
var fixedT = function fixedT(key, opts) {
var options;
if (_typeof(opts) !== 'object') {
for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
rest[_key3 - 2] = arguments[_key3];
}
options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
} else {
options = _objectSpread$6({}, opts);
}
options.lng = options.lng || fixedT.lng;
options.lngs = options.lngs || fixedT.lngs;
options.ns = options.ns || fixedT.ns;
var keySeparator = _this5.options.keySeparator || '.';
var resultKey = keyPrefix ? "".concat(keyPrefix).concat(keySeparator).concat(key) : key;
return _this5.t(resultKey, options);
};
if (typeof lng === 'string') {
fixedT.lng = lng;
} else {
fixedT.lngs = lng;
}
fixedT.ns = ns;
fixedT.keyPrefix = keyPrefix;
return fixedT;
}
}, {
key: "t",
value: function t() {
var _this$translator;
return this.translator && (_this$translator = this.translator).translate.apply(_this$translator, arguments);
}
}, {
key: "exists",
value: function exists() {
var _this$translator2;
return this.translator && (_this$translator2 = this.translator).exists.apply(_this$translator2, arguments);
}
}, {
key: "setDefaultNamespace",
value: function setDefaultNamespace(ns) {
this.options.defaultNS = ns;
}
}, {
key: "hasLoadedNamespace",
value: function hasLoadedNamespace(ns) {
var _this6 = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (!this.isInitialized) {
this.logger.warn('hasLoadedNamespace: i18next was not initialized', this.languages);
return false;
}
if (!this.languages || !this.languages.length) {
this.logger.warn('hasLoadedNamespace: i18n.languages were undefined or empty', this.languages);
return false;
}
var lng = this.resolvedLanguage || this.languages[0];
var fallbackLng = this.options ? this.options.fallbackLng : false;
var lastLng = this.languages[this.languages.length - 1];
if (lng.toLowerCase() === 'cimode') return true;
var loadNotPending = function loadNotPending(l, n) {
var loadState = _this6.services.backendConnector.state["".concat(l, "|").concat(n)];
return loadState === -1 || loadState === 2;
};
if (options.precheck) {
var preResult = options.precheck(this, loadNotPending);
if (preResult !== undefined) return preResult;
}
if (this.hasResourceBundle(lng, ns)) return true;
if (!this.services.backendConnector.backend || this.options.resources && !this.options.partialBundledLanguages) return true;
if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
return false;
}
}, {
key: "loadNamespaces",
value: function loadNamespaces(ns, callback) {
var _this7 = this;
var deferred = defer();
if (!this.options.ns) {
callback && callback();
return Promise.resolve();
}
if (typeof ns === 'string') ns = [ns];
ns.forEach(function (n) {
if (_this7.options.ns.indexOf(n) < 0) _this7.options.ns.push(n);
});
this.loadResources(function (err) {
deferred.resolve();
if (callback) callback(err);
});
return deferred;
}
}, {
key: "loadLanguages",
value: function loadLanguages(lngs, callback) {
var deferred = defer();
if (typeof lngs === 'string') lngs = [lngs];
var preloaded = this.options.preload || [];
var newLngs = lngs.filter(function (lng) {
return preloaded.indexOf(lng) < 0;
});
if (!newLngs.length) {
if (callback) callback();
return Promise.resolve();
}
this.options.preload = preloaded.concat(newLngs);
this.loadResources(function (err) {
deferred.resolve();
if (callback) callback(err);
});
return deferred;
}
}, {
key: "dir",
value: function dir(lng) {
if (!lng) lng = this.resolvedLanguage || (this.languages && this.languages.length > 0 ? this.languages[0] : this.language);
if (!lng) return 'rtl';
var rtlLngs = ['ar', 'shu', 'sqr', 'ssh', 'xaa', 'yhd', 'yud', 'aao', 'abh', 'abv', 'acm', 'acq', 'acw', 'acx', 'acy', 'adf', 'ads', 'aeb', 'aec', 'afb', 'ajp', 'apc', 'apd', 'arb', 'arq', 'ars', 'ary', 'arz', 'auz', 'avl', 'ayh', 'ayl', 'ayn', 'ayp', 'bbz', 'pga', 'he', 'iw', 'ps', 'pbt', 'pbu', 'pst', 'prp', 'prd', 'ug', 'ur', 'ydd', 'yds', 'yih', 'ji', 'yi', 'hbo', 'men', 'xmn', 'fa', 'jpr', 'peo', 'pes', 'prs', 'dv', 'sam', 'ckb'];
return rtlLngs.indexOf(this.services.languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf('-arab') > 1 ? 'rtl' : 'ltr';
}
}, {
key: "cloneInstance",
value: function cloneInstance() {
var _this8 = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
var mergedOptions = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, this.options), options), {
isClone: true
});
var clone = new I18n(mergedOptions);
var membersToCopy = ['store', 'services', 'language'];
membersToCopy.forEach(function (m) {
clone[m] = _this8[m];
});
clone.services = _objectSpread$6({}, this.services);
clone.services.utils = {
hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
};
clone.translator = new Translator(clone.services, clone.options);
clone.translator.on('*', function (event) {
for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
args[_key4 - 1] = arguments[_key4];
}
clone.emit.apply(clone, [event].concat(args));
});
clone.init(mergedOptions, callback);
clone.translator.options = clone.options;
clone.translator.backendConnector.services.utils = {
hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
};
return clone;
}
}, {
key: "toJSON",
value: function toJSON() {
return {
options: this.options,
store: this.store,
language: this.language,
languages: this.languages,
resolvedLanguage: this.resolvedLanguage
};
}
}]);
return I18n;
}(EventEmitter);
_defineProperty(I18n, "createInstance", function () {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var callback = arguments.length > 1 ? arguments[1] : undefined;
return new I18n(options, callback);
});
var instance = I18n.createInstance();
instance.createInstance = I18n.createInstance;
instance.createInstance;
instance.init;
instance.loadResources;
instance.reloadResources;
instance.use;
instance.changeLanguage;
instance.getFixedT;
instance.t;
instance.exists;
instance.setDefaultNamespace;
instance.hasLoadedNamespace;
instance.loadNamespaces;
instance.loadLanguages;
var danmaku$1 = "Danmaku";
var showDanmaku$1 = "Show Danmaku";
var showEmoji$1 = "Show emoji";
var showSuperChat$1 = "Show Super Chat";
var fontSize$1 = "Font size";
var danmakuSpeed$1 = "Speed";
var opacity$1 = "Opacity";
var filter$1 = {
label: "Danmaku filter",
enterContent: "Enter filter content...",
content: "Content",
operation: "Operation",
on: "ON",
off: "OFF",
add: "ADD"
};
var en = {
danmaku: danmaku$1,
showDanmaku: showDanmaku$1,
showEmoji: showEmoji$1,
showSuperChat: showSuperChat$1,
fontSize: fontSize$1,
danmakuSpeed: danmakuSpeed$1,
opacity: opacity$1,
filter: filter$1
};
var danmaku = "弹幕";
var showDanmaku = "显示弹幕";
var showEmoji = "显示 emoji";
var showSuperChat = "显示 Super Chat";
var fontSize = "字体大小";
var danmakuSpeed = "弹幕速度";
var opacity = "不透明度";
var filter = {
label: "弹幕过滤",
enterContent: "输入过滤内容...",
content: "内容",
operation: "操作",
on: "启用",
off: "禁用",
add: "添加"
};
var zhCN = {
danmaku: danmaku,
showDanmaku: showDanmaku,
showEmoji: showEmoji,
showSuperChat: showSuperChat,
fontSize: fontSize,
danmakuSpeed: danmakuSpeed,
opacity: opacity,
filter: filter
};
instance.use(initReactI18next).init({
resources: {
en: {
translation: en
},
'zh-CN': {
translation: zhCN
}
},
lng: window.ytcfg ? /^zh-/.test(window.ytcfg.get('HL')) ? 'zh-CN' : 'en' : /^zh/.test(navigator.language) ? 'zh-CN' : 'en',
fallbackLng: 'en',
interpolation: {
escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
}
});
window.addEventListener('load', () => {
console.log('[ytb-danmaku] init');
init(() => {
ReactDOM__default['default'].render( /*#__PURE__*/React__default['default'].createElement(Danmaku$1, null), document.getElementById('ytb-danmaku-config'));
});
});
}(React, ReactDOM, mobxReact, mobx, Danmaku));
