youtube-danmaku

Youtube livechat danmaku

目前為 2022-03-06 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name youtube-danmaku
  3. // @namespace https://github.com/IronKinoko/ytb-danmaku
  4. // @version 2.4.4
  5. // @license MIT
  6. // @description Youtube livechat danmaku
  7. // @author Ironkinoko
  8. // @match https://www.youtube.com/*
  9. // @exclude https://www.youtube.com/live_chat*
  10. // @grant none
  11. // @require https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js
  12. // @require https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js
  13. // @require https://cdn.jsdelivr.net/npm/mobx@6.3.2/dist/mobx.umd.production.min.js
  14. // @require https://cdn.jsdelivr.net/npm/mobx-react-lite@3.2.0/dist/mobxreactlite.umd.production.min.js
  15. // @require https://cdn.jsdelivr.net/npm/mobx-react@7.2.0/dist/mobxreact.umd.production.min.js
  16. // @require https://cdn.jsdelivr.net/npm/@ironkinoko/danmaku@1.1.6/dist/danmaku.min.js
  17. // ==/UserScript==
  18. (function (React$3, ReactDOM, mobxReact, mobx, Danmaku$2) {
  19. 'use strict';
  20.  
  21. function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
  22.  
  23. function _interopNamespace(e) {
  24. if (e && e.__esModule) return e;
  25. var n = Object.create(null);
  26. if (e) {
  27. Object.keys(e).forEach(function (k) {
  28. if (k !== 'default') {
  29. var d = Object.getOwnPropertyDescriptor(e, k);
  30. Object.defineProperty(n, k, d.get ? d : {
  31. enumerable: true,
  32. get: function () {
  33. return e[k];
  34. }
  35. });
  36. }
  37. });
  38. }
  39. n['default'] = e;
  40. return Object.freeze(n);
  41. }
  42.  
  43. var React__default = /*#__PURE__*/_interopDefaultLegacy(React$3);
  44. var React__namespace = /*#__PURE__*/_interopNamespace(React$3);
  45. var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
  46. var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
  47. var Danmaku__default = /*#__PURE__*/_interopDefaultLegacy(Danmaku$2);
  48.  
  49. var e$1 = [],
  50. t$1 = [];
  51.  
  52. function n$1(n, r) {
  53. if (n && "undefined" != typeof document) {
  54. var a,
  55. s = !0 === r.prepend ? "prepend" : "append",
  56. d = !0 === r.singleTag,
  57. i = "string" == typeof r.container ? document.querySelector(r.container) : document.getElementsByTagName("head")[0];
  58.  
  59. if (d) {
  60. var u = e$1.indexOf(i);
  61. -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();
  62. } else a = c();
  63.  
  64. 65279 === n.charCodeAt(0) && (n = n.substring(1)), a.styleSheet ? a.styleSheet.cssText += n : a.appendChild(document.createTextNode(n));
  65. }
  66.  
  67. function c() {
  68. var e = document.createElement("style");
  69. 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]]);
  70. var a = "prepend" === s ? "afterbegin" : "beforeend";
  71. return i.insertAdjacentElement(a, e), e;
  72. }
  73. }
  74.  
  75. 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 touch-callout: 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-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 pointer-events: none;\n color: #fff;\n font-family: SimHei, SimSun, Heiti, \"MS Mincho\", Meiryo, \"Microsoft YaHei\", monospace;\n font-size: var(--danmaku-font-size, 24px);\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: 24px;\n height: 24px;\n}";
  76. n$1(css$2,{});
  77.  
  78. var common = {
  79. black: '#000',
  80. white: '#fff'
  81. };
  82.  
  83. var red = {
  84. 50: '#ffebee',
  85. 100: '#ffcdd2',
  86. 200: '#ef9a9a',
  87. 300: '#e57373',
  88. 400: '#ef5350',
  89. 500: '#f44336',
  90. 600: '#e53935',
  91. 700: '#d32f2f',
  92. 800: '#c62828',
  93. 900: '#b71c1c',
  94. A100: '#ff8a80',
  95. A200: '#ff5252',
  96. A400: '#ff1744',
  97. A700: '#d50000'
  98. };
  99.  
  100. var pink = {
  101. 50: '#fce4ec',
  102. 100: '#f8bbd0',
  103. 200: '#f48fb1',
  104. 300: '#f06292',
  105. 400: '#ec407a',
  106. 500: '#e91e63',
  107. 600: '#d81b60',
  108. 700: '#c2185b',
  109. 800: '#ad1457',
  110. 900: '#880e4f',
  111. A100: '#ff80ab',
  112. A200: '#ff4081',
  113. A400: '#f50057',
  114. A700: '#c51162'
  115. };
  116.  
  117. var indigo = {
  118. 50: '#e8eaf6',
  119. 100: '#c5cae9',
  120. 200: '#9fa8da',
  121. 300: '#7986cb',
  122. 400: '#5c6bc0',
  123. 500: '#3f51b5',
  124. 600: '#3949ab',
  125. 700: '#303f9f',
  126. 800: '#283593',
  127. 900: '#1a237e',
  128. A100: '#8c9eff',
  129. A200: '#536dfe',
  130. A400: '#3d5afe',
  131. A700: '#304ffe'
  132. };
  133.  
  134. var blue = {
  135. 50: '#e3f2fd',
  136. 100: '#bbdefb',
  137. 200: '#90caf9',
  138. 300: '#64b5f6',
  139. 400: '#42a5f5',
  140. 500: '#2196f3',
  141. 600: '#1e88e5',
  142. 700: '#1976d2',
  143. 800: '#1565c0',
  144. 900: '#0d47a1',
  145. A100: '#82b1ff',
  146. A200: '#448aff',
  147. A400: '#2979ff',
  148. A700: '#2962ff'
  149. };
  150.  
  151. var green = {
  152. 50: '#e8f5e9',
  153. 100: '#c8e6c9',
  154. 200: '#a5d6a7',
  155. 300: '#81c784',
  156. 400: '#66bb6a',
  157. 500: '#4caf50',
  158. 600: '#43a047',
  159. 700: '#388e3c',
  160. 800: '#2e7d32',
  161. 900: '#1b5e20',
  162. A100: '#b9f6ca',
  163. A200: '#69f0ae',
  164. A400: '#00e676',
  165. A700: '#00c853'
  166. };
  167.  
  168. var orange = {
  169. 50: '#fff3e0',
  170. 100: '#ffe0b2',
  171. 200: '#ffcc80',
  172. 300: '#ffb74d',
  173. 400: '#ffa726',
  174. 500: '#ff9800',
  175. 600: '#fb8c00',
  176. 700: '#f57c00',
  177. 800: '#ef6c00',
  178. 900: '#e65100',
  179. A100: '#ffd180',
  180. A200: '#ffab40',
  181. A400: '#ff9100',
  182. A700: '#ff6d00'
  183. };
  184.  
  185. var grey = {
  186. 50: '#fafafa',
  187. 100: '#f5f5f5',
  188. 200: '#eeeeee',
  189. 300: '#e0e0e0',
  190. 400: '#bdbdbd',
  191. 500: '#9e9e9e',
  192. 600: '#757575',
  193. 700: '#616161',
  194. 800: '#424242',
  195. 900: '#212121',
  196. A100: '#d5d5d5',
  197. A200: '#aaaaaa',
  198. A400: '#303030',
  199. A700: '#616161'
  200. };
  201.  
  202. function _extends$1() {
  203. _extends$1 = Object.assign || function (target) {
  204. for (var i = 1; i < arguments.length; i++) {
  205. var source = arguments[i];
  206.  
  207. for (var key in source) {
  208. if (Object.prototype.hasOwnProperty.call(source, key)) {
  209. target[key] = source[key];
  210. }
  211. }
  212. }
  213.  
  214. return target;
  215. };
  216.  
  217. return _extends$1.apply(this, arguments);
  218. }
  219.  
  220. function _typeof$2(obj) {
  221. "@babel/helpers - typeof";
  222.  
  223. if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
  224. _typeof$2 = function _typeof(obj) {
  225. return typeof obj;
  226. };
  227. } else {
  228. _typeof$2 = function _typeof(obj) {
  229. return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
  230. };
  231. }
  232.  
  233. return _typeof$2(obj);
  234. }
  235.  
  236. function isPlainObject(item) {
  237. return item && _typeof$2(item) === 'object' && item.constructor === Object;
  238. }
  239. function deepmerge(target, source) {
  240. var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
  241. clone: true
  242. };
  243. var output = options.clone ? _extends$1({}, target) : target;
  244.  
  245. if (isPlainObject(target) && isPlainObject(source)) {
  246. Object.keys(source).forEach(function (key) {
  247. // Avoid prototype pollution
  248. if (key === '__proto__') {
  249. return;
  250. }
  251.  
  252. if (isPlainObject(source[key]) && key in target) {
  253. output[key] = deepmerge(target[key], source[key], options);
  254. } else {
  255. output[key] = source[key];
  256. }
  257. });
  258. }
  259.  
  260. return output;
  261. }
  262.  
  263. function getAugmentedNamespace(n) {
  264. if (n.__esModule) return n;
  265. var a = Object.defineProperty({}, '__esModule', {value: true});
  266. Object.keys(n).forEach(function (k) {
  267. var d = Object.getOwnPropertyDescriptor(n, k);
  268. Object.defineProperty(a, k, d.get ? d : {
  269. enumerable: true,
  270. get: function () {
  271. return n[k];
  272. }
  273. });
  274. });
  275. return a;
  276. }
  277.  
  278. var reactIs$1 = {exports: {}};
  279.  
  280. var reactIs_production_min = {};
  281.  
  282. /** @license React v16.13.1
  283. * react-is.production.min.js
  284. *
  285. * Copyright (c) Facebook, Inc. and its affiliates.
  286. *
  287. * This source code is licensed under the MIT license found in the
  288. * LICENSE file in the root directory of this source tree.
  289. */
  290.  
  291. var b = "function" === typeof Symbol && Symbol.for,
  292. c = b ? Symbol.for("react.element") : 60103,
  293. d = b ? Symbol.for("react.portal") : 60106,
  294. e = b ? Symbol.for("react.fragment") : 60107,
  295. f = b ? Symbol.for("react.strict_mode") : 60108,
  296. g = b ? Symbol.for("react.profiler") : 60114,
  297. h = b ? Symbol.for("react.provider") : 60109,
  298. k = b ? Symbol.for("react.context") : 60110,
  299. l = b ? Symbol.for("react.async_mode") : 60111,
  300. m = b ? Symbol.for("react.concurrent_mode") : 60111,
  301. n = b ? Symbol.for("react.forward_ref") : 60112,
  302. p = b ? Symbol.for("react.suspense") : 60113,
  303. q = b ? Symbol.for("react.suspense_list") : 60120,
  304. r = b ? Symbol.for("react.memo") : 60115,
  305. t = b ? Symbol.for("react.lazy") : 60116,
  306. v = b ? Symbol.for("react.block") : 60121,
  307. w = b ? Symbol.for("react.fundamental") : 60117,
  308. x = b ? Symbol.for("react.responder") : 60118,
  309. y = b ? Symbol.for("react.scope") : 60119;
  310.  
  311. function z(a) {
  312. if ("object" === typeof a && null !== a) {
  313. var u = a.$$typeof;
  314.  
  315. switch (u) {
  316. case c:
  317. switch (a = a.type, a) {
  318. case l:
  319. case m:
  320. case e:
  321. case g:
  322. case f:
  323. case p:
  324. return a;
  325.  
  326. default:
  327. switch (a = a && a.$$typeof, a) {
  328. case k:
  329. case n:
  330. case t:
  331. case r:
  332. case h:
  333. return a;
  334.  
  335. default:
  336. return u;
  337. }
  338.  
  339. }
  340.  
  341. case d:
  342. return u;
  343. }
  344. }
  345. }
  346.  
  347. function A(a) {
  348. return z(a) === m;
  349. }
  350.  
  351. reactIs_production_min.AsyncMode = l;
  352. reactIs_production_min.ConcurrentMode = m;
  353. reactIs_production_min.ContextConsumer = k;
  354. reactIs_production_min.ContextProvider = h;
  355. reactIs_production_min.Element = c;
  356. reactIs_production_min.ForwardRef = n;
  357. reactIs_production_min.Fragment = e;
  358. reactIs_production_min.Lazy = t;
  359. reactIs_production_min.Memo = r;
  360. reactIs_production_min.Portal = d;
  361. reactIs_production_min.Profiler = g;
  362. reactIs_production_min.StrictMode = f;
  363. reactIs_production_min.Suspense = p;
  364.  
  365. reactIs_production_min.isAsyncMode = function (a) {
  366. return A(a) || z(a) === l;
  367. };
  368.  
  369. reactIs_production_min.isConcurrentMode = A;
  370.  
  371. reactIs_production_min.isContextConsumer = function (a) {
  372. return z(a) === k;
  373. };
  374.  
  375. reactIs_production_min.isContextProvider = function (a) {
  376. return z(a) === h;
  377. };
  378.  
  379. reactIs_production_min.isElement = function (a) {
  380. return "object" === typeof a && null !== a && a.$$typeof === c;
  381. };
  382.  
  383. reactIs_production_min.isForwardRef = function (a) {
  384. return z(a) === n;
  385. };
  386.  
  387. reactIs_production_min.isFragment = function (a) {
  388. return z(a) === e;
  389. };
  390.  
  391. reactIs_production_min.isLazy = function (a) {
  392. return z(a) === t;
  393. };
  394.  
  395. reactIs_production_min.isMemo = function (a) {
  396. return z(a) === r;
  397. };
  398.  
  399. reactIs_production_min.isPortal = function (a) {
  400. return z(a) === d;
  401. };
  402.  
  403. reactIs_production_min.isProfiler = function (a) {
  404. return z(a) === g;
  405. };
  406.  
  407. reactIs_production_min.isStrictMode = function (a) {
  408. return z(a) === f;
  409. };
  410.  
  411. reactIs_production_min.isSuspense = function (a) {
  412. return z(a) === p;
  413. };
  414.  
  415. reactIs_production_min.isValidElementType = function (a) {
  416. 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);
  417. };
  418.  
  419. reactIs_production_min.typeOf = z;
  420.  
  421. {
  422. reactIs$1.exports = reactIs_production_min;
  423. }
  424.  
  425. /*
  426. object-assign
  427. (c) Sindre Sorhus
  428. @license MIT
  429. */
  430. /* eslint-disable no-unused-vars */
  431.  
  432. var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
  433. var hasOwnProperty = Object.prototype.hasOwnProperty;
  434. var propIsEnumerable = Object.prototype.propertyIsEnumerable;
  435.  
  436. function toObject(val) {
  437. if (val === null || val === undefined) {
  438. throw new TypeError('Object.assign cannot be called with null or undefined');
  439. }
  440.  
  441. return Object(val);
  442. }
  443.  
  444. function shouldUseNative() {
  445. try {
  446. if (!Object.assign) {
  447. return false;
  448. } // Detect buggy property enumeration order in older V8 versions.
  449. // https://bugs.chromium.org/p/v8/issues/detail?id=4118
  450.  
  451.  
  452. var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
  453.  
  454. test1[5] = 'de';
  455.  
  456. if (Object.getOwnPropertyNames(test1)[0] === '5') {
  457. return false;
  458. } // https://bugs.chromium.org/p/v8/issues/detail?id=3056
  459.  
  460.  
  461. var test2 = {};
  462.  
  463. for (var i = 0; i < 10; i++) {
  464. test2['_' + String.fromCharCode(i)] = i;
  465. }
  466.  
  467. var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
  468. return test2[n];
  469. });
  470.  
  471. if (order2.join('') !== '0123456789') {
  472. return false;
  473. } // https://bugs.chromium.org/p/v8/issues/detail?id=3056
  474.  
  475.  
  476. var test3 = {};
  477. 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
  478. test3[letter] = letter;
  479. });
  480.  
  481. if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
  482. return false;
  483. }
  484.  
  485. return true;
  486. } catch (err) {
  487. // We don't expect any of the above to throw, but better to be safe.
  488. return false;
  489. }
  490. }
  491.  
  492. shouldUseNative() ? Object.assign : function (target, source) {
  493. var from;
  494. var to = toObject(target);
  495. var symbols;
  496.  
  497. for (var s = 1; s < arguments.length; s++) {
  498. from = Object(arguments[s]);
  499.  
  500. for (var key in from) {
  501. if (hasOwnProperty.call(from, key)) {
  502. to[key] = from[key];
  503. }
  504. }
  505.  
  506. if (getOwnPropertySymbols$1) {
  507. symbols = getOwnPropertySymbols$1(from);
  508.  
  509. for (var i = 0; i < symbols.length; i++) {
  510. if (propIsEnumerable.call(from, symbols[i])) {
  511. to[symbols[i]] = from[symbols[i]];
  512. }
  513. }
  514. }
  515. }
  516.  
  517. return to;
  518. };
  519.  
  520. /**
  521. * Copyright (c) 2013-present, Facebook, Inc.
  522. *
  523. * This source code is licensed under the MIT license found in the
  524. * LICENSE file in the root directory of this source tree.
  525. */
  526.  
  527. var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
  528. var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
  529.  
  530. /**
  531. * Copyright (c) 2013-present, Facebook, Inc.
  532. *
  533. * This source code is licensed under the MIT license found in the
  534. * LICENSE file in the root directory of this source tree.
  535. */
  536.  
  537. Function.call.bind(Object.prototype.hasOwnProperty);
  538.  
  539. /**
  540. * Copyright (c) 2013-present, Facebook, Inc.
  541. *
  542. * This source code is licensed under the MIT license found in the
  543. * LICENSE file in the root directory of this source tree.
  544. */
  545.  
  546. var ReactPropTypesSecret = ReactPropTypesSecret_1;
  547.  
  548. function emptyFunction() {}
  549.  
  550. function emptyFunctionWithReset() {}
  551.  
  552. emptyFunctionWithReset.resetWarningCache = emptyFunction;
  553.  
  554. var factoryWithThrowingShims = function () {
  555. function shim(props, propName, componentName, location, propFullName, secret) {
  556. if (secret === ReactPropTypesSecret) {
  557. // It is still safe when called from React.
  558. return;
  559. }
  560.  
  561. 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');
  562. err.name = 'Invariant Violation';
  563. throw err;
  564. }
  565. shim.isRequired = shim;
  566.  
  567. function getShim() {
  568. return shim;
  569. }
  570. // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
  571.  
  572. var ReactPropTypes = {
  573. array: shim,
  574. bool: shim,
  575. func: shim,
  576. number: shim,
  577. object: shim,
  578. string: shim,
  579. symbol: shim,
  580. any: shim,
  581. arrayOf: getShim,
  582. element: shim,
  583. elementType: shim,
  584. instanceOf: getShim,
  585. node: shim,
  586. objectOf: getShim,
  587. oneOf: getShim,
  588. oneOfType: getShim,
  589. shape: getShim,
  590. exact: getShim,
  591. checkPropTypes: emptyFunctionWithReset,
  592. resetWarningCache: emptyFunction
  593. };
  594. ReactPropTypes.PropTypes = ReactPropTypes;
  595. return ReactPropTypes;
  596. };
  597.  
  598. /**
  599. * Copyright (c) 2013-present, Facebook, Inc.
  600. *
  601. * This source code is licensed under the MIT license found in the
  602. * LICENSE file in the root directory of this source tree.
  603. */
  604.  
  605. {
  606. // By explicitly using `prop-types` you are opting into new production behavior.
  607. // http://fb.me/prop-types-in-prod
  608. factoryWithThrowingShims();
  609. }
  610.  
  611. function _defineProperty$1(obj, key, value) {
  612. if (key in obj) {
  613. Object.defineProperty(obj, key, {
  614. value: value,
  615. enumerable: true,
  616. configurable: true,
  617. writable: true
  618. });
  619. } else {
  620. obj[key] = value;
  621. }
  622.  
  623. return obj;
  624. }
  625.  
  626. /**
  627. * WARNING: Don't import this directly.
  628. * Use `MuiError` from `@material-ui/utils/macros/MuiError.macro` instead.
  629. * @param {number} code
  630. */
  631. function formatMuiErrorMessage(code) {
  632. // Apply babel-plugin-transform-template-literals in loose mode
  633. // loose mode is safe iff we're concatenating primitives
  634. // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
  635.  
  636. /* eslint-disable prefer-template */
  637. var url = 'https://material-ui.com/production-error/?code=' + code;
  638.  
  639. for (var i = 1; i < arguments.length; i += 1) {
  640. // rest params over-transpile for this case
  641. // eslint-disable-next-line prefer-rest-params
  642. url += '&args[]=' + encodeURIComponent(arguments[i]);
  643. }
  644.  
  645. return 'Minified Material-UI error #' + code + '; visit ' + url + ' for the full message.';
  646. /* eslint-enable prefer-template */
  647. }
  648.  
  649. /* eslint-disable no-use-before-define */
  650.  
  651. /**
  652. * Returns a number whose value is limited to the given range.
  653. *
  654. * @param {number} value The value to be clamped
  655. * @param {number} min The lower boundary of the output range
  656. * @param {number} max The upper boundary of the output range
  657. * @returns {number} A number in the range [min, max]
  658. */
  659.  
  660. function clamp$1(value) {
  661. var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  662. var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  663.  
  664. return Math.min(Math.max(min, value), max);
  665. }
  666. /**
  667. * Converts a color from CSS hex format to CSS rgb format.
  668. *
  669. * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
  670. * @returns {string} A CSS rgb color string
  671. */
  672.  
  673.  
  674. function hexToRgb(color) {
  675. color = color.substr(1);
  676. var re = new RegExp(".{1,".concat(color.length >= 6 ? 2 : 1, "}"), 'g');
  677. var colors = color.match(re);
  678.  
  679. if (colors && colors[0].length === 1) {
  680. colors = colors.map(function (n) {
  681. return n + n;
  682. });
  683. }
  684.  
  685. return colors ? "rgb".concat(colors.length === 4 ? 'a' : '', "(").concat(colors.map(function (n, index) {
  686. return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
  687. }).join(', '), ")") : '';
  688. }
  689. /**
  690. * Converts a color from hsl format to rgb format.
  691. *
  692. * @param {string} color - HSL color values
  693. * @returns {string} rgb color values
  694. */
  695.  
  696. function hslToRgb(color) {
  697. color = decomposeColor(color);
  698. var _color = color,
  699. values = _color.values;
  700. var h = values[0];
  701. var s = values[1] / 100;
  702. var l = values[2] / 100;
  703. var a = s * Math.min(l, 1 - l);
  704.  
  705. var f = function f(n) {
  706. var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
  707. return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
  708. };
  709.  
  710. var type = 'rgb';
  711. var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
  712.  
  713. if (color.type === 'hsla') {
  714. type += 'a';
  715. rgb.push(values[3]);
  716. }
  717.  
  718. return recomposeColor({
  719. type: type,
  720. values: rgb
  721. });
  722. }
  723. /**
  724. * Returns an object with the type and values of a color.
  725. *
  726. * Note: Does not support rgb % values.
  727. *
  728. * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  729. * @returns {object} - A MUI color object: {type: string, values: number[]}
  730. */
  731.  
  732. function decomposeColor(color) {
  733. // Idempotent
  734. if (color.type) {
  735. return color;
  736. }
  737.  
  738. if (color.charAt(0) === '#') {
  739. return decomposeColor(hexToRgb(color));
  740. }
  741.  
  742. var marker = color.indexOf('(');
  743. var type = color.substring(0, marker);
  744.  
  745. if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
  746. throw new Error(formatMuiErrorMessage(3, color));
  747. }
  748.  
  749. var values = color.substring(marker + 1, color.length - 1).split(',');
  750. values = values.map(function (value) {
  751. return parseFloat(value);
  752. });
  753. return {
  754. type: type,
  755. values: values
  756. };
  757. }
  758. /**
  759. * Converts a color object with type and values to a string.
  760. *
  761. * @param {object} color - Decomposed color
  762. * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
  763. * @param {array} color.values - [n,n,n] or [n,n,n,n]
  764. * @returns {string} A CSS color string
  765. */
  766.  
  767. function recomposeColor(color) {
  768. var type = color.type;
  769. var values = color.values;
  770.  
  771. if (type.indexOf('rgb') !== -1) {
  772. // Only convert the first 3 values to int (i.e. not alpha)
  773. values = values.map(function (n, i) {
  774. return i < 3 ? parseInt(n, 10) : n;
  775. });
  776. } else if (type.indexOf('hsl') !== -1) {
  777. values[1] = "".concat(values[1], "%");
  778. values[2] = "".concat(values[2], "%");
  779. }
  780.  
  781. return "".concat(type, "(").concat(values.join(', '), ")");
  782. }
  783. /**
  784. * Calculates the contrast ratio between two colors.
  785. *
  786. * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  787. *
  788. * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  789. * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  790. * @returns {number} A contrast ratio value in the range 0 - 21.
  791. */
  792.  
  793. function getContrastRatio(foreground, background) {
  794. var lumA = getLuminance(foreground);
  795. var lumB = getLuminance(background);
  796. return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
  797. }
  798. /**
  799. * The relative brightness of any point in a color space,
  800. * normalized to 0 for darkest black and 1 for lightest white.
  801. *
  802. * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  803. *
  804. * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  805. * @returns {number} The relative brightness of the color in the range 0 - 1
  806. */
  807.  
  808. function getLuminance(color) {
  809. color = decomposeColor(color);
  810. var rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
  811. rgb = rgb.map(function (val) {
  812. val /= 255; // normalized
  813.  
  814. return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
  815. }); // Truncate at 3 digits
  816.  
  817. return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
  818. }
  819. /**
  820. * Set the absolute transparency of a color.
  821. * Any existing alpha values are overwritten.
  822. *
  823. * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  824. * @param {number} value - value to set the alpha channel to in the range 0 -1
  825. * @returns {string} A CSS color string. Hex input values are returned as rgb
  826. */
  827.  
  828. function fade(color, value) {
  829. color = decomposeColor(color);
  830. value = clamp$1(value);
  831.  
  832. if (color.type === 'rgb' || color.type === 'hsl') {
  833. color.type += 'a';
  834. }
  835.  
  836. color.values[3] = value;
  837. return recomposeColor(color);
  838. }
  839. /**
  840. * Darkens a color.
  841. *
  842. * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  843. * @param {number} coefficient - multiplier in the range 0 - 1
  844. * @returns {string} A CSS color string. Hex input values are returned as rgb
  845. */
  846.  
  847. function darken(color, coefficient) {
  848. color = decomposeColor(color);
  849. coefficient = clamp$1(coefficient);
  850.  
  851. if (color.type.indexOf('hsl') !== -1) {
  852. color.values[2] *= 1 - coefficient;
  853. } else if (color.type.indexOf('rgb') !== -1) {
  854. for (var i = 0; i < 3; i += 1) {
  855. color.values[i] *= 1 - coefficient;
  856. }
  857. }
  858.  
  859. return recomposeColor(color);
  860. }
  861. /**
  862. * Lightens a color.
  863. *
  864. * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  865. * @param {number} coefficient - multiplier in the range 0 - 1
  866. * @returns {string} A CSS color string. Hex input values are returned as rgb
  867. */
  868.  
  869. function lighten(color, coefficient) {
  870. color = decomposeColor(color);
  871. coefficient = clamp$1(coefficient);
  872.  
  873. if (color.type.indexOf('hsl') !== -1) {
  874. color.values[2] += (100 - color.values[2]) * coefficient;
  875. } else if (color.type.indexOf('rgb') !== -1) {
  876. for (var i = 0; i < 3; i += 1) {
  877. color.values[i] += (255 - color.values[i]) * coefficient;
  878. }
  879. }
  880.  
  881. return recomposeColor(color);
  882. }
  883.  
  884. function _objectWithoutPropertiesLoose(source, excluded) {
  885. if (source == null) return {};
  886. var target = {};
  887. var sourceKeys = Object.keys(source);
  888. var key, i;
  889.  
  890. for (i = 0; i < sourceKeys.length; i++) {
  891. key = sourceKeys[i];
  892. if (excluded.indexOf(key) >= 0) continue;
  893. target[key] = source[key];
  894. }
  895.  
  896. return target;
  897. }
  898.  
  899. function _objectWithoutProperties(source, excluded) {
  900. if (source == null) return {};
  901. var target = _objectWithoutPropertiesLoose(source, excluded);
  902. var key, i;
  903.  
  904. if (Object.getOwnPropertySymbols) {
  905. var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
  906.  
  907. for (i = 0; i < sourceSymbolKeys.length; i++) {
  908. key = sourceSymbolKeys[i];
  909. if (excluded.indexOf(key) >= 0) continue;
  910. if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
  911. target[key] = source[key];
  912. }
  913. }
  914.  
  915. return target;
  916. }
  917.  
  918. // It can't be configured as it's used statically for propTypes.
  919.  
  920. var keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
  921.  
  922. function createBreakpoints(breakpoints) {
  923. var _breakpoints$values = breakpoints.values,
  924. values = _breakpoints$values === void 0 ? {
  925. xs: 0,
  926. sm: 600,
  927. md: 960,
  928. lg: 1280,
  929. xl: 1920
  930. } : _breakpoints$values,
  931. _breakpoints$unit = breakpoints.unit,
  932. unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
  933. _breakpoints$step = breakpoints.step,
  934. step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
  935. other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
  936.  
  937. function up(key) {
  938. var value = typeof values[key] === 'number' ? values[key] : key;
  939. return "@media (min-width:".concat(value).concat(unit, ")");
  940. }
  941.  
  942. function down(key) {
  943. var endIndex = keys.indexOf(key) + 1;
  944. var upperbound = values[keys[endIndex]];
  945.  
  946. if (endIndex === keys.length) {
  947. // xl down applies to all sizes
  948. return up('xs');
  949. }
  950.  
  951. var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
  952. return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
  953. }
  954.  
  955. function between(start, end) {
  956. var endIndex = keys.indexOf(end);
  957.  
  958. if (endIndex === keys.length - 1) {
  959. return up(start);
  960. }
  961.  
  962. 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, ")");
  963. }
  964.  
  965. function only(key) {
  966. return between(key, key);
  967. }
  968.  
  969. function width(key) {
  970. return values[key];
  971. }
  972.  
  973. return _extends$1({
  974. keys: keys,
  975. values: values,
  976. up: up,
  977. down: down,
  978. between: between,
  979. only: only,
  980. width: width
  981. }, other);
  982. }
  983.  
  984. function createMixins(breakpoints, spacing, mixins) {
  985. var _toolbar;
  986.  
  987. return _extends$1({
  988. gutters: function gutters() {
  989. var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; // To deprecate in v4.1
  990. // warning(
  991. // false,
  992. // [
  993. // 'Material-UI: Theme.mixins.gutters() is deprecated.',
  994. // 'You can use the source of the mixin directly:',
  995. // `
  996. // paddingLeft: theme.spacing(2),
  997. // paddingRight: theme.spacing(2),
  998. // [theme.breakpoints.up('sm')]: {
  999. // paddingLeft: theme.spacing(3),
  1000. // paddingRight: theme.spacing(3),
  1001. // },
  1002. // `,
  1003. // ].join('\n'),
  1004. // );
  1005.  
  1006. return _extends$1({
  1007. paddingLeft: spacing(2),
  1008. paddingRight: spacing(2)
  1009. }, styles, _defineProperty$1({}, breakpoints.up('sm'), _extends$1({
  1010. paddingLeft: spacing(3),
  1011. paddingRight: spacing(3)
  1012. }, styles[breakpoints.up('sm')])));
  1013. },
  1014. toolbar: (_toolbar = {
  1015. minHeight: 56
  1016. }, _defineProperty$1(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
  1017. minHeight: 48
  1018. }), _defineProperty$1(_toolbar, breakpoints.up('sm'), {
  1019. minHeight: 64
  1020. }), _toolbar)
  1021. }, mixins);
  1022. }
  1023.  
  1024. var light = {
  1025. // The colors used to style the text.
  1026. text: {
  1027. // The most important text.
  1028. primary: 'rgba(0, 0, 0, 0.87)',
  1029. // Secondary text.
  1030. secondary: 'rgba(0, 0, 0, 0.54)',
  1031. // Disabled text have even lower visual prominence.
  1032. disabled: 'rgba(0, 0, 0, 0.38)',
  1033. // Text hints.
  1034. hint: 'rgba(0, 0, 0, 0.38)'
  1035. },
  1036. // The color used to divide different elements.
  1037. divider: 'rgba(0, 0, 0, 0.12)',
  1038. // The background colors used to style the surfaces.
  1039. // Consistency between these values is important.
  1040. background: {
  1041. paper: common.white,
  1042. default: grey[50]
  1043. },
  1044. // The colors used to style the action elements.
  1045. action: {
  1046. // The color of an active action like an icon button.
  1047. active: 'rgba(0, 0, 0, 0.54)',
  1048. // The color of an hovered action.
  1049. hover: 'rgba(0, 0, 0, 0.04)',
  1050. hoverOpacity: 0.04,
  1051. // The color of a selected action.
  1052. selected: 'rgba(0, 0, 0, 0.08)',
  1053. selectedOpacity: 0.08,
  1054. // The color of a disabled action.
  1055. disabled: 'rgba(0, 0, 0, 0.26)',
  1056. // The background color of a disabled action.
  1057. disabledBackground: 'rgba(0, 0, 0, 0.12)',
  1058. disabledOpacity: 0.38,
  1059. focus: 'rgba(0, 0, 0, 0.12)',
  1060. focusOpacity: 0.12,
  1061. activatedOpacity: 0.12
  1062. }
  1063. };
  1064. var dark = {
  1065. text: {
  1066. primary: common.white,
  1067. secondary: 'rgba(255, 255, 255, 0.7)',
  1068. disabled: 'rgba(255, 255, 255, 0.5)',
  1069. hint: 'rgba(255, 255, 255, 0.5)',
  1070. icon: 'rgba(255, 255, 255, 0.5)'
  1071. },
  1072. divider: 'rgba(255, 255, 255, 0.12)',
  1073. background: {
  1074. paper: grey[800],
  1075. default: '#303030'
  1076. },
  1077. action: {
  1078. active: common.white,
  1079. hover: 'rgba(255, 255, 255, 0.08)',
  1080. hoverOpacity: 0.08,
  1081. selected: 'rgba(255, 255, 255, 0.16)',
  1082. selectedOpacity: 0.16,
  1083. disabled: 'rgba(255, 255, 255, 0.3)',
  1084. disabledBackground: 'rgba(255, 255, 255, 0.12)',
  1085. disabledOpacity: 0.38,
  1086. focus: 'rgba(255, 255, 255, 0.12)',
  1087. focusOpacity: 0.12,
  1088. activatedOpacity: 0.24
  1089. }
  1090. };
  1091.  
  1092. function addLightOrDark(intent, direction, shade, tonalOffset) {
  1093. var tonalOffsetLight = tonalOffset.light || tonalOffset;
  1094. var tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
  1095.  
  1096. if (!intent[direction]) {
  1097. if (intent.hasOwnProperty(shade)) {
  1098. intent[direction] = intent[shade];
  1099. } else if (direction === 'light') {
  1100. intent.light = lighten(intent.main, tonalOffsetLight);
  1101. } else if (direction === 'dark') {
  1102. intent.dark = darken(intent.main, tonalOffsetDark);
  1103. }
  1104. }
  1105. }
  1106.  
  1107. function createPalette(palette) {
  1108. var _palette$primary = palette.primary,
  1109. primary = _palette$primary === void 0 ? {
  1110. light: indigo[300],
  1111. main: indigo[500],
  1112. dark: indigo[700]
  1113. } : _palette$primary,
  1114. _palette$secondary = palette.secondary,
  1115. secondary = _palette$secondary === void 0 ? {
  1116. light: pink.A200,
  1117. main: pink.A400,
  1118. dark: pink.A700
  1119. } : _palette$secondary,
  1120. _palette$error = palette.error,
  1121. error = _palette$error === void 0 ? {
  1122. light: red[300],
  1123. main: red[500],
  1124. dark: red[700]
  1125. } : _palette$error,
  1126. _palette$warning = palette.warning,
  1127. warning = _palette$warning === void 0 ? {
  1128. light: orange[300],
  1129. main: orange[500],
  1130. dark: orange[700]
  1131. } : _palette$warning,
  1132. _palette$info = palette.info,
  1133. info = _palette$info === void 0 ? {
  1134. light: blue[300],
  1135. main: blue[500],
  1136. dark: blue[700]
  1137. } : _palette$info,
  1138. _palette$success = palette.success,
  1139. success = _palette$success === void 0 ? {
  1140. light: green[300],
  1141. main: green[500],
  1142. dark: green[700]
  1143. } : _palette$success,
  1144. _palette$type = palette.type,
  1145. type = _palette$type === void 0 ? 'light' : _palette$type,
  1146. _palette$contrastThre = palette.contrastThreshold,
  1147. contrastThreshold = _palette$contrastThre === void 0 ? 3 : _palette$contrastThre,
  1148. _palette$tonalOffset = palette.tonalOffset,
  1149. tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
  1150. other = _objectWithoutProperties(palette, ["primary", "secondary", "error", "warning", "info", "success", "type", "contrastThreshold", "tonalOffset"]); // Use the same logic as
  1151. // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
  1152. // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
  1153.  
  1154.  
  1155. function getContrastText(background) {
  1156. var contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
  1157.  
  1158. return contrastText;
  1159. }
  1160.  
  1161. var augmentColor = function augmentColor(color) {
  1162. var mainShade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
  1163. var lightShade = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
  1164. var darkShade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 700;
  1165. color = _extends$1({}, color);
  1166.  
  1167. if (!color.main && color[mainShade]) {
  1168. color.main = color[mainShade];
  1169. }
  1170.  
  1171. if (!color.main) {
  1172. throw new Error(formatMuiErrorMessage(4, mainShade));
  1173. }
  1174.  
  1175. if (typeof color.main !== 'string') {
  1176. throw new Error(formatMuiErrorMessage(5, JSON.stringify(color.main)));
  1177. }
  1178.  
  1179. addLightOrDark(color, 'light', lightShade, tonalOffset);
  1180. addLightOrDark(color, 'dark', darkShade, tonalOffset);
  1181.  
  1182. if (!color.contrastText) {
  1183. color.contrastText = getContrastText(color.main);
  1184. }
  1185.  
  1186. return color;
  1187. };
  1188.  
  1189. var types = {
  1190. dark: dark,
  1191. light: light
  1192. };
  1193.  
  1194. var paletteOutput = deepmerge(_extends$1({
  1195. // A collection of common colors.
  1196. common: common,
  1197. // The palette type, can be light or dark.
  1198. type: type,
  1199. // The colors used to represent primary interface elements for a user.
  1200. primary: augmentColor(primary),
  1201. // The colors used to represent secondary interface elements for a user.
  1202. secondary: augmentColor(secondary, 'A400', 'A200', 'A700'),
  1203. // The colors used to represent interface elements that the user should be made aware of.
  1204. error: augmentColor(error),
  1205. // The colors used to represent potentially dangerous actions or important messages.
  1206. warning: augmentColor(warning),
  1207. // The colors used to present information to the user that is neutral and not necessarily important.
  1208. info: augmentColor(info),
  1209. // The colors used to indicate the successful completion of an action that user triggered.
  1210. success: augmentColor(success),
  1211. // The grey colors.
  1212. grey: grey,
  1213. // Used by `getContrastText()` to maximize the contrast between
  1214. // the background and the text.
  1215. contrastThreshold: contrastThreshold,
  1216. // Takes a background color and returns the text color that maximizes the contrast.
  1217. getContrastText: getContrastText,
  1218. // Generate a rich color object.
  1219. augmentColor: augmentColor,
  1220. // Used by the functions below to shift a color's luminance by approximately
  1221. // two indexes within its tonal palette.
  1222. // E.g., shift from Red 500 to Red 300 or Red 700.
  1223. tonalOffset: tonalOffset
  1224. }, types[type]), other);
  1225. return paletteOutput;
  1226. }
  1227.  
  1228. function round$1(value) {
  1229. return Math.round(value * 1e5) / 1e5;
  1230. }
  1231.  
  1232. var caseAllCaps = {
  1233. textTransform: 'uppercase'
  1234. };
  1235. var defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
  1236. /**
  1237. * @see @link{https://material.io/design/typography/the-type-system.html}
  1238. * @see @link{https://material.io/design/typography/understanding-typography.html}
  1239. */
  1240.  
  1241. function createTypography(palette, typography) {
  1242. var _ref = typeof typography === 'function' ? typography(palette) : typography,
  1243. _ref$fontFamily = _ref.fontFamily,
  1244. fontFamily = _ref$fontFamily === void 0 ? defaultFontFamily : _ref$fontFamily,
  1245. _ref$fontSize = _ref.fontSize,
  1246. fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
  1247. _ref$fontWeightLight = _ref.fontWeightLight,
  1248. fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,
  1249. _ref$fontWeightRegula = _ref.fontWeightRegular,
  1250. fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,
  1251. _ref$fontWeightMedium = _ref.fontWeightMedium,
  1252. fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,
  1253. _ref$fontWeightBold = _ref.fontWeightBold,
  1254. fontWeightBold = _ref$fontWeightBold === void 0 ? 700 : _ref$fontWeightBold,
  1255. _ref$htmlFontSize = _ref.htmlFontSize,
  1256. htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,
  1257. allVariants = _ref.allVariants,
  1258. pxToRem2 = _ref.pxToRem,
  1259. other = _objectWithoutProperties(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"]);
  1260.  
  1261. var coef = fontSize / 14;
  1262.  
  1263. var pxToRem = pxToRem2 || function (size) {
  1264. return "".concat(size / htmlFontSize * coef, "rem");
  1265. };
  1266.  
  1267. var buildVariant = function buildVariant(fontWeight, size, lineHeight, letterSpacing, casing) {
  1268. return _extends$1({
  1269. fontFamily: fontFamily,
  1270. fontWeight: fontWeight,
  1271. fontSize: pxToRem(size),
  1272. // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
  1273. lineHeight: lineHeight
  1274. }, fontFamily === defaultFontFamily ? {
  1275. letterSpacing: "".concat(round$1(letterSpacing / size), "em")
  1276. } : {}, casing, allVariants);
  1277. };
  1278.  
  1279. var variants = {
  1280. h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
  1281. h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
  1282. h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
  1283. h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
  1284. h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
  1285. h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
  1286. subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
  1287. subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
  1288. body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
  1289. body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
  1290. button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
  1291. caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
  1292. overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
  1293. };
  1294. return deepmerge(_extends$1({
  1295. htmlFontSize: htmlFontSize,
  1296. pxToRem: pxToRem,
  1297. round: round$1,
  1298. // TODO v5: remove
  1299. fontFamily: fontFamily,
  1300. fontSize: fontSize,
  1301. fontWeightLight: fontWeightLight,
  1302. fontWeightRegular: fontWeightRegular,
  1303. fontWeightMedium: fontWeightMedium,
  1304. fontWeightBold: fontWeightBold
  1305. }, variants), other, {
  1306. clone: false // No need to clone deep
  1307.  
  1308. });
  1309. }
  1310.  
  1311. var shadowKeyUmbraOpacity = 0.2;
  1312. var shadowKeyPenumbraOpacity = 0.14;
  1313. var shadowAmbientShadowOpacity = 0.12;
  1314.  
  1315. function createShadow() {
  1316. 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(',');
  1317. } // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
  1318.  
  1319.  
  1320. 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)];
  1321.  
  1322. var shape = {
  1323. borderRadius: 4
  1324. };
  1325.  
  1326. function _arrayLikeToArray(arr, len) {
  1327. if (len == null || len > arr.length) len = arr.length;
  1328.  
  1329. for (var i = 0, arr2 = new Array(len); i < len; i++) {
  1330. arr2[i] = arr[i];
  1331. }
  1332.  
  1333. return arr2;
  1334. }
  1335.  
  1336. function _arrayWithoutHoles(arr) {
  1337. if (Array.isArray(arr)) return _arrayLikeToArray(arr);
  1338. }
  1339.  
  1340. function _iterableToArray(iter) {
  1341. if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
  1342. }
  1343.  
  1344. function _unsupportedIterableToArray(o, minLen) {
  1345. if (!o) return;
  1346. if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  1347. var n = Object.prototype.toString.call(o).slice(8, -1);
  1348. if (n === "Object" && o.constructor) n = o.constructor.name;
  1349. if (n === "Map" || n === "Set") return Array.from(o);
  1350. if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  1351. }
  1352.  
  1353. function _nonIterableSpread() {
  1354. throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  1355. }
  1356.  
  1357. function _toConsumableArray(arr) {
  1358. return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
  1359. }
  1360.  
  1361. function merge(acc, item) {
  1362. if (!item) {
  1363. return acc;
  1364. }
  1365.  
  1366. return deepmerge(acc, item, {
  1367. clone: false // No need to clone deep, it's way faster.
  1368.  
  1369. });
  1370. }
  1371.  
  1372. // For instance with the first breakpoint xs: [xs, sm[.
  1373.  
  1374. var values$1 = {
  1375. xs: 0,
  1376. sm: 600,
  1377. md: 960,
  1378. lg: 1280,
  1379. xl: 1920
  1380. };
  1381. var defaultBreakpoints = {
  1382. // Sorted ASC by size. That's important.
  1383. // It can't be configured as it's used statically for propTypes.
  1384. keys: ['xs', 'sm', 'md', 'lg', 'xl'],
  1385. up: function up(key) {
  1386. return "@media (min-width:".concat(values$1[key], "px)");
  1387. }
  1388. };
  1389. function handleBreakpoints(props, propValue, styleFromPropValue) {
  1390.  
  1391. if (Array.isArray(propValue)) {
  1392. var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
  1393. return propValue.reduce(function (acc, item, index) {
  1394. acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
  1395. return acc;
  1396. }, {});
  1397. }
  1398.  
  1399. if (_typeof$2(propValue) === 'object') {
  1400. var _themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
  1401.  
  1402. return Object.keys(propValue).reduce(function (acc, breakpoint) {
  1403. acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
  1404. return acc;
  1405. }, {});
  1406. }
  1407.  
  1408. var output = styleFromPropValue(propValue);
  1409. return output;
  1410. }
  1411.  
  1412. function getPath(obj, path) {
  1413. if (!path || typeof path !== 'string') {
  1414. return null;
  1415. }
  1416.  
  1417. return path.split('.').reduce(function (acc, item) {
  1418. return acc && acc[item] ? acc[item] : null;
  1419. }, obj);
  1420. }
  1421.  
  1422. function style$1(options) {
  1423. var prop = options.prop,
  1424. _options$cssProperty = options.cssProperty,
  1425. cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
  1426. themeKey = options.themeKey,
  1427. transform = options.transform;
  1428.  
  1429. var fn = function fn(props) {
  1430. if (props[prop] == null) {
  1431. return null;
  1432. }
  1433.  
  1434. var propValue = props[prop];
  1435. var theme = props.theme;
  1436. var themeMapping = getPath(theme, themeKey) || {};
  1437.  
  1438. var styleFromPropValue = function styleFromPropValue(propValueFinal) {
  1439. var value;
  1440.  
  1441. if (typeof themeMapping === 'function') {
  1442. value = themeMapping(propValueFinal);
  1443. } else if (Array.isArray(themeMapping)) {
  1444. value = themeMapping[propValueFinal] || propValueFinal;
  1445. } else {
  1446. value = getPath(themeMapping, propValueFinal) || propValueFinal;
  1447.  
  1448. if (transform) {
  1449. value = transform(value);
  1450. }
  1451. }
  1452.  
  1453. if (cssProperty === false) {
  1454. return value;
  1455. }
  1456.  
  1457. return _defineProperty$1({}, cssProperty, value);
  1458. };
  1459.  
  1460. return handleBreakpoints(props, propValue, styleFromPropValue);
  1461. };
  1462.  
  1463. fn.propTypes = {};
  1464. fn.filterProps = [prop];
  1465. return fn;
  1466. }
  1467.  
  1468. function compose() {
  1469. for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
  1470. styles[_key] = arguments[_key];
  1471. }
  1472.  
  1473. var fn = function fn(props) {
  1474. return styles.reduce(function (acc, style) {
  1475. var output = style(props);
  1476.  
  1477. if (output) {
  1478. return merge(acc, output);
  1479. }
  1480.  
  1481. return acc;
  1482. }, {});
  1483. }; // Alternative approach that doesn't yield any performance gain.
  1484. // const handlers = styles.reduce((acc, style) => {
  1485. // style.filterProps.forEach(prop => {
  1486. // acc[prop] = style;
  1487. // });
  1488. // return acc;
  1489. // }, {});
  1490. // const fn = props => {
  1491. // return Object.keys(props).reduce((acc, prop) => {
  1492. // if (handlers[prop]) {
  1493. // return merge(acc, handlers[prop](props));
  1494. // }
  1495. // return acc;
  1496. // }, {});
  1497. // };
  1498.  
  1499.  
  1500. fn.propTypes = {};
  1501. fn.filterProps = styles.reduce(function (acc, style) {
  1502. return acc.concat(style.filterProps);
  1503. }, []);
  1504. return fn;
  1505. }
  1506.  
  1507. function getBorder(value) {
  1508. if (typeof value !== 'number') {
  1509. return value;
  1510. }
  1511.  
  1512. return "".concat(value, "px solid");
  1513. }
  1514.  
  1515. var border = style$1({
  1516. prop: 'border',
  1517. themeKey: 'borders',
  1518. transform: getBorder
  1519. });
  1520. var borderTop = style$1({
  1521. prop: 'borderTop',
  1522. themeKey: 'borders',
  1523. transform: getBorder
  1524. });
  1525. var borderRight = style$1({
  1526. prop: 'borderRight',
  1527. themeKey: 'borders',
  1528. transform: getBorder
  1529. });
  1530. var borderBottom = style$1({
  1531. prop: 'borderBottom',
  1532. themeKey: 'borders',
  1533. transform: getBorder
  1534. });
  1535. var borderLeft = style$1({
  1536. prop: 'borderLeft',
  1537. themeKey: 'borders',
  1538. transform: getBorder
  1539. });
  1540. var borderColor = style$1({
  1541. prop: 'borderColor',
  1542. themeKey: 'palette'
  1543. });
  1544. var borderRadius = style$1({
  1545. prop: 'borderRadius',
  1546. themeKey: 'shape'
  1547. });
  1548. var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
  1549.  
  1550. function omit$1(input, fields) {
  1551. var output = {};
  1552. Object.keys(input).forEach(function (prop) {
  1553. if (fields.indexOf(prop) === -1) {
  1554. output[prop] = input[prop];
  1555. }
  1556. });
  1557. return output;
  1558. }
  1559.  
  1560. function css$1(styleFunction) {
  1561. var newStyleFunction = function newStyleFunction(props) {
  1562. var output = styleFunction(props);
  1563.  
  1564. if (props.css) {
  1565. return _extends$1({}, merge(output, styleFunction(_extends$1({
  1566. theme: props.theme
  1567. }, props.css))), omit$1(props.css, [styleFunction.filterProps]));
  1568. }
  1569.  
  1570. return output;
  1571. };
  1572.  
  1573. newStyleFunction.propTypes = {};
  1574. newStyleFunction.filterProps = ['css'].concat(_toConsumableArray(styleFunction.filterProps));
  1575. return newStyleFunction;
  1576. }
  1577.  
  1578. var displayPrint = style$1({
  1579. prop: 'displayPrint',
  1580. cssProperty: false,
  1581. transform: function transform(value) {
  1582. return {
  1583. '@media print': {
  1584. display: value
  1585. }
  1586. };
  1587. }
  1588. });
  1589. var displayRaw = style$1({
  1590. prop: 'display'
  1591. });
  1592. var overflow = style$1({
  1593. prop: 'overflow'
  1594. });
  1595. var textOverflow = style$1({
  1596. prop: 'textOverflow'
  1597. });
  1598. var visibility = style$1({
  1599. prop: 'visibility'
  1600. });
  1601. var whiteSpace = style$1({
  1602. prop: 'whiteSpace'
  1603. });
  1604. var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
  1605.  
  1606. var flexBasis = style$1({
  1607. prop: 'flexBasis'
  1608. });
  1609. var flexDirection = style$1({
  1610. prop: 'flexDirection'
  1611. });
  1612. var flexWrap = style$1({
  1613. prop: 'flexWrap'
  1614. });
  1615. var justifyContent = style$1({
  1616. prop: 'justifyContent'
  1617. });
  1618. var alignItems = style$1({
  1619. prop: 'alignItems'
  1620. });
  1621. var alignContent = style$1({
  1622. prop: 'alignContent'
  1623. });
  1624. var order = style$1({
  1625. prop: 'order'
  1626. });
  1627. var flex = style$1({
  1628. prop: 'flex'
  1629. });
  1630. var flexGrow = style$1({
  1631. prop: 'flexGrow'
  1632. });
  1633. var flexShrink = style$1({
  1634. prop: 'flexShrink'
  1635. });
  1636. var alignSelf = style$1({
  1637. prop: 'alignSelf'
  1638. });
  1639. var justifyItems = style$1({
  1640. prop: 'justifyItems'
  1641. });
  1642. var justifySelf = style$1({
  1643. prop: 'justifySelf'
  1644. });
  1645. var flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
  1646.  
  1647. var gridGap = style$1({
  1648. prop: 'gridGap'
  1649. });
  1650. var gridColumnGap = style$1({
  1651. prop: 'gridColumnGap'
  1652. });
  1653. var gridRowGap = style$1({
  1654. prop: 'gridRowGap'
  1655. });
  1656. var gridColumn = style$1({
  1657. prop: 'gridColumn'
  1658. });
  1659. var gridRow = style$1({
  1660. prop: 'gridRow'
  1661. });
  1662. var gridAutoFlow = style$1({
  1663. prop: 'gridAutoFlow'
  1664. });
  1665. var gridAutoColumns = style$1({
  1666. prop: 'gridAutoColumns'
  1667. });
  1668. var gridAutoRows = style$1({
  1669. prop: 'gridAutoRows'
  1670. });
  1671. var gridTemplateColumns = style$1({
  1672. prop: 'gridTemplateColumns'
  1673. });
  1674. var gridTemplateRows = style$1({
  1675. prop: 'gridTemplateRows'
  1676. });
  1677. var gridTemplateAreas = style$1({
  1678. prop: 'gridTemplateAreas'
  1679. });
  1680. var gridArea = style$1({
  1681. prop: 'gridArea'
  1682. });
  1683. var grid = compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
  1684.  
  1685. var color = style$1({
  1686. prop: 'color',
  1687. themeKey: 'palette'
  1688. });
  1689. var bgcolor = style$1({
  1690. prop: 'bgcolor',
  1691. cssProperty: 'backgroundColor',
  1692. themeKey: 'palette'
  1693. });
  1694. var palette = compose(color, bgcolor);
  1695.  
  1696. var position = style$1({
  1697. prop: 'position'
  1698. });
  1699. var zIndex$1 = style$1({
  1700. prop: 'zIndex',
  1701. themeKey: 'zIndex'
  1702. });
  1703. var top = style$1({
  1704. prop: 'top'
  1705. });
  1706. var right = style$1({
  1707. prop: 'right'
  1708. });
  1709. var bottom = style$1({
  1710. prop: 'bottom'
  1711. });
  1712. var left = style$1({
  1713. prop: 'left'
  1714. });
  1715. var positions = compose(position, zIndex$1, top, right, bottom, left);
  1716.  
  1717. var boxShadow = style$1({
  1718. prop: 'boxShadow',
  1719. themeKey: 'shadows'
  1720. });
  1721.  
  1722. function transform$1(value) {
  1723. return value <= 1 ? "".concat(value * 100, "%") : value;
  1724. }
  1725.  
  1726. var width = style$1({
  1727. prop: 'width',
  1728. transform: transform$1
  1729. });
  1730. var maxWidth = style$1({
  1731. prop: 'maxWidth',
  1732. transform: transform$1
  1733. });
  1734. var minWidth = style$1({
  1735. prop: 'minWidth',
  1736. transform: transform$1
  1737. });
  1738. var height = style$1({
  1739. prop: 'height',
  1740. transform: transform$1
  1741. });
  1742. var maxHeight = style$1({
  1743. prop: 'maxHeight',
  1744. transform: transform$1
  1745. });
  1746. var minHeight = style$1({
  1747. prop: 'minHeight',
  1748. transform: transform$1
  1749. });
  1750. style$1({
  1751. prop: 'size',
  1752. cssProperty: 'width',
  1753. transform: transform$1
  1754. });
  1755. style$1({
  1756. prop: 'size',
  1757. cssProperty: 'height',
  1758. transform: transform$1
  1759. });
  1760. var boxSizing = style$1({
  1761. prop: 'boxSizing'
  1762. });
  1763. var sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
  1764.  
  1765. function _arrayWithHoles(arr) {
  1766. if (Array.isArray(arr)) return arr;
  1767. }
  1768.  
  1769. function _iterableToArrayLimit(arr, i) {
  1770. var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
  1771.  
  1772. if (_i == null) return;
  1773. var _arr = [];
  1774. var _n = true;
  1775. var _d = false;
  1776.  
  1777. var _s, _e;
  1778.  
  1779. try {
  1780. for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
  1781. _arr.push(_s.value);
  1782.  
  1783. if (i && _arr.length === i) break;
  1784. }
  1785. } catch (err) {
  1786. _d = true;
  1787. _e = err;
  1788. } finally {
  1789. try {
  1790. if (!_n && _i["return"] != null) _i["return"]();
  1791. } finally {
  1792. if (_d) throw _e;
  1793. }
  1794. }
  1795.  
  1796. return _arr;
  1797. }
  1798.  
  1799. function _nonIterableRest() {
  1800. throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  1801. }
  1802.  
  1803. function _slicedToArray(arr, i) {
  1804. return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
  1805. }
  1806.  
  1807. function memoize$1(fn) {
  1808. var cache = {};
  1809. return function (arg) {
  1810. if (cache[arg] === undefined) {
  1811. cache[arg] = fn(arg);
  1812. }
  1813.  
  1814. return cache[arg];
  1815. };
  1816. }
  1817.  
  1818. var properties = {
  1819. m: 'margin',
  1820. p: 'padding'
  1821. };
  1822. var directions = {
  1823. t: 'Top',
  1824. r: 'Right',
  1825. b: 'Bottom',
  1826. l: 'Left',
  1827. x: ['Left', 'Right'],
  1828. y: ['Top', 'Bottom']
  1829. };
  1830. var aliases = {
  1831. marginX: 'mx',
  1832. marginY: 'my',
  1833. paddingX: 'px',
  1834. paddingY: 'py'
  1835. }; // memoize() impact:
  1836. // From 300,000 ops/sec
  1837. // To 350,000 ops/sec
  1838.  
  1839. var getCssProperties = memoize$1(function (prop) {
  1840. // It's not a shorthand notation.
  1841. if (prop.length > 2) {
  1842. if (aliases[prop]) {
  1843. prop = aliases[prop];
  1844. } else {
  1845. return [prop];
  1846. }
  1847. }
  1848.  
  1849. var _prop$split = prop.split(''),
  1850. _prop$split2 = _slicedToArray(_prop$split, 2),
  1851. a = _prop$split2[0],
  1852. b = _prop$split2[1];
  1853.  
  1854. var property = properties[a];
  1855. var direction = directions[b] || '';
  1856. return Array.isArray(direction) ? direction.map(function (dir) {
  1857. return property + dir;
  1858. }) : [property + direction];
  1859. });
  1860. 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'];
  1861. function createUnarySpacing(theme) {
  1862. var themeSpacing = theme.spacing || 8;
  1863.  
  1864. if (typeof themeSpacing === 'number') {
  1865. return function (abs) {
  1866.  
  1867. return themeSpacing * abs;
  1868. };
  1869. }
  1870.  
  1871. if (Array.isArray(themeSpacing)) {
  1872. return function (abs) {
  1873.  
  1874. return themeSpacing[abs];
  1875. };
  1876. }
  1877.  
  1878. if (typeof themeSpacing === 'function') {
  1879. return themeSpacing;
  1880. }
  1881.  
  1882. return function () {
  1883. return undefined;
  1884. };
  1885. }
  1886.  
  1887. function getValue(transformer, propValue) {
  1888. if (typeof propValue === 'string' || propValue == null) {
  1889. return propValue;
  1890. }
  1891.  
  1892. var abs = Math.abs(propValue);
  1893. var transformed = transformer(abs);
  1894.  
  1895. if (propValue >= 0) {
  1896. return transformed;
  1897. }
  1898.  
  1899. if (typeof transformed === 'number') {
  1900. return -transformed;
  1901. }
  1902.  
  1903. return "-".concat(transformed);
  1904. }
  1905.  
  1906. function getStyleFromPropValue(cssProperties, transformer) {
  1907. return function (propValue) {
  1908. return cssProperties.reduce(function (acc, cssProperty) {
  1909. acc[cssProperty] = getValue(transformer, propValue);
  1910. return acc;
  1911. }, {});
  1912. };
  1913. }
  1914.  
  1915. function spacing(props) {
  1916. var theme = props.theme;
  1917. var transformer = createUnarySpacing(theme);
  1918. return Object.keys(props).map(function (prop) {
  1919. // Using a hash computation over an array iteration could be faster, but with only 28 items,
  1920. // it's doesn't worth the bundle size.
  1921. if (spacingKeys.indexOf(prop) === -1) {
  1922. return null;
  1923. }
  1924.  
  1925. var cssProperties = getCssProperties(prop);
  1926. var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
  1927. var propValue = props[prop];
  1928. return handleBreakpoints(props, propValue, styleFromPropValue);
  1929. }).reduce(merge, {});
  1930. }
  1931.  
  1932. spacing.propTypes = {};
  1933. spacing.filterProps = spacingKeys;
  1934.  
  1935. var fontFamily = style$1({
  1936. prop: 'fontFamily',
  1937. themeKey: 'typography'
  1938. });
  1939. var fontSize = style$1({
  1940. prop: 'fontSize',
  1941. themeKey: 'typography'
  1942. });
  1943. var fontStyle = style$1({
  1944. prop: 'fontStyle',
  1945. themeKey: 'typography'
  1946. });
  1947. var fontWeight = style$1({
  1948. prop: 'fontWeight',
  1949. themeKey: 'typography'
  1950. });
  1951. var letterSpacing = style$1({
  1952. prop: 'letterSpacing'
  1953. });
  1954. var lineHeight = style$1({
  1955. prop: 'lineHeight'
  1956. });
  1957. var textAlign = style$1({
  1958. prop: 'textAlign'
  1959. });
  1960. var typography = compose(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
  1961.  
  1962. function createSpacing() {
  1963. var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8; // Already transformed.
  1964.  
  1965. if (spacingInput.mui) {
  1966. return spacingInput;
  1967. } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout.
  1968. // Smaller components, such as icons and type, can align to a 4dp grid.
  1969. // https://material.io/design/layout/understanding-layout.html#usage
  1970.  
  1971.  
  1972. var transform = createUnarySpacing({
  1973. spacing: spacingInput
  1974. });
  1975.  
  1976. var spacing = function spacing() {
  1977. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  1978. args[_key] = arguments[_key];
  1979. }
  1980.  
  1981. if (args.length === 0) {
  1982. return transform(1);
  1983. }
  1984.  
  1985. if (args.length === 1) {
  1986. return transform(args[0]);
  1987. }
  1988.  
  1989. return args.map(function (argument) {
  1990. if (typeof argument === 'string') {
  1991. return argument;
  1992. }
  1993.  
  1994. var output = transform(argument);
  1995. return typeof output === 'number' ? "".concat(output, "px") : output;
  1996. }).join(' ');
  1997. }; // Backward compatibility, to remove in v5.
  1998.  
  1999.  
  2000. Object.defineProperty(spacing, 'unit', {
  2001. get: function get() {
  2002.  
  2003. return spacingInput;
  2004. }
  2005. });
  2006. spacing.mui = true;
  2007. return spacing;
  2008. }
  2009.  
  2010. // to learn the context in which each easing should be used.
  2011.  
  2012. var easing = {
  2013. // This is the most common easing curve.
  2014. easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
  2015. // Objects enter the screen at full velocity from off-screen and
  2016. // slowly decelerate to a resting point.
  2017. easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
  2018. // Objects leave the screen at full velocity. They do not decelerate when off-screen.
  2019. easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
  2020. // The sharp curve is used by objects that may return to the screen at any time.
  2021. sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
  2022. }; // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
  2023. // to learn when use what timing
  2024.  
  2025. var duration = {
  2026. shortest: 150,
  2027. shorter: 200,
  2028. short: 250,
  2029. // most basic recommended timing
  2030. standard: 300,
  2031. // this is to be used in complex animations
  2032. complex: 375,
  2033. // recommended when something is entering screen
  2034. enteringScreen: 225,
  2035. // recommended when something is leaving screen
  2036. leavingScreen: 195
  2037. };
  2038.  
  2039. function formatMs(milliseconds) {
  2040. return "".concat(Math.round(milliseconds), "ms");
  2041. }
  2042. /**
  2043. * @param {string|Array} props
  2044. * @param {object} param
  2045. * @param {string} param.prop
  2046. * @param {number} param.duration
  2047. * @param {string} param.easing
  2048. * @param {number} param.delay
  2049. */
  2050.  
  2051.  
  2052. var transitions = {
  2053. easing: easing,
  2054. duration: duration,
  2055. create: function create() {
  2056. var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['all'];
  2057. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  2058.  
  2059. var _options$duration = options.duration,
  2060. durationOption = _options$duration === void 0 ? duration.standard : _options$duration,
  2061. _options$easing = options.easing,
  2062. easingOption = _options$easing === void 0 ? easing.easeInOut : _options$easing,
  2063. _options$delay = options.delay,
  2064. delay = _options$delay === void 0 ? 0 : _options$delay;
  2065. _objectWithoutProperties(options, ["duration", "easing", "delay"]);
  2066.  
  2067. return (Array.isArray(props) ? props : [props]).map(function (animatedProp) {
  2068. return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : formatMs(durationOption), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : formatMs(delay));
  2069. }).join(',');
  2070. },
  2071. getAutoHeightDuration: function getAutoHeightDuration(height) {
  2072. if (!height) {
  2073. return 0;
  2074. }
  2075.  
  2076. 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
  2077.  
  2078. return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
  2079. }
  2080. };
  2081.  
  2082. // We need to centralize the zIndex definitions as they work
  2083. // like global values in the browser.
  2084. var zIndex = {
  2085. mobileStepper: 1000,
  2086. speedDial: 1050,
  2087. appBar: 1100,
  2088. drawer: 1200,
  2089. modal: 1300,
  2090. snackbar: 1400,
  2091. tooltip: 1500
  2092. };
  2093.  
  2094. function createMuiTheme() {
  2095. var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  2096.  
  2097. var _options$breakpoints = options.breakpoints,
  2098. breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
  2099. _options$mixins = options.mixins,
  2100. mixinsInput = _options$mixins === void 0 ? {} : _options$mixins,
  2101. _options$palette = options.palette,
  2102. paletteInput = _options$palette === void 0 ? {} : _options$palette,
  2103. spacingInput = options.spacing,
  2104. _options$typography = options.typography,
  2105. typographyInput = _options$typography === void 0 ? {} : _options$typography,
  2106. other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "spacing", "typography"]);
  2107.  
  2108. var palette = createPalette(paletteInput);
  2109. var breakpoints = createBreakpoints(breakpointsInput);
  2110. var spacing = createSpacing(spacingInput);
  2111. var muiTheme = deepmerge({
  2112. breakpoints: breakpoints,
  2113. direction: 'ltr',
  2114. mixins: createMixins(breakpoints, spacing, mixinsInput),
  2115. overrides: {},
  2116. // Inject custom styles
  2117. palette: palette,
  2118. props: {},
  2119. // Provide default props
  2120. shadows: shadows,
  2121. typography: createTypography(palette, typographyInput),
  2122. spacing: spacing,
  2123. shape: shape,
  2124. transitions: transitions,
  2125. zIndex: zIndex
  2126. }, other);
  2127.  
  2128. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  2129. args[_key - 1] = arguments[_key];
  2130. }
  2131.  
  2132. muiTheme = args.reduce(function (acc, argument) {
  2133. return deepmerge(acc, argument);
  2134. }, muiTheme);
  2135.  
  2136. return muiTheme;
  2137. }
  2138.  
  2139. var hasSymbol = typeof Symbol === 'function' && Symbol.for;
  2140. var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
  2141.  
  2142. /**
  2143. * This is the list of the style rule name we use as drop in replacement for the built-in
  2144. * pseudo classes (:checked, :disabled, :focused, etc.).
  2145. *
  2146. * Why do they exist in the first place?
  2147. * These classes are used at a specificity of 2.
  2148. * It allows them to override previously definied styles as well as
  2149. * being untouched by simple user overrides.
  2150. */
  2151.  
  2152. var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected']; // Returns a function which generates unique class names based on counters.
  2153. // When new generator function is created, rule counter is reset.
  2154. // We need to reset the rule counter for SSR for each request.
  2155. //
  2156. // It's inspired by
  2157. // https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
  2158.  
  2159. function createGenerateClassName() {
  2160. var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  2161. var _options$disableGloba = options.disableGlobal,
  2162. disableGlobal = _options$disableGloba === void 0 ? false : _options$disableGloba,
  2163. _options$productionPr = options.productionPrefix,
  2164. productionPrefix = _options$productionPr === void 0 ? 'jss' : _options$productionPr,
  2165. _options$seed = options.seed,
  2166. seed = _options$seed === void 0 ? '' : _options$seed;
  2167. var seedPrefix = seed === '' ? '' : "".concat(seed, "-");
  2168. var ruleCounter = 0;
  2169.  
  2170. var getNextCounterId = function getNextCounterId() {
  2171. ruleCounter += 1;
  2172.  
  2173. return ruleCounter;
  2174. };
  2175.  
  2176. return function (rule, styleSheet) {
  2177. var name = styleSheet.options.name; // Is a global static MUI style?
  2178.  
  2179. if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
  2180. // We can use a shorthand class name, we never use the keys to style the components.
  2181. if (pseudoClasses.indexOf(rule.key) !== -1) {
  2182. return "Mui-".concat(rule.key);
  2183. }
  2184.  
  2185. var prefix = "".concat(seedPrefix).concat(name, "-").concat(rule.key);
  2186.  
  2187. if (!styleSheet.options.theme[nested] || seed !== '') {
  2188. return prefix;
  2189. }
  2190.  
  2191. return "".concat(prefix, "-").concat(getNextCounterId());
  2192. }
  2193.  
  2194. {
  2195. return "".concat(seedPrefix).concat(productionPrefix).concat(getNextCounterId());
  2196. }
  2197. };
  2198. }
  2199.  
  2200. function createStyles$1(styles) {
  2201. return styles;
  2202. }
  2203.  
  2204. /* eslint-disable no-restricted-syntax */
  2205. function getThemeProps(params) {
  2206. var theme = params.theme,
  2207. name = params.name,
  2208. props = params.props;
  2209.  
  2210. if (!theme || !theme.props || !theme.props[name]) {
  2211. return props;
  2212. } // Resolve default props, code borrow from React source.
  2213. // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
  2214.  
  2215.  
  2216. var defaultProps = theme.props[name];
  2217. var propName;
  2218.  
  2219. for (propName in defaultProps) {
  2220. if (props[propName] === undefined) {
  2221. props[propName] = defaultProps[propName];
  2222. }
  2223. }
  2224.  
  2225. return props;
  2226. }
  2227.  
  2228. var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
  2229. return typeof obj;
  2230. } : function (obj) {
  2231. return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
  2232. };
  2233.  
  2234. var isBrowser$1 = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
  2235.  
  2236. function _defineProperties(target, props) {
  2237. for (var i = 0; i < props.length; i++) {
  2238. var descriptor = props[i];
  2239. descriptor.enumerable = descriptor.enumerable || false;
  2240. descriptor.configurable = true;
  2241. if ("value" in descriptor) descriptor.writable = true;
  2242. Object.defineProperty(target, descriptor.key, descriptor);
  2243. }
  2244. }
  2245.  
  2246. function _createClass(Constructor, protoProps, staticProps) {
  2247. if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  2248. if (staticProps) _defineProperties(Constructor, staticProps);
  2249. return Constructor;
  2250. }
  2251.  
  2252. function _setPrototypeOf(o, p) {
  2253. _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
  2254. o.__proto__ = p;
  2255. return o;
  2256. };
  2257.  
  2258. return _setPrototypeOf(o, p);
  2259. }
  2260.  
  2261. function _inheritsLoose(subClass, superClass) {
  2262. subClass.prototype = Object.create(superClass.prototype);
  2263. subClass.prototype.constructor = subClass;
  2264. _setPrototypeOf(subClass, superClass);
  2265. }
  2266.  
  2267. function _assertThisInitialized(self) {
  2268. if (self === void 0) {
  2269. throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  2270. }
  2271.  
  2272. return self;
  2273. }
  2274.  
  2275. var plainObjectConstrurctor = {}.constructor;
  2276.  
  2277. function cloneStyle(style) {
  2278. if (style == null || typeof style !== 'object') return style;
  2279. if (Array.isArray(style)) return style.map(cloneStyle);
  2280. if (style.constructor !== plainObjectConstrurctor) return style;
  2281. var newStyle = {};
  2282.  
  2283. for (var name in style) {
  2284. newStyle[name] = cloneStyle(style[name]);
  2285. }
  2286.  
  2287. return newStyle;
  2288. }
  2289. /**
  2290. * Create a rule instance.
  2291. */
  2292.  
  2293.  
  2294. function createRule(name, decl, options) {
  2295. if (name === void 0) {
  2296. name = 'unnamed';
  2297. }
  2298.  
  2299. var jss = options.jss;
  2300. var declCopy = cloneStyle(decl);
  2301. var rule = jss.plugins.onCreateRule(name, declCopy, options);
  2302. if (rule) return rule; // It is an at-rule and it has no instance.
  2303.  
  2304. if (name[0] === '@') ;
  2305.  
  2306. return null;
  2307. }
  2308.  
  2309. var join = function join(value, by) {
  2310. var result = '';
  2311.  
  2312. for (var i = 0; i < value.length; i++) {
  2313. // Remove !important from the value, it will be readded later.
  2314. if (value[i] === '!important') break;
  2315. if (result) result += by;
  2316. result += value[i];
  2317. }
  2318.  
  2319. return result;
  2320. };
  2321. /**
  2322. * Converts array values to string.
  2323. *
  2324. * `margin: [['5px', '10px']]` > `margin: 5px 10px;`
  2325. * `border: ['1px', '2px']` > `border: 1px, 2px;`
  2326. * `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`
  2327. * `color: ['red', !important]` > `color: red !important;`
  2328. */
  2329.  
  2330.  
  2331. var toCssValue = function toCssValue(value, ignoreImportant) {
  2332. if (ignoreImportant === void 0) {
  2333. ignoreImportant = false;
  2334. }
  2335.  
  2336. if (!Array.isArray(value)) return value;
  2337. var cssValue = ''; // Support space separated values via `[['5px', '10px']]`.
  2338.  
  2339. if (Array.isArray(value[0])) {
  2340. for (var i = 0; i < value.length; i++) {
  2341. if (value[i] === '!important') break;
  2342. if (cssValue) cssValue += ', ';
  2343. cssValue += join(value[i], ' ');
  2344. }
  2345. } else cssValue = join(value, ', '); // Add !important, because it was ignored.
  2346.  
  2347.  
  2348. if (!ignoreImportant && value[value.length - 1] === '!important') {
  2349. cssValue += ' !important';
  2350. }
  2351.  
  2352. return cssValue;
  2353. };
  2354. /**
  2355. * Indent a string.
  2356. * http://jsperf.com/array-join-vs-for
  2357. */
  2358.  
  2359.  
  2360. function indentStr(str, indent) {
  2361. var result = '';
  2362.  
  2363. for (var index = 0; index < indent; index++) {
  2364. result += ' ';
  2365. }
  2366.  
  2367. return result + str;
  2368. }
  2369. /**
  2370. * Converts a Rule to CSS string.
  2371. */
  2372.  
  2373.  
  2374. function toCss(selector, style, options) {
  2375. if (options === void 0) {
  2376. options = {};
  2377. }
  2378.  
  2379. var result = '';
  2380. if (!style) return result;
  2381. var _options = options,
  2382. _options$indent = _options.indent,
  2383. indent = _options$indent === void 0 ? 0 : _options$indent;
  2384. var fallbacks = style.fallbacks;
  2385. if (selector) indent++; // Apply fallbacks first.
  2386.  
  2387. if (fallbacks) {
  2388. // Array syntax {fallbacks: [{prop: value}]}
  2389. if (Array.isArray(fallbacks)) {
  2390. for (var index = 0; index < fallbacks.length; index++) {
  2391. var fallback = fallbacks[index];
  2392.  
  2393. for (var prop in fallback) {
  2394. var value = fallback[prop];
  2395.  
  2396. if (value != null) {
  2397. if (result) result += '\n';
  2398. result += "" + indentStr(prop + ": " + toCssValue(value) + ";", indent);
  2399. }
  2400. }
  2401. }
  2402. } else {
  2403. // Object syntax {fallbacks: {prop: value}}
  2404. for (var _prop in fallbacks) {
  2405. var _value = fallbacks[_prop];
  2406.  
  2407. if (_value != null) {
  2408. if (result) result += '\n';
  2409. result += "" + indentStr(_prop + ": " + toCssValue(_value) + ";", indent);
  2410. }
  2411. }
  2412. }
  2413. }
  2414.  
  2415. for (var _prop2 in style) {
  2416. var _value2 = style[_prop2];
  2417.  
  2418. if (_value2 != null && _prop2 !== 'fallbacks') {
  2419. if (result) result += '\n';
  2420. result += "" + indentStr(_prop2 + ": " + toCssValue(_value2) + ";", indent);
  2421. }
  2422. } // Allow empty style in this case, because properties will be added dynamically.
  2423.  
  2424.  
  2425. if (!result && !options.allowEmpty) return result; // When rule is being stringified before selector was defined.
  2426.  
  2427. if (!selector) return result;
  2428. indent--;
  2429. if (result) result = "\n" + result + "\n";
  2430. return indentStr(selector + " {" + result, indent) + indentStr('}', indent);
  2431. }
  2432.  
  2433. var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
  2434. var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
  2435.  
  2436. var escape = function (str) {
  2437. return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
  2438. };
  2439.  
  2440. var BaseStyleRule = /*#__PURE__*/function () {
  2441. function BaseStyleRule(key, style, options) {
  2442. this.type = 'style';
  2443. this.key = void 0;
  2444. this.isProcessed = false;
  2445. this.style = void 0;
  2446. this.renderer = void 0;
  2447. this.renderable = void 0;
  2448. this.options = void 0;
  2449. var sheet = options.sheet,
  2450. Renderer = options.Renderer;
  2451. this.key = key;
  2452. this.options = options;
  2453. this.style = style;
  2454. if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();
  2455. }
  2456. /**
  2457. * Get or set a style property.
  2458. */
  2459.  
  2460.  
  2461. var _proto = BaseStyleRule.prototype;
  2462.  
  2463. _proto.prop = function prop(name, value, options) {
  2464. // It's a getter.
  2465. if (value === undefined) return this.style[name]; // Don't do anything if the value has not changed.
  2466.  
  2467. var force = options ? options.force : false;
  2468. if (!force && this.style[name] === value) return this;
  2469. var newValue = value;
  2470.  
  2471. if (!options || options.process !== false) {
  2472. newValue = this.options.jss.plugins.onChangeValue(value, name, this);
  2473. }
  2474.  
  2475. var isEmpty = newValue == null || newValue === false;
  2476. var isDefined = (name in this.style); // Value is empty and wasn't defined before.
  2477.  
  2478. if (isEmpty && !isDefined && !force) return this; // We are going to remove this value.
  2479.  
  2480. var remove = isEmpty && isDefined;
  2481. if (remove) delete this.style[name];else this.style[name] = newValue; // Renderable is defined if StyleSheet option `link` is true.
  2482.  
  2483. if (this.renderable && this.renderer) {
  2484. if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
  2485. return this;
  2486. }
  2487.  
  2488. var sheet = this.options.sheet;
  2489.  
  2490. if (sheet && sheet.attached) ;
  2491.  
  2492. return this;
  2493. };
  2494.  
  2495. return BaseStyleRule;
  2496. }();
  2497.  
  2498. var StyleRule = /*#__PURE__*/function (_BaseStyleRule) {
  2499. _inheritsLoose(StyleRule, _BaseStyleRule);
  2500.  
  2501. function StyleRule(key, style, options) {
  2502. var _this;
  2503.  
  2504. _this = _BaseStyleRule.call(this, key, style, options) || this;
  2505. _this.selectorText = void 0;
  2506. _this.id = void 0;
  2507. _this.renderable = void 0;
  2508. var selector = options.selector,
  2509. scoped = options.scoped,
  2510. sheet = options.sheet,
  2511. generateId = options.generateId;
  2512.  
  2513. if (selector) {
  2514. _this.selectorText = selector;
  2515. } else if (scoped !== false) {
  2516. _this.id = generateId(_assertThisInitialized(_assertThisInitialized(_this)), sheet);
  2517. _this.selectorText = "." + escape(_this.id);
  2518. }
  2519.  
  2520. return _this;
  2521. }
  2522. /**
  2523. * Set selector string.
  2524. * Attention: use this with caution. Most browsers didn't implement
  2525. * selectorText setter, so this may result in rerendering of entire Style Sheet.
  2526. */
  2527.  
  2528.  
  2529. var _proto2 = StyleRule.prototype;
  2530. /**
  2531. * Apply rule to an element inline.
  2532. */
  2533.  
  2534. _proto2.applyTo = function applyTo(renderable) {
  2535. var renderer = this.renderer;
  2536.  
  2537. if (renderer) {
  2538. var json = this.toJSON();
  2539.  
  2540. for (var prop in json) {
  2541. renderer.setProperty(renderable, prop, json[prop]);
  2542. }
  2543. }
  2544.  
  2545. return this;
  2546. }
  2547. /**
  2548. * Returns JSON representation of the rule.
  2549. * Fallbacks are not supported.
  2550. * Useful for inline styles.
  2551. */
  2552. ;
  2553.  
  2554. _proto2.toJSON = function toJSON() {
  2555. var json = {};
  2556.  
  2557. for (var prop in this.style) {
  2558. var value = this.style[prop];
  2559. if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
  2560. }
  2561.  
  2562. return json;
  2563. }
  2564. /**
  2565. * Generates a CSS string.
  2566. */
  2567. ;
  2568.  
  2569. _proto2.toString = function toString(options) {
  2570. var sheet = this.options.sheet;
  2571. var link = sheet ? sheet.options.link : false;
  2572. var opts = link ? _extends$1({}, options, {
  2573. allowEmpty: true
  2574. }) : options;
  2575. return toCss(this.selectorText, this.style, opts);
  2576. };
  2577.  
  2578. _createClass(StyleRule, [{
  2579. key: "selector",
  2580. set: function set(selector) {
  2581. if (selector === this.selectorText) return;
  2582. this.selectorText = selector;
  2583. var renderer = this.renderer,
  2584. renderable = this.renderable;
  2585. if (!renderable || !renderer) return;
  2586. var hasChanged = renderer.setSelector(renderable, selector); // If selector setter is not implemented, rerender the rule.
  2587.  
  2588. if (!hasChanged) {
  2589. renderer.replaceRule(renderable, this);
  2590. }
  2591. }
  2592. /**
  2593. * Get selector string.
  2594. */
  2595. ,
  2596. get: function get() {
  2597. return this.selectorText;
  2598. }
  2599. }]);
  2600.  
  2601. return StyleRule;
  2602. }(BaseStyleRule);
  2603.  
  2604. var pluginStyleRule = {
  2605. onCreateRule: function onCreateRule(name, style, options) {
  2606. if (name[0] === '@' || options.parent && options.parent.type === 'keyframes') {
  2607. return null;
  2608. }
  2609.  
  2610. return new StyleRule(name, style, options);
  2611. }
  2612. };
  2613. var defaultToStringOptions = {
  2614. indent: 1,
  2615. children: true
  2616. };
  2617. var atRegExp = /@([\w-]+)/;
  2618. /**
  2619. * Conditional rule for @media, @supports
  2620. */
  2621.  
  2622. var ConditionalRule = /*#__PURE__*/function () {
  2623. function ConditionalRule(key, styles, options) {
  2624. this.type = 'conditional';
  2625. this.at = void 0;
  2626. this.key = void 0;
  2627. this.query = void 0;
  2628. this.rules = void 0;
  2629. this.options = void 0;
  2630. this.isProcessed = false;
  2631. this.renderable = void 0;
  2632. this.key = key;
  2633. var atMatch = key.match(atRegExp);
  2634. this.at = atMatch ? atMatch[1] : 'unknown'; // Key might contain a unique suffix in case the `name` passed by user was duplicate.
  2635.  
  2636. this.query = options.name || "@" + this.at;
  2637. this.options = options;
  2638. this.rules = new RuleList(_extends$1({}, options, {
  2639. parent: this
  2640. }));
  2641.  
  2642. for (var name in styles) {
  2643. this.rules.add(name, styles[name]);
  2644. }
  2645.  
  2646. this.rules.process();
  2647. }
  2648. /**
  2649. * Get a rule.
  2650. */
  2651.  
  2652.  
  2653. var _proto = ConditionalRule.prototype;
  2654.  
  2655. _proto.getRule = function getRule(name) {
  2656. return this.rules.get(name);
  2657. }
  2658. /**
  2659. * Get index of a rule.
  2660. */
  2661. ;
  2662.  
  2663. _proto.indexOf = function indexOf(rule) {
  2664. return this.rules.indexOf(rule);
  2665. }
  2666. /**
  2667. * Create and register rule, run plugins.
  2668. */
  2669. ;
  2670.  
  2671. _proto.addRule = function addRule(name, style, options) {
  2672. var rule = this.rules.add(name, style, options);
  2673. if (!rule) return null;
  2674. this.options.jss.plugins.onProcessRule(rule);
  2675. return rule;
  2676. }
  2677. /**
  2678. * Generates a CSS string.
  2679. */
  2680. ;
  2681.  
  2682. _proto.toString = function toString(options) {
  2683. if (options === void 0) {
  2684. options = defaultToStringOptions;
  2685. }
  2686.  
  2687. if (options.indent == null) options.indent = defaultToStringOptions.indent;
  2688. if (options.children == null) options.children = defaultToStringOptions.children;
  2689.  
  2690. if (options.children === false) {
  2691. return this.query + " {}";
  2692. }
  2693.  
  2694. var children = this.rules.toString(options);
  2695. return children ? this.query + " {\n" + children + "\n}" : '';
  2696. };
  2697.  
  2698. return ConditionalRule;
  2699. }();
  2700.  
  2701. var keyRegExp = /@media|@supports\s+/;
  2702. var pluginConditionalRule = {
  2703. onCreateRule: function onCreateRule(key, styles, options) {
  2704. return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;
  2705. }
  2706. };
  2707. var defaultToStringOptions$1 = {
  2708. indent: 1,
  2709. children: true
  2710. };
  2711. var nameRegExp = /@keyframes\s+([\w-]+)/;
  2712. /**
  2713. * Rule for @keyframes
  2714. */
  2715.  
  2716. var KeyframesRule = /*#__PURE__*/function () {
  2717. function KeyframesRule(key, frames, options) {
  2718. this.type = 'keyframes';
  2719. this.at = '@keyframes';
  2720. this.key = void 0;
  2721. this.name = void 0;
  2722. this.id = void 0;
  2723. this.rules = void 0;
  2724. this.options = void 0;
  2725. this.isProcessed = false;
  2726. this.renderable = void 0;
  2727. var nameMatch = key.match(nameRegExp);
  2728.  
  2729. if (nameMatch && nameMatch[1]) {
  2730. this.name = nameMatch[1];
  2731. } else {
  2732. this.name = 'noname';
  2733. }
  2734.  
  2735. this.key = this.type + "-" + this.name;
  2736. this.options = options;
  2737. var scoped = options.scoped,
  2738. sheet = options.sheet,
  2739. generateId = options.generateId;
  2740. this.id = scoped === false ? this.name : escape(generateId(this, sheet));
  2741. this.rules = new RuleList(_extends$1({}, options, {
  2742. parent: this
  2743. }));
  2744.  
  2745. for (var name in frames) {
  2746. this.rules.add(name, frames[name], _extends$1({}, options, {
  2747. parent: this
  2748. }));
  2749. }
  2750.  
  2751. this.rules.process();
  2752. }
  2753. /**
  2754. * Generates a CSS string.
  2755. */
  2756.  
  2757.  
  2758. var _proto = KeyframesRule.prototype;
  2759.  
  2760. _proto.toString = function toString(options) {
  2761. if (options === void 0) {
  2762. options = defaultToStringOptions$1;
  2763. }
  2764.  
  2765. if (options.indent == null) options.indent = defaultToStringOptions$1.indent;
  2766. if (options.children == null) options.children = defaultToStringOptions$1.children;
  2767.  
  2768. if (options.children === false) {
  2769. return this.at + " " + this.id + " {}";
  2770. }
  2771.  
  2772. var children = this.rules.toString(options);
  2773. if (children) children = "\n" + children + "\n";
  2774. return this.at + " " + this.id + " {" + children + "}";
  2775. };
  2776.  
  2777. return KeyframesRule;
  2778. }();
  2779.  
  2780. var keyRegExp$1 = /@keyframes\s+/;
  2781. var refRegExp$1 = /\$([\w-]+)/g;
  2782.  
  2783. var findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {
  2784. if (typeof val === 'string') {
  2785. return val.replace(refRegExp$1, function (match, name) {
  2786. if (name in keyframes) {
  2787. return keyframes[name];
  2788. }
  2789. return match;
  2790. });
  2791. }
  2792.  
  2793. return val;
  2794. };
  2795. /**
  2796. * Replace the reference for a animation name.
  2797. */
  2798.  
  2799.  
  2800. var replaceRef = function replaceRef(style, prop, keyframes) {
  2801. var value = style[prop];
  2802. var refKeyframe = findReferencedKeyframe(value, keyframes);
  2803.  
  2804. if (refKeyframe !== value) {
  2805. style[prop] = refKeyframe;
  2806. }
  2807. };
  2808.  
  2809. var plugin = {
  2810. onCreateRule: function onCreateRule(key, frames, options) {
  2811. return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
  2812. },
  2813. // Animation name ref replacer.
  2814. onProcessStyle: function onProcessStyle(style, rule, sheet) {
  2815. if (rule.type !== 'style' || !sheet) return style;
  2816. if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes);
  2817. if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes);
  2818. return style;
  2819. },
  2820. onChangeValue: function onChangeValue(val, prop, rule) {
  2821. var sheet = rule.options.sheet;
  2822.  
  2823. if (!sheet) {
  2824. return val;
  2825. }
  2826.  
  2827. switch (prop) {
  2828. case 'animation':
  2829. return findReferencedKeyframe(val, sheet.keyframes);
  2830.  
  2831. case 'animation-name':
  2832. return findReferencedKeyframe(val, sheet.keyframes);
  2833.  
  2834. default:
  2835. return val;
  2836. }
  2837. }
  2838. };
  2839.  
  2840. var KeyframeRule = /*#__PURE__*/function (_BaseStyleRule) {
  2841. _inheritsLoose(KeyframeRule, _BaseStyleRule);
  2842.  
  2843. function KeyframeRule() {
  2844. var _this;
  2845.  
  2846. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  2847. args[_key] = arguments[_key];
  2848. }
  2849.  
  2850. _this = _BaseStyleRule.call.apply(_BaseStyleRule, [this].concat(args)) || this;
  2851. _this.renderable = void 0;
  2852. return _this;
  2853. }
  2854.  
  2855. var _proto = KeyframeRule.prototype;
  2856. /**
  2857. * Generates a CSS string.
  2858. */
  2859.  
  2860. _proto.toString = function toString(options) {
  2861. var sheet = this.options.sheet;
  2862. var link = sheet ? sheet.options.link : false;
  2863. var opts = link ? _extends$1({}, options, {
  2864. allowEmpty: true
  2865. }) : options;
  2866. return toCss(this.key, this.style, opts);
  2867. };
  2868.  
  2869. return KeyframeRule;
  2870. }(BaseStyleRule);
  2871.  
  2872. var pluginKeyframeRule = {
  2873. onCreateRule: function onCreateRule(key, style, options) {
  2874. if (options.parent && options.parent.type === 'keyframes') {
  2875. return new KeyframeRule(key, style, options);
  2876. }
  2877.  
  2878. return null;
  2879. }
  2880. };
  2881.  
  2882. var FontFaceRule = /*#__PURE__*/function () {
  2883. function FontFaceRule(key, style, options) {
  2884. this.type = 'font-face';
  2885. this.at = '@font-face';
  2886. this.key = void 0;
  2887. this.style = void 0;
  2888. this.options = void 0;
  2889. this.isProcessed = false;
  2890. this.renderable = void 0;
  2891. this.key = key;
  2892. this.style = style;
  2893. this.options = options;
  2894. }
  2895. /**
  2896. * Generates a CSS string.
  2897. */
  2898.  
  2899.  
  2900. var _proto = FontFaceRule.prototype;
  2901.  
  2902. _proto.toString = function toString(options) {
  2903. if (Array.isArray(this.style)) {
  2904. var str = '';
  2905.  
  2906. for (var index = 0; index < this.style.length; index++) {
  2907. str += toCss(this.at, this.style[index]);
  2908. if (this.style[index + 1]) str += '\n';
  2909. }
  2910.  
  2911. return str;
  2912. }
  2913.  
  2914. return toCss(this.at, this.style, options);
  2915. };
  2916.  
  2917. return FontFaceRule;
  2918. }();
  2919.  
  2920. var keyRegExp$2 = /@font-face/;
  2921. var pluginFontFaceRule = {
  2922. onCreateRule: function onCreateRule(key, style, options) {
  2923. return keyRegExp$2.test(key) ? new FontFaceRule(key, style, options) : null;
  2924. }
  2925. };
  2926.  
  2927. var ViewportRule = /*#__PURE__*/function () {
  2928. function ViewportRule(key, style, options) {
  2929. this.type = 'viewport';
  2930. this.at = '@viewport';
  2931. this.key = void 0;
  2932. this.style = void 0;
  2933. this.options = void 0;
  2934. this.isProcessed = false;
  2935. this.renderable = void 0;
  2936. this.key = key;
  2937. this.style = style;
  2938. this.options = options;
  2939. }
  2940. /**
  2941. * Generates a CSS string.
  2942. */
  2943.  
  2944.  
  2945. var _proto = ViewportRule.prototype;
  2946.  
  2947. _proto.toString = function toString(options) {
  2948. return toCss(this.key, this.style, options);
  2949. };
  2950.  
  2951. return ViewportRule;
  2952. }();
  2953.  
  2954. var pluginViewportRule = {
  2955. onCreateRule: function onCreateRule(key, style, options) {
  2956. return key === '@viewport' || key === '@-ms-viewport' ? new ViewportRule(key, style, options) : null;
  2957. }
  2958. };
  2959.  
  2960. var SimpleRule = /*#__PURE__*/function () {
  2961. function SimpleRule(key, value, options) {
  2962. this.type = 'simple';
  2963. this.key = void 0;
  2964. this.value = void 0;
  2965. this.options = void 0;
  2966. this.isProcessed = false;
  2967. this.renderable = void 0;
  2968. this.key = key;
  2969. this.value = value;
  2970. this.options = options;
  2971. }
  2972. /**
  2973. * Generates a CSS string.
  2974. */
  2975. // eslint-disable-next-line no-unused-vars
  2976.  
  2977.  
  2978. var _proto = SimpleRule.prototype;
  2979.  
  2980. _proto.toString = function toString(options) {
  2981. if (Array.isArray(this.value)) {
  2982. var str = '';
  2983.  
  2984. for (var index = 0; index < this.value.length; index++) {
  2985. str += this.key + " " + this.value[index] + ";";
  2986. if (this.value[index + 1]) str += '\n';
  2987. }
  2988.  
  2989. return str;
  2990. }
  2991.  
  2992. return this.key + " " + this.value + ";";
  2993. };
  2994.  
  2995. return SimpleRule;
  2996. }();
  2997.  
  2998. var keysMap = {
  2999. '@charset': true,
  3000. '@import': true,
  3001. '@namespace': true
  3002. };
  3003. var pluginSimpleRule = {
  3004. onCreateRule: function onCreateRule(key, value, options) {
  3005. return key in keysMap ? new SimpleRule(key, value, options) : null;
  3006. }
  3007. };
  3008. var plugins$1 = [pluginStyleRule, pluginConditionalRule, plugin, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
  3009. var defaultUpdateOptions = {
  3010. process: true
  3011. };
  3012. var forceUpdateOptions = {
  3013. force: true,
  3014. process: true
  3015. /**
  3016. * Contains rules objects and allows adding/removing etc.
  3017. * Is used for e.g. by `StyleSheet` or `ConditionalRule`.
  3018. */
  3019.  
  3020. };
  3021.  
  3022. var RuleList = /*#__PURE__*/function () {
  3023. // Rules registry for access by .get() method.
  3024. // It contains the same rule registered by name and by selector.
  3025. // Original styles object.
  3026. // Used to ensure correct rules order.
  3027. function RuleList(options) {
  3028. this.map = {};
  3029. this.raw = {};
  3030. this.index = [];
  3031. this.counter = 0;
  3032. this.options = void 0;
  3033. this.classes = void 0;
  3034. this.keyframes = void 0;
  3035. this.options = options;
  3036. this.classes = options.classes;
  3037. this.keyframes = options.keyframes;
  3038. }
  3039. /**
  3040. * Create and register rule.
  3041. *
  3042. * Will not render after Style Sheet was rendered the first time.
  3043. */
  3044.  
  3045.  
  3046. var _proto = RuleList.prototype;
  3047.  
  3048. _proto.add = function add(name, decl, ruleOptions) {
  3049. var _this$options = this.options,
  3050. parent = _this$options.parent,
  3051. sheet = _this$options.sheet,
  3052. jss = _this$options.jss,
  3053. Renderer = _this$options.Renderer,
  3054. generateId = _this$options.generateId,
  3055. scoped = _this$options.scoped;
  3056.  
  3057. var options = _extends$1({
  3058. classes: this.classes,
  3059. parent: parent,
  3060. sheet: sheet,
  3061. jss: jss,
  3062. Renderer: Renderer,
  3063. generateId: generateId,
  3064. scoped: scoped,
  3065. name: name,
  3066. keyframes: this.keyframes,
  3067. selector: undefined
  3068. }, ruleOptions); // When user uses .createStyleSheet(), duplicate names are not possible, but
  3069. // `sheet.addRule()` opens the door for any duplicate rule name. When this happens
  3070. // we need to make the key unique within this RuleList instance scope.
  3071.  
  3072.  
  3073. var key = name;
  3074.  
  3075. if (name in this.raw) {
  3076. key = name + "-d" + this.counter++;
  3077. } // We need to save the original decl before creating the rule
  3078. // because cache plugin needs to use it as a key to return a cached rule.
  3079.  
  3080.  
  3081. this.raw[key] = decl;
  3082.  
  3083. if (key in this.classes) {
  3084. // E.g. rules inside of @media container
  3085. options.selector = "." + escape(this.classes[key]);
  3086. }
  3087.  
  3088. var rule = createRule(key, decl, options);
  3089. if (!rule) return null;
  3090. this.register(rule);
  3091. var index = options.index === undefined ? this.index.length : options.index;
  3092. this.index.splice(index, 0, rule);
  3093. return rule;
  3094. }
  3095. /**
  3096. * Get a rule.
  3097. */
  3098. ;
  3099.  
  3100. _proto.get = function get(name) {
  3101. return this.map[name];
  3102. }
  3103. /**
  3104. * Delete a rule.
  3105. */
  3106. ;
  3107.  
  3108. _proto.remove = function remove(rule) {
  3109. this.unregister(rule);
  3110. delete this.raw[rule.key];
  3111. this.index.splice(this.index.indexOf(rule), 1);
  3112. }
  3113. /**
  3114. * Get index of a rule.
  3115. */
  3116. ;
  3117.  
  3118. _proto.indexOf = function indexOf(rule) {
  3119. return this.index.indexOf(rule);
  3120. }
  3121. /**
  3122. * Run `onProcessRule()` plugins on every rule.
  3123. */
  3124. ;
  3125.  
  3126. _proto.process = function process() {
  3127. var plugins = this.options.jss.plugins; // We need to clone array because if we modify the index somewhere else during a loop
  3128. // we end up with very hard-to-track-down side effects.
  3129.  
  3130. this.index.slice(0).forEach(plugins.onProcessRule, plugins);
  3131. }
  3132. /**
  3133. * Register a rule in `.map`, `.classes` and `.keyframes` maps.
  3134. */
  3135. ;
  3136.  
  3137. _proto.register = function register(rule) {
  3138. this.map[rule.key] = rule;
  3139.  
  3140. if (rule instanceof StyleRule) {
  3141. this.map[rule.selector] = rule;
  3142. if (rule.id) this.classes[rule.key] = rule.id;
  3143. } else if (rule instanceof KeyframesRule && this.keyframes) {
  3144. this.keyframes[rule.name] = rule.id;
  3145. }
  3146. }
  3147. /**
  3148. * Unregister a rule.
  3149. */
  3150. ;
  3151.  
  3152. _proto.unregister = function unregister(rule) {
  3153. delete this.map[rule.key];
  3154.  
  3155. if (rule instanceof StyleRule) {
  3156. delete this.map[rule.selector];
  3157. delete this.classes[rule.key];
  3158. } else if (rule instanceof KeyframesRule) {
  3159. delete this.keyframes[rule.name];
  3160. }
  3161. }
  3162. /**
  3163. * Update the function values with a new data.
  3164. */
  3165. ;
  3166.  
  3167. _proto.update = function update() {
  3168. var name;
  3169. var data;
  3170. var options;
  3171.  
  3172. if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
  3173. name = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]
  3174.  
  3175. data = arguments.length <= 1 ? undefined : arguments[1]; // $FlowFixMe[invalid-tuple-index]
  3176.  
  3177. options = arguments.length <= 2 ? undefined : arguments[2];
  3178. } else {
  3179. data = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]
  3180.  
  3181. options = arguments.length <= 1 ? undefined : arguments[1];
  3182. name = null;
  3183. }
  3184.  
  3185. if (name) {
  3186. this.updateOne(this.map[name], data, options);
  3187. } else {
  3188. for (var index = 0; index < this.index.length; index++) {
  3189. this.updateOne(this.index[index], data, options);
  3190. }
  3191. }
  3192. }
  3193. /**
  3194. * Execute plugins, update rule props.
  3195. */
  3196. ;
  3197.  
  3198. _proto.updateOne = function updateOne(rule, data, options) {
  3199. if (options === void 0) {
  3200. options = defaultUpdateOptions;
  3201. }
  3202.  
  3203. var _this$options2 = this.options,
  3204. plugins = _this$options2.jss.plugins,
  3205. sheet = _this$options2.sheet; // It is a rules container like for e.g. ConditionalRule.
  3206.  
  3207. if (rule.rules instanceof RuleList) {
  3208. rule.rules.update(data, options);
  3209. return;
  3210. }
  3211.  
  3212. var styleRule = rule;
  3213. var style = styleRule.style;
  3214. plugins.onUpdate(data, rule, sheet, options); // We rely on a new `style` ref in case it was mutated during onUpdate hook.
  3215.  
  3216. if (options.process && style && style !== styleRule.style) {
  3217. // We need to run the plugins in case new `style` relies on syntax plugins.
  3218. plugins.onProcessStyle(styleRule.style, styleRule, sheet); // Update and add props.
  3219.  
  3220. for (var prop in styleRule.style) {
  3221. var nextValue = styleRule.style[prop];
  3222. 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.
  3223. // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
  3224.  
  3225. if (nextValue !== prevValue) {
  3226. styleRule.prop(prop, nextValue, forceUpdateOptions);
  3227. }
  3228. } // Remove props.
  3229.  
  3230.  
  3231. for (var _prop in style) {
  3232. var _nextValue = styleRule.style[_prop];
  3233. 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.
  3234. // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
  3235.  
  3236. if (_nextValue == null && _nextValue !== _prevValue) {
  3237. styleRule.prop(_prop, null, forceUpdateOptions);
  3238. }
  3239. }
  3240. }
  3241. }
  3242. /**
  3243. * Convert rules to a CSS string.
  3244. */
  3245. ;
  3246.  
  3247. _proto.toString = function toString(options) {
  3248. var str = '';
  3249. var sheet = this.options.sheet;
  3250. var link = sheet ? sheet.options.link : false;
  3251.  
  3252. for (var index = 0; index < this.index.length; index++) {
  3253. var rule = this.index[index];
  3254. var css = rule.toString(options); // No need to render an empty rule.
  3255.  
  3256. if (!css && !link) continue;
  3257. if (str) str += '\n';
  3258. str += css;
  3259. }
  3260.  
  3261. return str;
  3262. };
  3263.  
  3264. return RuleList;
  3265. }();
  3266.  
  3267. var StyleSheet = /*#__PURE__*/function () {
  3268. function StyleSheet(styles, options) {
  3269. this.options = void 0;
  3270. this.deployed = void 0;
  3271. this.attached = void 0;
  3272. this.rules = void 0;
  3273. this.renderer = void 0;
  3274. this.classes = void 0;
  3275. this.keyframes = void 0;
  3276. this.queue = void 0;
  3277. this.attached = false;
  3278. this.deployed = false;
  3279. this.classes = {};
  3280. this.keyframes = {};
  3281. this.options = _extends$1({}, options, {
  3282. sheet: this,
  3283. parent: this,
  3284. classes: this.classes,
  3285. keyframes: this.keyframes
  3286. });
  3287.  
  3288. if (options.Renderer) {
  3289. this.renderer = new options.Renderer(this);
  3290. }
  3291.  
  3292. this.rules = new RuleList(this.options);
  3293.  
  3294. for (var name in styles) {
  3295. this.rules.add(name, styles[name]);
  3296. }
  3297.  
  3298. this.rules.process();
  3299. }
  3300. /**
  3301. * Attach renderable to the render tree.
  3302. */
  3303.  
  3304.  
  3305. var _proto = StyleSheet.prototype;
  3306.  
  3307. _proto.attach = function attach() {
  3308. if (this.attached) return this;
  3309. if (this.renderer) this.renderer.attach();
  3310. this.attached = true; // Order is important, because we can't use insertRule API if style element is not attached.
  3311.  
  3312. if (!this.deployed) this.deploy();
  3313. return this;
  3314. }
  3315. /**
  3316. * Remove renderable from render tree.
  3317. */
  3318. ;
  3319.  
  3320. _proto.detach = function detach() {
  3321. if (!this.attached) return this;
  3322. if (this.renderer) this.renderer.detach();
  3323. this.attached = false;
  3324. return this;
  3325. }
  3326. /**
  3327. * Add a rule to the current stylesheet.
  3328. * Will insert a rule also after the stylesheet has been rendered first time.
  3329. */
  3330. ;
  3331.  
  3332. _proto.addRule = function addRule(name, decl, options) {
  3333. var queue = this.queue; // Plugins can create rules.
  3334. // In order to preserve the right order, we need to queue all `.addRule` calls,
  3335. // which happen after the first `rules.add()` call.
  3336.  
  3337. if (this.attached && !queue) this.queue = [];
  3338. var rule = this.rules.add(name, decl, options);
  3339. if (!rule) return null;
  3340. this.options.jss.plugins.onProcessRule(rule);
  3341.  
  3342. if (this.attached) {
  3343. if (!this.deployed) return rule; // Don't insert rule directly if there is no stringified version yet.
  3344. // It will be inserted all together when .attach is called.
  3345.  
  3346. if (queue) queue.push(rule);else {
  3347. this.insertRule(rule);
  3348.  
  3349. if (this.queue) {
  3350. this.queue.forEach(this.insertRule, this);
  3351. this.queue = undefined;
  3352. }
  3353. }
  3354. return rule;
  3355. } // We can't add rules to a detached style node.
  3356. // We will redeploy the sheet once user will attach it.
  3357.  
  3358.  
  3359. this.deployed = false;
  3360. return rule;
  3361. }
  3362. /**
  3363. * Insert rule into the StyleSheet
  3364. */
  3365. ;
  3366.  
  3367. _proto.insertRule = function insertRule(rule) {
  3368. if (this.renderer) {
  3369. this.renderer.insertRule(rule);
  3370. }
  3371. }
  3372. /**
  3373. * Create and add rules.
  3374. * Will render also after Style Sheet was rendered the first time.
  3375. */
  3376. ;
  3377.  
  3378. _proto.addRules = function addRules(styles, options) {
  3379. var added = [];
  3380.  
  3381. for (var name in styles) {
  3382. var rule = this.addRule(name, styles[name], options);
  3383. if (rule) added.push(rule);
  3384. }
  3385.  
  3386. return added;
  3387. }
  3388. /**
  3389. * Get a rule by name.
  3390. */
  3391. ;
  3392.  
  3393. _proto.getRule = function getRule(name) {
  3394. return this.rules.get(name);
  3395. }
  3396. /**
  3397. * Delete a rule by name.
  3398. * Returns `true`: if rule has been deleted from the DOM.
  3399. */
  3400. ;
  3401.  
  3402. _proto.deleteRule = function deleteRule(name) {
  3403. var rule = typeof name === 'object' ? name : this.rules.get(name);
  3404.  
  3405. if (!rule || // Style sheet was created without link: true and attached, in this case we
  3406. // won't be able to remove the CSS rule from the DOM.
  3407. this.attached && !rule.renderable) {
  3408. return false;
  3409. }
  3410.  
  3411. this.rules.remove(rule);
  3412.  
  3413. if (this.attached && rule.renderable && this.renderer) {
  3414. return this.renderer.deleteRule(rule.renderable);
  3415. }
  3416.  
  3417. return true;
  3418. }
  3419. /**
  3420. * Get index of a rule.
  3421. */
  3422. ;
  3423.  
  3424. _proto.indexOf = function indexOf(rule) {
  3425. return this.rules.indexOf(rule);
  3426. }
  3427. /**
  3428. * Deploy pure CSS string to a renderable.
  3429. */
  3430. ;
  3431.  
  3432. _proto.deploy = function deploy() {
  3433. if (this.renderer) this.renderer.deploy();
  3434. this.deployed = true;
  3435. return this;
  3436. }
  3437. /**
  3438. * Update the function values with a new data.
  3439. */
  3440. ;
  3441.  
  3442. _proto.update = function update() {
  3443. var _this$rules;
  3444.  
  3445. (_this$rules = this.rules).update.apply(_this$rules, arguments);
  3446.  
  3447. return this;
  3448. }
  3449. /**
  3450. * Updates a single rule.
  3451. */
  3452. ;
  3453.  
  3454. _proto.updateOne = function updateOne(rule, data, options) {
  3455. this.rules.updateOne(rule, data, options);
  3456. return this;
  3457. }
  3458. /**
  3459. * Convert rules to a CSS string.
  3460. */
  3461. ;
  3462.  
  3463. _proto.toString = function toString(options) {
  3464. return this.rules.toString(options);
  3465. };
  3466.  
  3467. return StyleSheet;
  3468. }();
  3469.  
  3470. var PluginsRegistry = /*#__PURE__*/function () {
  3471. function PluginsRegistry() {
  3472. this.plugins = {
  3473. internal: [],
  3474. external: []
  3475. };
  3476. this.registry = void 0;
  3477. }
  3478.  
  3479. var _proto = PluginsRegistry.prototype;
  3480. /**
  3481. * Call `onCreateRule` hooks and return an object if returned by a hook.
  3482. */
  3483.  
  3484. _proto.onCreateRule = function onCreateRule(name, decl, options) {
  3485. for (var i = 0; i < this.registry.onCreateRule.length; i++) {
  3486. var rule = this.registry.onCreateRule[i](name, decl, options);
  3487. if (rule) return rule;
  3488. }
  3489.  
  3490. return null;
  3491. }
  3492. /**
  3493. * Call `onProcessRule` hooks.
  3494. */
  3495. ;
  3496.  
  3497. _proto.onProcessRule = function onProcessRule(rule) {
  3498. if (rule.isProcessed) return;
  3499. var sheet = rule.options.sheet;
  3500.  
  3501. for (var i = 0; i < this.registry.onProcessRule.length; i++) {
  3502. this.registry.onProcessRule[i](rule, sheet);
  3503. }
  3504.  
  3505. if (rule.style) this.onProcessStyle(rule.style, rule, sheet);
  3506. rule.isProcessed = true;
  3507. }
  3508. /**
  3509. * Call `onProcessStyle` hooks.
  3510. */
  3511. ;
  3512.  
  3513. _proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {
  3514. for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
  3515. // $FlowFixMe[prop-missing]
  3516. rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
  3517. }
  3518. }
  3519. /**
  3520. * Call `onProcessSheet` hooks.
  3521. */
  3522. ;
  3523.  
  3524. _proto.onProcessSheet = function onProcessSheet(sheet) {
  3525. for (var i = 0; i < this.registry.onProcessSheet.length; i++) {
  3526. this.registry.onProcessSheet[i](sheet);
  3527. }
  3528. }
  3529. /**
  3530. * Call `onUpdate` hooks.
  3531. */
  3532. ;
  3533.  
  3534. _proto.onUpdate = function onUpdate(data, rule, sheet, options) {
  3535. for (var i = 0; i < this.registry.onUpdate.length; i++) {
  3536. this.registry.onUpdate[i](data, rule, sheet, options);
  3537. }
  3538. }
  3539. /**
  3540. * Call `onChangeValue` hooks.
  3541. */
  3542. ;
  3543.  
  3544. _proto.onChangeValue = function onChangeValue(value, prop, rule) {
  3545. var processedValue = value;
  3546.  
  3547. for (var i = 0; i < this.registry.onChangeValue.length; i++) {
  3548. processedValue = this.registry.onChangeValue[i](processedValue, prop, rule);
  3549. }
  3550.  
  3551. return processedValue;
  3552. }
  3553. /**
  3554. * Register a plugin.
  3555. */
  3556. ;
  3557.  
  3558. _proto.use = function use(newPlugin, options) {
  3559. if (options === void 0) {
  3560. options = {
  3561. queue: 'external'
  3562. };
  3563. }
  3564.  
  3565. var plugins = this.plugins[options.queue]; // Avoids applying same plugin twice, at least based on ref.
  3566.  
  3567. if (plugins.indexOf(newPlugin) !== -1) {
  3568. return;
  3569. }
  3570.  
  3571. plugins.push(newPlugin);
  3572. this.registry = [].concat(this.plugins.external, this.plugins.internal).reduce(function (registry, plugin) {
  3573. for (var name in plugin) {
  3574. if (name in registry) {
  3575. registry[name].push(plugin[name]);
  3576. }
  3577. }
  3578.  
  3579. return registry;
  3580. }, {
  3581. onCreateRule: [],
  3582. onProcessRule: [],
  3583. onProcessStyle: [],
  3584. onProcessSheet: [],
  3585. onChangeValue: [],
  3586. onUpdate: []
  3587. });
  3588. };
  3589.  
  3590. return PluginsRegistry;
  3591. }();
  3592. /**
  3593. * Sheets registry to access them all at one place.
  3594. */
  3595.  
  3596.  
  3597. var SheetsRegistry = /*#__PURE__*/function () {
  3598. function SheetsRegistry() {
  3599. this.registry = [];
  3600. }
  3601.  
  3602. var _proto = SheetsRegistry.prototype;
  3603. /**
  3604. * Register a Style Sheet.
  3605. */
  3606.  
  3607. _proto.add = function add(sheet) {
  3608. var registry = this.registry;
  3609. var index = sheet.options.index;
  3610. if (registry.indexOf(sheet) !== -1) return;
  3611.  
  3612. if (registry.length === 0 || index >= this.index) {
  3613. registry.push(sheet);
  3614. return;
  3615. } // Find a position.
  3616.  
  3617.  
  3618. for (var i = 0; i < registry.length; i++) {
  3619. if (registry[i].options.index > index) {
  3620. registry.splice(i, 0, sheet);
  3621. return;
  3622. }
  3623. }
  3624. }
  3625. /**
  3626. * Reset the registry.
  3627. */
  3628. ;
  3629.  
  3630. _proto.reset = function reset() {
  3631. this.registry = [];
  3632. }
  3633. /**
  3634. * Remove a Style Sheet.
  3635. */
  3636. ;
  3637.  
  3638. _proto.remove = function remove(sheet) {
  3639. var index = this.registry.indexOf(sheet);
  3640. this.registry.splice(index, 1);
  3641. }
  3642. /**
  3643. * Convert all attached sheets to a CSS string.
  3644. */
  3645. ;
  3646.  
  3647. _proto.toString = function toString(_temp) {
  3648. var _ref = _temp === void 0 ? {} : _temp,
  3649. attached = _ref.attached,
  3650. options = _objectWithoutPropertiesLoose(_ref, ["attached"]);
  3651.  
  3652. var css = '';
  3653.  
  3654. for (var i = 0; i < this.registry.length; i++) {
  3655. var sheet = this.registry[i];
  3656.  
  3657. if (attached != null && sheet.attached !== attached) {
  3658. continue;
  3659. }
  3660.  
  3661. if (css) css += '\n';
  3662. css += sheet.toString(options);
  3663. }
  3664.  
  3665. return css;
  3666. };
  3667.  
  3668. _createClass(SheetsRegistry, [{
  3669. key: "index",
  3670.  
  3671. /**
  3672. * Current highest index number.
  3673. */
  3674. get: function get() {
  3675. return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;
  3676. }
  3677. }]);
  3678.  
  3679. return SheetsRegistry;
  3680. }();
  3681. /**
  3682. * This is a global sheets registry. Only DomRenderer will add sheets to it.
  3683. * On the server one should use an own SheetsRegistry instance and add the
  3684. * sheets to it, because you need to make sure to create a new registry for
  3685. * each request in order to not leak sheets across requests.
  3686. */
  3687.  
  3688.  
  3689. var registry = new SheetsRegistry();
  3690. /* eslint-disable */
  3691.  
  3692. /**
  3693. * Now that `globalThis` is available on most platforms
  3694. * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis#browser_compatibility)
  3695. * we check for `globalThis` first. `globalThis` is necessary for jss
  3696. * to run in Agoric's secure version of JavaScript (SES). Under SES,
  3697. * `globalThis` exists, but `window`, `self`, and `Function('return
  3698. * this')()` are all undefined for security reasons.
  3699. *
  3700. * https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
  3701. */
  3702.  
  3703. var globalThis$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' && window.Math === Math ? window : typeof self !== 'undefined' && self.Math === Math ? self : Function('return this')();
  3704. var ns = '2f1acc6c3a606b082e5eef5e54414ffb';
  3705. if (globalThis$1[ns] == null) globalThis$1[ns] = 0; // Bundle may contain multiple JSS versions at the same time. In order to identify
  3706. // the current version with just one short number and use it for classes generation
  3707. // we use a counter. Also it is more accurate, because user can manually reevaluate
  3708. // the module.
  3709.  
  3710. var moduleId = globalThis$1[ns]++;
  3711. /**
  3712. * Returns a function which generates unique class names based on counters.
  3713. * When new generator function is created, rule counter is reseted.
  3714. * We need to reset the rule counter for SSR for each request.
  3715. */
  3716.  
  3717. var createGenerateId = function createGenerateId(options) {
  3718. if (options === void 0) {
  3719. options = {};
  3720. }
  3721.  
  3722. var ruleCounter = 0;
  3723. return function (rule, sheet) {
  3724. ruleCounter += 1;
  3725.  
  3726. var jssId = '';
  3727. var prefix = '';
  3728.  
  3729. if (sheet) {
  3730. if (sheet.options.classNamePrefix) {
  3731. prefix = sheet.options.classNamePrefix;
  3732. }
  3733.  
  3734. if (sheet.options.jss.id != null) {
  3735. jssId = String(sheet.options.jss.id);
  3736. }
  3737. }
  3738.  
  3739. if (options.minify) {
  3740. // Using "c" because a number can't be the first char in a class name.
  3741. return "" + (prefix || 'c') + moduleId + jssId + ruleCounter;
  3742. }
  3743.  
  3744. return prefix + rule.key + "-" + moduleId + (jssId ? "-" + jssId : '') + "-" + ruleCounter;
  3745. };
  3746. };
  3747. /**
  3748. * Cache the value from the first time a function is called.
  3749. */
  3750.  
  3751.  
  3752. var memoize = function memoize(fn) {
  3753. var value;
  3754. return function () {
  3755. if (!value) value = fn();
  3756. return value;
  3757. };
  3758. };
  3759. /**
  3760. * Get a style property value.
  3761. */
  3762.  
  3763.  
  3764. var getPropertyValue = function getPropertyValue(cssRule, prop) {
  3765. try {
  3766. // Support CSSTOM.
  3767. if (cssRule.attributeStyleMap) {
  3768. return cssRule.attributeStyleMap.get(prop);
  3769. }
  3770.  
  3771. return cssRule.style.getPropertyValue(prop);
  3772. } catch (err) {
  3773. // IE may throw if property is unknown.
  3774. return '';
  3775. }
  3776. };
  3777. /**
  3778. * Set a style property.
  3779. */
  3780.  
  3781.  
  3782. var setProperty = function setProperty(cssRule, prop, value) {
  3783. try {
  3784. var cssValue = value;
  3785.  
  3786. if (Array.isArray(value)) {
  3787. cssValue = toCssValue(value, true);
  3788.  
  3789. if (value[value.length - 1] === '!important') {
  3790. cssRule.style.setProperty(prop, cssValue, 'important');
  3791. return true;
  3792. }
  3793. } // Support CSSTOM.
  3794.  
  3795.  
  3796. if (cssRule.attributeStyleMap) {
  3797. cssRule.attributeStyleMap.set(prop, cssValue);
  3798. } else {
  3799. cssRule.style.setProperty(prop, cssValue);
  3800. }
  3801. } catch (err) {
  3802. // IE may throw if property is unknown.
  3803. return false;
  3804. }
  3805.  
  3806. return true;
  3807. };
  3808. /**
  3809. * Remove a style property.
  3810. */
  3811.  
  3812.  
  3813. var removeProperty = function removeProperty(cssRule, prop) {
  3814. try {
  3815. // Support CSSTOM.
  3816. if (cssRule.attributeStyleMap) {
  3817. cssRule.attributeStyleMap.delete(prop);
  3818. } else {
  3819. cssRule.style.removeProperty(prop);
  3820. }
  3821. } catch (err) {
  3822. }
  3823. };
  3824. /**
  3825. * Set the selector.
  3826. */
  3827.  
  3828.  
  3829. var setSelector = function setSelector(cssRule, selectorText) {
  3830. cssRule.selectorText = selectorText; // Return false if setter was not successful.
  3831. // Currently works in chrome only.
  3832.  
  3833. return cssRule.selectorText === selectorText;
  3834. };
  3835. /**
  3836. * Gets the `head` element upon the first call and caches it.
  3837. * We assume it can't be null.
  3838. */
  3839.  
  3840.  
  3841. var getHead = memoize(function () {
  3842. return document.querySelector('head');
  3843. });
  3844. /**
  3845. * Find attached sheet with an index higher than the passed one.
  3846. */
  3847.  
  3848. function findHigherSheet(registry, options) {
  3849. for (var i = 0; i < registry.length; i++) {
  3850. var sheet = registry[i];
  3851.  
  3852. if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {
  3853. return sheet;
  3854. }
  3855. }
  3856.  
  3857. return null;
  3858. }
  3859. /**
  3860. * Find attached sheet with the highest index.
  3861. */
  3862.  
  3863.  
  3864. function findHighestSheet(registry, options) {
  3865. for (var i = registry.length - 1; i >= 0; i--) {
  3866. var sheet = registry[i];
  3867.  
  3868. if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {
  3869. return sheet;
  3870. }
  3871. }
  3872.  
  3873. return null;
  3874. }
  3875. /**
  3876. * Find a comment with "jss" inside.
  3877. */
  3878.  
  3879.  
  3880. function findCommentNode(text) {
  3881. var head = getHead();
  3882.  
  3883. for (var i = 0; i < head.childNodes.length; i++) {
  3884. var node = head.childNodes[i];
  3885.  
  3886. if (node.nodeType === 8 && node.nodeValue.trim() === text) {
  3887. return node;
  3888. }
  3889. }
  3890.  
  3891. return null;
  3892. }
  3893. /**
  3894. * Find a node before which we can insert the sheet.
  3895. */
  3896.  
  3897.  
  3898. function findPrevNode(options) {
  3899. var registry$1 = registry.registry;
  3900.  
  3901. if (registry$1.length > 0) {
  3902. // Try to insert before the next higher sheet.
  3903. var sheet = findHigherSheet(registry$1, options);
  3904.  
  3905. if (sheet && sheet.renderer) {
  3906. return {
  3907. parent: sheet.renderer.element.parentNode,
  3908. node: sheet.renderer.element
  3909. };
  3910. } // Otherwise insert after the last attached.
  3911.  
  3912.  
  3913. sheet = findHighestSheet(registry$1, options);
  3914.  
  3915. if (sheet && sheet.renderer) {
  3916. return {
  3917. parent: sheet.renderer.element.parentNode,
  3918. node: sheet.renderer.element.nextSibling
  3919. };
  3920. }
  3921. } // Try to find a comment placeholder if registry is empty.
  3922.  
  3923.  
  3924. var insertionPoint = options.insertionPoint;
  3925.  
  3926. if (insertionPoint && typeof insertionPoint === 'string') {
  3927. var comment = findCommentNode(insertionPoint);
  3928.  
  3929. if (comment) {
  3930. return {
  3931. parent: comment.parentNode,
  3932. node: comment.nextSibling
  3933. };
  3934. } // If user specifies an insertion point and it can't be found in the document -
  3935. }
  3936.  
  3937. return false;
  3938. }
  3939. /**
  3940. * Insert style element into the DOM.
  3941. */
  3942.  
  3943.  
  3944. function insertStyle(style, options) {
  3945. var insertionPoint = options.insertionPoint;
  3946. var nextNode = findPrevNode(options);
  3947.  
  3948. if (nextNode !== false && nextNode.parent) {
  3949. nextNode.parent.insertBefore(style, nextNode.node);
  3950. return;
  3951. } // Works with iframes and any node types.
  3952.  
  3953.  
  3954. if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
  3955. // https://stackoverflow.com/questions/41328728/force-casting-in-flow
  3956. var insertionPointElement = insertionPoint;
  3957. var parentNode = insertionPointElement.parentNode;
  3958. if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);
  3959. return;
  3960. }
  3961.  
  3962. getHead().appendChild(style);
  3963. }
  3964. /**
  3965. * Read jss nonce setting from the page if the user has set it.
  3966. */
  3967.  
  3968.  
  3969. var getNonce = memoize(function () {
  3970. var node = document.querySelector('meta[property="csp-nonce"]');
  3971. return node ? node.getAttribute('content') : null;
  3972. });
  3973.  
  3974. var _insertRule = function insertRule(container, rule, index) {
  3975. try {
  3976. if ('insertRule' in container) {
  3977. var c = container;
  3978. c.insertRule(rule, index);
  3979. } // Keyframes rule.
  3980. else if ('appendRule' in container) {
  3981. var _c = container;
  3982.  
  3983. _c.appendRule(rule);
  3984. }
  3985. } catch (err) {
  3986. return false;
  3987. }
  3988.  
  3989. return container.cssRules[index];
  3990. };
  3991.  
  3992. var getValidRuleInsertionIndex = function getValidRuleInsertionIndex(container, index) {
  3993. var maxIndex = container.cssRules.length; // In case previous insertion fails, passed index might be wrong
  3994.  
  3995. if (index === undefined || index > maxIndex) {
  3996. // eslint-disable-next-line no-param-reassign
  3997. return maxIndex;
  3998. }
  3999.  
  4000. return index;
  4001. };
  4002.  
  4003. var createStyle = function createStyle() {
  4004. var el = document.createElement('style'); // Without it, IE will have a broken source order specificity if we
  4005. // insert rules after we insert the style tag.
  4006. // It seems to kick-off the source order specificity algorithm.
  4007.  
  4008. el.textContent = '\n';
  4009. return el;
  4010. };
  4011.  
  4012. var DomRenderer = /*#__PURE__*/function () {
  4013. // HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
  4014. // Will be empty if link: true option is not set, because
  4015. // it is only for use together with insertRule API.
  4016. function DomRenderer(sheet) {
  4017. this.getPropertyValue = getPropertyValue;
  4018. this.setProperty = setProperty;
  4019. this.removeProperty = removeProperty;
  4020. this.setSelector = setSelector;
  4021. this.element = void 0;
  4022. this.sheet = void 0;
  4023. this.hasInsertedRules = false;
  4024. this.cssRules = []; // There is no sheet when the renderer is used from a standalone StyleRule.
  4025.  
  4026. if (sheet) registry.add(sheet);
  4027. this.sheet = sheet;
  4028.  
  4029. var _ref = this.sheet ? this.sheet.options : {},
  4030. media = _ref.media,
  4031. meta = _ref.meta,
  4032. element = _ref.element;
  4033.  
  4034. this.element = element || createStyle();
  4035. this.element.setAttribute('data-jss', '');
  4036. if (media) this.element.setAttribute('media', media);
  4037. if (meta) this.element.setAttribute('data-meta', meta);
  4038. var nonce = getNonce();
  4039. if (nonce) this.element.setAttribute('nonce', nonce);
  4040. }
  4041. /**
  4042. * Insert style element into render tree.
  4043. */
  4044.  
  4045.  
  4046. var _proto = DomRenderer.prototype;
  4047.  
  4048. _proto.attach = function attach() {
  4049. // In the case the element node is external and it is already in the DOM.
  4050. if (this.element.parentNode || !this.sheet) return;
  4051. insertStyle(this.element, this.sheet.options); // When rules are inserted using `insertRule` API, after `sheet.detach().attach()`
  4052. // most browsers create a new CSSStyleSheet, except of all IEs.
  4053.  
  4054. var deployed = Boolean(this.sheet && this.sheet.deployed);
  4055.  
  4056. if (this.hasInsertedRules && deployed) {
  4057. this.hasInsertedRules = false;
  4058. this.deploy();
  4059. }
  4060. }
  4061. /**
  4062. * Remove style element from render tree.
  4063. */
  4064. ;
  4065.  
  4066. _proto.detach = function detach() {
  4067. if (!this.sheet) return;
  4068. var parentNode = this.element.parentNode;
  4069. if (parentNode) parentNode.removeChild(this.element); // In the most browsers, rules inserted using insertRule() API will be lost when style element is removed.
  4070. // Though IE will keep them and we need a consistent behavior.
  4071.  
  4072. if (this.sheet.options.link) {
  4073. this.cssRules = [];
  4074. this.element.textContent = '\n';
  4075. }
  4076. }
  4077. /**
  4078. * Inject CSS string into element.
  4079. */
  4080. ;
  4081.  
  4082. _proto.deploy = function deploy() {
  4083. var sheet = this.sheet;
  4084. if (!sheet) return;
  4085.  
  4086. if (sheet.options.link) {
  4087. this.insertRules(sheet.rules);
  4088. return;
  4089. }
  4090.  
  4091. this.element.textContent = "\n" + sheet.toString() + "\n";
  4092. }
  4093. /**
  4094. * Insert RuleList into an element.
  4095. */
  4096. ;
  4097.  
  4098. _proto.insertRules = function insertRules(rules, nativeParent) {
  4099. for (var i = 0; i < rules.index.length; i++) {
  4100. this.insertRule(rules.index[i], i, nativeParent);
  4101. }
  4102. }
  4103. /**
  4104. * Insert a rule into element.
  4105. */
  4106. ;
  4107.  
  4108. _proto.insertRule = function insertRule(rule, index, nativeParent) {
  4109. if (nativeParent === void 0) {
  4110. nativeParent = this.element.sheet;
  4111. }
  4112.  
  4113. if (rule.rules) {
  4114. var parent = rule;
  4115. var latestNativeParent = nativeParent;
  4116.  
  4117. if (rule.type === 'conditional' || rule.type === 'keyframes') {
  4118. var _insertionIndex = getValidRuleInsertionIndex(nativeParent, index); // We need to render the container without children first.
  4119.  
  4120.  
  4121. latestNativeParent = _insertRule(nativeParent, parent.toString({
  4122. children: false
  4123. }), _insertionIndex);
  4124.  
  4125. if (latestNativeParent === false) {
  4126. return false;
  4127. }
  4128.  
  4129. this.refCssRule(rule, _insertionIndex, latestNativeParent);
  4130. }
  4131.  
  4132. this.insertRules(parent.rules, latestNativeParent);
  4133. return latestNativeParent;
  4134. }
  4135.  
  4136. var ruleStr = rule.toString();
  4137. if (!ruleStr) return false;
  4138. var insertionIndex = getValidRuleInsertionIndex(nativeParent, index);
  4139.  
  4140. var nativeRule = _insertRule(nativeParent, ruleStr, insertionIndex);
  4141.  
  4142. if (nativeRule === false) {
  4143. return false;
  4144. }
  4145.  
  4146. this.hasInsertedRules = true;
  4147. this.refCssRule(rule, insertionIndex, nativeRule);
  4148. return nativeRule;
  4149. };
  4150.  
  4151. _proto.refCssRule = function refCssRule(rule, index, cssRule) {
  4152. rule.renderable = cssRule; // We only want to reference the top level rules, deleteRule API doesn't support removing nested rules
  4153. // like rules inside media queries or keyframes
  4154.  
  4155. if (rule.options.parent instanceof StyleSheet) {
  4156. this.cssRules[index] = cssRule;
  4157. }
  4158. }
  4159. /**
  4160. * Delete a rule.
  4161. */
  4162. ;
  4163.  
  4164. _proto.deleteRule = function deleteRule(cssRule) {
  4165. var sheet = this.element.sheet;
  4166. var index = this.indexOf(cssRule);
  4167. if (index === -1) return false;
  4168. sheet.deleteRule(index);
  4169. this.cssRules.splice(index, 1);
  4170. return true;
  4171. }
  4172. /**
  4173. * Get index of a CSS Rule.
  4174. */
  4175. ;
  4176.  
  4177. _proto.indexOf = function indexOf(cssRule) {
  4178. return this.cssRules.indexOf(cssRule);
  4179. }
  4180. /**
  4181. * Generate a new CSS rule and replace the existing one.
  4182. *
  4183. * Only used for some old browsers because they can't set a selector.
  4184. */
  4185. ;
  4186.  
  4187. _proto.replaceRule = function replaceRule(cssRule, rule) {
  4188. var index = this.indexOf(cssRule);
  4189. if (index === -1) return false;
  4190. this.element.sheet.deleteRule(index);
  4191. this.cssRules.splice(index, 1);
  4192. return this.insertRule(rule, index);
  4193. }
  4194. /**
  4195. * Get all rules elements.
  4196. */
  4197. ;
  4198.  
  4199. _proto.getRules = function getRules() {
  4200. return this.element.sheet.cssRules;
  4201. };
  4202.  
  4203. return DomRenderer;
  4204. }();
  4205.  
  4206. var instanceCounter = 0;
  4207.  
  4208. var Jss = /*#__PURE__*/function () {
  4209. function Jss(options) {
  4210. this.id = instanceCounter++;
  4211. this.version = "10.6.0";
  4212. this.plugins = new PluginsRegistry();
  4213. this.options = {
  4214. id: {
  4215. minify: false
  4216. },
  4217. createGenerateId: createGenerateId,
  4218. Renderer: isBrowser$1 ? DomRenderer : null,
  4219. plugins: []
  4220. };
  4221. this.generateId = createGenerateId({
  4222. minify: false
  4223. });
  4224.  
  4225. for (var i = 0; i < plugins$1.length; i++) {
  4226. this.plugins.use(plugins$1[i], {
  4227. queue: 'internal'
  4228. });
  4229. }
  4230.  
  4231. this.setup(options);
  4232. }
  4233. /**
  4234. * Prepares various options, applies plugins.
  4235. * Should not be used twice on the same instance, because there is no plugins
  4236. * deduplication logic.
  4237. */
  4238.  
  4239.  
  4240. var _proto = Jss.prototype;
  4241.  
  4242. _proto.setup = function setup(options) {
  4243. if (options === void 0) {
  4244. options = {};
  4245. }
  4246.  
  4247. if (options.createGenerateId) {
  4248. this.options.createGenerateId = options.createGenerateId;
  4249. }
  4250.  
  4251. if (options.id) {
  4252. this.options.id = _extends$1({}, this.options.id, options.id);
  4253. }
  4254.  
  4255. if (options.createGenerateId || options.id) {
  4256. this.generateId = this.options.createGenerateId(this.options.id);
  4257. }
  4258.  
  4259. if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;
  4260.  
  4261. if ('Renderer' in options) {
  4262. this.options.Renderer = options.Renderer;
  4263. } // eslint-disable-next-line prefer-spread
  4264.  
  4265.  
  4266. if (options.plugins) this.use.apply(this, options.plugins);
  4267. return this;
  4268. }
  4269. /**
  4270. * Create a Style Sheet.
  4271. */
  4272. ;
  4273.  
  4274. _proto.createStyleSheet = function createStyleSheet(styles, options) {
  4275. if (options === void 0) {
  4276. options = {};
  4277. }
  4278.  
  4279. var _options = options,
  4280. index = _options.index;
  4281.  
  4282. if (typeof index !== 'number') {
  4283. index = registry.index === 0 ? 0 : registry.index + 1;
  4284. }
  4285.  
  4286. var sheet = new StyleSheet(styles, _extends$1({}, options, {
  4287. jss: this,
  4288. generateId: options.generateId || this.generateId,
  4289. insertionPoint: this.options.insertionPoint,
  4290. Renderer: this.options.Renderer,
  4291. index: index
  4292. }));
  4293. this.plugins.onProcessSheet(sheet);
  4294. return sheet;
  4295. }
  4296. /**
  4297. * Detach the Style Sheet and remove it from the registry.
  4298. */
  4299. ;
  4300.  
  4301. _proto.removeStyleSheet = function removeStyleSheet(sheet) {
  4302. sheet.detach();
  4303. registry.remove(sheet);
  4304. return this;
  4305. }
  4306. /**
  4307. * Create a rule without a Style Sheet.
  4308. * [Deprecated] will be removed in the next major version.
  4309. */
  4310. ;
  4311.  
  4312. _proto.createRule = function createRule$1(name, style, options) {
  4313. if (style === void 0) {
  4314. style = {};
  4315. }
  4316.  
  4317. if (options === void 0) {
  4318. options = {};
  4319. } // Enable rule without name for inline styles.
  4320.  
  4321.  
  4322. if (typeof name === 'object') {
  4323. // $FlowFixMe[incompatible-call]
  4324. return this.createRule(undefined, name, style);
  4325. } // $FlowFixMe[incompatible-type]
  4326.  
  4327.  
  4328. var ruleOptions = _extends$1({}, options, {
  4329. name: name,
  4330. jss: this,
  4331. Renderer: this.options.Renderer
  4332. });
  4333.  
  4334. if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId;
  4335. if (!ruleOptions.classes) ruleOptions.classes = {};
  4336. if (!ruleOptions.keyframes) ruleOptions.keyframes = {};
  4337. var rule = createRule(name, style, ruleOptions);
  4338. if (rule) this.plugins.onProcessRule(rule);
  4339. return rule;
  4340. }
  4341. /**
  4342. * Register plugin. Passed function will be invoked with a rule instance.
  4343. */
  4344. ;
  4345.  
  4346. _proto.use = function use() {
  4347. var _this = this;
  4348.  
  4349. for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
  4350. plugins[_key] = arguments[_key];
  4351. }
  4352.  
  4353. plugins.forEach(function (plugin) {
  4354. _this.plugins.use(plugin);
  4355. });
  4356. return this;
  4357. };
  4358.  
  4359. return Jss;
  4360. }();
  4361. /**
  4362. * Extracts a styles object with only props that contain function values.
  4363. */
  4364.  
  4365.  
  4366. function getDynamicStyles(styles) {
  4367. var to = null;
  4368.  
  4369. for (var key in styles) {
  4370. var value = styles[key];
  4371. var type = typeof value;
  4372.  
  4373. if (type === 'function') {
  4374. if (!to) to = {};
  4375. to[key] = value;
  4376. } else if (type === 'object' && value !== null && !Array.isArray(value)) {
  4377. var extracted = getDynamicStyles(value);
  4378.  
  4379. if (extracted) {
  4380. if (!to) to = {};
  4381. to[key] = extracted;
  4382. }
  4383. }
  4384. }
  4385.  
  4386. return to;
  4387. }
  4388. /**
  4389. * A better abstraction over CSS.
  4390. *
  4391. * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
  4392. * @website https://github.com/cssinjs/jss
  4393. * @license MIT
  4394. */
  4395.  
  4396. /**
  4397. * Export a constant indicating if this browser has CSSTOM support.
  4398. * https://developers.google.com/web/updates/2018/03/cssom
  4399. */
  4400.  
  4401.  
  4402. var hasCSSTOMSupport = typeof CSS === 'object' && CSS != null && 'number' in CSS;
  4403. /**
  4404. * Creates a new instance of Jss.
  4405. */
  4406.  
  4407. var create = function create(options) {
  4408. return new Jss(options);
  4409. };
  4410. /**
  4411. * A global Jss instance.
  4412. */
  4413.  
  4414.  
  4415. create();
  4416.  
  4417. var now = Date.now();
  4418. var fnValuesNs = "fnValues" + now;
  4419. var fnRuleNs = "fnStyle" + ++now;
  4420.  
  4421. var functionPlugin = function functionPlugin() {
  4422. return {
  4423. onCreateRule: function onCreateRule(name, decl, options) {
  4424. if (typeof decl !== 'function') return null;
  4425. var rule = createRule(name, {}, options);
  4426. rule[fnRuleNs] = decl;
  4427. return rule;
  4428. },
  4429. onProcessStyle: function onProcessStyle(style, rule) {
  4430. // We need to extract function values from the declaration, so that we can keep core unaware of them.
  4431. // We need to do that only once.
  4432. // We don't need to extract functions on each style update, since this can happen only once.
  4433. // We don't support function values inside of function rules.
  4434. if (fnValuesNs in rule || fnRuleNs in rule) return style;
  4435. var fnValues = {};
  4436.  
  4437. for (var prop in style) {
  4438. var value = style[prop];
  4439. if (typeof value !== 'function') continue;
  4440. delete style[prop];
  4441. fnValues[prop] = value;
  4442. } // $FlowFixMe[prop-missing]
  4443.  
  4444.  
  4445. rule[fnValuesNs] = fnValues;
  4446. return style;
  4447. },
  4448. onUpdate: function onUpdate(data, rule, sheet, options) {
  4449. var styleRule = rule; // $FlowFixMe[prop-missing]
  4450.  
  4451. var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object
  4452. // will be returned from that function.
  4453.  
  4454. if (fnRule) {
  4455. // Empty object will remove all currently defined props
  4456. // in case function rule returns a falsy value.
  4457. styleRule.style = fnRule(data) || {};
  4458. } // $FlowFixMe[prop-missing]
  4459.  
  4460.  
  4461. var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.
  4462.  
  4463. if (fnValues) {
  4464. for (var _prop in fnValues) {
  4465. styleRule.prop(_prop, fnValues[_prop](data), options);
  4466. }
  4467. }
  4468. }
  4469. };
  4470. };
  4471.  
  4472. var at = '@global';
  4473. var atPrefix = '@global ';
  4474.  
  4475. var GlobalContainerRule = /*#__PURE__*/function () {
  4476. function GlobalContainerRule(key, styles, options) {
  4477. this.type = 'global';
  4478. this.at = at;
  4479. this.rules = void 0;
  4480. this.options = void 0;
  4481. this.key = void 0;
  4482. this.isProcessed = false;
  4483. this.key = key;
  4484. this.options = options;
  4485. this.rules = new RuleList(_extends$1({}, options, {
  4486. parent: this
  4487. }));
  4488.  
  4489. for (var selector in styles) {
  4490. this.rules.add(selector, styles[selector]);
  4491. }
  4492.  
  4493. this.rules.process();
  4494. }
  4495. /**
  4496. * Get a rule.
  4497. */
  4498.  
  4499.  
  4500. var _proto = GlobalContainerRule.prototype;
  4501.  
  4502. _proto.getRule = function getRule(name) {
  4503. return this.rules.get(name);
  4504. }
  4505. /**
  4506. * Create and register rule, run plugins.
  4507. */
  4508. ;
  4509.  
  4510. _proto.addRule = function addRule(name, style, options) {
  4511. var rule = this.rules.add(name, style, options);
  4512. if (rule) this.options.jss.plugins.onProcessRule(rule);
  4513. return rule;
  4514. }
  4515. /**
  4516. * Get index of a rule.
  4517. */
  4518. ;
  4519.  
  4520. _proto.indexOf = function indexOf(rule) {
  4521. return this.rules.indexOf(rule);
  4522. }
  4523. /**
  4524. * Generates a CSS string.
  4525. */
  4526. ;
  4527.  
  4528. _proto.toString = function toString() {
  4529. return this.rules.toString();
  4530. };
  4531.  
  4532. return GlobalContainerRule;
  4533. }();
  4534.  
  4535. var GlobalPrefixedRule = /*#__PURE__*/function () {
  4536. function GlobalPrefixedRule(key, style, options) {
  4537. this.type = 'global';
  4538. this.at = at;
  4539. this.options = void 0;
  4540. this.rule = void 0;
  4541. this.isProcessed = false;
  4542. this.key = void 0;
  4543. this.key = key;
  4544. this.options = options;
  4545. var selector = key.substr(atPrefix.length);
  4546. this.rule = options.jss.createRule(selector, style, _extends$1({}, options, {
  4547. parent: this
  4548. }));
  4549. }
  4550.  
  4551. var _proto2 = GlobalPrefixedRule.prototype;
  4552.  
  4553. _proto2.toString = function toString(options) {
  4554. return this.rule ? this.rule.toString(options) : '';
  4555. };
  4556.  
  4557. return GlobalPrefixedRule;
  4558. }();
  4559.  
  4560. var separatorRegExp$1 = /\s*,\s*/g;
  4561.  
  4562. function addScope(selector, scope) {
  4563. var parts = selector.split(separatorRegExp$1);
  4564. var scoped = '';
  4565.  
  4566. for (var i = 0; i < parts.length; i++) {
  4567. scoped += scope + " " + parts[i].trim();
  4568. if (parts[i + 1]) scoped += ', ';
  4569. }
  4570.  
  4571. return scoped;
  4572. }
  4573.  
  4574. function handleNestedGlobalContainerRule(rule, sheet) {
  4575. var options = rule.options,
  4576. style = rule.style;
  4577. var rules = style ? style[at] : null;
  4578. if (!rules) return;
  4579.  
  4580. for (var name in rules) {
  4581. sheet.addRule(name, rules[name], _extends$1({}, options, {
  4582. selector: addScope(name, rule.selector)
  4583. }));
  4584. }
  4585.  
  4586. delete style[at];
  4587. }
  4588.  
  4589. function handlePrefixedGlobalRule(rule, sheet) {
  4590. var options = rule.options,
  4591. style = rule.style;
  4592.  
  4593. for (var prop in style) {
  4594. if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;
  4595. var selector = addScope(prop.substr(at.length), rule.selector);
  4596. sheet.addRule(selector, style[prop], _extends$1({}, options, {
  4597. selector: selector
  4598. }));
  4599. delete style[prop];
  4600. }
  4601. }
  4602. /**
  4603. * Convert nested rules to separate, remove them from original styles.
  4604. *
  4605. * @param {Rule} rule
  4606. * @api public
  4607. */
  4608.  
  4609.  
  4610. function jssGlobal() {
  4611. function onCreateRule(name, styles, options) {
  4612. if (!name) return null;
  4613.  
  4614. if (name === at) {
  4615. return new GlobalContainerRule(name, styles, options);
  4616. }
  4617.  
  4618. if (name[0] === '@' && name.substr(0, atPrefix.length) === atPrefix) {
  4619. return new GlobalPrefixedRule(name, styles, options);
  4620. }
  4621.  
  4622. var parent = options.parent;
  4623.  
  4624. if (parent) {
  4625. if (parent.type === 'global' || parent.options.parent && parent.options.parent.type === 'global') {
  4626. options.scoped = false;
  4627. }
  4628. }
  4629.  
  4630. if (options.scoped === false) {
  4631. options.selector = name;
  4632. }
  4633.  
  4634. return null;
  4635. }
  4636.  
  4637. function onProcessRule(rule, sheet) {
  4638. if (rule.type !== 'style' || !sheet) return;
  4639. handleNestedGlobalContainerRule(rule, sheet);
  4640. handlePrefixedGlobalRule(rule, sheet);
  4641. }
  4642.  
  4643. return {
  4644. onCreateRule: onCreateRule,
  4645. onProcessRule: onProcessRule
  4646. };
  4647. }
  4648.  
  4649. var separatorRegExp = /\s*,\s*/g;
  4650. var parentRegExp = /&/g;
  4651. var refRegExp = /\$([\w-]+)/g;
  4652. /**
  4653. * Convert nested rules to separate, remove them from original styles.
  4654. *
  4655. * @param {Rule} rule
  4656. * @api public
  4657. */
  4658.  
  4659. function jssNested() {
  4660. // Get a function to be used for $ref replacement.
  4661. function getReplaceRef(container, sheet) {
  4662. return function (match, key) {
  4663. var rule = container.getRule(key) || sheet && sheet.getRule(key);
  4664.  
  4665. if (rule) {
  4666. rule = rule;
  4667. return rule.selector;
  4668. }
  4669. return key;
  4670. };
  4671. }
  4672.  
  4673. function replaceParentRefs(nestedProp, parentProp) {
  4674. var parentSelectors = parentProp.split(separatorRegExp);
  4675. var nestedSelectors = nestedProp.split(separatorRegExp);
  4676. var result = '';
  4677.  
  4678. for (var i = 0; i < parentSelectors.length; i++) {
  4679. var parent = parentSelectors[i];
  4680.  
  4681. for (var j = 0; j < nestedSelectors.length; j++) {
  4682. var nested = nestedSelectors[j];
  4683. if (result) result += ', '; // Replace all & by the parent or prefix & with the parent.
  4684.  
  4685. result += nested.indexOf('&') !== -1 ? nested.replace(parentRegExp, parent) : parent + " " + nested;
  4686. }
  4687. }
  4688.  
  4689. return result;
  4690. }
  4691.  
  4692. function getOptions(rule, container, prevOptions) {
  4693. // Options has been already created, now we only increase index.
  4694. if (prevOptions) return _extends$1({}, prevOptions, {
  4695. index: prevOptions.index + 1 // $FlowFixMe[prop-missing]
  4696.  
  4697. });
  4698. var nestingLevel = rule.options.nestingLevel;
  4699. nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
  4700.  
  4701. var options = _extends$1({}, rule.options, {
  4702. nestingLevel: nestingLevel,
  4703. index: container.indexOf(rule) + 1 // We don't need the parent name to be set options for chlid.
  4704.  
  4705. });
  4706.  
  4707. delete options.name;
  4708. return options;
  4709. }
  4710.  
  4711. function onProcessStyle(style, rule, sheet) {
  4712. if (rule.type !== 'style') return style;
  4713. var styleRule = rule;
  4714. var container = styleRule.options.parent;
  4715. var options;
  4716. var replaceRef;
  4717.  
  4718. for (var prop in style) {
  4719. var isNested = prop.indexOf('&') !== -1;
  4720. var isNestedConditional = prop[0] === '@';
  4721. if (!isNested && !isNestedConditional) continue;
  4722. options = getOptions(styleRule, container, options);
  4723.  
  4724. if (isNested) {
  4725. var selector = replaceParentRefs(prop, styleRule.selector); // Lazily create the ref replacer function just once for
  4726. // all nested rules within the sheet.
  4727.  
  4728. if (!replaceRef) replaceRef = getReplaceRef(container, sheet); // Replace all $refs.
  4729.  
  4730. selector = selector.replace(refRegExp, replaceRef);
  4731. container.addRule(selector, style[prop], _extends$1({}, options, {
  4732. selector: selector
  4733. }));
  4734. } else if (isNestedConditional) {
  4735. // Place conditional right after the parent rule to ensure right ordering.
  4736. container.addRule(prop, {}, options) // Flow expects more options but they aren't required
  4737. // And flow doesn't know this will always be a StyleRule which has the addRule method
  4738. // $FlowFixMe[incompatible-use]
  4739. // $FlowFixMe[prop-missing]
  4740. .addRule(styleRule.key, style[prop], {
  4741. selector: styleRule.selector
  4742. });
  4743. }
  4744.  
  4745. delete style[prop];
  4746. }
  4747.  
  4748. return style;
  4749. }
  4750.  
  4751. return {
  4752. onProcessStyle: onProcessStyle
  4753. };
  4754. }
  4755.  
  4756. /* eslint-disable no-var, prefer-template */
  4757. var uppercasePattern = /[A-Z]/g;
  4758. var msPattern = /^ms-/;
  4759. var cache$2 = {};
  4760.  
  4761. function toHyphenLower(match) {
  4762. return '-' + match.toLowerCase();
  4763. }
  4764.  
  4765. function hyphenateStyleName(name) {
  4766. if (cache$2.hasOwnProperty(name)) {
  4767. return cache$2[name];
  4768. }
  4769.  
  4770. var hName = name.replace(uppercasePattern, toHyphenLower);
  4771. return cache$2[name] = msPattern.test(hName) ? '-' + hName : hName;
  4772. }
  4773.  
  4774. /**
  4775. * Convert camel cased property names to dash separated.
  4776. *
  4777. * @param {Object} style
  4778. * @return {Object}
  4779. */
  4780.  
  4781. function convertCase(style) {
  4782. var converted = {};
  4783.  
  4784. for (var prop in style) {
  4785. var key = prop.indexOf('--') === 0 ? prop : hyphenateStyleName(prop);
  4786. converted[key] = style[prop];
  4787. }
  4788.  
  4789. if (style.fallbacks) {
  4790. if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
  4791. }
  4792.  
  4793. return converted;
  4794. }
  4795. /**
  4796. * Allow camel cased property names by converting them back to dasherized.
  4797. *
  4798. * @param {Rule} rule
  4799. */
  4800.  
  4801.  
  4802. function camelCase() {
  4803. function onProcessStyle(style) {
  4804. if (Array.isArray(style)) {
  4805. // Handle rules like @font-face, which can have multiple styles in an array
  4806. for (var index = 0; index < style.length; index++) {
  4807. style[index] = convertCase(style[index]);
  4808. }
  4809.  
  4810. return style;
  4811. }
  4812.  
  4813. return convertCase(style);
  4814. }
  4815.  
  4816. function onChangeValue(value, prop, rule) {
  4817. if (prop.indexOf('--') === 0) {
  4818. return value;
  4819. }
  4820.  
  4821. var hyphenatedProp = hyphenateStyleName(prop); // There was no camel case in place
  4822.  
  4823. if (prop === hyphenatedProp) return value;
  4824. rule.prop(hyphenatedProp, value); // Core will ignore that property value we set the proper one above.
  4825.  
  4826. return null;
  4827. }
  4828.  
  4829. return {
  4830. onProcessStyle: onProcessStyle,
  4831. onChangeValue: onChangeValue
  4832. };
  4833. }
  4834.  
  4835. var px = hasCSSTOMSupport && CSS ? CSS.px : 'px';
  4836. var ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';
  4837. var percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';
  4838. /**
  4839. * Generated jss-plugin-default-unit CSS property units
  4840. *
  4841. * @type object
  4842. */
  4843.  
  4844. var defaultUnits = {
  4845. // Animation properties
  4846. 'animation-delay': ms,
  4847. 'animation-duration': ms,
  4848. // Background properties
  4849. 'background-position': px,
  4850. 'background-position-x': px,
  4851. 'background-position-y': px,
  4852. 'background-size': px,
  4853. // Border Properties
  4854. border: px,
  4855. 'border-bottom': px,
  4856. 'border-bottom-left-radius': px,
  4857. 'border-bottom-right-radius': px,
  4858. 'border-bottom-width': px,
  4859. 'border-left': px,
  4860. 'border-left-width': px,
  4861. 'border-radius': px,
  4862. 'border-right': px,
  4863. 'border-right-width': px,
  4864. 'border-top': px,
  4865. 'border-top-left-radius': px,
  4866. 'border-top-right-radius': px,
  4867. 'border-top-width': px,
  4868. 'border-width': px,
  4869. 'border-block': px,
  4870. 'border-block-end': px,
  4871. 'border-block-end-width': px,
  4872. 'border-block-start': px,
  4873. 'border-block-start-width': px,
  4874. 'border-block-width': px,
  4875. 'border-inline': px,
  4876. 'border-inline-end': px,
  4877. 'border-inline-end-width': px,
  4878. 'border-inline-start': px,
  4879. 'border-inline-start-width': px,
  4880. 'border-inline-width': px,
  4881. 'border-start-start-radius': px,
  4882. 'border-start-end-radius': px,
  4883. 'border-end-start-radius': px,
  4884. 'border-end-end-radius': px,
  4885. // Margin properties
  4886. margin: px,
  4887. 'margin-bottom': px,
  4888. 'margin-left': px,
  4889. 'margin-right': px,
  4890. 'margin-top': px,
  4891. 'margin-block': px,
  4892. 'margin-block-end': px,
  4893. 'margin-block-start': px,
  4894. 'margin-inline': px,
  4895. 'margin-inline-end': px,
  4896. 'margin-inline-start': px,
  4897. // Padding properties
  4898. padding: px,
  4899. 'padding-bottom': px,
  4900. 'padding-left': px,
  4901. 'padding-right': px,
  4902. 'padding-top': px,
  4903. 'padding-block': px,
  4904. 'padding-block-end': px,
  4905. 'padding-block-start': px,
  4906. 'padding-inline': px,
  4907. 'padding-inline-end': px,
  4908. 'padding-inline-start': px,
  4909. // Mask properties
  4910. 'mask-position-x': px,
  4911. 'mask-position-y': px,
  4912. 'mask-size': px,
  4913. // Width and height properties
  4914. height: px,
  4915. width: px,
  4916. 'min-height': px,
  4917. 'max-height': px,
  4918. 'min-width': px,
  4919. 'max-width': px,
  4920. // Position properties
  4921. bottom: px,
  4922. left: px,
  4923. top: px,
  4924. right: px,
  4925. inset: px,
  4926. 'inset-block': px,
  4927. 'inset-block-end': px,
  4928. 'inset-block-start': px,
  4929. 'inset-inline': px,
  4930. 'inset-inline-end': px,
  4931. 'inset-inline-start': px,
  4932. // Shadow properties
  4933. 'box-shadow': px,
  4934. 'text-shadow': px,
  4935. // Column properties
  4936. 'column-gap': px,
  4937. 'column-rule': px,
  4938. 'column-rule-width': px,
  4939. 'column-width': px,
  4940. // Font and text properties
  4941. 'font-size': px,
  4942. 'font-size-delta': px,
  4943. 'letter-spacing': px,
  4944. 'text-decoration-thickness': px,
  4945. 'text-indent': px,
  4946. 'text-stroke': px,
  4947. 'text-stroke-width': px,
  4948. 'word-spacing': px,
  4949. // Motion properties
  4950. motion: px,
  4951. 'motion-offset': px,
  4952. // Outline properties
  4953. outline: px,
  4954. 'outline-offset': px,
  4955. 'outline-width': px,
  4956. // Perspective properties
  4957. perspective: px,
  4958. 'perspective-origin-x': percent,
  4959. 'perspective-origin-y': percent,
  4960. // Transform properties
  4961. 'transform-origin': percent,
  4962. 'transform-origin-x': percent,
  4963. 'transform-origin-y': percent,
  4964. 'transform-origin-z': percent,
  4965. // Transition properties
  4966. 'transition-delay': ms,
  4967. 'transition-duration': ms,
  4968. // Alignment properties
  4969. 'vertical-align': px,
  4970. 'flex-basis': px,
  4971. // Some random properties
  4972. 'shape-margin': px,
  4973. size: px,
  4974. gap: px,
  4975. // Grid properties
  4976. grid: px,
  4977. 'grid-gap': px,
  4978. 'row-gap': px,
  4979. 'grid-row-gap': px,
  4980. 'grid-column-gap': px,
  4981. 'grid-template-rows': px,
  4982. 'grid-template-columns': px,
  4983. 'grid-auto-rows': px,
  4984. 'grid-auto-columns': px,
  4985. // Not existing properties.
  4986. // Used to avoid issues with jss-plugin-expand integration.
  4987. 'box-shadow-x': px,
  4988. 'box-shadow-y': px,
  4989. 'box-shadow-blur': px,
  4990. 'box-shadow-spread': px,
  4991. 'font-line-height': px,
  4992. 'text-shadow-x': px,
  4993. 'text-shadow-y': px,
  4994. 'text-shadow-blur': px
  4995. };
  4996. /**
  4997. * Clones the object and adds a camel cased property version.
  4998. */
  4999.  
  5000. function addCamelCasedVersion(obj) {
  5001. var regExp = /(-[a-z])/g;
  5002.  
  5003. var replace = function replace(str) {
  5004. return str[1].toUpperCase();
  5005. };
  5006.  
  5007. var newObj = {};
  5008.  
  5009. for (var _key in obj) {
  5010. newObj[_key] = obj[_key];
  5011. newObj[_key.replace(regExp, replace)] = obj[_key];
  5012. }
  5013.  
  5014. return newObj;
  5015. }
  5016.  
  5017. var units = addCamelCasedVersion(defaultUnits);
  5018. /**
  5019. * Recursive deep style passing function
  5020. */
  5021.  
  5022. function iterate(prop, value, options) {
  5023. if (value == null) return value;
  5024.  
  5025. if (Array.isArray(value)) {
  5026. for (var i = 0; i < value.length; i++) {
  5027. value[i] = iterate(prop, value[i], options);
  5028. }
  5029. } else if (typeof value === 'object') {
  5030. if (prop === 'fallbacks') {
  5031. for (var innerProp in value) {
  5032. value[innerProp] = iterate(innerProp, value[innerProp], options);
  5033. }
  5034. } else {
  5035. for (var _innerProp in value) {
  5036. value[_innerProp] = iterate(prop + "-" + _innerProp, value[_innerProp], options);
  5037. }
  5038. } // eslint-disable-next-line no-restricted-globals
  5039.  
  5040. } else if (typeof value === 'number' && isNaN(value) === false) {
  5041. var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.
  5042.  
  5043. if (unit && !(value === 0 && unit === px)) {
  5044. return typeof unit === 'function' ? unit(value).toString() : "" + value + unit;
  5045. }
  5046.  
  5047. return value.toString();
  5048. }
  5049.  
  5050. return value;
  5051. }
  5052. /**
  5053. * Add unit to numeric values.
  5054. */
  5055.  
  5056.  
  5057. function defaultUnit(options) {
  5058. if (options === void 0) {
  5059. options = {};
  5060. }
  5061.  
  5062. var camelCasedOptions = addCamelCasedVersion(options);
  5063.  
  5064. function onProcessStyle(style, rule) {
  5065. if (rule.type !== 'style') return style;
  5066.  
  5067. for (var prop in style) {
  5068. style[prop] = iterate(prop, style[prop], camelCasedOptions);
  5069. }
  5070.  
  5071. return style;
  5072. }
  5073.  
  5074. function onChangeValue(value, prop) {
  5075. return iterate(prop, value, camelCasedOptions);
  5076. }
  5077.  
  5078. return {
  5079. onProcessStyle: onProcessStyle,
  5080. onChangeValue: onChangeValue
  5081. };
  5082. }
  5083.  
  5084. var js = '';
  5085. var css = '';
  5086. var vendor = '';
  5087. var browser = '';
  5088. var isTouch = isBrowser$1 && 'ontouchstart' in document.documentElement; // We should not do anything if required serverside.
  5089.  
  5090. if (isBrowser$1) {
  5091. // Order matters. We need to check Webkit the last one because
  5092. // other vendors use to add Webkit prefixes to some properties
  5093. var jsCssMap = {
  5094. Moz: '-moz-',
  5095. ms: '-ms-',
  5096. O: '-o-',
  5097. Webkit: '-webkit-'
  5098. };
  5099.  
  5100. var _document$createEleme = document.createElement('p'),
  5101. style = _document$createEleme.style;
  5102.  
  5103. var testProp = 'Transform';
  5104.  
  5105. for (var key in jsCssMap) {
  5106. if (key + testProp in style) {
  5107. js = key;
  5108. css = jsCssMap[key];
  5109. break;
  5110. }
  5111. } // Correctly detect the Edge browser.
  5112.  
  5113.  
  5114. if (js === 'Webkit' && 'msHyphens' in style) {
  5115. js = 'ms';
  5116. css = jsCssMap.ms;
  5117. browser = 'edge';
  5118. } // Correctly detect the Safari browser.
  5119.  
  5120.  
  5121. if (js === 'Webkit' && '-apple-trailing-word' in style) {
  5122. vendor = 'apple';
  5123. }
  5124. }
  5125. /**
  5126. * Vendor prefix string for the current browser.
  5127. *
  5128. * @type {{js: String, css: String, vendor: String, browser: String}}
  5129. * @api public
  5130. */
  5131.  
  5132.  
  5133. var prefix = {
  5134. js: js,
  5135. css: css,
  5136. vendor: vendor,
  5137. browser: browser,
  5138. isTouch: isTouch
  5139. };
  5140. /**
  5141. * Test if a keyframe at-rule should be prefixed or not
  5142. *
  5143. * @param {String} vendor prefix string for the current browser.
  5144. * @return {String}
  5145. * @api public
  5146. */
  5147.  
  5148. function supportedKeyframes(key) {
  5149. // Keyframes is already prefixed. e.g. key = '@-webkit-keyframes a'
  5150. if (key[1] === '-') return key; // No need to prefix IE/Edge. Older browsers will ignore unsupported rules.
  5151. // https://caniuse.com/#search=keyframes
  5152.  
  5153. if (prefix.js === 'ms') return key;
  5154. return "@" + prefix.css + "keyframes" + key.substr(10);
  5155. } // https://caniuse.com/#search=appearance
  5156.  
  5157.  
  5158. var appearence = {
  5159. noPrefill: ['appearance'],
  5160. supportedProperty: function supportedProperty(prop) {
  5161. if (prop !== 'appearance') return false;
  5162. if (prefix.js === 'ms') return "-webkit-" + prop;
  5163. return prefix.css + prop;
  5164. }
  5165. }; // https://caniuse.com/#search=color-adjust
  5166.  
  5167. var colorAdjust = {
  5168. noPrefill: ['color-adjust'],
  5169. supportedProperty: function supportedProperty(prop) {
  5170. if (prop !== 'color-adjust') return false;
  5171. if (prefix.js === 'Webkit') return prefix.css + "print-" + prop;
  5172. return prop;
  5173. }
  5174. };
  5175. var regExp = /[-\s]+(.)?/g;
  5176. /**
  5177. * Replaces the letter with the capital letter
  5178. *
  5179. * @param {String} match
  5180. * @param {String} c
  5181. * @return {String}
  5182. * @api private
  5183. */
  5184.  
  5185. function toUpper(match, c) {
  5186. return c ? c.toUpperCase() : '';
  5187. }
  5188. /**
  5189. * Convert dash separated strings to camel-cased.
  5190. *
  5191. * @param {String} str
  5192. * @return {String}
  5193. * @api private
  5194. */
  5195.  
  5196.  
  5197. function camelize(str) {
  5198. return str.replace(regExp, toUpper);
  5199. }
  5200. /**
  5201. * Convert dash separated strings to pascal cased.
  5202. *
  5203. * @param {String} str
  5204. * @return {String}
  5205. * @api private
  5206. */
  5207.  
  5208.  
  5209. function pascalize(str) {
  5210. return camelize("-" + str);
  5211. } // but we can use a longhand property instead.
  5212. // https://caniuse.com/#search=mask
  5213.  
  5214.  
  5215. var mask = {
  5216. noPrefill: ['mask'],
  5217. supportedProperty: function supportedProperty(prop, style) {
  5218. if (!/^mask/.test(prop)) return false;
  5219.  
  5220. if (prefix.js === 'Webkit') {
  5221. var longhand = 'mask-image';
  5222.  
  5223. if (camelize(longhand) in style) {
  5224. return prop;
  5225. }
  5226.  
  5227. if (prefix.js + pascalize(longhand) in style) {
  5228. return prefix.css + prop;
  5229. }
  5230. }
  5231.  
  5232. return prop;
  5233. }
  5234. }; // https://caniuse.com/#search=text-orientation
  5235.  
  5236. var textOrientation = {
  5237. noPrefill: ['text-orientation'],
  5238. supportedProperty: function supportedProperty(prop) {
  5239. if (prop !== 'text-orientation') return false;
  5240.  
  5241. if (prefix.vendor === 'apple' && !prefix.isTouch) {
  5242. return prefix.css + prop;
  5243. }
  5244.  
  5245. return prop;
  5246. }
  5247. }; // https://caniuse.com/#search=transform
  5248.  
  5249. var transform = {
  5250. noPrefill: ['transform'],
  5251. supportedProperty: function supportedProperty(prop, style, options) {
  5252. if (prop !== 'transform') return false;
  5253.  
  5254. if (options.transform) {
  5255. return prop;
  5256. }
  5257.  
  5258. return prefix.css + prop;
  5259. }
  5260. }; // https://caniuse.com/#search=transition
  5261.  
  5262. var transition = {
  5263. noPrefill: ['transition'],
  5264. supportedProperty: function supportedProperty(prop, style, options) {
  5265. if (prop !== 'transition') return false;
  5266.  
  5267. if (options.transition) {
  5268. return prop;
  5269. }
  5270.  
  5271. return prefix.css + prop;
  5272. }
  5273. }; // https://caniuse.com/#search=writing-mode
  5274.  
  5275. var writingMode = {
  5276. noPrefill: ['writing-mode'],
  5277. supportedProperty: function supportedProperty(prop) {
  5278. if (prop !== 'writing-mode') return false;
  5279.  
  5280. if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {
  5281. return prefix.css + prop;
  5282. }
  5283.  
  5284. return prop;
  5285. }
  5286. }; // https://caniuse.com/#search=user-select
  5287.  
  5288. var userSelect = {
  5289. noPrefill: ['user-select'],
  5290. supportedProperty: function supportedProperty(prop) {
  5291. if (prop !== 'user-select') return false;
  5292.  
  5293. if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {
  5294. return prefix.css + prop;
  5295. }
  5296.  
  5297. return prop;
  5298. }
  5299. }; // https://caniuse.com/#search=multicolumn
  5300. // https://github.com/postcss/autoprefixer/issues/491
  5301. // https://github.com/postcss/autoprefixer/issues/177
  5302.  
  5303. var breakPropsOld = {
  5304. supportedProperty: function supportedProperty(prop, style) {
  5305. if (!/^break-/.test(prop)) return false;
  5306.  
  5307. if (prefix.js === 'Webkit') {
  5308. var jsProp = "WebkitColumn" + pascalize(prop);
  5309. return jsProp in style ? prefix.css + "column-" + prop : false;
  5310. }
  5311.  
  5312. if (prefix.js === 'Moz') {
  5313. var _jsProp = "page" + pascalize(prop);
  5314.  
  5315. return _jsProp in style ? "page-" + prop : false;
  5316. }
  5317.  
  5318. return false;
  5319. }
  5320. }; // See https://github.com/postcss/autoprefixer/issues/324.
  5321.  
  5322. var inlineLogicalOld = {
  5323. supportedProperty: function supportedProperty(prop, style) {
  5324. if (!/^(border|margin|padding)-inline/.test(prop)) return false;
  5325. if (prefix.js === 'Moz') return prop;
  5326. var newProp = prop.replace('-inline', '');
  5327. return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
  5328. }
  5329. }; // Camelization is required because we can't test using.
  5330. // CSS syntax for e.g. in FF.
  5331.  
  5332. var unprefixed = {
  5333. supportedProperty: function supportedProperty(prop, style) {
  5334. return camelize(prop) in style ? prop : false;
  5335. }
  5336. };
  5337. var prefixed = {
  5338. supportedProperty: function supportedProperty(prop, style) {
  5339. var pascalized = pascalize(prop); // Return custom CSS variable without prefixing.
  5340.  
  5341. if (prop[0] === '-') return prop; // Return already prefixed value without prefixing.
  5342.  
  5343. if (prop[0] === '-' && prop[1] === '-') return prop;
  5344. if (prefix.js + pascalized in style) return prefix.css + prop; // Try webkit fallback.
  5345.  
  5346. if (prefix.js !== 'Webkit' && "Webkit" + pascalized in style) return "-webkit-" + prop;
  5347. return false;
  5348. }
  5349. }; // https://caniuse.com/#search=scroll-snap
  5350.  
  5351. var scrollSnap = {
  5352. supportedProperty: function supportedProperty(prop) {
  5353. if (prop.substring(0, 11) !== 'scroll-snap') return false;
  5354.  
  5355. if (prefix.js === 'ms') {
  5356. return "" + prefix.css + prop;
  5357. }
  5358.  
  5359. return prop;
  5360. }
  5361. }; // https://caniuse.com/#search=overscroll-behavior
  5362.  
  5363. var overscrollBehavior = {
  5364. supportedProperty: function supportedProperty(prop) {
  5365. if (prop !== 'overscroll-behavior') return false;
  5366.  
  5367. if (prefix.js === 'ms') {
  5368. return prefix.css + "scroll-chaining";
  5369. }
  5370.  
  5371. return prop;
  5372. }
  5373. };
  5374. var propMap = {
  5375. 'flex-grow': 'flex-positive',
  5376. 'flex-shrink': 'flex-negative',
  5377. 'flex-basis': 'flex-preferred-size',
  5378. 'justify-content': 'flex-pack',
  5379. order: 'flex-order',
  5380. 'align-items': 'flex-align',
  5381. 'align-content': 'flex-line-pack' // 'align-self' is handled by 'align-self' plugin.
  5382.  
  5383. }; // Support old flex spec from 2012.
  5384.  
  5385. var flex2012 = {
  5386. supportedProperty: function supportedProperty(prop, style) {
  5387. var newProp = propMap[prop];
  5388. if (!newProp) return false;
  5389. return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
  5390. }
  5391. };
  5392. var propMap$1 = {
  5393. flex: 'box-flex',
  5394. 'flex-grow': 'box-flex',
  5395. 'flex-direction': ['box-orient', 'box-direction'],
  5396. order: 'box-ordinal-group',
  5397. 'align-items': 'box-align',
  5398. 'flex-flow': ['box-orient', 'box-direction'],
  5399. 'justify-content': 'box-pack'
  5400. };
  5401. var propKeys = Object.keys(propMap$1);
  5402.  
  5403. var prefixCss = function prefixCss(p) {
  5404. return prefix.css + p;
  5405. }; // Support old flex spec from 2009.
  5406.  
  5407.  
  5408. var flex2009 = {
  5409. supportedProperty: function supportedProperty(prop, style, _ref) {
  5410. var multiple = _ref.multiple;
  5411.  
  5412. if (propKeys.indexOf(prop) > -1) {
  5413. var newProp = propMap$1[prop];
  5414.  
  5415. if (!Array.isArray(newProp)) {
  5416. return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;
  5417. }
  5418.  
  5419. if (!multiple) return false;
  5420.  
  5421. for (var i = 0; i < newProp.length; i++) {
  5422. if (!(prefix.js + pascalize(newProp[0]) in style)) {
  5423. return false;
  5424. }
  5425. }
  5426.  
  5427. return newProp.map(prefixCss);
  5428. }
  5429.  
  5430. return false;
  5431. }
  5432. }; // plugins = [
  5433. // ...plugins,
  5434. // breakPropsOld,
  5435. // inlineLogicalOld,
  5436. // unprefixed,
  5437. // prefixed,
  5438. // scrollSnap,
  5439. // flex2012,
  5440. // flex2009
  5441. // ]
  5442. // Plugins without 'noPrefill' value, going last.
  5443. // 'flex-*' plugins should be at the bottom.
  5444. // 'flex2009' going after 'flex2012'.
  5445. // 'prefixed' going after 'unprefixed'
  5446.  
  5447. var plugins = [appearence, colorAdjust, mask, textOrientation, transform, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];
  5448. var propertyDetectors = plugins.filter(function (p) {
  5449. return p.supportedProperty;
  5450. }).map(function (p) {
  5451. return p.supportedProperty;
  5452. });
  5453. var noPrefill = plugins.filter(function (p) {
  5454. return p.noPrefill;
  5455. }).reduce(function (a, p) {
  5456. a.push.apply(a, _toConsumableArray(p.noPrefill));
  5457. return a;
  5458. }, []);
  5459. var el;
  5460. var cache = {};
  5461.  
  5462. if (isBrowser$1) {
  5463. el = document.createElement('p'); // We test every property on vendor prefix requirement.
  5464. // Once tested, result is cached. It gives us up to 70% perf boost.
  5465. // http://jsperf.com/element-style-object-access-vs-plain-object
  5466. //
  5467. // Prefill cache with known css properties to reduce amount of
  5468. // properties we need to feature test at runtime.
  5469. // http://davidwalsh.name/vendor-prefix
  5470.  
  5471. var computed = window.getComputedStyle(document.documentElement, '');
  5472.  
  5473. for (var key$1 in computed) {
  5474. // eslint-disable-next-line no-restricted-globals
  5475. if (!isNaN(key$1)) cache[computed[key$1]] = computed[key$1];
  5476. } // Properties that cannot be correctly detected using the
  5477. // cache prefill method.
  5478.  
  5479.  
  5480. noPrefill.forEach(function (x) {
  5481. return delete cache[x];
  5482. });
  5483. }
  5484. /**
  5485. * Test if a property is supported, returns supported property with vendor
  5486. * prefix if required. Returns `false` if not supported.
  5487. *
  5488. * @param {String} prop dash separated
  5489. * @param {Object} [options]
  5490. * @return {String|Boolean}
  5491. * @api public
  5492. */
  5493.  
  5494.  
  5495. function supportedProperty(prop, options) {
  5496. if (options === void 0) {
  5497. options = {};
  5498. } // For server-side rendering.
  5499.  
  5500.  
  5501. if (!el) return prop; // Remove cache for benchmark tests or return property from the cache.
  5502.  
  5503. if (cache[prop] != null) {
  5504. return cache[prop];
  5505. } // Check if 'transition' or 'transform' natively supported in browser.
  5506.  
  5507.  
  5508. if (prop === 'transition' || prop === 'transform') {
  5509. options[prop] = prop in el.style;
  5510. } // Find a plugin for current prefix property.
  5511.  
  5512.  
  5513. for (var i = 0; i < propertyDetectors.length; i++) {
  5514. cache[prop] = propertyDetectors[i](prop, el.style, options); // Break loop, if value found.
  5515.  
  5516. if (cache[prop]) break;
  5517. } // Reset styles for current property.
  5518. // Firefox can even throw an error for invalid properties, e.g., "0".
  5519.  
  5520.  
  5521. try {
  5522. el.style[prop] = '';
  5523. } catch (err) {
  5524. return false;
  5525. }
  5526.  
  5527. return cache[prop];
  5528. }
  5529.  
  5530. var cache$1 = {};
  5531. var transitionProperties = {
  5532. transition: 1,
  5533. 'transition-property': 1,
  5534. '-webkit-transition': 1,
  5535. '-webkit-transition-property': 1
  5536. };
  5537. var transPropsRegExp = /(^\s*[\w-]+)|, (\s*[\w-]+)(?![^()]*\))/g;
  5538. var el$1;
  5539. /**
  5540. * Returns prefixed value transition/transform if needed.
  5541. *
  5542. * @param {String} match
  5543. * @param {String} p1
  5544. * @param {String} p2
  5545. * @return {String}
  5546. * @api private
  5547. */
  5548.  
  5549. function prefixTransitionCallback(match, p1, p2) {
  5550. if (p1 === 'var') return 'var';
  5551. if (p1 === 'all') return 'all';
  5552. if (p2 === 'all') return ', all';
  5553. var prefixedValue = p1 ? supportedProperty(p1) : ", " + supportedProperty(p2);
  5554. if (!prefixedValue) return p1 || p2;
  5555. return prefixedValue;
  5556. }
  5557.  
  5558. if (isBrowser$1) el$1 = document.createElement('p');
  5559. /**
  5560. * Returns prefixed value if needed. Returns `false` if value is not supported.
  5561. *
  5562. * @param {String} property
  5563. * @param {String} value
  5564. * @return {String|Boolean}
  5565. * @api public
  5566. */
  5567.  
  5568. function supportedValue(property, value) {
  5569. // For server-side rendering.
  5570. var prefixedValue = value;
  5571. if (!el$1 || property === 'content') return value; // It is a string or a number as a string like '1'.
  5572. // We want only prefixable values here.
  5573. // eslint-disable-next-line no-restricted-globals
  5574.  
  5575. if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {
  5576. return prefixedValue;
  5577. } // Create cache key for current value.
  5578.  
  5579.  
  5580. var cacheKey = property + prefixedValue; // Remove cache for benchmark tests or return value from cache.
  5581.  
  5582. if (cache$1[cacheKey] != null) {
  5583. return cache$1[cacheKey];
  5584. } // IE can even throw an error in some cases, for e.g. style.content = 'bar'.
  5585.  
  5586.  
  5587. try {
  5588. // Test value as it is.
  5589. el$1.style[property] = prefixedValue;
  5590. } catch (err) {
  5591. // Return false if value not supported.
  5592. cache$1[cacheKey] = false;
  5593. return false;
  5594. } // If 'transition' or 'transition-property' property.
  5595.  
  5596.  
  5597. if (transitionProperties[property]) {
  5598. prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);
  5599. } else if (el$1.style[property] === '') {
  5600. // Value with a vendor prefix.
  5601. prefixedValue = prefix.css + prefixedValue; // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.
  5602.  
  5603. if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox'; // Test prefixed value.
  5604.  
  5605. el$1.style[property] = prefixedValue; // Return false if value not supported.
  5606.  
  5607. if (el$1.style[property] === '') {
  5608. cache$1[cacheKey] = false;
  5609. return false;
  5610. }
  5611. } // Reset styles for current property.
  5612.  
  5613.  
  5614. el$1.style[property] = ''; // Write current value to cache.
  5615.  
  5616. cache$1[cacheKey] = prefixedValue;
  5617. return cache$1[cacheKey];
  5618. }
  5619.  
  5620. /**
  5621. * Add vendor prefix to a property name when needed.
  5622. *
  5623. * @api public
  5624. */
  5625.  
  5626. function jssVendorPrefixer() {
  5627. function onProcessRule(rule) {
  5628. if (rule.type === 'keyframes') {
  5629. var atRule = rule;
  5630. atRule.at = supportedKeyframes(atRule.at);
  5631. }
  5632. }
  5633.  
  5634. function prefixStyle(style) {
  5635. for (var prop in style) {
  5636. var value = style[prop];
  5637.  
  5638. if (prop === 'fallbacks' && Array.isArray(value)) {
  5639. style[prop] = value.map(prefixStyle);
  5640. continue;
  5641. }
  5642.  
  5643. var changeProp = false;
  5644. var supportedProp = supportedProperty(prop);
  5645. if (supportedProp && supportedProp !== prop) changeProp = true;
  5646. var changeValue = false;
  5647. var supportedValue$1 = supportedValue(supportedProp, toCssValue(value));
  5648. if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;
  5649.  
  5650. if (changeProp || changeValue) {
  5651. if (changeProp) delete style[prop];
  5652. style[supportedProp || prop] = supportedValue$1 || value;
  5653. }
  5654. }
  5655.  
  5656. return style;
  5657. }
  5658.  
  5659. function onProcessStyle(style, rule) {
  5660. if (rule.type !== 'style') return style;
  5661. return prefixStyle(style);
  5662. }
  5663.  
  5664. function onChangeValue(value, prop) {
  5665. return supportedValue(prop, toCssValue(value)) || value;
  5666. }
  5667.  
  5668. return {
  5669. onProcessRule: onProcessRule,
  5670. onProcessStyle: onProcessStyle,
  5671. onChangeValue: onChangeValue
  5672. };
  5673. }
  5674.  
  5675. /**
  5676. * Sort props by length.
  5677. */
  5678. function jssPropsSort() {
  5679. var sort = function sort(prop0, prop1) {
  5680. if (prop0.length === prop1.length) {
  5681. return prop0 > prop1 ? 1 : -1;
  5682. }
  5683.  
  5684. return prop0.length - prop1.length;
  5685. };
  5686.  
  5687. return {
  5688. onProcessStyle: function onProcessStyle(style, rule) {
  5689. if (rule.type !== 'style') return style;
  5690. var newStyle = {};
  5691. var props = Object.keys(style).sort(sort);
  5692.  
  5693. for (var i = 0; i < props.length; i++) {
  5694. newStyle[props[i]] = style[props[i]];
  5695. }
  5696.  
  5697. return newStyle;
  5698. }
  5699. };
  5700. }
  5701.  
  5702. function jssPreset() {
  5703. return {
  5704. plugins: [functionPlugin(), jssGlobal(), jssNested(), camelCase(), defaultUnit(), // Disable the vendor prefixer server-side, it does nothing.
  5705. // This way, we can get a performance boost.
  5706. // In the documentation, we are using `autoprefixer` to solve this problem.
  5707. typeof window === 'undefined' ? null : jssVendorPrefixer(), jssPropsSort()]
  5708. };
  5709. }
  5710.  
  5711. function mergeClasses() {
  5712. var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  5713. var baseClasses = options.baseClasses,
  5714. newClasses = options.newClasses;
  5715. options.Component;
  5716.  
  5717. if (!newClasses) {
  5718. return baseClasses;
  5719. }
  5720.  
  5721. var nextClasses = _extends$1({}, baseClasses);
  5722.  
  5723. Object.keys(newClasses).forEach(function (key) {
  5724.  
  5725. if (newClasses[key]) {
  5726. nextClasses[key] = "".concat(baseClasses[key], " ").concat(newClasses[key]);
  5727. }
  5728. });
  5729. return nextClasses;
  5730. }
  5731.  
  5732. // Used https://github.com/thinkloop/multi-key-cache as inspiration
  5733. var multiKeyStore = {
  5734. set: function set(cache, key1, key2, value) {
  5735. var subCache = cache.get(key1);
  5736.  
  5737. if (!subCache) {
  5738. subCache = new Map();
  5739. cache.set(key1, subCache);
  5740. }
  5741.  
  5742. subCache.set(key2, value);
  5743. },
  5744. get: function get(cache, key1, key2) {
  5745. var subCache = cache.get(key1);
  5746. return subCache ? subCache.get(key2) : undefined;
  5747. },
  5748. delete: function _delete(cache, key1, key2) {
  5749. var subCache = cache.get(key1);
  5750. subCache.delete(key2);
  5751. }
  5752. };
  5753.  
  5754. var ThemeContext = /*#__PURE__*/React__default['default'].createContext(null);
  5755.  
  5756. function useTheme$1() {
  5757. var theme = React__default['default'].useContext(ThemeContext);
  5758.  
  5759. return theme;
  5760. }
  5761.  
  5762. var jss = create(jssPreset()); // Use a singleton or the provided one by the context.
  5763. //
  5764. // The counter-based approach doesn't tolerate any mistake.
  5765. // It's much safer to use the same counter everywhere.
  5766.  
  5767. var generateClassName = createGenerateClassName(); // Exported for test purposes
  5768.  
  5769. var sheetsManager = new Map();
  5770. var defaultOptions = {
  5771. disableGeneration: false,
  5772. generateClassName: generateClassName,
  5773. jss: jss,
  5774. sheetsCache: null,
  5775. sheetsManager: sheetsManager,
  5776. sheetsRegistry: null
  5777. };
  5778. var StylesContext = /*#__PURE__*/React__default['default'].createContext(defaultOptions);
  5779.  
  5780. /* eslint-disable import/prefer-default-export */
  5781. // Global index counter to preserve source order.
  5782. // We create the style sheet during the creation of the component,
  5783. // children are handled after the parents, so the order of style elements would be parent->child.
  5784. // It is a problem though when a parent passes a className
  5785. // which needs to override any child's styles.
  5786. // StyleSheet of the child has a higher specificity, because of the source order.
  5787. // So our solution is to render sheets them in the reverse order child->sheet, so
  5788. // that parent has a higher specificity.
  5789. var indexCounter = -1e9;
  5790. function increment() {
  5791. indexCounter += 1;
  5792.  
  5793. return indexCounter;
  5794. }
  5795.  
  5796. // We use the same empty object to ref count the styles that don't need a theme object.
  5797. var noopTheme = {};
  5798.  
  5799. function getStylesCreator(stylesOrCreator) {
  5800. var themingEnabled = typeof stylesOrCreator === 'function';
  5801.  
  5802. return {
  5803. create: function create(theme, name) {
  5804. var styles;
  5805.  
  5806. try {
  5807. styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
  5808. } catch (err) {
  5809.  
  5810. throw err;
  5811. }
  5812.  
  5813. if (!name || !theme.overrides || !theme.overrides[name]) {
  5814. return styles;
  5815. }
  5816.  
  5817. var overrides = theme.overrides[name];
  5818.  
  5819. var stylesWithOverrides = _extends$1({}, styles);
  5820.  
  5821. Object.keys(overrides).forEach(function (key) {
  5822.  
  5823. stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
  5824. });
  5825. return stylesWithOverrides;
  5826. },
  5827. options: {}
  5828. };
  5829. }
  5830.  
  5831. function getClasses(_ref, classes, Component) {
  5832. var state = _ref.state,
  5833. stylesOptions = _ref.stylesOptions;
  5834.  
  5835. if (stylesOptions.disableGeneration) {
  5836. return classes || {};
  5837. }
  5838.  
  5839. if (!state.cacheClasses) {
  5840. state.cacheClasses = {
  5841. // Cache for the finalized classes value.
  5842. value: null,
  5843. // Cache for the last used classes prop pointer.
  5844. lastProp: null,
  5845. // Cache for the last used rendered classes pointer.
  5846. lastJSS: {}
  5847. };
  5848. } // Tracks if either the rendered classes or classes prop has changed,
  5849. // requiring the generation of a new finalized classes object.
  5850.  
  5851.  
  5852. var generate = false;
  5853.  
  5854. if (state.classes !== state.cacheClasses.lastJSS) {
  5855. state.cacheClasses.lastJSS = state.classes;
  5856. generate = true;
  5857. }
  5858.  
  5859. if (classes !== state.cacheClasses.lastProp) {
  5860. state.cacheClasses.lastProp = classes;
  5861. generate = true;
  5862. }
  5863.  
  5864. if (generate) {
  5865. state.cacheClasses.value = mergeClasses({
  5866. baseClasses: state.cacheClasses.lastJSS,
  5867. newClasses: classes,
  5868. Component: Component
  5869. });
  5870. }
  5871.  
  5872. return state.cacheClasses.value;
  5873. }
  5874.  
  5875. function attach(_ref2, props) {
  5876. var state = _ref2.state,
  5877. theme = _ref2.theme,
  5878. stylesOptions = _ref2.stylesOptions,
  5879. stylesCreator = _ref2.stylesCreator,
  5880. name = _ref2.name;
  5881.  
  5882. if (stylesOptions.disableGeneration) {
  5883. return;
  5884. }
  5885.  
  5886. var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
  5887.  
  5888. if (!sheetManager) {
  5889. sheetManager = {
  5890. refs: 0,
  5891. staticSheet: null,
  5892. dynamicStyles: null
  5893. };
  5894. multiKeyStore.set(stylesOptions.sheetsManager, stylesCreator, theme, sheetManager);
  5895. }
  5896.  
  5897. var options = _extends$1({}, stylesCreator.options, stylesOptions, {
  5898. theme: theme,
  5899. flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
  5900. });
  5901.  
  5902. options.generateId = options.serverGenerateClassName || options.generateClassName;
  5903. var sheetsRegistry = stylesOptions.sheetsRegistry;
  5904.  
  5905. if (sheetManager.refs === 0) {
  5906. var staticSheet;
  5907.  
  5908. if (stylesOptions.sheetsCache) {
  5909. staticSheet = multiKeyStore.get(stylesOptions.sheetsCache, stylesCreator, theme);
  5910. }
  5911.  
  5912. var styles = stylesCreator.create(theme, name);
  5913.  
  5914. if (!staticSheet) {
  5915. staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends$1({
  5916. link: false
  5917. }, options));
  5918. staticSheet.attach();
  5919.  
  5920. if (stylesOptions.sheetsCache) {
  5921. multiKeyStore.set(stylesOptions.sheetsCache, stylesCreator, theme, staticSheet);
  5922. }
  5923. }
  5924.  
  5925. if (sheetsRegistry) {
  5926. sheetsRegistry.add(staticSheet);
  5927. }
  5928.  
  5929. sheetManager.staticSheet = staticSheet;
  5930. sheetManager.dynamicStyles = getDynamicStyles(styles);
  5931. }
  5932.  
  5933. if (sheetManager.dynamicStyles) {
  5934. var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends$1({
  5935. link: true
  5936. }, options));
  5937. dynamicSheet.update(props);
  5938. dynamicSheet.attach();
  5939. state.dynamicSheet = dynamicSheet;
  5940. state.classes = mergeClasses({
  5941. baseClasses: sheetManager.staticSheet.classes,
  5942. newClasses: dynamicSheet.classes
  5943. });
  5944.  
  5945. if (sheetsRegistry) {
  5946. sheetsRegistry.add(dynamicSheet);
  5947. }
  5948. } else {
  5949. state.classes = sheetManager.staticSheet.classes;
  5950. }
  5951.  
  5952. sheetManager.refs += 1;
  5953. }
  5954.  
  5955. function update$1(_ref3, props) {
  5956. var state = _ref3.state;
  5957.  
  5958. if (state.dynamicSheet) {
  5959. state.dynamicSheet.update(props);
  5960. }
  5961. }
  5962.  
  5963. function detach(_ref4) {
  5964. var state = _ref4.state,
  5965. theme = _ref4.theme,
  5966. stylesOptions = _ref4.stylesOptions,
  5967. stylesCreator = _ref4.stylesCreator;
  5968.  
  5969. if (stylesOptions.disableGeneration) {
  5970. return;
  5971. }
  5972.  
  5973. var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);
  5974. sheetManager.refs -= 1;
  5975. var sheetsRegistry = stylesOptions.sheetsRegistry;
  5976.  
  5977. if (sheetManager.refs === 0) {
  5978. multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);
  5979. stylesOptions.jss.removeStyleSheet(sheetManager.staticSheet);
  5980.  
  5981. if (sheetsRegistry) {
  5982. sheetsRegistry.remove(sheetManager.staticSheet);
  5983. }
  5984. }
  5985.  
  5986. if (state.dynamicSheet) {
  5987. stylesOptions.jss.removeStyleSheet(state.dynamicSheet);
  5988.  
  5989. if (sheetsRegistry) {
  5990. sheetsRegistry.remove(state.dynamicSheet);
  5991. }
  5992. }
  5993. }
  5994.  
  5995. function useSynchronousEffect(func, values) {
  5996. var key = React__default['default'].useRef([]);
  5997. var output; // Store "generation" key. Just returns a new object every time
  5998.  
  5999. var currentKey = React__default['default'].useMemo(function () {
  6000. return {};
  6001. }, values); // eslint-disable-line react-hooks/exhaustive-deps
  6002. // "the first render", or "memo dropped the value"
  6003.  
  6004. if (key.current !== currentKey) {
  6005. key.current = currentKey;
  6006. output = func();
  6007. }
  6008.  
  6009. React__default['default'].useEffect(function () {
  6010. return function () {
  6011. if (output) {
  6012. output();
  6013. }
  6014. };
  6015. }, [currentKey] // eslint-disable-line react-hooks/exhaustive-deps
  6016. );
  6017. }
  6018.  
  6019. function makeStyles$1(stylesOrCreator) {
  6020. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  6021.  
  6022. var name = options.name,
  6023. classNamePrefixOption = options.classNamePrefix,
  6024. Component = options.Component,
  6025. _options$defaultTheme = options.defaultTheme,
  6026. defaultTheme = _options$defaultTheme === void 0 ? noopTheme : _options$defaultTheme,
  6027. stylesOptions2 = _objectWithoutProperties(options, ["name", "classNamePrefix", "Component", "defaultTheme"]);
  6028.  
  6029. var stylesCreator = getStylesCreator(stylesOrCreator);
  6030. var classNamePrefix = name || classNamePrefixOption || 'makeStyles';
  6031. stylesCreator.options = {
  6032. index: increment(),
  6033. name: name,
  6034. meta: classNamePrefix,
  6035. classNamePrefix: classNamePrefix
  6036. };
  6037.  
  6038. var useStyles = function useStyles() {
  6039. var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  6040. var theme = useTheme$1() || defaultTheme;
  6041.  
  6042. var stylesOptions = _extends$1({}, React__default['default'].useContext(StylesContext), stylesOptions2);
  6043.  
  6044. var instance = React__default['default'].useRef();
  6045. var shouldUpdate = React__default['default'].useRef();
  6046. useSynchronousEffect(function () {
  6047. var current = {
  6048. name: name,
  6049. state: {},
  6050. stylesCreator: stylesCreator,
  6051. stylesOptions: stylesOptions,
  6052. theme: theme
  6053. };
  6054. attach(current, props);
  6055. shouldUpdate.current = false;
  6056. instance.current = current;
  6057. return function () {
  6058. detach(current);
  6059. };
  6060. }, [theme, stylesCreator]);
  6061. React__default['default'].useEffect(function () {
  6062. if (shouldUpdate.current) {
  6063. update$1(instance.current, props);
  6064. }
  6065.  
  6066. shouldUpdate.current = true;
  6067. });
  6068. var classes = getClasses(instance.current, props.classes, Component);
  6069.  
  6070. return classes;
  6071. };
  6072.  
  6073. return useStyles;
  6074. }
  6075.  
  6076. function toVal(mix) {
  6077. var k,
  6078. y,
  6079. str = '';
  6080.  
  6081. if (typeof mix === 'string' || typeof mix === 'number') {
  6082. str += mix;
  6083. } else if (typeof mix === 'object') {
  6084. if (Array.isArray(mix)) {
  6085. for (k = 0; k < mix.length; k++) {
  6086. if (mix[k]) {
  6087. if (y = toVal(mix[k])) {
  6088. str && (str += ' ');
  6089. str += y;
  6090. }
  6091. }
  6092. }
  6093. } else {
  6094. for (k in mix) {
  6095. if (mix[k]) {
  6096. str && (str += ' ');
  6097. str += k;
  6098. }
  6099. }
  6100. }
  6101. }
  6102.  
  6103. return str;
  6104. }
  6105.  
  6106. function clsx () {
  6107. var i = 0,
  6108. tmp,
  6109. x,
  6110. str = '';
  6111.  
  6112. while (i < arguments.length) {
  6113. if (tmp = arguments[i++]) {
  6114. if (x = toVal(tmp)) {
  6115. str && (str += ' ');
  6116. str += x;
  6117. }
  6118. }
  6119. }
  6120.  
  6121. return str;
  6122. }
  6123.  
  6124. var reactIs = reactIs$1.exports;
  6125. /**
  6126. * Copyright 2015, Yahoo! Inc.
  6127. * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  6128. */
  6129.  
  6130.  
  6131. var REACT_STATICS = {
  6132. childContextTypes: true,
  6133. contextType: true,
  6134. contextTypes: true,
  6135. defaultProps: true,
  6136. displayName: true,
  6137. getDefaultProps: true,
  6138. getDerivedStateFromError: true,
  6139. getDerivedStateFromProps: true,
  6140. mixins: true,
  6141. propTypes: true,
  6142. type: true
  6143. };
  6144. var KNOWN_STATICS = {
  6145. name: true,
  6146. length: true,
  6147. prototype: true,
  6148. caller: true,
  6149. callee: true,
  6150. arguments: true,
  6151. arity: true
  6152. };
  6153. var FORWARD_REF_STATICS = {
  6154. '$$typeof': true,
  6155. render: true,
  6156. defaultProps: true,
  6157. displayName: true,
  6158. propTypes: true
  6159. };
  6160. var MEMO_STATICS = {
  6161. '$$typeof': true,
  6162. compare: true,
  6163. defaultProps: true,
  6164. displayName: true,
  6165. propTypes: true,
  6166. type: true
  6167. };
  6168. var TYPE_STATICS = {};
  6169. TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
  6170. TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
  6171.  
  6172. function getStatics(component) {
  6173. // React v16.11 and below
  6174. if (reactIs.isMemo(component)) {
  6175. return MEMO_STATICS;
  6176. } // React v16.12 and above
  6177.  
  6178.  
  6179. return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
  6180. }
  6181.  
  6182. var defineProperty$1 = Object.defineProperty;
  6183. var getOwnPropertyNames = Object.getOwnPropertyNames;
  6184. var getOwnPropertySymbols = Object.getOwnPropertySymbols;
  6185. var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
  6186. var getPrototypeOf = Object.getPrototypeOf;
  6187. var objectPrototype = Object.prototype;
  6188.  
  6189. function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
  6190. if (typeof sourceComponent !== 'string') {
  6191. // don't hoist over string (html) components
  6192. if (objectPrototype) {
  6193. var inheritedComponent = getPrototypeOf(sourceComponent);
  6194.  
  6195. if (inheritedComponent && inheritedComponent !== objectPrototype) {
  6196. hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
  6197. }
  6198. }
  6199.  
  6200. var keys = getOwnPropertyNames(sourceComponent);
  6201.  
  6202. if (getOwnPropertySymbols) {
  6203. keys = keys.concat(getOwnPropertySymbols(sourceComponent));
  6204. }
  6205.  
  6206. var targetStatics = getStatics(targetComponent);
  6207. var sourceStatics = getStatics(sourceComponent);
  6208.  
  6209. for (var i = 0; i < keys.length; ++i) {
  6210. var key = keys[i];
  6211.  
  6212. if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
  6213. var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
  6214.  
  6215. try {
  6216. // Avoid failures from read-only properties
  6217. defineProperty$1(targetComponent, key, descriptor);
  6218. } catch (e) {}
  6219. }
  6220. }
  6221. }
  6222.  
  6223. return targetComponent;
  6224. }
  6225.  
  6226. var hoistNonReactStatics_cjs = hoistNonReactStatics;
  6227.  
  6228. function omit(input, fields) {
  6229. var output = {};
  6230. Object.keys(input).forEach(function (prop) {
  6231. if (fields.indexOf(prop) === -1) {
  6232. output[prop] = input[prop];
  6233. }
  6234. });
  6235. return output;
  6236. } // styled-components's API removes the mapping between components and styles.
  6237. // Using components as a low-level styling construct can be simpler.
  6238.  
  6239.  
  6240. function styled$1(Component) {
  6241. var componentCreator = function componentCreator(style) {
  6242. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  6243.  
  6244. var name = options.name,
  6245. stylesOptions = _objectWithoutProperties(options, ["name"]);
  6246.  
  6247. var classNamePrefix = name;
  6248.  
  6249. var stylesOrCreator = typeof style === 'function' ? function (theme) {
  6250. return {
  6251. root: function root(props) {
  6252. return style(_extends$1({
  6253. theme: theme
  6254. }, props));
  6255. }
  6256. };
  6257. } : {
  6258. root: style
  6259. };
  6260. var useStyles = makeStyles$1(stylesOrCreator, _extends$1({
  6261. Component: Component,
  6262. name: name || Component.displayName,
  6263. classNamePrefix: classNamePrefix
  6264. }, stylesOptions));
  6265. var filterProps;
  6266.  
  6267. if (style.filterProps) {
  6268. filterProps = style.filterProps;
  6269. delete style.filterProps;
  6270. }
  6271. /* eslint-disable react/forbid-foreign-prop-types */
  6272.  
  6273.  
  6274. if (style.propTypes) {
  6275. delete style.propTypes;
  6276. }
  6277. /* eslint-enable react/forbid-foreign-prop-types */
  6278.  
  6279.  
  6280. var StyledComponent = /*#__PURE__*/React__default['default'].forwardRef(function StyledComponent(props, ref) {
  6281. var children = props.children,
  6282. classNameProp = props.className,
  6283. clone = props.clone,
  6284. ComponentProp = props.component,
  6285. other = _objectWithoutProperties(props, ["children", "className", "clone", "component"]);
  6286.  
  6287. var classes = useStyles(props);
  6288. var className = clsx(classes.root, classNameProp);
  6289. var spread = other;
  6290.  
  6291. if (filterProps) {
  6292. spread = omit(spread, filterProps);
  6293. }
  6294.  
  6295. if (clone) {
  6296. return /*#__PURE__*/React__default['default'].cloneElement(children, _extends$1({
  6297. className: clsx(children.props.className, className)
  6298. }, spread));
  6299. }
  6300.  
  6301. if (typeof children === 'function') {
  6302. return children(_extends$1({
  6303. className: className
  6304. }, spread));
  6305. }
  6306.  
  6307. var FinalComponent = ComponentProp || Component;
  6308. return /*#__PURE__*/React__default['default'].createElement(FinalComponent, _extends$1({
  6309. ref: ref,
  6310. className: className
  6311. }, spread), children);
  6312. });
  6313.  
  6314. hoistNonReactStatics_cjs(StyledComponent, Component);
  6315. return StyledComponent;
  6316. };
  6317.  
  6318. return componentCreator;
  6319. }
  6320.  
  6321. function mergeOuterLocalTheme(outerTheme, localTheme) {
  6322. if (typeof localTheme === 'function') {
  6323. var mergedTheme = localTheme(outerTheme);
  6324.  
  6325. return mergedTheme;
  6326. }
  6327.  
  6328. return _extends$1({}, outerTheme, localTheme);
  6329. }
  6330. /**
  6331. * This component takes a `theme` prop.
  6332. * It makes the `theme` available down the React tree thanks to React context.
  6333. * This component should preferably be used at **the root of your component tree**.
  6334. */
  6335.  
  6336.  
  6337. function ThemeProvider(props) {
  6338. var children = props.children,
  6339. localTheme = props.theme;
  6340. var outerTheme = useTheme$1();
  6341.  
  6342. var theme = React__default['default'].useMemo(function () {
  6343. var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
  6344.  
  6345. if (output != null) {
  6346. output[nested] = outerTheme !== null;
  6347. }
  6348.  
  6349. return output;
  6350. }, [localTheme, outerTheme]);
  6351. return /*#__PURE__*/React__default['default'].createElement(ThemeContext.Provider, {
  6352. value: theme
  6353. }, children);
  6354. }
  6355.  
  6356. // It does not modify the component passed to it;
  6357. // instead, it returns a new component, with a `classes` property.
  6358.  
  6359. var withStyles$1 = function withStyles(stylesOrCreator) {
  6360. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  6361. return function (Component) {
  6362. var defaultTheme = options.defaultTheme,
  6363. _options$withTheme = options.withTheme,
  6364. withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
  6365. name = options.name,
  6366. stylesOptions = _objectWithoutProperties(options, ["defaultTheme", "withTheme", "name"]);
  6367.  
  6368. var classNamePrefix = name;
  6369.  
  6370. var useStyles = makeStyles$1(stylesOrCreator, _extends$1({
  6371. defaultTheme: defaultTheme,
  6372. Component: Component,
  6373. name: name || Component.displayName,
  6374. classNamePrefix: classNamePrefix
  6375. }, stylesOptions));
  6376. var WithStyles = /*#__PURE__*/React__default['default'].forwardRef(function WithStyles(props, ref) {
  6377. props.classes;
  6378. var innerRef = props.innerRef,
  6379. other = _objectWithoutProperties(props, ["classes", "innerRef"]); // The wrapper receives only user supplied props, which could be a subset of
  6380. // the actual props Component might receive due to merging with defaultProps.
  6381. // So copying it here would give us the same result in the wrapper as well.
  6382.  
  6383.  
  6384. var classes = useStyles(_extends$1({}, Component.defaultProps, props));
  6385. var theme;
  6386. var more = other;
  6387.  
  6388. if (typeof name === 'string' || withTheme) {
  6389. // name and withTheme are invariant in the outer scope
  6390. // eslint-disable-next-line react-hooks/rules-of-hooks
  6391. theme = useTheme$1() || defaultTheme;
  6392.  
  6393. if (name) {
  6394. more = getThemeProps({
  6395. theme: theme,
  6396. name: name,
  6397. props: other
  6398. });
  6399. } // Provide the theme to the wrapped component.
  6400. // So we don't have to use the `withTheme()` Higher-order Component.
  6401.  
  6402.  
  6403. if (withTheme && !more.theme) {
  6404. more.theme = theme;
  6405. }
  6406. }
  6407.  
  6408. return /*#__PURE__*/React__default['default'].createElement(Component, _extends$1({
  6409. ref: innerRef || ref,
  6410. classes: classes
  6411. }, more));
  6412. });
  6413.  
  6414. hoistNonReactStatics_cjs(WithStyles, Component);
  6415.  
  6416. return WithStyles;
  6417. };
  6418. };
  6419.  
  6420. // To remove in v5
  6421.  
  6422. function createStyles(styles) {
  6423. // warning(
  6424. // warnOnce,
  6425. // [
  6426. // 'Material-UI: createStyles from @material-ui/core/styles is deprecated.',
  6427. // 'Please use @material-ui/styles/createStyles',
  6428. // ].join('\n'),
  6429. // );
  6430. // warnOnce = true;
  6431. return createStyles$1(styles);
  6432. }
  6433.  
  6434. var defaultTheme = createMuiTheme();
  6435.  
  6436. function makeStyles(stylesOrCreator) {
  6437. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  6438. return makeStyles$1(stylesOrCreator, _extends$1({
  6439. defaultTheme: defaultTheme
  6440. }, options));
  6441. }
  6442.  
  6443. var styled = function styled(Component) {
  6444. var componentCreator = styled$1(Component);
  6445. return function (style, options) {
  6446. return componentCreator(style, _extends$1({
  6447. defaultTheme: defaultTheme
  6448. }, options));
  6449. };
  6450. };
  6451.  
  6452. function useTheme() {
  6453. var theme = useTheme$1() || defaultTheme;
  6454.  
  6455. return theme;
  6456. }
  6457.  
  6458. function withStyles(stylesOrCreator, options) {
  6459. return withStyles$1(stylesOrCreator, _extends$1({
  6460. defaultTheme: defaultTheme
  6461. }, options));
  6462. }
  6463.  
  6464. //
  6465. // A strict capitalization should uppercase the first letter of each word a the sentence.
  6466. // We only handle the first word.
  6467.  
  6468. function capitalize(string) {
  6469. if (typeof string !== 'string') {
  6470. throw new Error(formatMuiErrorMessage(7));
  6471. }
  6472.  
  6473. return string.charAt(0).toUpperCase() + string.slice(1);
  6474. }
  6475.  
  6476. /**
  6477. * Safe chained function
  6478. *
  6479. * Will only create a new function if needed,
  6480. * otherwise will pass back existing functions or null.
  6481. *
  6482. * @param {function} functions to chain
  6483. * @returns {function|null}
  6484. */
  6485. function createChainedFunction() {
  6486. for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
  6487. funcs[_key] = arguments[_key];
  6488. }
  6489.  
  6490. return funcs.reduce(function (acc, func) {
  6491. if (func == null) {
  6492. return acc;
  6493. }
  6494.  
  6495. return function chainedFunction() {
  6496. for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  6497. args[_key2] = arguments[_key2];
  6498. }
  6499.  
  6500. acc.apply(this, args);
  6501. func.apply(this, args);
  6502. };
  6503. }, function () {});
  6504. }
  6505.  
  6506. var styles$g = function styles(theme) {
  6507. return {
  6508. /* Styles applied to the root element. */
  6509. root: {
  6510. userSelect: 'none',
  6511. width: '1em',
  6512. height: '1em',
  6513. display: 'inline-block',
  6514. fill: 'currentColor',
  6515. flexShrink: 0,
  6516. fontSize: theme.typography.pxToRem(24),
  6517. transition: theme.transitions.create('fill', {
  6518. duration: theme.transitions.duration.shorter
  6519. })
  6520. },
  6521.  
  6522. /* Styles applied to the root element if `color="primary"`. */
  6523. colorPrimary: {
  6524. color: theme.palette.primary.main
  6525. },
  6526.  
  6527. /* Styles applied to the root element if `color="secondary"`. */
  6528. colorSecondary: {
  6529. color: theme.palette.secondary.main
  6530. },
  6531.  
  6532. /* Styles applied to the root element if `color="action"`. */
  6533. colorAction: {
  6534. color: theme.palette.action.active
  6535. },
  6536.  
  6537. /* Styles applied to the root element if `color="error"`. */
  6538. colorError: {
  6539. color: theme.palette.error.main
  6540. },
  6541.  
  6542. /* Styles applied to the root element if `color="disabled"`. */
  6543. colorDisabled: {
  6544. color: theme.palette.action.disabled
  6545. },
  6546.  
  6547. /* Styles applied to the root element if `fontSize="inherit"`. */
  6548. fontSizeInherit: {
  6549. fontSize: 'inherit'
  6550. },
  6551.  
  6552. /* Styles applied to the root element if `fontSize="small"`. */
  6553. fontSizeSmall: {
  6554. fontSize: theme.typography.pxToRem(20)
  6555. },
  6556.  
  6557. /* Styles applied to the root element if `fontSize="large"`. */
  6558. fontSizeLarge: {
  6559. fontSize: theme.typography.pxToRem(35)
  6560. }
  6561. };
  6562. };
  6563. var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(props, ref) {
  6564. var children = props.children,
  6565. classes = props.classes,
  6566. className = props.className,
  6567. _props$color = props.color,
  6568. color = _props$color === void 0 ? 'inherit' : _props$color,
  6569. _props$component = props.component,
  6570. Component = _props$component === void 0 ? 'svg' : _props$component,
  6571. _props$fontSize = props.fontSize,
  6572. fontSize = _props$fontSize === void 0 ? 'default' : _props$fontSize,
  6573. htmlColor = props.htmlColor,
  6574. titleAccess = props.titleAccess,
  6575. _props$viewBox = props.viewBox,
  6576. viewBox = _props$viewBox === void 0 ? '0 0 24 24' : _props$viewBox,
  6577. other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"]);
  6578.  
  6579. return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
  6580. className: clsx(classes.root, className, color !== 'inherit' && classes["color".concat(capitalize(color))], fontSize !== 'default' && classes["fontSize".concat(capitalize(fontSize))]),
  6581. focusable: "false",
  6582. viewBox: viewBox,
  6583. color: htmlColor,
  6584. "aria-hidden": titleAccess ? undefined : true,
  6585. role: titleAccess ? 'img' : undefined,
  6586. ref: ref
  6587. }, other), children, titleAccess ? /*#__PURE__*/React__namespace.createElement("title", null, titleAccess) : null);
  6588. });
  6589. SvgIcon.muiName = 'SvgIcon';
  6590. var SvgIcon$1 = withStyles(styles$g, {
  6591. name: 'MuiSvgIcon'
  6592. })(SvgIcon);
  6593.  
  6594. /**
  6595. * Private module reserved for @material-ui/x packages.
  6596. */
  6597.  
  6598. function createSvgIcon$1(path, displayName) {
  6599. var Component = function Component(props, ref) {
  6600. return /*#__PURE__*/React__default['default'].createElement(SvgIcon$1, _extends$1({
  6601. ref: ref
  6602. }, props), path);
  6603. };
  6604.  
  6605. Component.muiName = SvgIcon$1.muiName;
  6606. return /*#__PURE__*/React__default['default'].memo( /*#__PURE__*/React__default['default'].forwardRef(Component));
  6607. }
  6608.  
  6609. // Corresponds to 10 frames at 60 Hz.
  6610. // A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
  6611. function debounce$1(func) {
  6612. var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;
  6613. var timeout;
  6614.  
  6615. function debounced() {
  6616. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  6617. args[_key] = arguments[_key];
  6618. } // eslint-disable-next-line consistent-this
  6619.  
  6620.  
  6621. var that = this;
  6622.  
  6623. var later = function later() {
  6624. func.apply(that, args);
  6625. };
  6626.  
  6627. clearTimeout(timeout);
  6628. timeout = setTimeout(later, wait);
  6629. }
  6630.  
  6631. debounced.clear = function () {
  6632. clearTimeout(timeout);
  6633. };
  6634.  
  6635. return debounced;
  6636. }
  6637.  
  6638. function deprecatedPropType(validator, reason) {
  6639. {
  6640. return function () {
  6641. return null;
  6642. };
  6643. }
  6644. }
  6645.  
  6646. function isMuiElement(element, muiNames) {
  6647. return /*#__PURE__*/ /*#__PURE__*/React__namespace.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
  6648. }
  6649.  
  6650. function ownerDocument(node) {
  6651. return node && node.ownerDocument || document;
  6652. }
  6653.  
  6654. function ownerWindow(node) {
  6655. var doc = ownerDocument(node);
  6656. return doc.defaultView || window;
  6657. }
  6658.  
  6659. function requirePropFactory(componentNameInError) {
  6660. {
  6661. return function () {
  6662. return null;
  6663. };
  6664. }
  6665. }
  6666.  
  6667. // TODO v5: consider to make it private
  6668. function setRef(ref, value) {
  6669. if (typeof ref === 'function') {
  6670. ref(value);
  6671. } else if (ref) {
  6672. ref.current = value;
  6673. }
  6674. }
  6675.  
  6676. function unsupportedProp(props, propName, componentName, location, propFullName) {
  6677. {
  6678. return null;
  6679. }
  6680. }
  6681.  
  6682. /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
  6683. function useControlled(_ref) {
  6684. var controlled = _ref.controlled,
  6685. defaultProp = _ref.default;
  6686. _ref.name;
  6687. _ref.state;
  6688.  
  6689. var _React$useRef = React__namespace.useRef(controlled !== undefined),
  6690. isControlled = _React$useRef.current;
  6691.  
  6692. var _React$useState = React__namespace.useState(defaultProp),
  6693. valueState = _React$useState[0],
  6694. setValue = _React$useState[1];
  6695.  
  6696. var value = isControlled ? controlled : valueState;
  6697.  
  6698. var setValueIfUncontrolled = React__namespace.useCallback(function (newValue) {
  6699. if (!isControlled) {
  6700. setValue(newValue);
  6701. }
  6702. }, []);
  6703. return [value, setValueIfUncontrolled];
  6704. }
  6705.  
  6706. var useEnhancedEffect$4 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
  6707. /**
  6708. * https://github.com/facebook/react/issues/14099#issuecomment-440013892
  6709. *
  6710. * @param {function} fn
  6711. */
  6712.  
  6713. function useEventCallback(fn) {
  6714. var ref = React__namespace.useRef(fn);
  6715. useEnhancedEffect$4(function () {
  6716. ref.current = fn;
  6717. });
  6718. return React__namespace.useCallback(function () {
  6719. return (ref.current).apply(void 0, arguments);
  6720. }, []);
  6721. }
  6722.  
  6723. function useForkRef(refA, refB) {
  6724. /**
  6725. * This will create a new function if the ref props change and are defined.
  6726. * This means react will call the old forkRef with `null` and the new forkRef
  6727. * with the ref. Cleanup naturally emerges from this behavior
  6728. */
  6729. return React__namespace.useMemo(function () {
  6730. if (refA == null && refB == null) {
  6731. return null;
  6732. }
  6733.  
  6734. return function (refValue) {
  6735. setRef(refA, refValue);
  6736. setRef(refB, refValue);
  6737. };
  6738. }, [refA, refB]);
  6739. }
  6740.  
  6741. /**
  6742. * Private module reserved for @material-ui/x packages.
  6743. */
  6744.  
  6745. function useId(idOverride) {
  6746. var _React$useState = React__namespace.useState(idOverride),
  6747. defaultId = _React$useState[0],
  6748. setDefaultId = _React$useState[1];
  6749.  
  6750. var id = idOverride || defaultId;
  6751. React__namespace.useEffect(function () {
  6752. if (defaultId == null) {
  6753. // Fallback to this default id when possible.
  6754. // Use the random value for client-side rendering only.
  6755. // We can't use it server-side.
  6756. setDefaultId("mui-".concat(Math.round(Math.random() * 1e5)));
  6757. }
  6758. }, [defaultId]);
  6759. return id;
  6760. }
  6761.  
  6762. // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
  6763. var hadKeyboardEvent = true;
  6764. var hadFocusVisibleRecently = false;
  6765. var hadFocusVisibleRecentlyTimeout = null;
  6766. var inputTypesWhitelist = {
  6767. text: true,
  6768. search: true,
  6769. url: true,
  6770. tel: true,
  6771. email: true,
  6772. password: true,
  6773. number: true,
  6774. date: true,
  6775. month: true,
  6776. week: true,
  6777. time: true,
  6778. datetime: true,
  6779. 'datetime-local': true
  6780. };
  6781. /**
  6782. * Computes whether the given element should automatically trigger the
  6783. * `focus-visible` class being added, i.e. whether it should always match
  6784. * `:focus-visible` when focused.
  6785. * @param {Element} node
  6786. * @return {boolean}
  6787. */
  6788.  
  6789. function focusTriggersKeyboardModality(node) {
  6790. var type = node.type,
  6791. tagName = node.tagName;
  6792.  
  6793. if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
  6794. return true;
  6795. }
  6796.  
  6797. if (tagName === 'TEXTAREA' && !node.readOnly) {
  6798. return true;
  6799. }
  6800.  
  6801. if (node.isContentEditable) {
  6802. return true;
  6803. }
  6804.  
  6805. return false;
  6806. }
  6807. /**
  6808. * Keep track of our keyboard modality state with `hadKeyboardEvent`.
  6809. * If the most recent user interaction was via the keyboard;
  6810. * and the key press did not include a meta, alt/option, or control key;
  6811. * then the modality is keyboard. Otherwise, the modality is not keyboard.
  6812. * @param {KeyboardEvent} event
  6813. */
  6814.  
  6815.  
  6816. function handleKeyDown(event) {
  6817. if (event.metaKey || event.altKey || event.ctrlKey) {
  6818. return;
  6819. }
  6820.  
  6821. hadKeyboardEvent = true;
  6822. }
  6823. /**
  6824. * If at any point a user clicks with a pointing device, ensure that we change
  6825. * the modality away from keyboard.
  6826. * This avoids the situation where a user presses a key on an already focused
  6827. * element, and then clicks on a different element, focusing it with a
  6828. * pointing device, while we still think we're in keyboard modality.
  6829. */
  6830.  
  6831.  
  6832. function handlePointerDown() {
  6833. hadKeyboardEvent = false;
  6834. }
  6835.  
  6836. function handleVisibilityChange() {
  6837. if (this.visibilityState === 'hidden') {
  6838. // If the tab becomes active again, the browser will handle calling focus
  6839. // on the element (Safari actually calls it twice).
  6840. // If this tab change caused a blur on an element with focus-visible,
  6841. // re-apply the class when the user switches back to the tab.
  6842. if (hadFocusVisibleRecently) {
  6843. hadKeyboardEvent = true;
  6844. }
  6845. }
  6846. }
  6847.  
  6848. function prepare(doc) {
  6849. doc.addEventListener('keydown', handleKeyDown, true);
  6850. doc.addEventListener('mousedown', handlePointerDown, true);
  6851. doc.addEventListener('pointerdown', handlePointerDown, true);
  6852. doc.addEventListener('touchstart', handlePointerDown, true);
  6853. doc.addEventListener('visibilitychange', handleVisibilityChange, true);
  6854. }
  6855.  
  6856. function isFocusVisible(event) {
  6857. var target = event.target;
  6858.  
  6859. try {
  6860. return target.matches(':focus-visible');
  6861. } catch (error) {} // browsers not implementing :focus-visible will throw a SyntaxError
  6862. // we use our own heuristic for those browsers
  6863. // rethrow might be better if it's not the expected error but do we really
  6864. // want to crash if focus-visible malfunctioned?
  6865. // no need for validFocusTarget check. the user does that by attaching it to
  6866. // focusable events only
  6867.  
  6868.  
  6869. return hadKeyboardEvent || focusTriggersKeyboardModality(target);
  6870. }
  6871. /**
  6872. * Should be called if a blur event is fired on a focus-visible element
  6873. */
  6874.  
  6875.  
  6876. function handleBlurVisible() {
  6877. // To detect a tab/window switch, we look for a blur event followed
  6878. // rapidly by a visibility change.
  6879. // If we don't see a visibility change within 100ms, it's probably a
  6880. // regular focus change.
  6881. hadFocusVisibleRecently = true;
  6882. window.clearTimeout(hadFocusVisibleRecentlyTimeout);
  6883. hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
  6884. hadFocusVisibleRecently = false;
  6885. }, 100);
  6886. }
  6887.  
  6888. function useIsFocusVisible() {
  6889. var ref = React__namespace.useCallback(function (instance) {
  6890. var node = ReactDOM__namespace.findDOMNode(instance);
  6891.  
  6892. if (node != null) {
  6893. prepare(node.ownerDocument);
  6894. }
  6895. }, []);
  6896.  
  6897. return {
  6898. isFocusVisible: isFocusVisible,
  6899. onBlurVisible: handleBlurVisible,
  6900. ref: ref
  6901. };
  6902. }
  6903.  
  6904. var utils = /*#__PURE__*/Object.freeze({
  6905. __proto__: null,
  6906. capitalize: capitalize,
  6907. createChainedFunction: createChainedFunction,
  6908. createSvgIcon: createSvgIcon$1,
  6909. debounce: debounce$1,
  6910. deprecatedPropType: deprecatedPropType,
  6911. isMuiElement: isMuiElement,
  6912. ownerDocument: ownerDocument,
  6913. ownerWindow: ownerWindow,
  6914. requirePropFactory: requirePropFactory,
  6915. setRef: setRef,
  6916. unsupportedProp: unsupportedProp,
  6917. useControlled: useControlled,
  6918. useEventCallback: useEventCallback,
  6919. useForkRef: useForkRef,
  6920. unstable_useId: useId,
  6921. useIsFocusVisible: useIsFocusVisible
  6922. });
  6923.  
  6924. var config$1 = {
  6925. disabled: false
  6926. };
  6927.  
  6928. var TransitionGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
  6929.  
  6930. var UNMOUNTED = 'unmounted';
  6931. var EXITED = 'exited';
  6932. var ENTERING = 'entering';
  6933. var ENTERED = 'entered';
  6934. var EXITING = 'exiting';
  6935. /**
  6936. * The Transition component lets you describe a transition from one component
  6937. * state to another _over time_ with a simple declarative API. Most commonly
  6938. * it's used to animate the mounting and unmounting of a component, but can also
  6939. * be used to describe in-place transition states as well.
  6940. *
  6941. * ---
  6942. *
  6943. * **Note**: `Transition` is a platform-agnostic base component. If you're using
  6944. * transitions in CSS, you'll probably want to use
  6945. * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
  6946. * instead. It inherits all the features of `Transition`, but contains
  6947. * additional features necessary to play nice with CSS transitions (hence the
  6948. * name of the component).
  6949. *
  6950. * ---
  6951. *
  6952. * By default the `Transition` component does not alter the behavior of the
  6953. * component it renders, it only tracks "enter" and "exit" states for the
  6954. * components. It's up to you to give meaning and effect to those states. For
  6955. * example we can add styles to a component when it enters or exits:
  6956. *
  6957. * ```jsx
  6958. * import { Transition } from 'react-transition-group';
  6959. *
  6960. * const duration = 300;
  6961. *
  6962. * const defaultStyle = {
  6963. * transition: `opacity ${duration}ms ease-in-out`,
  6964. * opacity: 0,
  6965. * }
  6966. *
  6967. * const transitionStyles = {
  6968. * entering: { opacity: 1 },
  6969. * entered: { opacity: 1 },
  6970. * exiting: { opacity: 0 },
  6971. * exited: { opacity: 0 },
  6972. * };
  6973. *
  6974. * const Fade = ({ in: inProp }) => (
  6975. * <Transition in={inProp} timeout={duration}>
  6976. * {state => (
  6977. * <div style={{
  6978. * ...defaultStyle,
  6979. * ...transitionStyles[state]
  6980. * }}>
  6981. * I'm a fade Transition!
  6982. * </div>
  6983. * )}
  6984. * </Transition>
  6985. * );
  6986. * ```
  6987. *
  6988. * There are 4 main states a Transition can be in:
  6989. * - `'entering'`
  6990. * - `'entered'`
  6991. * - `'exiting'`
  6992. * - `'exited'`
  6993. *
  6994. * Transition state is toggled via the `in` prop. When `true` the component
  6995. * begins the "Enter" stage. During this stage, the component will shift from
  6996. * its current transition state, to `'entering'` for the duration of the
  6997. * transition and then to the `'entered'` stage once it's complete. Let's take
  6998. * the following example (we'll use the
  6999. * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
  7000. *
  7001. * ```jsx
  7002. * function App() {
  7003. * const [inProp, setInProp] = useState(false);
  7004. * return (
  7005. * <div>
  7006. * <Transition in={inProp} timeout={500}>
  7007. * {state => (
  7008. * // ...
  7009. * )}
  7010. * </Transition>
  7011. * <button onClick={() => setInProp(true)}>
  7012. * Click to Enter
  7013. * </button>
  7014. * </div>
  7015. * );
  7016. * }
  7017. * ```
  7018. *
  7019. * When the button is clicked the component will shift to the `'entering'` state
  7020. * and stay there for 500ms (the value of `timeout`) before it finally switches
  7021. * to `'entered'`.
  7022. *
  7023. * When `in` is `false` the same thing happens except the state moves from
  7024. * `'exiting'` to `'exited'`.
  7025. */
  7026.  
  7027. var Transition = /*#__PURE__*/function (_React$Component) {
  7028. _inheritsLoose(Transition, _React$Component);
  7029.  
  7030. function Transition(props, context) {
  7031. var _this;
  7032.  
  7033. _this = _React$Component.call(this, props, context) || this;
  7034. var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
  7035.  
  7036. var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
  7037. var initialStatus;
  7038. _this.appearStatus = null;
  7039.  
  7040. if (props.in) {
  7041. if (appear) {
  7042. initialStatus = EXITED;
  7043. _this.appearStatus = ENTERING;
  7044. } else {
  7045. initialStatus = ENTERED;
  7046. }
  7047. } else {
  7048. if (props.unmountOnExit || props.mountOnEnter) {
  7049. initialStatus = UNMOUNTED;
  7050. } else {
  7051. initialStatus = EXITED;
  7052. }
  7053. }
  7054.  
  7055. _this.state = {
  7056. status: initialStatus
  7057. };
  7058. _this.nextCallback = null;
  7059. return _this;
  7060. }
  7061.  
  7062. Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
  7063. var nextIn = _ref.in;
  7064.  
  7065. if (nextIn && prevState.status === UNMOUNTED) {
  7066. return {
  7067. status: EXITED
  7068. };
  7069. }
  7070.  
  7071. return null;
  7072. } // getSnapshotBeforeUpdate(prevProps) {
  7073. // let nextStatus = null
  7074. // if (prevProps !== this.props) {
  7075. // const { status } = this.state
  7076. // if (this.props.in) {
  7077. // if (status !== ENTERING && status !== ENTERED) {
  7078. // nextStatus = ENTERING
  7079. // }
  7080. // } else {
  7081. // if (status === ENTERING || status === ENTERED) {
  7082. // nextStatus = EXITING
  7083. // }
  7084. // }
  7085. // }
  7086. // return { nextStatus }
  7087. // }
  7088. ;
  7089.  
  7090. var _proto = Transition.prototype;
  7091.  
  7092. _proto.componentDidMount = function componentDidMount() {
  7093. this.updateStatus(true, this.appearStatus);
  7094. };
  7095.  
  7096. _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
  7097. var nextStatus = null;
  7098.  
  7099. if (prevProps !== this.props) {
  7100. var status = this.state.status;
  7101.  
  7102. if (this.props.in) {
  7103. if (status !== ENTERING && status !== ENTERED) {
  7104. nextStatus = ENTERING;
  7105. }
  7106. } else {
  7107. if (status === ENTERING || status === ENTERED) {
  7108. nextStatus = EXITING;
  7109. }
  7110. }
  7111. }
  7112.  
  7113. this.updateStatus(false, nextStatus);
  7114. };
  7115.  
  7116. _proto.componentWillUnmount = function componentWillUnmount() {
  7117. this.cancelNextCallback();
  7118. };
  7119.  
  7120. _proto.getTimeouts = function getTimeouts() {
  7121. var timeout = this.props.timeout;
  7122. var exit, enter, appear;
  7123. exit = enter = appear = timeout;
  7124.  
  7125. if (timeout != null && typeof timeout !== 'number') {
  7126. exit = timeout.exit;
  7127. enter = timeout.enter; // TODO: remove fallback for next major
  7128.  
  7129. appear = timeout.appear !== undefined ? timeout.appear : enter;
  7130. }
  7131.  
  7132. return {
  7133. exit: exit,
  7134. enter: enter,
  7135. appear: appear
  7136. };
  7137. };
  7138.  
  7139. _proto.updateStatus = function updateStatus(mounting, nextStatus) {
  7140. if (mounting === void 0) {
  7141. mounting = false;
  7142. }
  7143.  
  7144. if (nextStatus !== null) {
  7145. // nextStatus will always be ENTERING or EXITING.
  7146. this.cancelNextCallback();
  7147.  
  7148. if (nextStatus === ENTERING) {
  7149. this.performEnter(mounting);
  7150. } else {
  7151. this.performExit();
  7152. }
  7153. } else if (this.props.unmountOnExit && this.state.status === EXITED) {
  7154. this.setState({
  7155. status: UNMOUNTED
  7156. });
  7157. }
  7158. };
  7159.  
  7160. _proto.performEnter = function performEnter(mounting) {
  7161. var _this2 = this;
  7162.  
  7163. var enter = this.props.enter;
  7164. var appearing = this.context ? this.context.isMounting : mounting;
  7165.  
  7166. var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default['default'].findDOMNode(this), appearing],
  7167. maybeNode = _ref2[0],
  7168. maybeAppearing = _ref2[1];
  7169.  
  7170. var timeouts = this.getTimeouts();
  7171. var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
  7172. // if we are mounting and running this it means appear _must_ be set
  7173.  
  7174. if (!mounting && !enter || config$1.disabled) {
  7175. this.safeSetState({
  7176. status: ENTERED
  7177. }, function () {
  7178. _this2.props.onEntered(maybeNode);
  7179. });
  7180. return;
  7181. }
  7182.  
  7183. this.props.onEnter(maybeNode, maybeAppearing);
  7184. this.safeSetState({
  7185. status: ENTERING
  7186. }, function () {
  7187. _this2.props.onEntering(maybeNode, maybeAppearing);
  7188.  
  7189. _this2.onTransitionEnd(enterTimeout, function () {
  7190. _this2.safeSetState({
  7191. status: ENTERED
  7192. }, function () {
  7193. _this2.props.onEntered(maybeNode, maybeAppearing);
  7194. });
  7195. });
  7196. });
  7197. };
  7198.  
  7199. _proto.performExit = function performExit() {
  7200. var _this3 = this;
  7201.  
  7202. var exit = this.props.exit;
  7203. var timeouts = this.getTimeouts();
  7204. var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default['default'].findDOMNode(this); // no exit animation skip right to EXITED
  7205.  
  7206. if (!exit || config$1.disabled) {
  7207. this.safeSetState({
  7208. status: EXITED
  7209. }, function () {
  7210. _this3.props.onExited(maybeNode);
  7211. });
  7212. return;
  7213. }
  7214.  
  7215. this.props.onExit(maybeNode);
  7216. this.safeSetState({
  7217. status: EXITING
  7218. }, function () {
  7219. _this3.props.onExiting(maybeNode);
  7220.  
  7221. _this3.onTransitionEnd(timeouts.exit, function () {
  7222. _this3.safeSetState({
  7223. status: EXITED
  7224. }, function () {
  7225. _this3.props.onExited(maybeNode);
  7226. });
  7227. });
  7228. });
  7229. };
  7230.  
  7231. _proto.cancelNextCallback = function cancelNextCallback() {
  7232. if (this.nextCallback !== null) {
  7233. this.nextCallback.cancel();
  7234. this.nextCallback = null;
  7235. }
  7236. };
  7237.  
  7238. _proto.safeSetState = function safeSetState(nextState, callback) {
  7239. // This shouldn't be necessary, but there are weird race conditions with
  7240. // setState callbacks and unmounting in testing, so always make sure that
  7241. // we can cancel any pending setState callbacks after we unmount.
  7242. callback = this.setNextCallback(callback);
  7243. this.setState(nextState, callback);
  7244. };
  7245.  
  7246. _proto.setNextCallback = function setNextCallback(callback) {
  7247. var _this4 = this;
  7248.  
  7249. var active = true;
  7250.  
  7251. this.nextCallback = function (event) {
  7252. if (active) {
  7253. active = false;
  7254. _this4.nextCallback = null;
  7255. callback(event);
  7256. }
  7257. };
  7258.  
  7259. this.nextCallback.cancel = function () {
  7260. active = false;
  7261. };
  7262.  
  7263. return this.nextCallback;
  7264. };
  7265.  
  7266. _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
  7267. this.setNextCallback(handler);
  7268. var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default['default'].findDOMNode(this);
  7269. var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
  7270.  
  7271. if (!node || doesNotHaveTimeoutOrListener) {
  7272. setTimeout(this.nextCallback, 0);
  7273. return;
  7274. }
  7275.  
  7276. if (this.props.addEndListener) {
  7277. var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
  7278. maybeNode = _ref3[0],
  7279. maybeNextCallback = _ref3[1];
  7280.  
  7281. this.props.addEndListener(maybeNode, maybeNextCallback);
  7282. }
  7283.  
  7284. if (timeout != null) {
  7285. setTimeout(this.nextCallback, timeout);
  7286. }
  7287. };
  7288.  
  7289. _proto.render = function render() {
  7290. var status = this.state.status;
  7291.  
  7292. if (status === UNMOUNTED) {
  7293. return null;
  7294. }
  7295.  
  7296. var _this$props = this.props,
  7297. children = _this$props.children;
  7298. _this$props.in;
  7299. _this$props.mountOnEnter;
  7300. _this$props.unmountOnExit;
  7301. _this$props.appear;
  7302. _this$props.enter;
  7303. _this$props.exit;
  7304. _this$props.timeout;
  7305. _this$props.addEndListener;
  7306. _this$props.onEnter;
  7307. _this$props.onEntering;
  7308. _this$props.onEntered;
  7309. _this$props.onExit;
  7310. _this$props.onExiting;
  7311. _this$props.onExited;
  7312. _this$props.nodeRef;
  7313. var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
  7314.  
  7315. return (
  7316. /*#__PURE__*/
  7317. // allows for nested Transitions
  7318. React__default['default'].createElement(TransitionGroupContext.Provider, {
  7319. value: null
  7320. }, typeof children === 'function' ? children(status, childProps) : /*#__PURE__*/React__default['default'].cloneElement(React__default['default'].Children.only(children), childProps))
  7321. );
  7322. };
  7323.  
  7324. return Transition;
  7325. }(React__default['default'].Component);
  7326.  
  7327. Transition.contextType = TransitionGroupContext;
  7328. Transition.propTypes = {}; // Name the function so it is clearer in the documentation
  7329.  
  7330. function noop() {}
  7331.  
  7332. Transition.defaultProps = {
  7333. in: false,
  7334. mountOnEnter: false,
  7335. unmountOnExit: false,
  7336. appear: false,
  7337. enter: true,
  7338. exit: true,
  7339. onEnter: noop,
  7340. onEntering: noop,
  7341. onEntered: noop,
  7342. onExit: noop,
  7343. onExiting: noop,
  7344. onExited: noop
  7345. };
  7346. Transition.UNMOUNTED = UNMOUNTED;
  7347. Transition.EXITED = EXITED;
  7348. Transition.ENTERING = ENTERING;
  7349. Transition.ENTERED = ENTERED;
  7350. Transition.EXITING = EXITING;
  7351.  
  7352. /**
  7353. * Given `this.props.children`, return an object mapping key to child.
  7354. *
  7355. * @param {*} children `this.props.children`
  7356. * @return {object} Mapping of key to child
  7357. */
  7358.  
  7359. function getChildMapping(children, mapFn) {
  7360. var mapper = function mapper(child) {
  7361. return mapFn && /*#__PURE__*/React$3.isValidElement(child) ? mapFn(child) : child;
  7362. };
  7363.  
  7364. var result = Object.create(null);
  7365. if (children) React$3.Children.map(children, function (c) {
  7366. return c;
  7367. }).forEach(function (child) {
  7368. // run the map function here instead so that the key is the computed one
  7369. result[child.key] = mapper(child);
  7370. });
  7371. return result;
  7372. }
  7373. /**
  7374. * When you're adding or removing children some may be added or removed in the
  7375. * same render pass. We want to show *both* since we want to simultaneously
  7376. * animate elements in and out. This function takes a previous set of keys
  7377. * and a new set of keys and merges them with its best guess of the correct
  7378. * ordering. In the future we may expose some of the utilities in
  7379. * ReactMultiChild to make this easy, but for now React itself does not
  7380. * directly have this concept of the union of prevChildren and nextChildren
  7381. * so we implement it here.
  7382. *
  7383. * @param {object} prev prev children as returned from
  7384. * `ReactTransitionChildMapping.getChildMapping()`.
  7385. * @param {object} next next children as returned from
  7386. * `ReactTransitionChildMapping.getChildMapping()`.
  7387. * @return {object} a key set that contains all keys in `prev` and all keys
  7388. * in `next` in a reasonable order.
  7389. */
  7390.  
  7391. function mergeChildMappings(prev, next) {
  7392. prev = prev || {};
  7393. next = next || {};
  7394.  
  7395. function getValueForKey(key) {
  7396. return key in next ? next[key] : prev[key];
  7397. } // For each key of `next`, the list of keys to insert before that key in
  7398. // the combined list
  7399.  
  7400.  
  7401. var nextKeysPending = Object.create(null);
  7402. var pendingKeys = [];
  7403.  
  7404. for (var prevKey in prev) {
  7405. if (prevKey in next) {
  7406. if (pendingKeys.length) {
  7407. nextKeysPending[prevKey] = pendingKeys;
  7408. pendingKeys = [];
  7409. }
  7410. } else {
  7411. pendingKeys.push(prevKey);
  7412. }
  7413. }
  7414.  
  7415. var i;
  7416. var childMapping = {};
  7417.  
  7418. for (var nextKey in next) {
  7419. if (nextKeysPending[nextKey]) {
  7420. for (i = 0; i < nextKeysPending[nextKey].length; i++) {
  7421. var pendingNextKey = nextKeysPending[nextKey][i];
  7422. childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
  7423. }
  7424. }
  7425.  
  7426. childMapping[nextKey] = getValueForKey(nextKey);
  7427. } // Finally, add the keys which didn't appear before any key in `next`
  7428.  
  7429.  
  7430. for (i = 0; i < pendingKeys.length; i++) {
  7431. childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
  7432. }
  7433.  
  7434. return childMapping;
  7435. }
  7436.  
  7437. function getProp(child, prop, props) {
  7438. return props[prop] != null ? props[prop] : child.props[prop];
  7439. }
  7440.  
  7441. function getInitialChildMapping(props, onExited) {
  7442. return getChildMapping(props.children, function (child) {
  7443. return /*#__PURE__*/React$3.cloneElement(child, {
  7444. onExited: onExited.bind(null, child),
  7445. in: true,
  7446. appear: getProp(child, 'appear', props),
  7447. enter: getProp(child, 'enter', props),
  7448. exit: getProp(child, 'exit', props)
  7449. });
  7450. });
  7451. }
  7452. function getNextChildMapping(nextProps, prevChildMapping, onExited) {
  7453. var nextChildMapping = getChildMapping(nextProps.children);
  7454. var children = mergeChildMappings(prevChildMapping, nextChildMapping);
  7455. Object.keys(children).forEach(function (key) {
  7456. var child = children[key];
  7457. if (! /*#__PURE__*/React$3.isValidElement(child)) return;
  7458. var hasPrev = (key in prevChildMapping);
  7459. var hasNext = (key in nextChildMapping);
  7460. var prevChild = prevChildMapping[key];
  7461. var isLeaving = /*#__PURE__*/React$3.isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
  7462.  
  7463. if (hasNext && (!hasPrev || isLeaving)) {
  7464. // console.log('entering', key)
  7465. children[key] = /*#__PURE__*/React$3.cloneElement(child, {
  7466. onExited: onExited.bind(null, child),
  7467. in: true,
  7468. exit: getProp(child, 'exit', nextProps),
  7469. enter: getProp(child, 'enter', nextProps)
  7470. });
  7471. } else if (!hasNext && hasPrev && !isLeaving) {
  7472. // item is old (exiting)
  7473. // console.log('leaving', key)
  7474. children[key] = /*#__PURE__*/React$3.cloneElement(child, {
  7475. in: false
  7476. });
  7477. } else if (hasNext && hasPrev && /*#__PURE__*/React$3.isValidElement(prevChild)) {
  7478. // item hasn't changed transition states
  7479. // copy over the last transition props;
  7480. // console.log('unchanged', key)
  7481. children[key] = /*#__PURE__*/React$3.cloneElement(child, {
  7482. onExited: onExited.bind(null, child),
  7483. in: prevChild.props.in,
  7484. exit: getProp(child, 'exit', nextProps),
  7485. enter: getProp(child, 'enter', nextProps)
  7486. });
  7487. }
  7488. });
  7489. return children;
  7490. }
  7491.  
  7492. var values = Object.values || function (obj) {
  7493. return Object.keys(obj).map(function (k) {
  7494. return obj[k];
  7495. });
  7496. };
  7497.  
  7498. var defaultProps = {
  7499. component: 'div',
  7500. childFactory: function childFactory(child) {
  7501. return child;
  7502. }
  7503. };
  7504. /**
  7505. * The `<TransitionGroup>` component manages a set of transition components
  7506. * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
  7507. * components, `<TransitionGroup>` is a state machine for managing the mounting
  7508. * and unmounting of components over time.
  7509. *
  7510. * Consider the example below. As items are removed or added to the TodoList the
  7511. * `in` prop is toggled automatically by the `<TransitionGroup>`.
  7512. *
  7513. * Note that `<TransitionGroup>` does not define any animation behavior!
  7514. * Exactly _how_ a list item animates is up to the individual transition
  7515. * component. This means you can mix and match animations across different list
  7516. * items.
  7517. */
  7518.  
  7519. var TransitionGroup = /*#__PURE__*/function (_React$Component) {
  7520. _inheritsLoose(TransitionGroup, _React$Component);
  7521.  
  7522. function TransitionGroup(props, context) {
  7523. var _this;
  7524.  
  7525. _this = _React$Component.call(this, props, context) || this;
  7526.  
  7527. var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
  7528.  
  7529.  
  7530. _this.state = {
  7531. contextValue: {
  7532. isMounting: true
  7533. },
  7534. handleExited: handleExited,
  7535. firstRender: true
  7536. };
  7537. return _this;
  7538. }
  7539.  
  7540. var _proto = TransitionGroup.prototype;
  7541.  
  7542. _proto.componentDidMount = function componentDidMount() {
  7543. this.mounted = true;
  7544. this.setState({
  7545. contextValue: {
  7546. isMounting: false
  7547. }
  7548. });
  7549. };
  7550.  
  7551. _proto.componentWillUnmount = function componentWillUnmount() {
  7552. this.mounted = false;
  7553. };
  7554.  
  7555. TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
  7556. var prevChildMapping = _ref.children,
  7557. handleExited = _ref.handleExited,
  7558. firstRender = _ref.firstRender;
  7559. return {
  7560. children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
  7561. firstRender: false
  7562. };
  7563. } // node is `undefined` when user provided `nodeRef` prop
  7564. ;
  7565.  
  7566. _proto.handleExited = function handleExited(child, node) {
  7567. var currentChildMapping = getChildMapping(this.props.children);
  7568. if (child.key in currentChildMapping) return;
  7569.  
  7570. if (child.props.onExited) {
  7571. child.props.onExited(node);
  7572. }
  7573.  
  7574. if (this.mounted) {
  7575. this.setState(function (state) {
  7576. var children = _extends$1({}, state.children);
  7577.  
  7578. delete children[child.key];
  7579. return {
  7580. children: children
  7581. };
  7582. });
  7583. }
  7584. };
  7585.  
  7586. _proto.render = function render() {
  7587. var _this$props = this.props,
  7588. Component = _this$props.component,
  7589. childFactory = _this$props.childFactory,
  7590. props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
  7591.  
  7592. var contextValue = this.state.contextValue;
  7593. var children = values(this.state.children).map(childFactory);
  7594. delete props.appear;
  7595. delete props.enter;
  7596. delete props.exit;
  7597.  
  7598. if (Component === null) {
  7599. return /*#__PURE__*/React__default['default'].createElement(TransitionGroupContext.Provider, {
  7600. value: contextValue
  7601. }, children);
  7602. }
  7603.  
  7604. return /*#__PURE__*/React__default['default'].createElement(TransitionGroupContext.Provider, {
  7605. value: contextValue
  7606. }, /*#__PURE__*/React__default['default'].createElement(Component, props, children));
  7607. };
  7608.  
  7609. return TransitionGroup;
  7610. }(React__default['default'].Component);
  7611.  
  7612. TransitionGroup.propTypes = {};
  7613. TransitionGroup.defaultProps = defaultProps;
  7614.  
  7615. var reflow = function reflow(node) {
  7616. return node.scrollTop;
  7617. };
  7618. function getTransitionProps(props, options) {
  7619. var timeout = props.timeout,
  7620. _props$style = props.style,
  7621. style = _props$style === void 0 ? {} : _props$style;
  7622. return {
  7623. duration: style.transitionDuration || typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
  7624. delay: style.transitionDelay
  7625. };
  7626. }
  7627.  
  7628. var useEnhancedEffect$3 = typeof window === 'undefined' ? React__namespace.useEffect : React__namespace.useLayoutEffect;
  7629. /**
  7630. * @ignore - internal component.
  7631. */
  7632.  
  7633. function Ripple(props) {
  7634. var classes = props.classes,
  7635. _props$pulsate = props.pulsate,
  7636. pulsate = _props$pulsate === void 0 ? false : _props$pulsate,
  7637. rippleX = props.rippleX,
  7638. rippleY = props.rippleY,
  7639. rippleSize = props.rippleSize,
  7640. inProp = props.in,
  7641. _props$onExited = props.onExited,
  7642. onExited = _props$onExited === void 0 ? function () {} : _props$onExited,
  7643. timeout = props.timeout;
  7644.  
  7645. var _React$useState = React__namespace.useState(false),
  7646. leaving = _React$useState[0],
  7647. setLeaving = _React$useState[1];
  7648.  
  7649. var rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
  7650. var rippleStyles = {
  7651. width: rippleSize,
  7652. height: rippleSize,
  7653. top: -(rippleSize / 2) + rippleY,
  7654. left: -(rippleSize / 2) + rippleX
  7655. };
  7656. var childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
  7657. 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
  7658.  
  7659. useEnhancedEffect$3(function () {
  7660. if (!inProp) {
  7661. // react-transition-group#onExit
  7662. setLeaving(true); // react-transition-group#onExited
  7663.  
  7664. var timeoutId = setTimeout(handleExited, timeout);
  7665. return function () {
  7666. clearTimeout(timeoutId);
  7667. };
  7668. }
  7669.  
  7670. return undefined;
  7671. }, [handleExited, inProp, timeout]);
  7672. return /*#__PURE__*/React__namespace.createElement("span", {
  7673. className: rippleClassName,
  7674. style: rippleStyles
  7675. }, /*#__PURE__*/React__namespace.createElement("span", {
  7676. className: childClassName
  7677. }));
  7678. }
  7679.  
  7680. var DURATION = 550;
  7681. var DELAY_RIPPLE = 80;
  7682. var styles$f = function styles(theme) {
  7683. return {
  7684. /* Styles applied to the root element. */
  7685. root: {
  7686. overflow: 'hidden',
  7687. pointerEvents: 'none',
  7688. position: 'absolute',
  7689. zIndex: 0,
  7690. top: 0,
  7691. right: 0,
  7692. bottom: 0,
  7693. left: 0,
  7694. borderRadius: 'inherit'
  7695. },
  7696.  
  7697. /* Styles applied to the internal `Ripple` components `ripple` class. */
  7698. ripple: {
  7699. opacity: 0,
  7700. position: 'absolute'
  7701. },
  7702.  
  7703. /* Styles applied to the internal `Ripple` components `rippleVisible` class. */
  7704. rippleVisible: {
  7705. opacity: 0.3,
  7706. transform: 'scale(1)',
  7707. animation: "$enter ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
  7708. },
  7709.  
  7710. /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */
  7711. ripplePulsate: {
  7712. animationDuration: "".concat(theme.transitions.duration.shorter, "ms")
  7713. },
  7714.  
  7715. /* Styles applied to the internal `Ripple` components `child` class. */
  7716. child: {
  7717. opacity: 1,
  7718. display: 'block',
  7719. width: '100%',
  7720. height: '100%',
  7721. borderRadius: '50%',
  7722. backgroundColor: 'currentColor'
  7723. },
  7724.  
  7725. /* Styles applied to the internal `Ripple` components `childLeaving` class. */
  7726. childLeaving: {
  7727. opacity: 0,
  7728. animation: "$exit ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut)
  7729. },
  7730.  
  7731. /* Styles applied to the internal `Ripple` components `childPulsate` class. */
  7732. childPulsate: {
  7733. position: 'absolute',
  7734. left: 0,
  7735. top: 0,
  7736. animation: "$pulsate 2500ms ".concat(theme.transitions.easing.easeInOut, " 200ms infinite")
  7737. },
  7738. '@keyframes enter': {
  7739. '0%': {
  7740. transform: 'scale(0)',
  7741. opacity: 0.1
  7742. },
  7743. '100%': {
  7744. transform: 'scale(1)',
  7745. opacity: 0.3
  7746. }
  7747. },
  7748. '@keyframes exit': {
  7749. '0%': {
  7750. opacity: 1
  7751. },
  7752. '100%': {
  7753. opacity: 0
  7754. }
  7755. },
  7756. '@keyframes pulsate': {
  7757. '0%': {
  7758. transform: 'scale(1)'
  7759. },
  7760. '50%': {
  7761. transform: 'scale(0.92)'
  7762. },
  7763. '100%': {
  7764. transform: 'scale(1)'
  7765. }
  7766. }
  7767. };
  7768. };
  7769. /**
  7770. * @ignore - internal component.
  7771. *
  7772. * TODO v5: Make private
  7773. */
  7774.  
  7775. var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(props, ref) {
  7776. var _props$center = props.center,
  7777. centerProp = _props$center === void 0 ? false : _props$center,
  7778. classes = props.classes,
  7779. className = props.className,
  7780. other = _objectWithoutProperties(props, ["center", "classes", "className"]);
  7781.  
  7782. var _React$useState = React__namespace.useState([]),
  7783. ripples = _React$useState[0],
  7784. setRipples = _React$useState[1];
  7785.  
  7786. var nextKey = React__namespace.useRef(0);
  7787. var rippleCallback = React__namespace.useRef(null);
  7788. React__namespace.useEffect(function () {
  7789. if (rippleCallback.current) {
  7790. rippleCallback.current();
  7791. rippleCallback.current = null;
  7792. }
  7793. }, [ripples]); // Used to filter out mouse emulated events on mobile.
  7794.  
  7795. var ignoringMouseDown = React__namespace.useRef(false); // We use a timer in order to only show the ripples for touch "click" like events.
  7796. // We don't want to display the ripple for touch scroll events.
  7797.  
  7798. var startTimer = React__namespace.useRef(null); // This is the hook called once the previous timeout is ready.
  7799.  
  7800. var startTimerCommit = React__namespace.useRef(null);
  7801. var container = React__namespace.useRef(null);
  7802. React__namespace.useEffect(function () {
  7803. return function () {
  7804. clearTimeout(startTimer.current);
  7805. };
  7806. }, []);
  7807. var startCommit = React__namespace.useCallback(function (params) {
  7808. var pulsate = params.pulsate,
  7809. rippleX = params.rippleX,
  7810. rippleY = params.rippleY,
  7811. rippleSize = params.rippleSize,
  7812. cb = params.cb;
  7813. setRipples(function (oldRipples) {
  7814. return [].concat(_toConsumableArray(oldRipples), [/*#__PURE__*/React__namespace.createElement(Ripple, {
  7815. key: nextKey.current,
  7816. classes: classes,
  7817. timeout: DURATION,
  7818. pulsate: pulsate,
  7819. rippleX: rippleX,
  7820. rippleY: rippleY,
  7821. rippleSize: rippleSize
  7822. })]);
  7823. });
  7824. nextKey.current += 1;
  7825. rippleCallback.current = cb;
  7826. }, [classes]);
  7827. var start = React__namespace.useCallback(function () {
  7828. var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  7829. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  7830. var cb = arguments.length > 2 ? arguments[2] : undefined;
  7831. var _options$pulsate = options.pulsate,
  7832. pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
  7833. _options$center = options.center,
  7834. center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,
  7835. _options$fakeElement = options.fakeElement,
  7836. fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;
  7837.  
  7838. if (event.type === 'mousedown' && ignoringMouseDown.current) {
  7839. ignoringMouseDown.current = false;
  7840. return;
  7841. }
  7842.  
  7843. if (event.type === 'touchstart') {
  7844. ignoringMouseDown.current = true;
  7845. }
  7846.  
  7847. var element = fakeElement ? null : container.current;
  7848. var rect = element ? element.getBoundingClientRect() : {
  7849. width: 0,
  7850. height: 0,
  7851. left: 0,
  7852. top: 0
  7853. }; // Get the size of the ripple
  7854.  
  7855. var rippleX;
  7856. var rippleY;
  7857. var rippleSize;
  7858.  
  7859. if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
  7860. rippleX = Math.round(rect.width / 2);
  7861. rippleY = Math.round(rect.height / 2);
  7862. } else {
  7863. var _ref = event.touches ? event.touches[0] : event,
  7864. clientX = _ref.clientX,
  7865. clientY = _ref.clientY;
  7866.  
  7867. rippleX = Math.round(clientX - rect.left);
  7868. rippleY = Math.round(clientY - rect.top);
  7869. }
  7870.  
  7871. if (center) {
  7872. 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.
  7873.  
  7874. if (rippleSize % 2 === 0) {
  7875. rippleSize += 1;
  7876. }
  7877. } else {
  7878. var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
  7879. var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
  7880. rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
  7881. } // Touche devices
  7882.  
  7883.  
  7884. if (event.touches) {
  7885. // check that this isn't another touchstart due to multitouch
  7886. // otherwise we will only clear a single timer when unmounting while two
  7887. // are running
  7888. if (startTimerCommit.current === null) {
  7889. // Prepare the ripple effect.
  7890. startTimerCommit.current = function () {
  7891. startCommit({
  7892. pulsate: pulsate,
  7893. rippleX: rippleX,
  7894. rippleY: rippleY,
  7895. rippleSize: rippleSize,
  7896. cb: cb
  7897. });
  7898. }; // Delay the execution of the ripple effect.
  7899.  
  7900.  
  7901. startTimer.current = setTimeout(function () {
  7902. if (startTimerCommit.current) {
  7903. startTimerCommit.current();
  7904. startTimerCommit.current = null;
  7905. }
  7906. }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
  7907. }
  7908. } else {
  7909. startCommit({
  7910. pulsate: pulsate,
  7911. rippleX: rippleX,
  7912. rippleY: rippleY,
  7913. rippleSize: rippleSize,
  7914. cb: cb
  7915. });
  7916. }
  7917. }, [centerProp, startCommit]);
  7918. var pulsate = React__namespace.useCallback(function () {
  7919. start({}, {
  7920. pulsate: true
  7921. });
  7922. }, [start]);
  7923. var stop = React__namespace.useCallback(function (event, cb) {
  7924. clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
  7925. // We still want to show ripple effect.
  7926.  
  7927. if (event.type === 'touchend' && startTimerCommit.current) {
  7928. event.persist();
  7929. startTimerCommit.current();
  7930. startTimerCommit.current = null;
  7931. startTimer.current = setTimeout(function () {
  7932. stop(event, cb);
  7933. });
  7934. return;
  7935. }
  7936.  
  7937. startTimerCommit.current = null;
  7938. setRipples(function (oldRipples) {
  7939. if (oldRipples.length > 0) {
  7940. return oldRipples.slice(1);
  7941. }
  7942.  
  7943. return oldRipples;
  7944. });
  7945. rippleCallback.current = cb;
  7946. }, []);
  7947. React__namespace.useImperativeHandle(ref, function () {
  7948. return {
  7949. pulsate: pulsate,
  7950. start: start,
  7951. stop: stop
  7952. };
  7953. }, [pulsate, start, stop]);
  7954. return /*#__PURE__*/React__namespace.createElement("span", _extends$1({
  7955. className: clsx(classes.root, className),
  7956. ref: container
  7957. }, other), /*#__PURE__*/React__namespace.createElement(TransitionGroup, {
  7958. component: null,
  7959. exit: true
  7960. }, ripples));
  7961. });
  7962. var TouchRipple$1 = withStyles(styles$f, {
  7963. flip: false,
  7964. name: 'MuiTouchRipple'
  7965. })( /*#__PURE__*/React__namespace.memo(TouchRipple));
  7966.  
  7967. var styles$e = {
  7968. /* Styles applied to the root element. */
  7969. root: {
  7970. display: 'inline-flex',
  7971. alignItems: 'center',
  7972. justifyContent: 'center',
  7973. position: 'relative',
  7974. WebkitTapHighlightColor: 'transparent',
  7975. backgroundColor: 'transparent',
  7976. // Reset default value
  7977. // We disable the focus ring for mouse, touch and keyboard users.
  7978. outline: 0,
  7979. border: 0,
  7980. margin: 0,
  7981. // Remove the margin in Safari
  7982. borderRadius: 0,
  7983. padding: 0,
  7984. // Remove the padding in Firefox
  7985. cursor: 'pointer',
  7986. userSelect: 'none',
  7987. verticalAlign: 'middle',
  7988. '-moz-appearance': 'none',
  7989. // Reset
  7990. '-webkit-appearance': 'none',
  7991. // Reset
  7992. textDecoration: 'none',
  7993. // So we take precedent over the style of a native <a /> element.
  7994. color: 'inherit',
  7995. '&::-moz-focus-inner': {
  7996. borderStyle: 'none' // Remove Firefox dotted outline.
  7997.  
  7998. },
  7999. '&$disabled': {
  8000. pointerEvents: 'none',
  8001. // Disable link interactions
  8002. cursor: 'default'
  8003. },
  8004. '@media print': {
  8005. colorAdjust: 'exact'
  8006. }
  8007. },
  8008.  
  8009. /* Pseudo-class applied to the root element if `disabled={true}`. */
  8010. disabled: {},
  8011.  
  8012. /* Pseudo-class applied to the root element if keyboard focused. */
  8013. focusVisible: {}
  8014. };
  8015. /**
  8016. * `ButtonBase` contains as few styles as possible.
  8017. * It aims to be a simple building block for creating a button.
  8018. * It contains a load of style reset and some focus/ripple logic.
  8019. */
  8020.  
  8021. var ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(props, ref) {
  8022. var action = props.action,
  8023. buttonRefProp = props.buttonRef,
  8024. _props$centerRipple = props.centerRipple,
  8025. centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,
  8026. children = props.children,
  8027. classes = props.classes,
  8028. className = props.className,
  8029. _props$component = props.component,
  8030. component = _props$component === void 0 ? 'button' : _props$component,
  8031. _props$disabled = props.disabled,
  8032. disabled = _props$disabled === void 0 ? false : _props$disabled,
  8033. _props$disableRipple = props.disableRipple,
  8034. disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
  8035. _props$disableTouchRi = props.disableTouchRipple,
  8036. disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,
  8037. _props$focusRipple = props.focusRipple,
  8038. focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,
  8039. focusVisibleClassName = props.focusVisibleClassName,
  8040. onBlur = props.onBlur,
  8041. onClick = props.onClick,
  8042. onFocus = props.onFocus,
  8043. onFocusVisible = props.onFocusVisible,
  8044. onKeyDown = props.onKeyDown,
  8045. onKeyUp = props.onKeyUp,
  8046. onMouseDown = props.onMouseDown,
  8047. onMouseLeave = props.onMouseLeave,
  8048. onMouseUp = props.onMouseUp,
  8049. onTouchEnd = props.onTouchEnd,
  8050. onTouchMove = props.onTouchMove,
  8051. onTouchStart = props.onTouchStart,
  8052. onDragLeave = props.onDragLeave,
  8053. _props$tabIndex = props.tabIndex,
  8054. tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
  8055. TouchRippleProps = props.TouchRippleProps,
  8056. _props$type = props.type,
  8057. type = _props$type === void 0 ? 'button' : _props$type,
  8058. 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"]);
  8059.  
  8060. var buttonRef = React__namespace.useRef(null);
  8061.  
  8062. function getButtonNode() {
  8063. // #StrictMode ready
  8064. return ReactDOM__namespace.findDOMNode(buttonRef.current);
  8065. }
  8066.  
  8067. var rippleRef = React__namespace.useRef(null);
  8068.  
  8069. var _React$useState = React__namespace.useState(false),
  8070. focusVisible = _React$useState[0],
  8071. setFocusVisible = _React$useState[1];
  8072.  
  8073. if (disabled && focusVisible) {
  8074. setFocusVisible(false);
  8075. }
  8076.  
  8077. var _useIsFocusVisible = useIsFocusVisible(),
  8078. isFocusVisible = _useIsFocusVisible.isFocusVisible,
  8079. onBlurVisible = _useIsFocusVisible.onBlurVisible,
  8080. focusVisibleRef = _useIsFocusVisible.ref;
  8081.  
  8082. React__namespace.useImperativeHandle(action, function () {
  8083. return {
  8084. focusVisible: function focusVisible() {
  8085. setFocusVisible(true);
  8086. buttonRef.current.focus();
  8087. }
  8088. };
  8089. }, []);
  8090. React__namespace.useEffect(function () {
  8091. if (focusVisible && focusRipple && !disableRipple) {
  8092. rippleRef.current.pulsate();
  8093. }
  8094. }, [disableRipple, focusRipple, focusVisible]);
  8095.  
  8096. function useRippleHandler(rippleAction, eventCallback) {
  8097. var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;
  8098. return useEventCallback(function (event) {
  8099. if (eventCallback) {
  8100. eventCallback(event);
  8101. }
  8102.  
  8103. var ignore = skipRippleAction;
  8104.  
  8105. if (!ignore && rippleRef.current) {
  8106. rippleRef.current[rippleAction](event);
  8107. }
  8108.  
  8109. return true;
  8110. });
  8111. }
  8112.  
  8113. var handleMouseDown = useRippleHandler('start', onMouseDown);
  8114. var handleDragLeave = useRippleHandler('stop', onDragLeave);
  8115. var handleMouseUp = useRippleHandler('stop', onMouseUp);
  8116. var handleMouseLeave = useRippleHandler('stop', function (event) {
  8117. if (focusVisible) {
  8118. event.preventDefault();
  8119. }
  8120.  
  8121. if (onMouseLeave) {
  8122. onMouseLeave(event);
  8123. }
  8124. });
  8125. var handleTouchStart = useRippleHandler('start', onTouchStart);
  8126. var handleTouchEnd = useRippleHandler('stop', onTouchEnd);
  8127. var handleTouchMove = useRippleHandler('stop', onTouchMove);
  8128. var handleBlur = useRippleHandler('stop', function (event) {
  8129. if (focusVisible) {
  8130. onBlurVisible(event);
  8131. setFocusVisible(false);
  8132. }
  8133.  
  8134. if (onBlur) {
  8135. onBlur(event);
  8136. }
  8137. }, false);
  8138. var handleFocus = useEventCallback(function (event) {
  8139. // Fix for https://github.com/facebook/react/issues/7769
  8140. if (!buttonRef.current) {
  8141. buttonRef.current = event.currentTarget;
  8142. }
  8143.  
  8144. if (isFocusVisible(event)) {
  8145. setFocusVisible(true);
  8146.  
  8147. if (onFocusVisible) {
  8148. onFocusVisible(event);
  8149. }
  8150. }
  8151.  
  8152. if (onFocus) {
  8153. onFocus(event);
  8154. }
  8155. });
  8156.  
  8157. var isNonNativeButton = function isNonNativeButton() {
  8158. var button = getButtonNode();
  8159. return component && component !== 'button' && !(button.tagName === 'A' && button.href);
  8160. };
  8161. /**
  8162. * IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
  8163. */
  8164.  
  8165.  
  8166. var keydownRef = React__namespace.useRef(false);
  8167. var handleKeyDown = useEventCallback(function (event) {
  8168. // Check if key is already down to avoid repeats being counted as multiple activations
  8169. if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
  8170. keydownRef.current = true;
  8171. event.persist();
  8172. rippleRef.current.stop(event, function () {
  8173. rippleRef.current.start(event);
  8174. });
  8175. }
  8176.  
  8177. if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
  8178. event.preventDefault();
  8179. }
  8180.  
  8181. if (onKeyDown) {
  8182. onKeyDown(event);
  8183. } // Keyboard accessibility for non interactive elements
  8184.  
  8185.  
  8186. if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
  8187. event.preventDefault();
  8188.  
  8189. if (onClick) {
  8190. onClick(event);
  8191. }
  8192. }
  8193. });
  8194. var handleKeyUp = useEventCallback(function (event) {
  8195. // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
  8196. // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
  8197. if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
  8198. keydownRef.current = false;
  8199. event.persist();
  8200. rippleRef.current.stop(event, function () {
  8201. rippleRef.current.pulsate(event);
  8202. });
  8203. }
  8204.  
  8205. if (onKeyUp) {
  8206. onKeyUp(event);
  8207. } // Keyboard accessibility for non interactive elements
  8208.  
  8209.  
  8210. if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
  8211. onClick(event);
  8212. }
  8213. });
  8214. var ComponentProp = component;
  8215.  
  8216. if (ComponentProp === 'button' && other.href) {
  8217. ComponentProp = 'a';
  8218. }
  8219.  
  8220. var buttonProps = {};
  8221.  
  8222. if (ComponentProp === 'button') {
  8223. buttonProps.type = type;
  8224. buttonProps.disabled = disabled;
  8225. } else {
  8226. if (ComponentProp !== 'a' || !other.href) {
  8227. buttonProps.role = 'button';
  8228. }
  8229.  
  8230. buttonProps['aria-disabled'] = disabled;
  8231. }
  8232.  
  8233. var handleUserRef = useForkRef(buttonRefProp, ref);
  8234. var handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
  8235. var handleRef = useForkRef(handleUserRef, handleOwnRef);
  8236.  
  8237. var _React$useState2 = React__namespace.useState(false),
  8238. mountedState = _React$useState2[0],
  8239. setMountedState = _React$useState2[1];
  8240.  
  8241. React__namespace.useEffect(function () {
  8242. setMountedState(true);
  8243. }, []);
  8244. var enableTouchRipple = mountedState && !disableRipple && !disabled;
  8245.  
  8246. return /*#__PURE__*/React__namespace.createElement(ComponentProp, _extends$1({
  8247. className: clsx(classes.root, className, focusVisible && [classes.focusVisible, focusVisibleClassName], disabled && classes.disabled),
  8248. onBlur: handleBlur,
  8249. onClick: onClick,
  8250. onFocus: handleFocus,
  8251. onKeyDown: handleKeyDown,
  8252. onKeyUp: handleKeyUp,
  8253. onMouseDown: handleMouseDown,
  8254. onMouseLeave: handleMouseLeave,
  8255. onMouseUp: handleMouseUp,
  8256. onDragLeave: handleDragLeave,
  8257. onTouchEnd: handleTouchEnd,
  8258. onTouchMove: handleTouchMove,
  8259. onTouchStart: handleTouchStart,
  8260. ref: handleRef,
  8261. tabIndex: disabled ? -1 : tabIndex
  8262. }, buttonProps, other), children, enableTouchRipple ?
  8263. /*#__PURE__*/
  8264.  
  8265. /* TouchRipple is only needed client-side, x2 boost on the server. */
  8266. React__namespace.createElement(TouchRipple$1, _extends$1({
  8267. ref: rippleRef,
  8268. center: centerRipple
  8269. }, TouchRippleProps)) : null);
  8270. });
  8271. var ButtonBase$1 = withStyles(styles$e, {
  8272. name: 'MuiButtonBase'
  8273. })(ButtonBase);
  8274.  
  8275. var styles$d = function styles(theme) {
  8276. return {
  8277. /* Styles applied to the root element. */
  8278. root: {
  8279. textAlign: 'center',
  8280. flex: '0 0 auto',
  8281. fontSize: theme.typography.pxToRem(24),
  8282. padding: 12,
  8283. borderRadius: '50%',
  8284. overflow: 'visible',
  8285. // Explicitly set the default value to solve a bug on IE 11.
  8286. color: theme.palette.action.active,
  8287. transition: theme.transitions.create('background-color', {
  8288. duration: theme.transitions.duration.shortest
  8289. }),
  8290. '&:hover': {
  8291. backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),
  8292. // Reset on touch devices, it doesn't add specificity
  8293. '@media (hover: none)': {
  8294. backgroundColor: 'transparent'
  8295. }
  8296. },
  8297. '&$disabled': {
  8298. backgroundColor: 'transparent',
  8299. color: theme.palette.action.disabled
  8300. }
  8301. },
  8302.  
  8303. /* Styles applied to the root element if `edge="start"`. */
  8304. edgeStart: {
  8305. marginLeft: -12,
  8306. '$sizeSmall&': {
  8307. marginLeft: -3
  8308. }
  8309. },
  8310.  
  8311. /* Styles applied to the root element if `edge="end"`. */
  8312. edgeEnd: {
  8313. marginRight: -12,
  8314. '$sizeSmall&': {
  8315. marginRight: -3
  8316. }
  8317. },
  8318.  
  8319. /* Styles applied to the root element if `color="inherit"`. */
  8320. colorInherit: {
  8321. color: 'inherit'
  8322. },
  8323.  
  8324. /* Styles applied to the root element if `color="primary"`. */
  8325. colorPrimary: {
  8326. color: theme.palette.primary.main,
  8327. '&:hover': {
  8328. backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
  8329. // Reset on touch devices, it doesn't add specificity
  8330. '@media (hover: none)': {
  8331. backgroundColor: 'transparent'
  8332. }
  8333. }
  8334. },
  8335.  
  8336. /* Styles applied to the root element if `color="secondary"`. */
  8337. colorSecondary: {
  8338. color: theme.palette.secondary.main,
  8339. '&:hover': {
  8340. backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
  8341. // Reset on touch devices, it doesn't add specificity
  8342. '@media (hover: none)': {
  8343. backgroundColor: 'transparent'
  8344. }
  8345. }
  8346. },
  8347.  
  8348. /* Pseudo-class applied to the root element if `disabled={true}`. */
  8349. disabled: {},
  8350.  
  8351. /* Styles applied to the root element if `size="small"`. */
  8352. sizeSmall: {
  8353. padding: 3,
  8354. fontSize: theme.typography.pxToRem(18)
  8355. },
  8356.  
  8357. /* Styles applied to the children container element. */
  8358. label: {
  8359. width: '100%',
  8360. display: 'flex',
  8361. alignItems: 'inherit',
  8362. justifyContent: 'inherit'
  8363. }
  8364. };
  8365. };
  8366. /**
  8367. * Refer to the [Icons](/components/icons/) section of the documentation
  8368. * regarding the available icon options.
  8369. */
  8370.  
  8371. var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(props, ref) {
  8372. var _props$edge = props.edge,
  8373. edge = _props$edge === void 0 ? false : _props$edge,
  8374. children = props.children,
  8375. classes = props.classes,
  8376. className = props.className,
  8377. _props$color = props.color,
  8378. color = _props$color === void 0 ? 'default' : _props$color,
  8379. _props$disabled = props.disabled,
  8380. disabled = _props$disabled === void 0 ? false : _props$disabled,
  8381. _props$disableFocusRi = props.disableFocusRipple,
  8382. disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
  8383. _props$size = props.size,
  8384. size = _props$size === void 0 ? 'medium' : _props$size,
  8385. other = _objectWithoutProperties(props, ["edge", "children", "classes", "className", "color", "disabled", "disableFocusRipple", "size"]);
  8386.  
  8387. return /*#__PURE__*/React__namespace.createElement(ButtonBase$1, _extends$1({
  8388. className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], disabled && classes.disabled, size === "small" && classes["size".concat(capitalize(size))], {
  8389. 'start': classes.edgeStart,
  8390. 'end': classes.edgeEnd
  8391. }[edge]),
  8392. centerRipple: true,
  8393. focusRipple: !disableFocusRipple,
  8394. disabled: disabled,
  8395. ref: ref
  8396. }, other), /*#__PURE__*/React__namespace.createElement("span", {
  8397. className: classes.label
  8398. }, children));
  8399. });
  8400. var IconButton$1 = withStyles(styles$d, {
  8401. name: 'MuiIconButton'
  8402. })(IconButton);
  8403.  
  8404. var styles$c = {
  8405. entering: {
  8406. opacity: 1
  8407. },
  8408. entered: {
  8409. opacity: 1
  8410. }
  8411. };
  8412. var defaultTimeout = {
  8413. enter: duration.enteringScreen,
  8414. exit: duration.leavingScreen
  8415. };
  8416. /**
  8417. * The Fade transition is used by the [Modal](/components/modal/) component.
  8418. * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  8419. */
  8420.  
  8421. var Fade = /*#__PURE__*/React__namespace.forwardRef(function Fade(props, ref) {
  8422. var children = props.children,
  8423. _props$disableStrictM = props.disableStrictModeCompat,
  8424. disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
  8425. inProp = props.in,
  8426. onEnter = props.onEnter,
  8427. onEntered = props.onEntered,
  8428. onEntering = props.onEntering,
  8429. onExit = props.onExit,
  8430. onExited = props.onExited,
  8431. onExiting = props.onExiting,
  8432. style = props.style,
  8433. _props$TransitionComp = props.TransitionComponent,
  8434. TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
  8435. _props$timeout = props.timeout,
  8436. timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
  8437. other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "TransitionComponent", "timeout"]);
  8438.  
  8439. var theme = useTheme();
  8440. var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
  8441. var nodeRef = React__namespace.useRef(null);
  8442. var foreignRef = useForkRef(children.ref, ref);
  8443. var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);
  8444.  
  8445. var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
  8446. return function (nodeOrAppearing, maybeAppearing) {
  8447. if (callback) {
  8448. var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
  8449. _ref2 = _slicedToArray(_ref, 2),
  8450. node = _ref2[0],
  8451. isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
  8452.  
  8453.  
  8454. if (isAppearing === undefined) {
  8455. callback(node);
  8456. } else {
  8457. callback(node, isAppearing);
  8458. }
  8459. }
  8460. };
  8461. };
  8462.  
  8463. var handleEntering = normalizedTransitionCallback(onEntering);
  8464. var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
  8465. reflow(node); // So the animation always start from the start.
  8466.  
  8467. var transitionProps = getTransitionProps({
  8468. style: style,
  8469. timeout: timeout
  8470. }, {
  8471. mode: 'enter'
  8472. });
  8473. node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
  8474. node.style.transition = theme.transitions.create('opacity', transitionProps);
  8475.  
  8476. if (onEnter) {
  8477. onEnter(node, isAppearing);
  8478. }
  8479. });
  8480. var handleEntered = normalizedTransitionCallback(onEntered);
  8481. var handleExiting = normalizedTransitionCallback(onExiting);
  8482. var handleExit = normalizedTransitionCallback(function (node) {
  8483. var transitionProps = getTransitionProps({
  8484. style: style,
  8485. timeout: timeout
  8486. }, {
  8487. mode: 'exit'
  8488. });
  8489. node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
  8490. node.style.transition = theme.transitions.create('opacity', transitionProps);
  8491.  
  8492. if (onExit) {
  8493. onExit(node);
  8494. }
  8495. });
  8496. var handleExited = normalizedTransitionCallback(onExited);
  8497. return /*#__PURE__*/React__namespace.createElement(TransitionComponent, _extends$1({
  8498. appear: true,
  8499. in: inProp,
  8500. nodeRef: enableStrictModeCompat ? nodeRef : undefined,
  8501. onEnter: handleEnter,
  8502. onEntered: handleEntered,
  8503. onEntering: handleEntering,
  8504. onExit: handleExit,
  8505. onExited: handleExited,
  8506. onExiting: handleExiting,
  8507. timeout: timeout
  8508. }, other), function (state, childProps) {
  8509. return /*#__PURE__*/React__namespace.cloneElement(children, _extends$1({
  8510. style: _extends$1({
  8511. opacity: 0,
  8512. visibility: state === 'exited' && !inProp ? 'hidden' : undefined
  8513. }, styles$c[state], style, children.props.style),
  8514. ref: handleRef
  8515. }, childProps));
  8516. });
  8517. });
  8518.  
  8519. var styleFunction = css$1(compose(borders, display, flexbox, grid, positions, palette, boxShadow, sizing, spacing, typography));
  8520. /**
  8521. * @ignore - do not document.
  8522. */
  8523.  
  8524. var Box = styled('div')(styleFunction, {
  8525. name: 'MuiBox'
  8526. });
  8527.  
  8528. var styles$b = function styles(theme) {
  8529. return {
  8530. /* Styles applied to the root element. */
  8531. root: {
  8532. margin: 0
  8533. },
  8534.  
  8535. /* Styles applied to the root element if `variant="body2"`. */
  8536. body2: theme.typography.body2,
  8537.  
  8538. /* Styles applied to the root element if `variant="body1"`. */
  8539. body1: theme.typography.body1,
  8540.  
  8541. /* Styles applied to the root element if `variant="caption"`. */
  8542. caption: theme.typography.caption,
  8543.  
  8544. /* Styles applied to the root element if `variant="button"`. */
  8545. button: theme.typography.button,
  8546.  
  8547. /* Styles applied to the root element if `variant="h1"`. */
  8548. h1: theme.typography.h1,
  8549.  
  8550. /* Styles applied to the root element if `variant="h2"`. */
  8551. h2: theme.typography.h2,
  8552.  
  8553. /* Styles applied to the root element if `variant="h3"`. */
  8554. h3: theme.typography.h3,
  8555.  
  8556. /* Styles applied to the root element if `variant="h4"`. */
  8557. h4: theme.typography.h4,
  8558.  
  8559. /* Styles applied to the root element if `variant="h5"`. */
  8560. h5: theme.typography.h5,
  8561.  
  8562. /* Styles applied to the root element if `variant="h6"`. */
  8563. h6: theme.typography.h6,
  8564.  
  8565. /* Styles applied to the root element if `variant="subtitle1"`. */
  8566. subtitle1: theme.typography.subtitle1,
  8567.  
  8568. /* Styles applied to the root element if `variant="subtitle2"`. */
  8569. subtitle2: theme.typography.subtitle2,
  8570.  
  8571. /* Styles applied to the root element if `variant="overline"`. */
  8572. overline: theme.typography.overline,
  8573.  
  8574. /* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */
  8575. srOnly: {
  8576. position: 'absolute',
  8577. height: 1,
  8578. width: 1,
  8579. overflow: 'hidden'
  8580. },
  8581.  
  8582. /* Styles applied to the root element if `align="left"`. */
  8583. alignLeft: {
  8584. textAlign: 'left'
  8585. },
  8586.  
  8587. /* Styles applied to the root element if `align="center"`. */
  8588. alignCenter: {
  8589. textAlign: 'center'
  8590. },
  8591.  
  8592. /* Styles applied to the root element if `align="right"`. */
  8593. alignRight: {
  8594. textAlign: 'right'
  8595. },
  8596.  
  8597. /* Styles applied to the root element if `align="justify"`. */
  8598. alignJustify: {
  8599. textAlign: 'justify'
  8600. },
  8601.  
  8602. /* Styles applied to the root element if `nowrap={true}`. */
  8603. noWrap: {
  8604. overflow: 'hidden',
  8605. textOverflow: 'ellipsis',
  8606. whiteSpace: 'nowrap'
  8607. },
  8608.  
  8609. /* Styles applied to the root element if `gutterBottom={true}`. */
  8610. gutterBottom: {
  8611. marginBottom: '0.35em'
  8612. },
  8613.  
  8614. /* Styles applied to the root element if `paragraph={true}`. */
  8615. paragraph: {
  8616. marginBottom: 16
  8617. },
  8618.  
  8619. /* Styles applied to the root element if `color="inherit"`. */
  8620. colorInherit: {
  8621. color: 'inherit'
  8622. },
  8623.  
  8624. /* Styles applied to the root element if `color="primary"`. */
  8625. colorPrimary: {
  8626. color: theme.palette.primary.main
  8627. },
  8628.  
  8629. /* Styles applied to the root element if `color="secondary"`. */
  8630. colorSecondary: {
  8631. color: theme.palette.secondary.main
  8632. },
  8633.  
  8634. /* Styles applied to the root element if `color="textPrimary"`. */
  8635. colorTextPrimary: {
  8636. color: theme.palette.text.primary
  8637. },
  8638.  
  8639. /* Styles applied to the root element if `color="textSecondary"`. */
  8640. colorTextSecondary: {
  8641. color: theme.palette.text.secondary
  8642. },
  8643.  
  8644. /* Styles applied to the root element if `color="error"`. */
  8645. colorError: {
  8646. color: theme.palette.error.main
  8647. },
  8648.  
  8649. /* Styles applied to the root element if `display="inline"`. */
  8650. displayInline: {
  8651. display: 'inline'
  8652. },
  8653.  
  8654. /* Styles applied to the root element if `display="block"`. */
  8655. displayBlock: {
  8656. display: 'block'
  8657. }
  8658. };
  8659. };
  8660. var defaultVariantMapping = {
  8661. h1: 'h1',
  8662. h2: 'h2',
  8663. h3: 'h3',
  8664. h4: 'h4',
  8665. h5: 'h5',
  8666. h6: 'h6',
  8667. subtitle1: 'h6',
  8668. subtitle2: 'h6',
  8669. body1: 'p',
  8670. body2: 'p'
  8671. };
  8672. var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(props, ref) {
  8673. var _props$align = props.align,
  8674. align = _props$align === void 0 ? 'inherit' : _props$align,
  8675. classes = props.classes,
  8676. className = props.className,
  8677. _props$color = props.color,
  8678. color = _props$color === void 0 ? 'initial' : _props$color,
  8679. component = props.component,
  8680. _props$display = props.display,
  8681. display = _props$display === void 0 ? 'initial' : _props$display,
  8682. _props$gutterBottom = props.gutterBottom,
  8683. gutterBottom = _props$gutterBottom === void 0 ? false : _props$gutterBottom,
  8684. _props$noWrap = props.noWrap,
  8685. noWrap = _props$noWrap === void 0 ? false : _props$noWrap,
  8686. _props$paragraph = props.paragraph,
  8687. paragraph = _props$paragraph === void 0 ? false : _props$paragraph,
  8688. _props$variant = props.variant,
  8689. variant = _props$variant === void 0 ? 'body1' : _props$variant,
  8690. _props$variantMapping = props.variantMapping,
  8691. variantMapping = _props$variantMapping === void 0 ? defaultVariantMapping : _props$variantMapping,
  8692. other = _objectWithoutProperties(props, ["align", "classes", "className", "color", "component", "display", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"]);
  8693.  
  8694. var Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
  8695. return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
  8696. className: clsx(classes.root, className, variant !== 'inherit' && classes[variant], color !== 'initial' && classes["color".concat(capitalize(color))], noWrap && classes.noWrap, gutterBottom && classes.gutterBottom, paragraph && classes.paragraph, align !== 'inherit' && classes["align".concat(capitalize(align))], display !== 'initial' && classes["display".concat(capitalize(display))]),
  8697. ref: ref
  8698. }, other));
  8699. });
  8700. var Typography$1 = withStyles(styles$b, {
  8701. name: 'MuiTypography'
  8702. })(Typography);
  8703.  
  8704. /**
  8705. * @ignore - internal component.
  8706. */
  8707.  
  8708. var FormControlContext = /*#__PURE__*/React__namespace.createContext();
  8709.  
  8710. function useFormControl() {
  8711. return React__namespace.useContext(FormControlContext);
  8712. }
  8713.  
  8714. var styles$a = {
  8715. root: {
  8716. padding: 9
  8717. },
  8718. checked: {},
  8719. disabled: {},
  8720. input: {
  8721. cursor: 'inherit',
  8722. position: 'absolute',
  8723. opacity: 0,
  8724. width: '100%',
  8725. height: '100%',
  8726. top: 0,
  8727. left: 0,
  8728. margin: 0,
  8729. padding: 0,
  8730. zIndex: 1
  8731. }
  8732. };
  8733. /**
  8734. * @ignore - internal component.
  8735. */
  8736.  
  8737. var SwitchBase = /*#__PURE__*/React__namespace.forwardRef(function SwitchBase(props, ref) {
  8738. var autoFocus = props.autoFocus,
  8739. checkedProp = props.checked,
  8740. checkedIcon = props.checkedIcon,
  8741. classes = props.classes,
  8742. className = props.className,
  8743. defaultChecked = props.defaultChecked,
  8744. disabledProp = props.disabled,
  8745. icon = props.icon,
  8746. id = props.id,
  8747. inputProps = props.inputProps,
  8748. inputRef = props.inputRef,
  8749. name = props.name,
  8750. onBlur = props.onBlur,
  8751. onChange = props.onChange,
  8752. onFocus = props.onFocus,
  8753. readOnly = props.readOnly,
  8754. required = props.required,
  8755. tabIndex = props.tabIndex,
  8756. type = props.type,
  8757. value = props.value,
  8758. other = _objectWithoutProperties(props, ["autoFocus", "checked", "checkedIcon", "classes", "className", "defaultChecked", "disabled", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"]);
  8759.  
  8760. var _useControlled = useControlled({
  8761. controlled: checkedProp,
  8762. default: Boolean(defaultChecked),
  8763. name: 'SwitchBase',
  8764. state: 'checked'
  8765. }),
  8766. _useControlled2 = _slicedToArray(_useControlled, 2),
  8767. checked = _useControlled2[0],
  8768. setCheckedState = _useControlled2[1];
  8769.  
  8770. var muiFormControl = useFormControl();
  8771.  
  8772. var handleFocus = function handleFocus(event) {
  8773. if (onFocus) {
  8774. onFocus(event);
  8775. }
  8776.  
  8777. if (muiFormControl && muiFormControl.onFocus) {
  8778. muiFormControl.onFocus(event);
  8779. }
  8780. };
  8781.  
  8782. var handleBlur = function handleBlur(event) {
  8783. if (onBlur) {
  8784. onBlur(event);
  8785. }
  8786.  
  8787. if (muiFormControl && muiFormControl.onBlur) {
  8788. muiFormControl.onBlur(event);
  8789. }
  8790. };
  8791.  
  8792. var handleInputChange = function handleInputChange(event) {
  8793. var newChecked = event.target.checked;
  8794. setCheckedState(newChecked);
  8795.  
  8796. if (onChange) {
  8797. // TODO v5: remove the second argument.
  8798. onChange(event, newChecked);
  8799. }
  8800. };
  8801.  
  8802. var disabled = disabledProp;
  8803.  
  8804. if (muiFormControl) {
  8805. if (typeof disabled === 'undefined') {
  8806. disabled = muiFormControl.disabled;
  8807. }
  8808. }
  8809.  
  8810. var hasLabelFor = type === 'checkbox' || type === 'radio';
  8811. return /*#__PURE__*/React__namespace.createElement(IconButton$1, _extends$1({
  8812. component: "span",
  8813. className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),
  8814. disabled: disabled,
  8815. tabIndex: null,
  8816. role: undefined,
  8817. onFocus: handleFocus,
  8818. onBlur: handleBlur,
  8819. ref: ref
  8820. }, other), /*#__PURE__*/React__namespace.createElement("input", _extends$1({
  8821. autoFocus: autoFocus,
  8822. checked: checkedProp,
  8823. defaultChecked: defaultChecked,
  8824. className: classes.input,
  8825. disabled: disabled,
  8826. id: hasLabelFor && id,
  8827. name: name,
  8828. onChange: handleInputChange,
  8829. readOnly: readOnly,
  8830. ref: inputRef,
  8831. required: required,
  8832. tabIndex: tabIndex,
  8833. type: type,
  8834. value: value
  8835. }, inputProps)), checked ? checkedIcon : icon);
  8836. }); // NB: If changed, please update Checkbox, Switch and Radio
  8837. var SwitchBase$1 = withStyles(styles$a, {
  8838. name: 'PrivateSwitchBase'
  8839. })(SwitchBase);
  8840.  
  8841. function mapEventPropToEvent(eventProp) {
  8842. return eventProp.substring(2).toLowerCase();
  8843. }
  8844.  
  8845. function clickedRootScrollbar(event) {
  8846. return document.documentElement.clientWidth < event.clientX || document.documentElement.clientHeight < event.clientY;
  8847. }
  8848. /**
  8849. * Listen for click events that occur somewhere in the document, outside of the element itself.
  8850. * For instance, if you need to hide a menu when people click anywhere else on your page.
  8851. */
  8852.  
  8853.  
  8854. function ClickAwayListener(props) {
  8855. var children = props.children,
  8856. _props$disableReactTr = props.disableReactTree,
  8857. disableReactTree = _props$disableReactTr === void 0 ? false : _props$disableReactTr,
  8858. _props$mouseEvent = props.mouseEvent,
  8859. mouseEvent = _props$mouseEvent === void 0 ? 'onClick' : _props$mouseEvent,
  8860. onClickAway = props.onClickAway,
  8861. _props$touchEvent = props.touchEvent,
  8862. touchEvent = _props$touchEvent === void 0 ? 'onTouchEnd' : _props$touchEvent;
  8863. var movedRef = React__namespace.useRef(false);
  8864. var nodeRef = React__namespace.useRef(null);
  8865. var activatedRef = React__namespace.useRef(false);
  8866. var syntheticEventRef = React__namespace.useRef(false);
  8867. React__namespace.useEffect(function () {
  8868. // Ensure that this component is not "activated" synchronously.
  8869. // https://github.com/facebook/react/issues/20074
  8870. setTimeout(function () {
  8871. activatedRef.current = true;
  8872. }, 0);
  8873. return function () {
  8874. activatedRef.current = false;
  8875. };
  8876. }, []); // can be removed once we drop support for non ref forwarding class components
  8877.  
  8878. var handleOwnRef = React__namespace.useCallback(function (instance) {
  8879. // #StrictMode ready
  8880. nodeRef.current = ReactDOM__namespace.findDOMNode(instance);
  8881. }, []);
  8882. var handleRef = useForkRef(children.ref, handleOwnRef); // The handler doesn't take event.defaultPrevented into account:
  8883. //
  8884. // event.preventDefault() is meant to stop default behaviours like
  8885. // clicking a checkbox to check it, hitting a button to submit a form,
  8886. // and hitting left arrow to move the cursor in a text input etc.
  8887. // Only special HTML elements have these default behaviors.
  8888.  
  8889. var handleClickAway = useEventCallback(function (event) {
  8890. // Given developers can stop the propagation of the synthetic event,
  8891. // we can only be confident with a positive value.
  8892. var insideReactTree = syntheticEventRef.current;
  8893. syntheticEventRef.current = false; // 1. IE 11 support, which trigger the handleClickAway even after the unbind
  8894. // 2. The child might render null.
  8895. // 3. Behave like a blur listener.
  8896.  
  8897. if (!activatedRef.current || !nodeRef.current || clickedRootScrollbar(event)) {
  8898. return;
  8899. } // Do not act if user performed touchmove
  8900.  
  8901.  
  8902. if (movedRef.current) {
  8903. movedRef.current = false;
  8904. return;
  8905. }
  8906.  
  8907. var insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
  8908.  
  8909. if (event.composedPath) {
  8910. insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
  8911. } else {
  8912. // TODO v6 remove dead logic https://caniuse.com/#search=composedPath.
  8913. var doc = ownerDocument(nodeRef.current);
  8914. insideDOM = !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
  8915. }
  8916.  
  8917. if (!insideDOM && (disableReactTree || !insideReactTree)) {
  8918. onClickAway(event);
  8919. }
  8920. }); // Keep track of mouse/touch events that bubbled up through the portal.
  8921.  
  8922. var createHandleSynthetic = function createHandleSynthetic(handlerName) {
  8923. return function (event) {
  8924. syntheticEventRef.current = true;
  8925. var childrenPropsHandler = children.props[handlerName];
  8926.  
  8927. if (childrenPropsHandler) {
  8928. childrenPropsHandler(event);
  8929. }
  8930. };
  8931. };
  8932.  
  8933. var childrenProps = {
  8934. ref: handleRef
  8935. };
  8936.  
  8937. if (touchEvent !== false) {
  8938. childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
  8939. }
  8940.  
  8941. React__namespace.useEffect(function () {
  8942. if (touchEvent !== false) {
  8943. var mappedTouchEvent = mapEventPropToEvent(touchEvent);
  8944. var doc = ownerDocument(nodeRef.current);
  8945.  
  8946. var handleTouchMove = function handleTouchMove() {
  8947. movedRef.current = true;
  8948. };
  8949.  
  8950. doc.addEventListener(mappedTouchEvent, handleClickAway);
  8951. doc.addEventListener('touchmove', handleTouchMove);
  8952. return function () {
  8953. doc.removeEventListener(mappedTouchEvent, handleClickAway);
  8954. doc.removeEventListener('touchmove', handleTouchMove);
  8955. };
  8956. }
  8957.  
  8958. return undefined;
  8959. }, [handleClickAway, touchEvent]);
  8960.  
  8961. if (mouseEvent !== false) {
  8962. childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
  8963. }
  8964.  
  8965. React__namespace.useEffect(function () {
  8966. if (mouseEvent !== false) {
  8967. var mappedMouseEvent = mapEventPropToEvent(mouseEvent);
  8968. var doc = ownerDocument(nodeRef.current);
  8969. doc.addEventListener(mappedMouseEvent, handleClickAway);
  8970. return function () {
  8971. doc.removeEventListener(mappedMouseEvent, handleClickAway);
  8972. };
  8973. }
  8974.  
  8975. return undefined;
  8976. }, [handleClickAway, mouseEvent]);
  8977. return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.cloneElement(children, childrenProps));
  8978. }
  8979.  
  8980. function getContainer(container) {
  8981. container = typeof container === 'function' ? container() : container; // #StrictMode ready
  8982.  
  8983. return ReactDOM__namespace.findDOMNode(container);
  8984. }
  8985.  
  8986. var useEnhancedEffect$2 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
  8987. /**
  8988. * Portals provide a first-class way to render children into a DOM node
  8989. * that exists outside the DOM hierarchy of the parent component.
  8990. */
  8991.  
  8992. var Portal = /*#__PURE__*/React__namespace.forwardRef(function Portal(props, ref) {
  8993. var children = props.children,
  8994. container = props.container,
  8995. _props$disablePortal = props.disablePortal,
  8996. disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
  8997. onRendered = props.onRendered;
  8998.  
  8999. var _React$useState = React__namespace.useState(null),
  9000. mountNode = _React$useState[0],
  9001. setMountNode = _React$useState[1];
  9002.  
  9003. var handleRef = useForkRef( /*#__PURE__*/ /*#__PURE__*/React__namespace.isValidElement(children) ? children.ref : null, ref);
  9004. useEnhancedEffect$2(function () {
  9005. if (!disablePortal) {
  9006. setMountNode(getContainer(container) || document.body);
  9007. }
  9008. }, [container, disablePortal]);
  9009. useEnhancedEffect$2(function () {
  9010. if (mountNode && !disablePortal) {
  9011. setRef(ref, mountNode);
  9012. return function () {
  9013. setRef(ref, null);
  9014. };
  9015. }
  9016.  
  9017. return undefined;
  9018. }, [ref, mountNode, disablePortal]);
  9019. useEnhancedEffect$2(function () {
  9020. if (onRendered && (mountNode || disablePortal)) {
  9021. onRendered();
  9022. }
  9023. }, [onRendered, mountNode, disablePortal]);
  9024.  
  9025. if (disablePortal) {
  9026. if ( /*#__PURE__*/React__namespace.isValidElement(children)) {
  9027. return /*#__PURE__*/React__namespace.cloneElement(children, {
  9028. ref: handleRef
  9029. });
  9030. }
  9031.  
  9032. return children;
  9033. }
  9034.  
  9035. return mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode;
  9036. });
  9037.  
  9038. var styles$9 = function styles(theme) {
  9039. return {
  9040. /* Styles applied to the root element. */
  9041. root: {
  9042. height: 1,
  9043. margin: 0,
  9044. // Reset browser default style.
  9045. border: 'none',
  9046. flexShrink: 0,
  9047. backgroundColor: theme.palette.divider
  9048. },
  9049.  
  9050. /* Styles applied to the root element if `absolute={true}`. */
  9051. absolute: {
  9052. position: 'absolute',
  9053. bottom: 0,
  9054. left: 0,
  9055. width: '100%'
  9056. },
  9057.  
  9058. /* Styles applied to the root element if `variant="inset"`. */
  9059. inset: {
  9060. marginLeft: 72
  9061. },
  9062.  
  9063. /* Styles applied to the root element if `light={true}`. */
  9064. light: {
  9065. backgroundColor: fade(theme.palette.divider, 0.08)
  9066. },
  9067.  
  9068. /* Styles applied to the root element if `variant="middle"`. */
  9069. middle: {
  9070. marginLeft: theme.spacing(2),
  9071. marginRight: theme.spacing(2)
  9072. },
  9073.  
  9074. /* Styles applied to the root element if `orientation="vertical"`. */
  9075. vertical: {
  9076. height: '100%',
  9077. width: 1
  9078. },
  9079.  
  9080. /* Styles applied to the root element if `flexItem={true}`. */
  9081. flexItem: {
  9082. alignSelf: 'stretch',
  9083. height: 'auto'
  9084. }
  9085. };
  9086. };
  9087. var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(props, ref) {
  9088. var _props$absolute = props.absolute,
  9089. absolute = _props$absolute === void 0 ? false : _props$absolute,
  9090. classes = props.classes,
  9091. className = props.className,
  9092. _props$component = props.component,
  9093. Component = _props$component === void 0 ? 'hr' : _props$component,
  9094. _props$flexItem = props.flexItem,
  9095. flexItem = _props$flexItem === void 0 ? false : _props$flexItem,
  9096. _props$light = props.light,
  9097. light = _props$light === void 0 ? false : _props$light,
  9098. _props$orientation = props.orientation,
  9099. orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
  9100. _props$role = props.role,
  9101. role = _props$role === void 0 ? Component !== 'hr' ? 'separator' : undefined : _props$role,
  9102. _props$variant = props.variant,
  9103. variant = _props$variant === void 0 ? 'fullWidth' : _props$variant,
  9104. other = _objectWithoutProperties(props, ["absolute", "classes", "className", "component", "flexItem", "light", "orientation", "role", "variant"]);
  9105.  
  9106. return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
  9107. className: clsx(classes.root, className, variant !== 'fullWidth' && classes[variant], absolute && classes.absolute, flexItem && classes.flexItem, light && classes.light, orientation === 'vertical' && classes.vertical),
  9108. role: role,
  9109. ref: ref
  9110. }, other));
  9111. });
  9112. var Divider$1 = withStyles(styles$9, {
  9113. name: 'MuiDivider'
  9114. })(Divider);
  9115.  
  9116. function getScale(value) {
  9117. return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
  9118. }
  9119.  
  9120. var styles$8 = {
  9121. entering: {
  9122. opacity: 1,
  9123. transform: getScale(1)
  9124. },
  9125. entered: {
  9126. opacity: 1,
  9127. transform: 'none'
  9128. }
  9129. };
  9130. /**
  9131. * The Grow transition is used by the [Tooltip](/components/tooltips/) and
  9132. * [Popover](/components/popover/) components.
  9133. * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  9134. */
  9135.  
  9136. var Grow = /*#__PURE__*/React__namespace.forwardRef(function Grow(props, ref) {
  9137. var children = props.children,
  9138. _props$disableStrictM = props.disableStrictModeCompat,
  9139. disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,
  9140. inProp = props.in,
  9141. onEnter = props.onEnter,
  9142. onEntered = props.onEntered,
  9143. onEntering = props.onEntering,
  9144. onExit = props.onExit,
  9145. onExited = props.onExited,
  9146. onExiting = props.onExiting,
  9147. style = props.style,
  9148. _props$timeout = props.timeout,
  9149. timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
  9150. _props$TransitionComp = props.TransitionComponent,
  9151. TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
  9152. other = _objectWithoutProperties(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
  9153.  
  9154. var timer = React__namespace.useRef();
  9155. var autoTimeout = React__namespace.useRef();
  9156. var theme = useTheme();
  9157. var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
  9158. var nodeRef = React__namespace.useRef(null);
  9159. var foreignRef = useForkRef(children.ref, ref);
  9160. var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);
  9161.  
  9162. var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
  9163. return function (nodeOrAppearing, maybeAppearing) {
  9164. if (callback) {
  9165. var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],
  9166. _ref2 = _slicedToArray(_ref, 2),
  9167. node = _ref2[0],
  9168. isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
  9169.  
  9170.  
  9171. if (isAppearing === undefined) {
  9172. callback(node);
  9173. } else {
  9174. callback(node, isAppearing);
  9175. }
  9176. }
  9177. };
  9178. };
  9179.  
  9180. var handleEntering = normalizedTransitionCallback(onEntering);
  9181. var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
  9182. reflow(node); // So the animation always start from the start.
  9183.  
  9184. var _getTransitionProps = getTransitionProps({
  9185. style: style,
  9186. timeout: timeout
  9187. }, {
  9188. mode: 'enter'
  9189. }),
  9190. transitionDuration = _getTransitionProps.duration,
  9191. delay = _getTransitionProps.delay;
  9192.  
  9193. var duration;
  9194.  
  9195. if (timeout === 'auto') {
  9196. duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
  9197. autoTimeout.current = duration;
  9198. } else {
  9199. duration = transitionDuration;
  9200. }
  9201.  
  9202. node.style.transition = [theme.transitions.create('opacity', {
  9203. duration: duration,
  9204. delay: delay
  9205. }), theme.transitions.create('transform', {
  9206. duration: duration * 0.666,
  9207. delay: delay
  9208. })].join(',');
  9209.  
  9210. if (onEnter) {
  9211. onEnter(node, isAppearing);
  9212. }
  9213. });
  9214. var handleEntered = normalizedTransitionCallback(onEntered);
  9215. var handleExiting = normalizedTransitionCallback(onExiting);
  9216. var handleExit = normalizedTransitionCallback(function (node) {
  9217. var _getTransitionProps2 = getTransitionProps({
  9218. style: style,
  9219. timeout: timeout
  9220. }, {
  9221. mode: 'exit'
  9222. }),
  9223. transitionDuration = _getTransitionProps2.duration,
  9224. delay = _getTransitionProps2.delay;
  9225.  
  9226. var duration;
  9227.  
  9228. if (timeout === 'auto') {
  9229. duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
  9230. autoTimeout.current = duration;
  9231. } else {
  9232. duration = transitionDuration;
  9233. }
  9234.  
  9235. node.style.transition = [theme.transitions.create('opacity', {
  9236. duration: duration,
  9237. delay: delay
  9238. }), theme.transitions.create('transform', {
  9239. duration: duration * 0.666,
  9240. delay: delay || duration * 0.333
  9241. })].join(',');
  9242. node.style.opacity = '0';
  9243. node.style.transform = getScale(0.75);
  9244.  
  9245. if (onExit) {
  9246. onExit(node);
  9247. }
  9248. });
  9249. var handleExited = normalizedTransitionCallback(onExited);
  9250.  
  9251. var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
  9252. var next = enableStrictModeCompat ? nodeOrNext : maybeNext;
  9253.  
  9254. if (timeout === 'auto') {
  9255. timer.current = setTimeout(next, autoTimeout.current || 0);
  9256. }
  9257. };
  9258.  
  9259. React__namespace.useEffect(function () {
  9260. return function () {
  9261. clearTimeout(timer.current);
  9262. };
  9263. }, []);
  9264. return /*#__PURE__*/React__namespace.createElement(TransitionComponent, _extends$1({
  9265. appear: true,
  9266. in: inProp,
  9267. nodeRef: enableStrictModeCompat ? nodeRef : undefined,
  9268. onEnter: handleEnter,
  9269. onEntered: handleEntered,
  9270. onEntering: handleEntering,
  9271. onExit: handleExit,
  9272. onExited: handleExited,
  9273. onExiting: handleExiting,
  9274. addEndListener: addEndListener,
  9275. timeout: timeout === 'auto' ? null : timeout
  9276. }, other), function (state, childProps) {
  9277. return /*#__PURE__*/React__namespace.cloneElement(children, _extends$1({
  9278. style: _extends$1({
  9279. opacity: 0,
  9280. transform: getScale(0.75),
  9281. visibility: state === 'exited' && !inProp ? 'hidden' : undefined
  9282. }, styles$8[state], style, children.props.style),
  9283. ref: handleRef
  9284. }, childProps));
  9285. });
  9286. });
  9287. Grow.muiSupportAuto = true;
  9288.  
  9289. /**
  9290. * @ignore - internal component.
  9291. */
  9292.  
  9293. var ListContext = /*#__PURE__*/React__namespace.createContext({});
  9294.  
  9295. var styles$7 = {
  9296. /* Styles applied to the root element. */
  9297. root: {
  9298. listStyle: 'none',
  9299. margin: 0,
  9300. padding: 0,
  9301. position: 'relative'
  9302. },
  9303.  
  9304. /* Styles applied to the root element if `disablePadding={false}`. */
  9305. padding: {
  9306. paddingTop: 8,
  9307. paddingBottom: 8
  9308. },
  9309.  
  9310. /* Styles applied to the root element if dense. */
  9311. dense: {},
  9312.  
  9313. /* Styles applied to the root element if a `subheader` is provided. */
  9314. subheader: {
  9315. paddingTop: 0
  9316. }
  9317. };
  9318. var List = /*#__PURE__*/React__namespace.forwardRef(function List(props, ref) {
  9319. var children = props.children,
  9320. classes = props.classes,
  9321. className = props.className,
  9322. _props$component = props.component,
  9323. Component = _props$component === void 0 ? 'ul' : _props$component,
  9324. _props$dense = props.dense,
  9325. dense = _props$dense === void 0 ? false : _props$dense,
  9326. _props$disablePadding = props.disablePadding,
  9327. disablePadding = _props$disablePadding === void 0 ? false : _props$disablePadding,
  9328. subheader = props.subheader,
  9329. other = _objectWithoutProperties(props, ["children", "classes", "className", "component", "dense", "disablePadding", "subheader"]);
  9330.  
  9331. var context = React__namespace.useMemo(function () {
  9332. return {
  9333. dense: dense
  9334. };
  9335. }, [dense]);
  9336. return /*#__PURE__*/React__namespace.createElement(ListContext.Provider, {
  9337. value: context
  9338. }, /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
  9339. className: clsx(classes.root, className, dense && classes.dense, !disablePadding && classes.padding, subheader && classes.subheader),
  9340. ref: ref
  9341. }, other), subheader, children));
  9342. });
  9343. var List$1 = withStyles(styles$7, {
  9344. name: 'MuiList'
  9345. })(List);
  9346.  
  9347. var styles$6 = function styles(theme) {
  9348. return {
  9349. /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
  9350. root: {
  9351. display: 'flex',
  9352. justifyContent: 'flex-start',
  9353. alignItems: 'center',
  9354. position: 'relative',
  9355. textDecoration: 'none',
  9356. width: '100%',
  9357. boxSizing: 'border-box',
  9358. textAlign: 'left',
  9359. paddingTop: 8,
  9360. paddingBottom: 8,
  9361. '&$focusVisible': {
  9362. backgroundColor: theme.palette.action.selected
  9363. },
  9364. '&$selected, &$selected:hover': {
  9365. backgroundColor: theme.palette.action.selected
  9366. },
  9367. '&$disabled': {
  9368. opacity: 0.5
  9369. }
  9370. },
  9371.  
  9372. /* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */
  9373. container: {
  9374. position: 'relative'
  9375. },
  9376.  
  9377. /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
  9378. focusVisible: {},
  9379.  
  9380. /* Styles applied to the `component` element if dense. */
  9381. dense: {
  9382. paddingTop: 4,
  9383. paddingBottom: 4
  9384. },
  9385.  
  9386. /* Styles applied to the `component` element if `alignItems="flex-start"`. */
  9387. alignItemsFlexStart: {
  9388. alignItems: 'flex-start'
  9389. },
  9390.  
  9391. /* Pseudo-class applied to the inner `component` element if `disabled={true}`. */
  9392. disabled: {},
  9393.  
  9394. /* Styles applied to the inner `component` element if `divider={true}`. */
  9395. divider: {
  9396. borderBottom: "1px solid ".concat(theme.palette.divider),
  9397. backgroundClip: 'padding-box'
  9398. },
  9399.  
  9400. /* Styles applied to the inner `component` element if `disableGutters={false}`. */
  9401. gutters: {
  9402. paddingLeft: 16,
  9403. paddingRight: 16
  9404. },
  9405.  
  9406. /* Styles applied to the inner `component` element if `button={true}`. */
  9407. button: {
  9408. transition: theme.transitions.create('background-color', {
  9409. duration: theme.transitions.duration.shortest
  9410. }),
  9411. '&:hover': {
  9412. textDecoration: 'none',
  9413. backgroundColor: theme.palette.action.hover,
  9414. // Reset on touch devices, it doesn't add specificity
  9415. '@media (hover: none)': {
  9416. backgroundColor: 'transparent'
  9417. }
  9418. }
  9419. },
  9420.  
  9421. /* Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. */
  9422. secondaryAction: {
  9423. // Add some space to avoid collision as `ListItemSecondaryAction`
  9424. // is absolutely positioned.
  9425. paddingRight: 48
  9426. },
  9427.  
  9428. /* Pseudo-class applied to the root element if `selected={true}`. */
  9429. selected: {}
  9430. };
  9431. };
  9432. var useEnhancedEffect$1 = typeof window === 'undefined' ? React__namespace.useEffect : React__namespace.useLayoutEffect;
  9433. /**
  9434. * Uses an additional container component if `ListItemSecondaryAction` is the last child.
  9435. */
  9436.  
  9437. var ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(props, ref) {
  9438. var _props$alignItems = props.alignItems,
  9439. alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
  9440. _props$autoFocus = props.autoFocus,
  9441. autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
  9442. _props$button = props.button,
  9443. button = _props$button === void 0 ? false : _props$button,
  9444. childrenProp = props.children,
  9445. classes = props.classes,
  9446. className = props.className,
  9447. componentProp = props.component,
  9448. _props$ContainerCompo = props.ContainerComponent,
  9449. ContainerComponent = _props$ContainerCompo === void 0 ? 'li' : _props$ContainerCompo,
  9450. _props$ContainerProps = props.ContainerProps;
  9451. _props$ContainerProps = _props$ContainerProps === void 0 ? {} : _props$ContainerProps;
  9452.  
  9453. var ContainerClassName = _props$ContainerProps.className,
  9454. ContainerProps = _objectWithoutProperties(_props$ContainerProps, ["className"]),
  9455. _props$dense = props.dense,
  9456. dense = _props$dense === void 0 ? false : _props$dense,
  9457. _props$disabled = props.disabled,
  9458. disabled = _props$disabled === void 0 ? false : _props$disabled,
  9459. _props$disableGutters = props.disableGutters,
  9460. disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
  9461. _props$divider = props.divider,
  9462. divider = _props$divider === void 0 ? false : _props$divider,
  9463. focusVisibleClassName = props.focusVisibleClassName,
  9464. _props$selected = props.selected,
  9465. selected = _props$selected === void 0 ? false : _props$selected,
  9466. other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "classes", "className", "component", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "divider", "focusVisibleClassName", "selected"]);
  9467.  
  9468. var context = React__namespace.useContext(ListContext);
  9469. var childContext = {
  9470. dense: dense || context.dense || false,
  9471. alignItems: alignItems
  9472. };
  9473. var listItemRef = React__namespace.useRef(null);
  9474. useEnhancedEffect$1(function () {
  9475. if (autoFocus) {
  9476. if (listItemRef.current) {
  9477. listItemRef.current.focus();
  9478. }
  9479. }
  9480. }, [autoFocus]);
  9481. var children = React__namespace.Children.toArray(childrenProp);
  9482. var hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
  9483. var handleOwnRef = React__namespace.useCallback(function (instance) {
  9484. // #StrictMode ready
  9485. listItemRef.current = ReactDOM__namespace.findDOMNode(instance);
  9486. }, []);
  9487. var handleRef = useForkRef(handleOwnRef, ref);
  9488.  
  9489. var componentProps = _extends$1({
  9490. 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),
  9491. disabled: disabled
  9492. }, other);
  9493.  
  9494. var Component = componentProp || 'li';
  9495.  
  9496. if (button) {
  9497. componentProps.component = componentProp || 'div';
  9498. componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
  9499. Component = ButtonBase$1;
  9500. }
  9501.  
  9502. if (hasSecondaryAction) {
  9503. // Use div by default.
  9504. Component = !componentProps.component && !componentProp ? 'div' : Component; // Avoid nesting of li > li.
  9505.  
  9506. if (ContainerComponent === 'li') {
  9507. if (Component === 'li') {
  9508. Component = 'div';
  9509. } else if (componentProps.component === 'li') {
  9510. componentProps.component = 'div';
  9511. }
  9512. }
  9513.  
  9514. return /*#__PURE__*/React__namespace.createElement(ListContext.Provider, {
  9515. value: childContext
  9516. }, /*#__PURE__*/React__namespace.createElement(ContainerComponent, _extends$1({
  9517. className: clsx(classes.container, ContainerClassName),
  9518. ref: handleRef
  9519. }, ContainerProps), /*#__PURE__*/React__namespace.createElement(Component, componentProps, children), children.pop()));
  9520. }
  9521.  
  9522. return /*#__PURE__*/React__namespace.createElement(ListContext.Provider, {
  9523. value: childContext
  9524. }, /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
  9525. ref: handleRef
  9526. }, componentProps), children));
  9527. });
  9528. var ListItem$1 = withStyles(styles$6, {
  9529. name: 'MuiListItem'
  9530. })(ListItem);
  9531.  
  9532. var styles$5 = {
  9533. /* Styles applied to the root element. */
  9534. root: {
  9535. position: 'absolute',
  9536. right: 16,
  9537. top: '50%',
  9538. transform: 'translateY(-50%)'
  9539. }
  9540. };
  9541. /**
  9542. * Must be used as the last child of ListItem to function properly.
  9543. */
  9544.  
  9545. var ListItemSecondaryAction = /*#__PURE__*/React__namespace.forwardRef(function ListItemSecondaryAction(props, ref) {
  9546. var classes = props.classes,
  9547. className = props.className,
  9548. other = _objectWithoutProperties(props, ["classes", "className"]);
  9549.  
  9550. return /*#__PURE__*/React__namespace.createElement("div", _extends$1({
  9551. className: clsx(classes.root, className),
  9552. ref: ref
  9553. }, other));
  9554. });
  9555. ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
  9556. var ListItemSecondaryAction$1 = withStyles(styles$5, {
  9557. name: 'MuiListItemSecondaryAction'
  9558. })(ListItemSecondaryAction);
  9559.  
  9560. var styles$4 = {
  9561. /* Styles applied to the root element. */
  9562. root: {
  9563. flex: '1 1 auto',
  9564. minWidth: 0,
  9565. marginTop: 4,
  9566. marginBottom: 4
  9567. },
  9568.  
  9569. /* Styles applied to the `Typography` components if primary and secondary are set. */
  9570. multiline: {
  9571. marginTop: 6,
  9572. marginBottom: 6
  9573. },
  9574.  
  9575. /* Styles applied to the `Typography` components if dense. */
  9576. dense: {},
  9577.  
  9578. /* Styles applied to the root element if `inset={true}`. */
  9579. inset: {
  9580. paddingLeft: 56
  9581. },
  9582.  
  9583. /* Styles applied to the primary `Typography` component. */
  9584. primary: {},
  9585.  
  9586. /* Styles applied to the secondary `Typography` component. */
  9587. secondary: {}
  9588. };
  9589. var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(props, ref) {
  9590. var children = props.children,
  9591. classes = props.classes,
  9592. className = props.className,
  9593. _props$disableTypogra = props.disableTypography,
  9594. disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,
  9595. _props$inset = props.inset,
  9596. inset = _props$inset === void 0 ? false : _props$inset,
  9597. primaryProp = props.primary,
  9598. primaryTypographyProps = props.primaryTypographyProps,
  9599. secondaryProp = props.secondary,
  9600. secondaryTypographyProps = props.secondaryTypographyProps,
  9601. other = _objectWithoutProperties(props, ["children", "classes", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"]);
  9602.  
  9603. var _React$useContext = React__namespace.useContext(ListContext),
  9604. dense = _React$useContext.dense;
  9605.  
  9606. var primary = primaryProp != null ? primaryProp : children;
  9607.  
  9608. if (primary != null && primary.type !== Typography$1 && !disableTypography) {
  9609. primary = /*#__PURE__*/React__namespace.createElement(Typography$1, _extends$1({
  9610. variant: dense ? 'body2' : 'body1',
  9611. className: classes.primary,
  9612. component: "span",
  9613. display: "block"
  9614. }, primaryTypographyProps), primary);
  9615. }
  9616.  
  9617. var secondary = secondaryProp;
  9618.  
  9619. if (secondary != null && secondary.type !== Typography$1 && !disableTypography) {
  9620. secondary = /*#__PURE__*/React__namespace.createElement(Typography$1, _extends$1({
  9621. variant: "body2",
  9622. className: classes.secondary,
  9623. color: "textSecondary",
  9624. display: "block"
  9625. }, secondaryTypographyProps), secondary);
  9626. }
  9627.  
  9628. return /*#__PURE__*/React__namespace.createElement("div", _extends$1({
  9629. className: clsx(classes.root, className, dense && classes.dense, inset && classes.inset, primary && secondary && classes.multiline),
  9630. ref: ref
  9631. }, other), primary, secondary);
  9632. });
  9633. var ListItemText$1 = withStyles(styles$4, {
  9634. name: 'MuiListItemText'
  9635. })(ListItemText);
  9636.  
  9637. /**!
  9638. * @fileOverview Kickass library to create and place poppers near their reference elements.
  9639. * @version 1.16.1-lts
  9640. * @license
  9641. * Copyright (c) 2016 Federico Zivolo and contributors
  9642. *
  9643. * Permission is hereby granted, free of charge, to any person obtaining a copy
  9644. * of this software and associated documentation files (the "Software"), to deal
  9645. * in the Software without restriction, including without limitation the rights
  9646. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9647. * copies of the Software, and to permit persons to whom the Software is
  9648. * furnished to do so, subject to the following conditions:
  9649. *
  9650. * The above copyright notice and this permission notice shall be included in all
  9651. * copies or substantial portions of the Software.
  9652. *
  9653. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  9654. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  9655. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  9656. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  9657. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  9658. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  9659. * SOFTWARE.
  9660. */
  9661. var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
  9662.  
  9663. var timeoutDuration = function () {
  9664. var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
  9665.  
  9666. for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
  9667. if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
  9668. return 1;
  9669. }
  9670. }
  9671.  
  9672. return 0;
  9673. }();
  9674.  
  9675. function microtaskDebounce(fn) {
  9676. var called = false;
  9677. return function () {
  9678. if (called) {
  9679. return;
  9680. }
  9681.  
  9682. called = true;
  9683. window.Promise.resolve().then(function () {
  9684. called = false;
  9685. fn();
  9686. });
  9687. };
  9688. }
  9689.  
  9690. function taskDebounce(fn) {
  9691. var scheduled = false;
  9692. return function () {
  9693. if (!scheduled) {
  9694. scheduled = true;
  9695. setTimeout(function () {
  9696. scheduled = false;
  9697. fn();
  9698. }, timeoutDuration);
  9699. }
  9700. };
  9701. }
  9702.  
  9703. var supportsMicroTasks = isBrowser && window.Promise;
  9704. /**
  9705. * Create a debounced version of a method, that's asynchronously deferred
  9706. * but called in the minimum time possible.
  9707. *
  9708. * @method
  9709. * @memberof Popper.Utils
  9710. * @argument {Function} fn
  9711. * @returns {Function}
  9712. */
  9713.  
  9714. var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;
  9715. /**
  9716. * Check if the given variable is a function
  9717. * @method
  9718. * @memberof Popper.Utils
  9719. * @argument {Any} functionToCheck - variable to check
  9720. * @returns {Boolean} answer to: is a function?
  9721. */
  9722.  
  9723. function isFunction(functionToCheck) {
  9724. var getType = {};
  9725. return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
  9726. }
  9727. /**
  9728. * Get CSS computed property of the given element
  9729. * @method
  9730. * @memberof Popper.Utils
  9731. * @argument {Eement} element
  9732. * @argument {String} property
  9733. */
  9734.  
  9735.  
  9736. function getStyleComputedProperty(element, property) {
  9737. if (element.nodeType !== 1) {
  9738. return [];
  9739. } // NOTE: 1 DOM access here
  9740.  
  9741.  
  9742. var window = element.ownerDocument.defaultView;
  9743. var css = window.getComputedStyle(element, null);
  9744. return property ? css[property] : css;
  9745. }
  9746. /**
  9747. * Returns the parentNode or the host of the element
  9748. * @method
  9749. * @memberof Popper.Utils
  9750. * @argument {Element} element
  9751. * @returns {Element} parent
  9752. */
  9753.  
  9754.  
  9755. function getParentNode(element) {
  9756. if (element.nodeName === 'HTML') {
  9757. return element;
  9758. }
  9759.  
  9760. return element.parentNode || element.host;
  9761. }
  9762. /**
  9763. * Returns the scrolling parent of the given element
  9764. * @method
  9765. * @memberof Popper.Utils
  9766. * @argument {Element} element
  9767. * @returns {Element} scroll parent
  9768. */
  9769.  
  9770.  
  9771. function getScrollParent(element) {
  9772. // Return body, `getScroll` will take care to get the correct `scrollTop` from it
  9773. if (!element) {
  9774. return document.body;
  9775. }
  9776.  
  9777. switch (element.nodeName) {
  9778. case 'HTML':
  9779. case 'BODY':
  9780. return element.ownerDocument.body;
  9781.  
  9782. case '#document':
  9783. return element.body;
  9784. } // Firefox want us to check `-x` and `-y` variations as well
  9785.  
  9786.  
  9787. var _getStyleComputedProp = getStyleComputedProperty(element),
  9788. overflow = _getStyleComputedProp.overflow,
  9789. overflowX = _getStyleComputedProp.overflowX,
  9790. overflowY = _getStyleComputedProp.overflowY;
  9791.  
  9792. if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
  9793. return element;
  9794. }
  9795.  
  9796. return getScrollParent(getParentNode(element));
  9797. }
  9798. /**
  9799. * Returns the reference node of the reference object, or the reference object itself.
  9800. * @method
  9801. * @memberof Popper.Utils
  9802. * @param {Element|Object} reference - the reference element (the popper will be relative to this)
  9803. * @returns {Element} parent
  9804. */
  9805.  
  9806.  
  9807. function getReferenceNode(reference) {
  9808. return reference && reference.referenceNode ? reference.referenceNode : reference;
  9809. }
  9810.  
  9811. var isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);
  9812. var isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);
  9813. /**
  9814. * Determines if the browser is Internet Explorer
  9815. * @method
  9816. * @memberof Popper.Utils
  9817. * @param {Number} version to check
  9818. * @returns {Boolean} isIE
  9819. */
  9820.  
  9821. function isIE(version) {
  9822. if (version === 11) {
  9823. return isIE11;
  9824. }
  9825.  
  9826. if (version === 10) {
  9827. return isIE10;
  9828. }
  9829.  
  9830. return isIE11 || isIE10;
  9831. }
  9832. /**
  9833. * Returns the offset parent of the given element
  9834. * @method
  9835. * @memberof Popper.Utils
  9836. * @argument {Element} element
  9837. * @returns {Element} offset parent
  9838. */
  9839.  
  9840.  
  9841. function getOffsetParent(element) {
  9842. if (!element) {
  9843. return document.documentElement;
  9844. }
  9845.  
  9846. var noOffsetParent = isIE(10) ? document.body : null; // NOTE: 1 DOM access here
  9847.  
  9848. var offsetParent = element.offsetParent || null; // Skip hidden elements which don't have an offsetParent
  9849.  
  9850. while (offsetParent === noOffsetParent && element.nextElementSibling) {
  9851. offsetParent = (element = element.nextElementSibling).offsetParent;
  9852. }
  9853.  
  9854. var nodeName = offsetParent && offsetParent.nodeName;
  9855.  
  9856. if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
  9857. return element ? element.ownerDocument.documentElement : document.documentElement;
  9858. } // .offsetParent will return the closest TH, TD or TABLE in case
  9859. // no offsetParent is present, I hate this job...
  9860.  
  9861.  
  9862. if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
  9863. return getOffsetParent(offsetParent);
  9864. }
  9865.  
  9866. return offsetParent;
  9867. }
  9868.  
  9869. function isOffsetContainer(element) {
  9870. var nodeName = element.nodeName;
  9871.  
  9872. if (nodeName === 'BODY') {
  9873. return false;
  9874. }
  9875.  
  9876. return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
  9877. }
  9878. /**
  9879. * Finds the root node (document, shadowDOM root) of the given element
  9880. * @method
  9881. * @memberof Popper.Utils
  9882. * @argument {Element} node
  9883. * @returns {Element} root node
  9884. */
  9885.  
  9886.  
  9887. function getRoot(node) {
  9888. if (node.parentNode !== null) {
  9889. return getRoot(node.parentNode);
  9890. }
  9891.  
  9892. return node;
  9893. }
  9894. /**
  9895. * Finds the offset parent common to the two provided nodes
  9896. * @method
  9897. * @memberof Popper.Utils
  9898. * @argument {Element} element1
  9899. * @argument {Element} element2
  9900. * @returns {Element} common offset parent
  9901. */
  9902.  
  9903.  
  9904. function findCommonOffsetParent(element1, element2) {
  9905. // This check is needed to avoid errors in case one of the elements isn't defined for any reason
  9906. if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
  9907. return document.documentElement;
  9908. } // Here we make sure to give as "start" the element that comes first in the DOM
  9909.  
  9910.  
  9911. var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
  9912. var start = order ? element1 : element2;
  9913. var end = order ? element2 : element1; // Get common ancestor container
  9914.  
  9915. var range = document.createRange();
  9916. range.setStart(start, 0);
  9917. range.setEnd(end, 0);
  9918. var commonAncestorContainer = range.commonAncestorContainer; // Both nodes are inside #document
  9919.  
  9920. if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
  9921. if (isOffsetContainer(commonAncestorContainer)) {
  9922. return commonAncestorContainer;
  9923. }
  9924.  
  9925. return getOffsetParent(commonAncestorContainer);
  9926. } // one of the nodes is inside shadowDOM, find which one
  9927.  
  9928.  
  9929. var element1root = getRoot(element1);
  9930.  
  9931. if (element1root.host) {
  9932. return findCommonOffsetParent(element1root.host, element2);
  9933. } else {
  9934. return findCommonOffsetParent(element1, getRoot(element2).host);
  9935. }
  9936. }
  9937. /**
  9938. * Gets the scroll value of the given element in the given side (top and left)
  9939. * @method
  9940. * @memberof Popper.Utils
  9941. * @argument {Element} element
  9942. * @argument {String} side `top` or `left`
  9943. * @returns {number} amount of scrolled pixels
  9944. */
  9945.  
  9946.  
  9947. function getScroll(element) {
  9948. var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
  9949. var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
  9950. var nodeName = element.nodeName;
  9951.  
  9952. if (nodeName === 'BODY' || nodeName === 'HTML') {
  9953. var html = element.ownerDocument.documentElement;
  9954. var scrollingElement = element.ownerDocument.scrollingElement || html;
  9955. return scrollingElement[upperSide];
  9956. }
  9957.  
  9958. return element[upperSide];
  9959. }
  9960. /*
  9961. * Sum or subtract the element scroll values (left and top) from a given rect object
  9962. * @method
  9963. * @memberof Popper.Utils
  9964. * @param {Object} rect - Rect object you want to change
  9965. * @param {HTMLElement} element - The element from the function reads the scroll values
  9966. * @param {Boolean} subtract - set to true if you want to subtract the scroll values
  9967. * @return {Object} rect - The modifier rect object
  9968. */
  9969.  
  9970.  
  9971. function includeScroll(rect, element) {
  9972. var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  9973. var scrollTop = getScroll(element, 'top');
  9974. var scrollLeft = getScroll(element, 'left');
  9975. var modifier = subtract ? -1 : 1;
  9976. rect.top += scrollTop * modifier;
  9977. rect.bottom += scrollTop * modifier;
  9978. rect.left += scrollLeft * modifier;
  9979. rect.right += scrollLeft * modifier;
  9980. return rect;
  9981. }
  9982. /*
  9983. * Helper to detect borders of a given element
  9984. * @method
  9985. * @memberof Popper.Utils
  9986. * @param {CSSStyleDeclaration} styles
  9987. * Result of `getStyleComputedProperty` on the given element
  9988. * @param {String} axis - `x` or `y`
  9989. * @return {number} borders - The borders size of the given axis
  9990. */
  9991.  
  9992.  
  9993. function getBordersSize(styles, axis) {
  9994. var sideA = axis === 'x' ? 'Left' : 'Top';
  9995. var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
  9996. return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
  9997. }
  9998.  
  9999. function getSize(axis, body, html, computedStyle) {
  10000. 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);
  10001. }
  10002.  
  10003. function getWindowSizes(document) {
  10004. var body = document.body;
  10005. var html = document.documentElement;
  10006. var computedStyle = isIE(10) && getComputedStyle(html);
  10007. return {
  10008. height: getSize('Height', body, html, computedStyle),
  10009. width: getSize('Width', body, html, computedStyle)
  10010. };
  10011. }
  10012.  
  10013. var classCallCheck = function (instance, Constructor) {
  10014. if (!(instance instanceof Constructor)) {
  10015. throw new TypeError("Cannot call a class as a function");
  10016. }
  10017. };
  10018.  
  10019. var createClass = function () {
  10020. function defineProperties(target, props) {
  10021. for (var i = 0; i < props.length; i++) {
  10022. var descriptor = props[i];
  10023. descriptor.enumerable = descriptor.enumerable || false;
  10024. descriptor.configurable = true;
  10025. if ("value" in descriptor) descriptor.writable = true;
  10026. Object.defineProperty(target, descriptor.key, descriptor);
  10027. }
  10028. }
  10029.  
  10030. return function (Constructor, protoProps, staticProps) {
  10031. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  10032. if (staticProps) defineProperties(Constructor, staticProps);
  10033. return Constructor;
  10034. };
  10035. }();
  10036.  
  10037. var defineProperty = function (obj, key, value) {
  10038. if (key in obj) {
  10039. Object.defineProperty(obj, key, {
  10040. value: value,
  10041. enumerable: true,
  10042. configurable: true,
  10043. writable: true
  10044. });
  10045. } else {
  10046. obj[key] = value;
  10047. }
  10048.  
  10049. return obj;
  10050. };
  10051.  
  10052. var _extends = Object.assign || function (target) {
  10053. for (var i = 1; i < arguments.length; i++) {
  10054. var source = arguments[i];
  10055.  
  10056. for (var key in source) {
  10057. if (Object.prototype.hasOwnProperty.call(source, key)) {
  10058. target[key] = source[key];
  10059. }
  10060. }
  10061. }
  10062.  
  10063. return target;
  10064. };
  10065. /**
  10066. * Given element offsets, generate an output similar to getBoundingClientRect
  10067. * @method
  10068. * @memberof Popper.Utils
  10069. * @argument {Object} offsets
  10070. * @returns {Object} ClientRect like output
  10071. */
  10072.  
  10073.  
  10074. function getClientRect(offsets) {
  10075. return _extends({}, offsets, {
  10076. right: offsets.left + offsets.width,
  10077. bottom: offsets.top + offsets.height
  10078. });
  10079. }
  10080. /**
  10081. * Get bounding client rect of given element
  10082. * @method
  10083. * @memberof Popper.Utils
  10084. * @param {HTMLElement} element
  10085. * @return {Object} client rect
  10086. */
  10087.  
  10088.  
  10089. function getBoundingClientRect(element) {
  10090. var rect = {}; // IE10 10 FIX: Please, don't ask, the element isn't
  10091. // considered in DOM in some circumstances...
  10092. // This isn't reproducible in IE10 compatibility mode of IE11
  10093.  
  10094. try {
  10095. if (isIE(10)) {
  10096. rect = element.getBoundingClientRect();
  10097. var scrollTop = getScroll(element, 'top');
  10098. var scrollLeft = getScroll(element, 'left');
  10099. rect.top += scrollTop;
  10100. rect.left += scrollLeft;
  10101. rect.bottom += scrollTop;
  10102. rect.right += scrollLeft;
  10103. } else {
  10104. rect = element.getBoundingClientRect();
  10105. }
  10106. } catch (e) {}
  10107.  
  10108. var result = {
  10109. left: rect.left,
  10110. top: rect.top,
  10111. width: rect.right - rect.left,
  10112. height: rect.bottom - rect.top
  10113. }; // subtract scrollbar size from sizes
  10114.  
  10115. var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
  10116. var width = sizes.width || element.clientWidth || result.width;
  10117. var height = sizes.height || element.clientHeight || result.height;
  10118. var horizScrollbar = element.offsetWidth - width;
  10119. var vertScrollbar = element.offsetHeight - height; // if an hypothetical scrollbar is detected, we must be sure it's not a `border`
  10120. // we make this check conditional for performance reasons
  10121.  
  10122. if (horizScrollbar || vertScrollbar) {
  10123. var styles = getStyleComputedProperty(element);
  10124. horizScrollbar -= getBordersSize(styles, 'x');
  10125. vertScrollbar -= getBordersSize(styles, 'y');
  10126. result.width -= horizScrollbar;
  10127. result.height -= vertScrollbar;
  10128. }
  10129.  
  10130. return getClientRect(result);
  10131. }
  10132.  
  10133. function getOffsetRectRelativeToArbitraryNode(children, parent) {
  10134. var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  10135. var isIE10 = isIE(10);
  10136. var isHTML = parent.nodeName === 'HTML';
  10137. var childrenRect = getBoundingClientRect(children);
  10138. var parentRect = getBoundingClientRect(parent);
  10139. var scrollParent = getScrollParent(children);
  10140. var styles = getStyleComputedProperty(parent);
  10141. var borderTopWidth = parseFloat(styles.borderTopWidth);
  10142. var borderLeftWidth = parseFloat(styles.borderLeftWidth); // In cases where the parent is fixed, we must ignore negative scroll in offset calc
  10143.  
  10144. if (fixedPosition && isHTML) {
  10145. parentRect.top = Math.max(parentRect.top, 0);
  10146. parentRect.left = Math.max(parentRect.left, 0);
  10147. }
  10148.  
  10149. var offsets = getClientRect({
  10150. top: childrenRect.top - parentRect.top - borderTopWidth,
  10151. left: childrenRect.left - parentRect.left - borderLeftWidth,
  10152. width: childrenRect.width,
  10153. height: childrenRect.height
  10154. });
  10155. offsets.marginTop = 0;
  10156. offsets.marginLeft = 0; // Subtract margins of documentElement in case it's being used as parent
  10157. // we do this only on HTML because it's the only element that behaves
  10158. // differently when margins are applied to it. The margins are included in
  10159. // the box of the documentElement, in the other cases not.
  10160.  
  10161. if (!isIE10 && isHTML) {
  10162. var marginTop = parseFloat(styles.marginTop);
  10163. var marginLeft = parseFloat(styles.marginLeft);
  10164. offsets.top -= borderTopWidth - marginTop;
  10165. offsets.bottom -= borderTopWidth - marginTop;
  10166. offsets.left -= borderLeftWidth - marginLeft;
  10167. offsets.right -= borderLeftWidth - marginLeft; // Attach marginTop and marginLeft because in some circumstances we may need them
  10168.  
  10169. offsets.marginTop = marginTop;
  10170. offsets.marginLeft = marginLeft;
  10171. }
  10172.  
  10173. if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
  10174. offsets = includeScroll(offsets, parent);
  10175. }
  10176.  
  10177. return offsets;
  10178. }
  10179.  
  10180. function getViewportOffsetRectRelativeToArtbitraryNode(element) {
  10181. var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  10182. var html = element.ownerDocument.documentElement;
  10183. var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
  10184. var width = Math.max(html.clientWidth, window.innerWidth || 0);
  10185. var height = Math.max(html.clientHeight, window.innerHeight || 0);
  10186. var scrollTop = !excludeScroll ? getScroll(html) : 0;
  10187. var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
  10188. var offset = {
  10189. top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
  10190. left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
  10191. width: width,
  10192. height: height
  10193. };
  10194. return getClientRect(offset);
  10195. }
  10196. /**
  10197. * Check if the given element is fixed or is inside a fixed parent
  10198. * @method
  10199. * @memberof Popper.Utils
  10200. * @argument {Element} element
  10201. * @argument {Element} customContainer
  10202. * @returns {Boolean} answer to "isFixed?"
  10203. */
  10204.  
  10205.  
  10206. function isFixed(element) {
  10207. var nodeName = element.nodeName;
  10208.  
  10209. if (nodeName === 'BODY' || nodeName === 'HTML') {
  10210. return false;
  10211. }
  10212.  
  10213. if (getStyleComputedProperty(element, 'position') === 'fixed') {
  10214. return true;
  10215. }
  10216.  
  10217. var parentNode = getParentNode(element);
  10218.  
  10219. if (!parentNode) {
  10220. return false;
  10221. }
  10222.  
  10223. return isFixed(parentNode);
  10224. }
  10225. /**
  10226. * Finds the first parent of an element that has a transformed property defined
  10227. * @method
  10228. * @memberof Popper.Utils
  10229. * @argument {Element} element
  10230. * @returns {Element} first transformed parent or documentElement
  10231. */
  10232.  
  10233.  
  10234. function getFixedPositionOffsetParent(element) {
  10235. // This check is needed to avoid errors in case one of the elements isn't defined for any reason
  10236. if (!element || !element.parentElement || isIE()) {
  10237. return document.documentElement;
  10238. }
  10239.  
  10240. var el = element.parentElement;
  10241.  
  10242. while (el && getStyleComputedProperty(el, 'transform') === 'none') {
  10243. el = el.parentElement;
  10244. }
  10245.  
  10246. return el || document.documentElement;
  10247. }
  10248. /**
  10249. * Computed the boundaries limits and return them
  10250. * @method
  10251. * @memberof Popper.Utils
  10252. * @param {HTMLElement} popper
  10253. * @param {HTMLElement} reference
  10254. * @param {number} padding
  10255. * @param {HTMLElement} boundariesElement - Element used to define the boundaries
  10256. * @param {Boolean} fixedPosition - Is in fixed position mode
  10257. * @returns {Object} Coordinates of the boundaries
  10258. */
  10259.  
  10260.  
  10261. function getBoundaries(popper, reference, padding, boundariesElement) {
  10262. var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; // NOTE: 1 DOM access here
  10263.  
  10264. var boundaries = {
  10265. top: 0,
  10266. left: 0
  10267. };
  10268. var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference)); // Handle viewport case
  10269.  
  10270. if (boundariesElement === 'viewport') {
  10271. boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
  10272. } else {
  10273. // Handle other cases based on DOM element used as boundaries
  10274. var boundariesNode = void 0;
  10275.  
  10276. if (boundariesElement === 'scrollParent') {
  10277. boundariesNode = getScrollParent(getParentNode(reference));
  10278.  
  10279. if (boundariesNode.nodeName === 'BODY') {
  10280. boundariesNode = popper.ownerDocument.documentElement;
  10281. }
  10282. } else if (boundariesElement === 'window') {
  10283. boundariesNode = popper.ownerDocument.documentElement;
  10284. } else {
  10285. boundariesNode = boundariesElement;
  10286. }
  10287.  
  10288. var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition); // In case of HTML, we need a different computation
  10289.  
  10290. if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
  10291. var _getWindowSizes = getWindowSizes(popper.ownerDocument),
  10292. height = _getWindowSizes.height,
  10293. width = _getWindowSizes.width;
  10294.  
  10295. boundaries.top += offsets.top - offsets.marginTop;
  10296. boundaries.bottom = height + offsets.top;
  10297. boundaries.left += offsets.left - offsets.marginLeft;
  10298. boundaries.right = width + offsets.left;
  10299. } else {
  10300. // for all the other DOM elements, this one is good
  10301. boundaries = offsets;
  10302. }
  10303. } // Add paddings
  10304.  
  10305.  
  10306. padding = padding || 0;
  10307. var isPaddingNumber = typeof padding === 'number';
  10308. boundaries.left += isPaddingNumber ? padding : padding.left || 0;
  10309. boundaries.top += isPaddingNumber ? padding : padding.top || 0;
  10310. boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
  10311. boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
  10312. return boundaries;
  10313. }
  10314.  
  10315. function getArea(_ref) {
  10316. var width = _ref.width,
  10317. height = _ref.height;
  10318. return width * height;
  10319. }
  10320. /**
  10321. * Utility used to transform the `auto` placement to the placement with more
  10322. * available space.
  10323. * @method
  10324. * @memberof Popper.Utils
  10325. * @argument {Object} data - The data object generated by update method
  10326. * @argument {Object} options - Modifiers configuration and options
  10327. * @returns {Object} The data object, properly modified
  10328. */
  10329.  
  10330.  
  10331. function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
  10332. var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
  10333.  
  10334. if (placement.indexOf('auto') === -1) {
  10335. return placement;
  10336. }
  10337.  
  10338. var boundaries = getBoundaries(popper, reference, padding, boundariesElement);
  10339. var rects = {
  10340. top: {
  10341. width: boundaries.width,
  10342. height: refRect.top - boundaries.top
  10343. },
  10344. right: {
  10345. width: boundaries.right - refRect.right,
  10346. height: boundaries.height
  10347. },
  10348. bottom: {
  10349. width: boundaries.width,
  10350. height: boundaries.bottom - refRect.bottom
  10351. },
  10352. left: {
  10353. width: refRect.left - boundaries.left,
  10354. height: boundaries.height
  10355. }
  10356. };
  10357. var sortedAreas = Object.keys(rects).map(function (key) {
  10358. return _extends({
  10359. key: key
  10360. }, rects[key], {
  10361. area: getArea(rects[key])
  10362. });
  10363. }).sort(function (a, b) {
  10364. return b.area - a.area;
  10365. });
  10366. var filteredAreas = sortedAreas.filter(function (_ref2) {
  10367. var width = _ref2.width,
  10368. height = _ref2.height;
  10369. return width >= popper.clientWidth && height >= popper.clientHeight;
  10370. });
  10371. var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
  10372. var variation = placement.split('-')[1];
  10373. return computedPlacement + (variation ? '-' + variation : '');
  10374. }
  10375. /**
  10376. * Get offsets to the reference element
  10377. * @method
  10378. * @memberof Popper.Utils
  10379. * @param {Object} state
  10380. * @param {Element} popper - the popper element
  10381. * @param {Element} reference - the reference element (the popper will be relative to this)
  10382. * @param {Element} fixedPosition - is in fixed position mode
  10383. * @returns {Object} An object containing the offsets which will be applied to the popper
  10384. */
  10385.  
  10386.  
  10387. function getReferenceOffsets(state, popper, reference) {
  10388. var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
  10389. var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
  10390. return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
  10391. }
  10392. /**
  10393. * Get the outer sizes of the given element (offset size + margins)
  10394. * @method
  10395. * @memberof Popper.Utils
  10396. * @argument {Element} element
  10397. * @returns {Object} object containing width and height properties
  10398. */
  10399.  
  10400.  
  10401. function getOuterSizes(element) {
  10402. var window = element.ownerDocument.defaultView;
  10403. var styles = window.getComputedStyle(element);
  10404. var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
  10405. var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
  10406. var result = {
  10407. width: element.offsetWidth + y,
  10408. height: element.offsetHeight + x
  10409. };
  10410. return result;
  10411. }
  10412. /**
  10413. * Get the opposite placement of the given one
  10414. * @method
  10415. * @memberof Popper.Utils
  10416. * @argument {String} placement
  10417. * @returns {String} flipped placement
  10418. */
  10419.  
  10420.  
  10421. function getOppositePlacement(placement) {
  10422. var hash = {
  10423. left: 'right',
  10424. right: 'left',
  10425. bottom: 'top',
  10426. top: 'bottom'
  10427. };
  10428. return placement.replace(/left|right|bottom|top/g, function (matched) {
  10429. return hash[matched];
  10430. });
  10431. }
  10432. /**
  10433. * Get offsets to the popper
  10434. * @method
  10435. * @memberof Popper.Utils
  10436. * @param {Object} position - CSS position the Popper will get applied
  10437. * @param {HTMLElement} popper - the popper element
  10438. * @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
  10439. * @param {String} placement - one of the valid placement options
  10440. * @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
  10441. */
  10442.  
  10443.  
  10444. function getPopperOffsets(popper, referenceOffsets, placement) {
  10445. placement = placement.split('-')[0]; // Get popper node sizes
  10446.  
  10447. var popperRect = getOuterSizes(popper); // Add position, width and height to our offsets object
  10448.  
  10449. var popperOffsets = {
  10450. width: popperRect.width,
  10451. height: popperRect.height
  10452. }; // depending by the popper placement we have to compute its offsets slightly differently
  10453.  
  10454. var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
  10455. var mainSide = isHoriz ? 'top' : 'left';
  10456. var secondarySide = isHoriz ? 'left' : 'top';
  10457. var measurement = isHoriz ? 'height' : 'width';
  10458. var secondaryMeasurement = !isHoriz ? 'height' : 'width';
  10459. popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
  10460.  
  10461. if (placement === secondarySide) {
  10462. popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
  10463. } else {
  10464. popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];
  10465. }
  10466.  
  10467. return popperOffsets;
  10468. }
  10469. /**
  10470. * Mimics the `find` method of Array
  10471. * @method
  10472. * @memberof Popper.Utils
  10473. * @argument {Array} arr
  10474. * @argument prop
  10475. * @argument value
  10476. * @returns index or -1
  10477. */
  10478.  
  10479.  
  10480. function find(arr, check) {
  10481. // use native find if supported
  10482. if (Array.prototype.find) {
  10483. return arr.find(check);
  10484. } // use `filter` to obtain the same behavior of `find`
  10485.  
  10486.  
  10487. return arr.filter(check)[0];
  10488. }
  10489. /**
  10490. * Return the index of the matching object
  10491. * @method
  10492. * @memberof Popper.Utils
  10493. * @argument {Array} arr
  10494. * @argument prop
  10495. * @argument value
  10496. * @returns index or -1
  10497. */
  10498.  
  10499.  
  10500. function findIndex(arr, prop, value) {
  10501. // use native findIndex if supported
  10502. if (Array.prototype.findIndex) {
  10503. return arr.findIndex(function (cur) {
  10504. return cur[prop] === value;
  10505. });
  10506. } // use `find` + `indexOf` if `findIndex` isn't supported
  10507.  
  10508.  
  10509. var match = find(arr, function (obj) {
  10510. return obj[prop] === value;
  10511. });
  10512. return arr.indexOf(match);
  10513. }
  10514. /**
  10515. * Loop trough the list of modifiers and run them in order,
  10516. * each of them will then edit the data object.
  10517. * @method
  10518. * @memberof Popper.Utils
  10519. * @param {dataObject} data
  10520. * @param {Array} modifiers
  10521. * @param {String} ends - Optional modifier name used as stopper
  10522. * @returns {dataObject}
  10523. */
  10524.  
  10525.  
  10526. function runModifiers(modifiers, data, ends) {
  10527. var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
  10528. modifiersToRun.forEach(function (modifier) {
  10529. if (modifier['function']) {
  10530. // eslint-disable-line dot-notation
  10531. console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
  10532. }
  10533.  
  10534. var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
  10535.  
  10536. if (modifier.enabled && isFunction(fn)) {
  10537. // Add properties to offsets to make them a complete clientRect object
  10538. // we do this before each modifier to make sure the previous one doesn't
  10539. // mess with these values
  10540. data.offsets.popper = getClientRect(data.offsets.popper);
  10541. data.offsets.reference = getClientRect(data.offsets.reference);
  10542. data = fn(data, modifier);
  10543. }
  10544. });
  10545. return data;
  10546. }
  10547. /**
  10548. * Updates the position of the popper, computing the new offsets and applying
  10549. * the new style.<br />
  10550. * Prefer `scheduleUpdate` over `update` because of performance reasons.
  10551. * @method
  10552. * @memberof Popper
  10553. */
  10554.  
  10555.  
  10556. function update() {
  10557. // if popper is destroyed, don't perform any further update
  10558. if (this.state.isDestroyed) {
  10559. return;
  10560. }
  10561.  
  10562. var data = {
  10563. instance: this,
  10564. styles: {},
  10565. arrowStyles: {},
  10566. attributes: {},
  10567. flipped: false,
  10568. offsets: {}
  10569. }; // compute reference element offsets
  10570.  
  10571. data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed); // compute auto placement, store placement inside the data object,
  10572. // modifiers will be able to edit `placement` if needed
  10573. // and refer to originalPlacement to know the original value
  10574.  
  10575. 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`
  10576.  
  10577. data.originalPlacement = data.placement;
  10578. data.positionFixed = this.options.positionFixed; // compute the popper offsets
  10579.  
  10580. data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);
  10581. data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute'; // run the modifiers
  10582.  
  10583. data = runModifiers(this.modifiers, data); // the first `update` will call `onCreate` callback
  10584. // the other ones will call `onUpdate` callback
  10585.  
  10586. if (!this.state.isCreated) {
  10587. this.state.isCreated = true;
  10588. this.options.onCreate(data);
  10589. } else {
  10590. this.options.onUpdate(data);
  10591. }
  10592. }
  10593. /**
  10594. * Helper used to know if the given modifier is enabled.
  10595. * @method
  10596. * @memberof Popper.Utils
  10597. * @returns {Boolean}
  10598. */
  10599.  
  10600.  
  10601. function isModifierEnabled(modifiers, modifierName) {
  10602. return modifiers.some(function (_ref) {
  10603. var name = _ref.name,
  10604. enabled = _ref.enabled;
  10605. return enabled && name === modifierName;
  10606. });
  10607. }
  10608. /**
  10609. * Get the prefixed supported property name
  10610. * @method
  10611. * @memberof Popper.Utils
  10612. * @argument {String} property (camelCase)
  10613. * @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
  10614. */
  10615.  
  10616.  
  10617. function getSupportedPropertyName(property) {
  10618. var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
  10619. var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
  10620.  
  10621. for (var i = 0; i < prefixes.length; i++) {
  10622. var prefix = prefixes[i];
  10623. var toCheck = prefix ? '' + prefix + upperProp : property;
  10624.  
  10625. if (typeof document.body.style[toCheck] !== 'undefined') {
  10626. return toCheck;
  10627. }
  10628. }
  10629.  
  10630. return null;
  10631. }
  10632. /**
  10633. * Destroys the popper.
  10634. * @method
  10635. * @memberof Popper
  10636. */
  10637.  
  10638.  
  10639. function destroy() {
  10640. this.state.isDestroyed = true; // touch DOM only if `applyStyle` modifier is enabled
  10641.  
  10642. if (isModifierEnabled(this.modifiers, 'applyStyle')) {
  10643. this.popper.removeAttribute('x-placement');
  10644. this.popper.style.position = '';
  10645. this.popper.style.top = '';
  10646. this.popper.style.left = '';
  10647. this.popper.style.right = '';
  10648. this.popper.style.bottom = '';
  10649. this.popper.style.willChange = '';
  10650. this.popper.style[getSupportedPropertyName('transform')] = '';
  10651. }
  10652.  
  10653. this.disableEventListeners(); // remove the popper if user explicitly asked for the deletion on destroy
  10654. // do not use `remove` because IE11 doesn't support it
  10655.  
  10656. if (this.options.removeOnDestroy) {
  10657. this.popper.parentNode.removeChild(this.popper);
  10658. }
  10659.  
  10660. return this;
  10661. }
  10662. /**
  10663. * Get the window associated with the element
  10664. * @argument {Element} element
  10665. * @returns {Window}
  10666. */
  10667.  
  10668.  
  10669. function getWindow(element) {
  10670. var ownerDocument = element.ownerDocument;
  10671. return ownerDocument ? ownerDocument.defaultView : window;
  10672. }
  10673.  
  10674. function attachToScrollParents(scrollParent, event, callback, scrollParents) {
  10675. var isBody = scrollParent.nodeName === 'BODY';
  10676. var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
  10677. target.addEventListener(event, callback, {
  10678. passive: true
  10679. });
  10680.  
  10681. if (!isBody) {
  10682. attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);
  10683. }
  10684.  
  10685. scrollParents.push(target);
  10686. }
  10687. /**
  10688. * Setup needed event listeners used to update the popper position
  10689. * @method
  10690. * @memberof Popper.Utils
  10691. * @private
  10692. */
  10693.  
  10694.  
  10695. function setupEventListeners(reference, options, state, updateBound) {
  10696. // Resize event listener on window
  10697. state.updateBound = updateBound;
  10698. getWindow(reference).addEventListener('resize', state.updateBound, {
  10699. passive: true
  10700. }); // Scroll event listener on scroll parents
  10701.  
  10702. var scrollElement = getScrollParent(reference);
  10703. attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
  10704. state.scrollElement = scrollElement;
  10705. state.eventsEnabled = true;
  10706. return state;
  10707. }
  10708. /**
  10709. * It will add resize/scroll events and start recalculating
  10710. * position of the popper element when they are triggered.
  10711. * @method
  10712. * @memberof Popper
  10713. */
  10714.  
  10715.  
  10716. function enableEventListeners() {
  10717. if (!this.state.eventsEnabled) {
  10718. this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
  10719. }
  10720. }
  10721. /**
  10722. * Remove event listeners used to update the popper position
  10723. * @method
  10724. * @memberof Popper.Utils
  10725. * @private
  10726. */
  10727.  
  10728.  
  10729. function removeEventListeners(reference, state) {
  10730. // Remove resize event listener on window
  10731. getWindow(reference).removeEventListener('resize', state.updateBound); // Remove scroll event listener on scroll parents
  10732.  
  10733. state.scrollParents.forEach(function (target) {
  10734. target.removeEventListener('scroll', state.updateBound);
  10735. }); // Reset state
  10736.  
  10737. state.updateBound = null;
  10738. state.scrollParents = [];
  10739. state.scrollElement = null;
  10740. state.eventsEnabled = false;
  10741. return state;
  10742. }
  10743. /**
  10744. * It will remove resize/scroll events and won't recalculate popper position
  10745. * when they are triggered. It also won't trigger `onUpdate` callback anymore,
  10746. * unless you call `update` method manually.
  10747. * @method
  10748. * @memberof Popper
  10749. */
  10750.  
  10751.  
  10752. function disableEventListeners() {
  10753. if (this.state.eventsEnabled) {
  10754. cancelAnimationFrame(this.scheduleUpdate);
  10755. this.state = removeEventListeners(this.reference, this.state);
  10756. }
  10757. }
  10758. /**
  10759. * Tells if a given input is a number
  10760. * @method
  10761. * @memberof Popper.Utils
  10762. * @param {*} input to check
  10763. * @return {Boolean}
  10764. */
  10765.  
  10766.  
  10767. function isNumeric(n) {
  10768. return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
  10769. }
  10770. /**
  10771. * Set the style to the given popper
  10772. * @method
  10773. * @memberof Popper.Utils
  10774. * @argument {Element} element - Element to apply the style to
  10775. * @argument {Object} styles
  10776. * Object with a list of properties and values which will be applied to the element
  10777. */
  10778.  
  10779.  
  10780. function setStyles(element, styles) {
  10781. Object.keys(styles).forEach(function (prop) {
  10782. var unit = ''; // add unit if the value is numeric and is one of the following
  10783.  
  10784. if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
  10785. unit = 'px';
  10786. }
  10787.  
  10788. element.style[prop] = styles[prop] + unit;
  10789. });
  10790. }
  10791. /**
  10792. * Set the attributes to the given popper
  10793. * @method
  10794. * @memberof Popper.Utils
  10795. * @argument {Element} element - Element to apply the attributes to
  10796. * @argument {Object} styles
  10797. * Object with a list of properties and values which will be applied to the element
  10798. */
  10799.  
  10800.  
  10801. function setAttributes(element, attributes) {
  10802. Object.keys(attributes).forEach(function (prop) {
  10803. var value = attributes[prop];
  10804.  
  10805. if (value !== false) {
  10806. element.setAttribute(prop, attributes[prop]);
  10807. } else {
  10808. element.removeAttribute(prop);
  10809. }
  10810. });
  10811. }
  10812. /**
  10813. * @function
  10814. * @memberof Modifiers
  10815. * @argument {Object} data - The data object generated by `update` method
  10816. * @argument {Object} data.styles - List of style properties - values to apply to popper element
  10817. * @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
  10818. * @argument {Object} options - Modifiers configuration and options
  10819. * @returns {Object} The same data object
  10820. */
  10821.  
  10822.  
  10823. function applyStyle(data) {
  10824. // any property present in `data.styles` will be applied to the popper,
  10825. // in this way we can make the 3rd party modifiers add custom styles to it
  10826. // Be aware, modifiers could override the properties defined in the previous
  10827. // lines of this modifier!
  10828. setStyles(data.instance.popper, data.styles); // any property present in `data.attributes` will be applied to the popper,
  10829. // they will be set as HTML attributes of the element
  10830.  
  10831. setAttributes(data.instance.popper, data.attributes); // if arrowElement is defined and arrowStyles has some properties
  10832.  
  10833. if (data.arrowElement && Object.keys(data.arrowStyles).length) {
  10834. setStyles(data.arrowElement, data.arrowStyles);
  10835. }
  10836.  
  10837. return data;
  10838. }
  10839. /**
  10840. * Set the x-placement attribute before everything else because it could be used
  10841. * to add margins to the popper margins needs to be calculated to get the
  10842. * correct popper offsets.
  10843. * @method
  10844. * @memberof Popper.modifiers
  10845. * @param {HTMLElement} reference - The reference element used to position the popper
  10846. * @param {HTMLElement} popper - The HTML element used as popper
  10847. * @param {Object} options - Popper.js options
  10848. */
  10849.  
  10850.  
  10851. function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
  10852. // compute reference element offsets
  10853. var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed); // compute auto placement, store placement inside the data object,
  10854. // modifiers will be able to edit `placement` if needed
  10855. // and refer to originalPlacement to know the original value
  10856.  
  10857. var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);
  10858. popper.setAttribute('x-placement', placement); // Apply `position` to popper before anything else because
  10859. // without the position applied we can't guarantee correct computations
  10860.  
  10861. setStyles(popper, {
  10862. position: options.positionFixed ? 'fixed' : 'absolute'
  10863. });
  10864. return options;
  10865. }
  10866. /**
  10867. * @function
  10868. * @memberof Popper.Utils
  10869. * @argument {Object} data - The data object generated by `update` method
  10870. * @argument {Boolean} shouldRound - If the offsets should be rounded at all
  10871. * @returns {Object} The popper's position offsets rounded
  10872. *
  10873. * The tale of pixel-perfect positioning. It's still not 100% perfect, but as
  10874. * good as it can be within reason.
  10875. * Discussion here: https://github.com/FezVrasta/popper.js/pull/715
  10876. *
  10877. * Low DPI screens cause a popper to be blurry if not using full pixels (Safari
  10878. * as well on High DPI screens).
  10879. *
  10880. * Firefox prefers no rounding for positioning and does not have blurriness on
  10881. * high DPI screens.
  10882. *
  10883. * Only horizontal placement and left/right values need to be considered.
  10884. */
  10885.  
  10886.  
  10887. function getRoundedOffsets(data, shouldRound) {
  10888. var _data$offsets = data.offsets,
  10889. popper = _data$offsets.popper,
  10890. reference = _data$offsets.reference;
  10891. var round = Math.round,
  10892. floor = Math.floor;
  10893.  
  10894. var noRound = function noRound(v) {
  10895. return v;
  10896. };
  10897.  
  10898. var referenceWidth = round(reference.width);
  10899. var popperWidth = round(popper.width);
  10900. var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
  10901. var isVariation = data.placement.indexOf('-') !== -1;
  10902. var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
  10903. var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
  10904. var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
  10905. var verticalToInteger = !shouldRound ? noRound : round;
  10906. return {
  10907. left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
  10908. top: verticalToInteger(popper.top),
  10909. bottom: verticalToInteger(popper.bottom),
  10910. right: horizontalToInteger(popper.right)
  10911. };
  10912. }
  10913.  
  10914. var isFirefox = isBrowser && /Firefox/i.test(navigator.userAgent);
  10915. /**
  10916. * @function
  10917. * @memberof Modifiers
  10918. * @argument {Object} data - The data object generated by `update` method
  10919. * @argument {Object} options - Modifiers configuration and options
  10920. * @returns {Object} The data object, properly modified
  10921. */
  10922.  
  10923. function computeStyle(data, options) {
  10924. var x = options.x,
  10925. y = options.y;
  10926. var popper = data.offsets.popper; // Remove this legacy support in Popper.js v2
  10927.  
  10928. var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
  10929. return modifier.name === 'applyStyle';
  10930. }).gpuAcceleration;
  10931.  
  10932. if (legacyGpuAccelerationOption !== undefined) {
  10933. console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
  10934. }
  10935.  
  10936. var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;
  10937. var offsetParent = getOffsetParent(data.instance.popper);
  10938. var offsetParentRect = getBoundingClientRect(offsetParent); // Styles
  10939.  
  10940. var styles = {
  10941. position: popper.position
  10942. };
  10943. var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);
  10944. var sideA = x === 'bottom' ? 'top' : 'bottom';
  10945. var sideB = y === 'right' ? 'left' : 'right'; // if gpuAcceleration is set to `true` and transform is supported,
  10946. // we use `translate3d` to apply the position to the popper we
  10947. // automatically use the supported prefixed version if needed
  10948.  
  10949. var prefixedProperty = getSupportedPropertyName('transform'); // now, let's make a step back and look at this code closely (wtf?)
  10950. // If the content of the popper grows once it's been positioned, it
  10951. // may happen that the popper gets misplaced because of the new content
  10952. // overflowing its reference element
  10953. // To avoid this problem, we provide two options (x and y), which allow
  10954. // the consumer to define the offset origin.
  10955. // If we position a popper on top of a reference element, we can set
  10956. // `x` to `top` to make the popper grow towards its top instead of
  10957. // its bottom.
  10958.  
  10959. var left = void 0,
  10960. top = void 0;
  10961.  
  10962. if (sideA === 'bottom') {
  10963. // when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)
  10964. // and not the bottom of the html element
  10965. if (offsetParent.nodeName === 'HTML') {
  10966. top = -offsetParent.clientHeight + offsets.bottom;
  10967. } else {
  10968. top = -offsetParentRect.height + offsets.bottom;
  10969. }
  10970. } else {
  10971. top = offsets.top;
  10972. }
  10973.  
  10974. if (sideB === 'right') {
  10975. if (offsetParent.nodeName === 'HTML') {
  10976. left = -offsetParent.clientWidth + offsets.right;
  10977. } else {
  10978. left = -offsetParentRect.width + offsets.right;
  10979. }
  10980. } else {
  10981. left = offsets.left;
  10982. }
  10983.  
  10984. if (gpuAcceleration && prefixedProperty) {
  10985. styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
  10986. styles[sideA] = 0;
  10987. styles[sideB] = 0;
  10988. styles.willChange = 'transform';
  10989. } else {
  10990. // othwerise, we use the standard `top`, `left`, `bottom` and `right` properties
  10991. var invertTop = sideA === 'bottom' ? -1 : 1;
  10992. var invertLeft = sideB === 'right' ? -1 : 1;
  10993. styles[sideA] = top * invertTop;
  10994. styles[sideB] = left * invertLeft;
  10995. styles.willChange = sideA + ', ' + sideB;
  10996. } // Attributes
  10997.  
  10998.  
  10999. var attributes = {
  11000. 'x-placement': data.placement
  11001. }; // Update `data` attributes, styles and arrowStyles
  11002.  
  11003. data.attributes = _extends({}, attributes, data.attributes);
  11004. data.styles = _extends({}, styles, data.styles);
  11005. data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
  11006. return data;
  11007. }
  11008. /**
  11009. * Helper used to know if the given modifier depends from another one.<br />
  11010. * It checks if the needed modifier is listed and enabled.
  11011. * @method
  11012. * @memberof Popper.Utils
  11013. * @param {Array} modifiers - list of modifiers
  11014. * @param {String} requestingName - name of requesting modifier
  11015. * @param {String} requestedName - name of requested modifier
  11016. * @returns {Boolean}
  11017. */
  11018.  
  11019.  
  11020. function isModifierRequired(modifiers, requestingName, requestedName) {
  11021. var requesting = find(modifiers, function (_ref) {
  11022. var name = _ref.name;
  11023. return name === requestingName;
  11024. });
  11025. var isRequired = !!requesting && modifiers.some(function (modifier) {
  11026. return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
  11027. });
  11028.  
  11029. if (!isRequired) {
  11030. var _requesting = '`' + requestingName + '`';
  11031.  
  11032. var requested = '`' + requestedName + '`';
  11033. console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
  11034. }
  11035.  
  11036. return isRequired;
  11037. }
  11038. /**
  11039. * @function
  11040. * @memberof Modifiers
  11041. * @argument {Object} data - The data object generated by update method
  11042. * @argument {Object} options - Modifiers configuration and options
  11043. * @returns {Object} The data object, properly modified
  11044. */
  11045.  
  11046.  
  11047. function arrow(data, options) {
  11048. var _data$offsets$arrow; // arrow depends on keepTogether in order to work
  11049.  
  11050.  
  11051. if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
  11052. return data;
  11053. }
  11054.  
  11055. var arrowElement = options.element; // if arrowElement is a string, suppose it's a CSS selector
  11056.  
  11057. if (typeof arrowElement === 'string') {
  11058. arrowElement = data.instance.popper.querySelector(arrowElement); // if arrowElement is not found, don't run the modifier
  11059.  
  11060. if (!arrowElement) {
  11061. return data;
  11062. }
  11063. } else {
  11064. // if the arrowElement isn't a query selector we must check that the
  11065. // provided DOM node is child of its popper node
  11066. if (!data.instance.popper.contains(arrowElement)) {
  11067. console.warn('WARNING: `arrow.element` must be child of its popper element!');
  11068. return data;
  11069. }
  11070. }
  11071.  
  11072. var placement = data.placement.split('-')[0];
  11073. var _data$offsets = data.offsets,
  11074. popper = _data$offsets.popper,
  11075. reference = _data$offsets.reference;
  11076. var isVertical = ['left', 'right'].indexOf(placement) !== -1;
  11077. var len = isVertical ? 'height' : 'width';
  11078. var sideCapitalized = isVertical ? 'Top' : 'Left';
  11079. var side = sideCapitalized.toLowerCase();
  11080. var altSide = isVertical ? 'left' : 'top';
  11081. var opSide = isVertical ? 'bottom' : 'right';
  11082. var arrowElementSize = getOuterSizes(arrowElement)[len]; //
  11083. // extends keepTogether behavior making sure the popper and its
  11084. // reference have enough pixels in conjunction
  11085. //
  11086. // top/left side
  11087.  
  11088. if (reference[opSide] - arrowElementSize < popper[side]) {
  11089. data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
  11090. } // bottom/right side
  11091.  
  11092.  
  11093. if (reference[side] + arrowElementSize > popper[opSide]) {
  11094. data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
  11095. }
  11096.  
  11097. data.offsets.popper = getClientRect(data.offsets.popper); // compute center of the popper
  11098.  
  11099. var center = reference[side] + reference[len] / 2 - arrowElementSize / 2; // Compute the sideValue using the updated popper offsets
  11100. // take popper margin in account because we don't have this info available
  11101.  
  11102. var css = getStyleComputedProperty(data.instance.popper);
  11103. var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);
  11104. var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);
  11105. var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide; // prevent arrowElement from being placed not contiguously to its popper
  11106.  
  11107. sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
  11108. data.arrowElement = arrowElement;
  11109. data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);
  11110. return data;
  11111. }
  11112. /**
  11113. * Get the opposite placement variation of the given one
  11114. * @method
  11115. * @memberof Popper.Utils
  11116. * @argument {String} placement variation
  11117. * @returns {String} flipped placement variation
  11118. */
  11119.  
  11120.  
  11121. function getOppositeVariation(variation) {
  11122. if (variation === 'end') {
  11123. return 'start';
  11124. } else if (variation === 'start') {
  11125. return 'end';
  11126. }
  11127.  
  11128. return variation;
  11129. }
  11130. /**
  11131. * List of accepted placements to use as values of the `placement` option.<br />
  11132. * Valid placements are:
  11133. * - `auto`
  11134. * - `top`
  11135. * - `right`
  11136. * - `bottom`
  11137. * - `left`
  11138. *
  11139. * Each placement can have a variation from this list:
  11140. * - `-start`
  11141. * - `-end`
  11142. *
  11143. * Variations are interpreted easily if you think of them as the left to right
  11144. * written languages. Horizontally (`top` and `bottom`), `start` is left and `end`
  11145. * is right.<br />
  11146. * Vertically (`left` and `right`), `start` is top and `end` is bottom.
  11147. *
  11148. * Some valid examples are:
  11149. * - `top-end` (on top of reference, right aligned)
  11150. * - `right-start` (on right of reference, top aligned)
  11151. * - `bottom` (on bottom, centered)
  11152. * - `auto-end` (on the side with more space available, alignment depends by placement)
  11153. *
  11154. * @static
  11155. * @type {Array}
  11156. * @enum {String}
  11157. * @readonly
  11158. * @method placements
  11159. * @memberof Popper
  11160. */
  11161.  
  11162.  
  11163. 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`
  11164.  
  11165. var validPlacements = placements.slice(3);
  11166. /**
  11167. * Given an initial placement, returns all the subsequent placements
  11168. * clockwise (or counter-clockwise).
  11169. *
  11170. * @method
  11171. * @memberof Popper.Utils
  11172. * @argument {String} placement - A valid placement (it accepts variations)
  11173. * @argument {Boolean} counter - Set to true to walk the placements counterclockwise
  11174. * @returns {Array} placements including their variations
  11175. */
  11176.  
  11177. function clockwise(placement) {
  11178. var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  11179. var index = validPlacements.indexOf(placement);
  11180. var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
  11181. return counter ? arr.reverse() : arr;
  11182. }
  11183.  
  11184. var BEHAVIORS = {
  11185. FLIP: 'flip',
  11186. CLOCKWISE: 'clockwise',
  11187. COUNTERCLOCKWISE: 'counterclockwise'
  11188. };
  11189. /**
  11190. * @function
  11191. * @memberof Modifiers
  11192. * @argument {Object} data - The data object generated by update method
  11193. * @argument {Object} options - Modifiers configuration and options
  11194. * @returns {Object} The data object, properly modified
  11195. */
  11196.  
  11197. function flip(data, options) {
  11198. // if `inner` modifier is enabled, we can't use the `flip` modifier
  11199. if (isModifierEnabled(data.instance.modifiers, 'inner')) {
  11200. return data;
  11201. }
  11202.  
  11203. if (data.flipped && data.placement === data.originalPlacement) {
  11204. // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
  11205. return data;
  11206. }
  11207.  
  11208. var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);
  11209. var placement = data.placement.split('-')[0];
  11210. var placementOpposite = getOppositePlacement(placement);
  11211. var variation = data.placement.split('-')[1] || '';
  11212. var flipOrder = [];
  11213.  
  11214. switch (options.behavior) {
  11215. case BEHAVIORS.FLIP:
  11216. flipOrder = [placement, placementOpposite];
  11217. break;
  11218.  
  11219. case BEHAVIORS.CLOCKWISE:
  11220. flipOrder = clockwise(placement);
  11221. break;
  11222.  
  11223. case BEHAVIORS.COUNTERCLOCKWISE:
  11224. flipOrder = clockwise(placement, true);
  11225. break;
  11226.  
  11227. default:
  11228. flipOrder = options.behavior;
  11229. }
  11230.  
  11231. flipOrder.forEach(function (step, index) {
  11232. if (placement !== step || flipOrder.length === index + 1) {
  11233. return data;
  11234. }
  11235.  
  11236. placement = data.placement.split('-')[0];
  11237. placementOpposite = getOppositePlacement(placement);
  11238. var popperOffsets = data.offsets.popper;
  11239. var refOffsets = data.offsets.reference; // using floor because the reference offsets may contain decimals we are not going to consider here
  11240.  
  11241. var floor = Math.floor;
  11242. 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);
  11243. var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
  11244. var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
  11245. var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
  11246. var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
  11247. var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom; // flip the variation if required
  11248.  
  11249. var isVertical = ['top', 'bottom'].indexOf(placement) !== -1; // flips variation if reference element overflows boundaries
  11250.  
  11251. 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
  11252.  
  11253. var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);
  11254. var flippedVariation = flippedVariationByRef || flippedVariationByContent;
  11255.  
  11256. if (overlapsRef || overflowsBoundaries || flippedVariation) {
  11257. // this boolean to detect any flip loop
  11258. data.flipped = true;
  11259.  
  11260. if (overlapsRef || overflowsBoundaries) {
  11261. placement = flipOrder[index + 1];
  11262. }
  11263.  
  11264. if (flippedVariation) {
  11265. variation = getOppositeVariation(variation);
  11266. }
  11267.  
  11268. data.placement = placement + (variation ? '-' + variation : ''); // this object contains `position`, we want to preserve it along with
  11269. // any additional property we may add in the future
  11270.  
  11271. data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
  11272. data = runModifiers(data.instance.modifiers, data, 'flip');
  11273. }
  11274. });
  11275. return data;
  11276. }
  11277. /**
  11278. * @function
  11279. * @memberof Modifiers
  11280. * @argument {Object} data - The data object generated by update method
  11281. * @argument {Object} options - Modifiers configuration and options
  11282. * @returns {Object} The data object, properly modified
  11283. */
  11284.  
  11285.  
  11286. function keepTogether(data) {
  11287. var _data$offsets = data.offsets,
  11288. popper = _data$offsets.popper,
  11289. reference = _data$offsets.reference;
  11290. var placement = data.placement.split('-')[0];
  11291. var floor = Math.floor;
  11292. var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
  11293. var side = isVertical ? 'right' : 'bottom';
  11294. var opSide = isVertical ? 'left' : 'top';
  11295. var measurement = isVertical ? 'width' : 'height';
  11296.  
  11297. if (popper[side] < floor(reference[opSide])) {
  11298. data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
  11299. }
  11300.  
  11301. if (popper[opSide] > floor(reference[side])) {
  11302. data.offsets.popper[opSide] = floor(reference[side]);
  11303. }
  11304.  
  11305. return data;
  11306. }
  11307. /**
  11308. * Converts a string containing value + unit into a px value number
  11309. * @function
  11310. * @memberof {modifiers~offset}
  11311. * @private
  11312. * @argument {String} str - Value + unit string
  11313. * @argument {String} measurement - `height` or `width`
  11314. * @argument {Object} popperOffsets
  11315. * @argument {Object} referenceOffsets
  11316. * @returns {Number|String}
  11317. * Value in pixels, or original string if no values were extracted
  11318. */
  11319.  
  11320.  
  11321. function toValue(str, measurement, popperOffsets, referenceOffsets) {
  11322. // separate value from unit
  11323. var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
  11324. var value = +split[1];
  11325. var unit = split[2]; // If it's not a number it's an operator, I guess
  11326.  
  11327. if (!value) {
  11328. return str;
  11329. }
  11330.  
  11331. if (unit.indexOf('%') === 0) {
  11332. var element = void 0;
  11333.  
  11334. switch (unit) {
  11335. case '%p':
  11336. element = popperOffsets;
  11337. break;
  11338.  
  11339. case '%':
  11340. case '%r':
  11341. default:
  11342. element = referenceOffsets;
  11343. }
  11344.  
  11345. var rect = getClientRect(element);
  11346. return rect[measurement] / 100 * value;
  11347. } else if (unit === 'vh' || unit === 'vw') {
  11348. // if is a vh or vw, we calculate the size based on the viewport
  11349. var size = void 0;
  11350.  
  11351. if (unit === 'vh') {
  11352. size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  11353. } else {
  11354. size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  11355. }
  11356.  
  11357. return size / 100 * value;
  11358. } else {
  11359. // if is an explicit pixel unit, we get rid of the unit and keep the value
  11360. // if is an implicit unit, it's px, and we return just the value
  11361. return value;
  11362. }
  11363. }
  11364. /**
  11365. * Parse an `offset` string to extrapolate `x` and `y` numeric offsets.
  11366. * @function
  11367. * @memberof {modifiers~offset}
  11368. * @private
  11369. * @argument {String} offset
  11370. * @argument {Object} popperOffsets
  11371. * @argument {Object} referenceOffsets
  11372. * @argument {String} basePlacement
  11373. * @returns {Array} a two cells array with x and y offsets in numbers
  11374. */
  11375.  
  11376.  
  11377. function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {
  11378. var offsets = [0, 0]; // Use height if placement is left or right and index is 0 otherwise use width
  11379. // in this way the first offset will use an axis and the second one
  11380. // will use the other one
  11381.  
  11382. var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1; // Split the offset string to obtain a list of values and operands
  11383. // The regex addresses values with the plus or minus sign in front (+10, -20, etc)
  11384.  
  11385. var fragments = offset.split(/(\+|\-)/).map(function (frag) {
  11386. return frag.trim();
  11387. }); // Detect if the offset string contains a pair of values or a single one
  11388. // they could be separated by comma or space
  11389.  
  11390. var divider = fragments.indexOf(find(fragments, function (frag) {
  11391. return frag.search(/,|\s/) !== -1;
  11392. }));
  11393.  
  11394. if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
  11395. console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
  11396. } // If divider is found, we divide the list of values and operands to divide
  11397. // them by ofset X and Y.
  11398.  
  11399.  
  11400. var splitRegex = /\s*,\s*|\s+/;
  11401. 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
  11402.  
  11403. ops = ops.map(function (op, index) {
  11404. // Most of the units rely on the orientation of the popper
  11405. var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
  11406. var mergeWithPrevious = false;
  11407. return op // This aggregates any `+` or `-` sign that aren't considered operators
  11408. // e.g.: 10 + +5 => [10, +, +5]
  11409. .reduce(function (a, b) {
  11410. if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
  11411. a[a.length - 1] = b;
  11412. mergeWithPrevious = true;
  11413. return a;
  11414. } else if (mergeWithPrevious) {
  11415. a[a.length - 1] += b;
  11416. mergeWithPrevious = false;
  11417. return a;
  11418. } else {
  11419. return a.concat(b);
  11420. }
  11421. }, []) // Here we convert the string values into number values (in px)
  11422. .map(function (str) {
  11423. return toValue(str, measurement, popperOffsets, referenceOffsets);
  11424. });
  11425. }); // Loop trough the offsets arrays and execute the operations
  11426.  
  11427. ops.forEach(function (op, index) {
  11428. op.forEach(function (frag, index2) {
  11429. if (isNumeric(frag)) {
  11430. offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
  11431. }
  11432. });
  11433. });
  11434. return offsets;
  11435. }
  11436. /**
  11437. * @function
  11438. * @memberof Modifiers
  11439. * @argument {Object} data - The data object generated by update method
  11440. * @argument {Object} options - Modifiers configuration and options
  11441. * @argument {Number|String} options.offset=0
  11442. * The offset value as described in the modifier description
  11443. * @returns {Object} The data object, properly modified
  11444. */
  11445.  
  11446.  
  11447. function offset(data, _ref) {
  11448. var offset = _ref.offset;
  11449. var placement = data.placement,
  11450. _data$offsets = data.offsets,
  11451. popper = _data$offsets.popper,
  11452. reference = _data$offsets.reference;
  11453. var basePlacement = placement.split('-')[0];
  11454. var offsets = void 0;
  11455.  
  11456. if (isNumeric(+offset)) {
  11457. offsets = [+offset, 0];
  11458. } else {
  11459. offsets = parseOffset(offset, popper, reference, basePlacement);
  11460. }
  11461.  
  11462. if (basePlacement === 'left') {
  11463. popper.top += offsets[0];
  11464. popper.left -= offsets[1];
  11465. } else if (basePlacement === 'right') {
  11466. popper.top += offsets[0];
  11467. popper.left += offsets[1];
  11468. } else if (basePlacement === 'top') {
  11469. popper.left += offsets[0];
  11470. popper.top -= offsets[1];
  11471. } else if (basePlacement === 'bottom') {
  11472. popper.left += offsets[0];
  11473. popper.top += offsets[1];
  11474. }
  11475.  
  11476. data.popper = popper;
  11477. return data;
  11478. }
  11479. /**
  11480. * @function
  11481. * @memberof Modifiers
  11482. * @argument {Object} data - The data object generated by `update` method
  11483. * @argument {Object} options - Modifiers configuration and options
  11484. * @returns {Object} The data object, properly modified
  11485. */
  11486.  
  11487.  
  11488. function preventOverflow(data, options) {
  11489. var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper); // If offsetParent is the reference element, we really want to
  11490. // go one step up and use the next offsetParent as reference to
  11491. // avoid to make this modifier completely useless and look like broken
  11492.  
  11493. if (data.instance.reference === boundariesElement) {
  11494. boundariesElement = getOffsetParent(boundariesElement);
  11495. } // NOTE: DOM access here
  11496. // resets the popper's position so that the document size can be calculated excluding
  11497. // the size of the popper element itself
  11498.  
  11499.  
  11500. var transformProp = getSupportedPropertyName('transform');
  11501. var popperStyles = data.instance.popper.style; // assignment to help minification
  11502.  
  11503. var top = popperStyles.top,
  11504. left = popperStyles.left,
  11505. transform = popperStyles[transformProp];
  11506. popperStyles.top = '';
  11507. popperStyles.left = '';
  11508. popperStyles[transformProp] = '';
  11509. var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed); // NOTE: DOM access here
  11510. // restores the original style properties after the offsets have been computed
  11511.  
  11512. popperStyles.top = top;
  11513. popperStyles.left = left;
  11514. popperStyles[transformProp] = transform;
  11515. options.boundaries = boundaries;
  11516. var order = options.priority;
  11517. var popper = data.offsets.popper;
  11518. var check = {
  11519. primary: function primary(placement) {
  11520. var value = popper[placement];
  11521.  
  11522. if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
  11523. value = Math.max(popper[placement], boundaries[placement]);
  11524. }
  11525.  
  11526. return defineProperty({}, placement, value);
  11527. },
  11528. secondary: function secondary(placement) {
  11529. var mainSide = placement === 'right' ? 'left' : 'top';
  11530. var value = popper[mainSide];
  11531.  
  11532. if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
  11533. value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
  11534. }
  11535.  
  11536. return defineProperty({}, mainSide, value);
  11537. }
  11538. };
  11539. order.forEach(function (placement) {
  11540. var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
  11541. popper = _extends({}, popper, check[side](placement));
  11542. });
  11543. data.offsets.popper = popper;
  11544. return data;
  11545. }
  11546. /**
  11547. * @function
  11548. * @memberof Modifiers
  11549. * @argument {Object} data - The data object generated by `update` method
  11550. * @argument {Object} options - Modifiers configuration and options
  11551. * @returns {Object} The data object, properly modified
  11552. */
  11553.  
  11554.  
  11555. function shift(data) {
  11556. var placement = data.placement;
  11557. var basePlacement = placement.split('-')[0];
  11558. var shiftvariation = placement.split('-')[1]; // if shift shiftvariation is specified, run the modifier
  11559.  
  11560. if (shiftvariation) {
  11561. var _data$offsets = data.offsets,
  11562. reference = _data$offsets.reference,
  11563. popper = _data$offsets.popper;
  11564. var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
  11565. var side = isVertical ? 'left' : 'top';
  11566. var measurement = isVertical ? 'width' : 'height';
  11567. var shiftOffsets = {
  11568. start: defineProperty({}, side, reference[side]),
  11569. end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
  11570. };
  11571. data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
  11572. }
  11573.  
  11574. return data;
  11575. }
  11576. /**
  11577. * @function
  11578. * @memberof Modifiers
  11579. * @argument {Object} data - The data object generated by update method
  11580. * @argument {Object} options - Modifiers configuration and options
  11581. * @returns {Object} The data object, properly modified
  11582. */
  11583.  
  11584.  
  11585. function hide(data) {
  11586. if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
  11587. return data;
  11588. }
  11589.  
  11590. var refRect = data.offsets.reference;
  11591. var bound = find(data.instance.modifiers, function (modifier) {
  11592. return modifier.name === 'preventOverflow';
  11593. }).boundaries;
  11594.  
  11595. if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
  11596. // Avoid unnecessary DOM access if visibility hasn't changed
  11597. if (data.hide === true) {
  11598. return data;
  11599. }
  11600.  
  11601. data.hide = true;
  11602. data.attributes['x-out-of-boundaries'] = '';
  11603. } else {
  11604. // Avoid unnecessary DOM access if visibility hasn't changed
  11605. if (data.hide === false) {
  11606. return data;
  11607. }
  11608.  
  11609. data.hide = false;
  11610. data.attributes['x-out-of-boundaries'] = false;
  11611. }
  11612.  
  11613. return data;
  11614. }
  11615. /**
  11616. * @function
  11617. * @memberof Modifiers
  11618. * @argument {Object} data - The data object generated by `update` method
  11619. * @argument {Object} options - Modifiers configuration and options
  11620. * @returns {Object} The data object, properly modified
  11621. */
  11622.  
  11623.  
  11624. function inner(data) {
  11625. var placement = data.placement;
  11626. var basePlacement = placement.split('-')[0];
  11627. var _data$offsets = data.offsets,
  11628. popper = _data$offsets.popper,
  11629. reference = _data$offsets.reference;
  11630. var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
  11631. var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
  11632. popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
  11633. data.placement = getOppositePlacement(placement);
  11634. data.offsets.popper = getClientRect(popper);
  11635. return data;
  11636. }
  11637. /**
  11638. * Modifier function, each modifier can have a function of this type assigned
  11639. * to its `fn` property.<br />
  11640. * These functions will be called on each update, this means that you must
  11641. * make sure they are performant enough to avoid performance bottlenecks.
  11642. *
  11643. * @function ModifierFn
  11644. * @argument {dataObject} data - The data object generated by `update` method
  11645. * @argument {Object} options - Modifiers configuration and options
  11646. * @returns {dataObject} The data object, properly modified
  11647. */
  11648.  
  11649. /**
  11650. * Modifiers are plugins used to alter the behavior of your poppers.<br />
  11651. * Popper.js uses a set of 9 modifiers to provide all the basic functionalities
  11652. * needed by the library.
  11653. *
  11654. * Usually you don't want to override the `order`, `fn` and `onLoad` props.
  11655. * All the other properties are configurations that could be tweaked.
  11656. * @namespace modifiers
  11657. */
  11658.  
  11659.  
  11660. var modifiers = {
  11661. /**
  11662. * Modifier used to shift the popper on the start or end of its reference
  11663. * element.<br />
  11664. * It will read the variation of the `placement` property.<br />
  11665. * It can be one either `-end` or `-start`.
  11666. * @memberof modifiers
  11667. * @inner
  11668. */
  11669. shift: {
  11670. /** @prop {number} order=100 - Index used to define the order of execution */
  11671. order: 100,
  11672.  
  11673. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11674. enabled: true,
  11675.  
  11676. /** @prop {ModifierFn} */
  11677. fn: shift
  11678. },
  11679.  
  11680. /**
  11681. * The `offset` modifier can shift your popper on both its axis.
  11682. *
  11683. * It accepts the following units:
  11684. * - `px` or unit-less, interpreted as pixels
  11685. * - `%` or `%r`, percentage relative to the length of the reference element
  11686. * - `%p`, percentage relative to the length of the popper element
  11687. * - `vw`, CSS viewport width unit
  11688. * - `vh`, CSS viewport height unit
  11689. *
  11690. * For length is intended the main axis relative to the placement of the popper.<br />
  11691. * This means that if the placement is `top` or `bottom`, the length will be the
  11692. * `width`. In case of `left` or `right`, it will be the `height`.
  11693. *
  11694. * You can provide a single value (as `Number` or `String`), or a pair of values
  11695. * as `String` divided by a comma or one (or more) white spaces.<br />
  11696. * The latter is a deprecated method because it leads to confusion and will be
  11697. * removed in v2.<br />
  11698. * Additionally, it accepts additions and subtractions between different units.
  11699. * Note that multiplications and divisions aren't supported.
  11700. *
  11701. * Valid examples are:
  11702. * ```
  11703. * 10
  11704. * '10%'
  11705. * '10, 10'
  11706. * '10%, 10'
  11707. * '10 + 10%'
  11708. * '10 - 5vh + 3%'
  11709. * '-10px + 5vh, 5px - 6%'
  11710. * ```
  11711. * > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
  11712. * > with their reference element, unfortunately, you will have to disable the `flip` modifier.
  11713. * > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
  11714. *
  11715. * @memberof modifiers
  11716. * @inner
  11717. */
  11718. offset: {
  11719. /** @prop {number} order=200 - Index used to define the order of execution */
  11720. order: 200,
  11721.  
  11722. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11723. enabled: true,
  11724.  
  11725. /** @prop {ModifierFn} */
  11726. fn: offset,
  11727.  
  11728. /** @prop {Number|String} offset=0
  11729. * The offset value as described in the modifier description
  11730. */
  11731. offset: 0
  11732. },
  11733.  
  11734. /**
  11735. * Modifier used to prevent the popper from being positioned outside the boundary.
  11736. *
  11737. * A scenario exists where the reference itself is not within the boundaries.<br />
  11738. * We can say it has "escaped the boundaries" — or just "escaped".<br />
  11739. * In this case we need to decide whether the popper should either:
  11740. *
  11741. * - detach from the reference and remain "trapped" in the boundaries, or
  11742. * - if it should ignore the boundary and "escape with its reference"
  11743. *
  11744. * When `escapeWithReference` is set to`true` and reference is completely
  11745. * outside its boundaries, the popper will overflow (or completely leave)
  11746. * the boundaries in order to remain attached to the edge of the reference.
  11747. *
  11748. * @memberof modifiers
  11749. * @inner
  11750. */
  11751. preventOverflow: {
  11752. /** @prop {number} order=300 - Index used to define the order of execution */
  11753. order: 300,
  11754.  
  11755. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11756. enabled: true,
  11757.  
  11758. /** @prop {ModifierFn} */
  11759. fn: preventOverflow,
  11760.  
  11761. /**
  11762. * @prop {Array} [priority=['left','right','top','bottom']]
  11763. * Popper will try to prevent overflow following these priorities by default,
  11764. * then, it could overflow on the left and on top of the `boundariesElement`
  11765. */
  11766. priority: ['left', 'right', 'top', 'bottom'],
  11767.  
  11768. /**
  11769. * @prop {number} padding=5
  11770. * Amount of pixel used to define a minimum distance between the boundaries
  11771. * and the popper. This makes sure the popper always has a little padding
  11772. * between the edges of its container
  11773. */
  11774. padding: 5,
  11775.  
  11776. /**
  11777. * @prop {String|HTMLElement} boundariesElement='scrollParent'
  11778. * Boundaries used by the modifier. Can be `scrollParent`, `window`,
  11779. * `viewport` or any DOM element.
  11780. */
  11781. boundariesElement: 'scrollParent'
  11782. },
  11783.  
  11784. /**
  11785. * Modifier used to make sure the reference and its popper stay near each other
  11786. * without leaving any gap between the two. Especially useful when the arrow is
  11787. * enabled and you want to ensure that it points to its reference element.
  11788. * It cares only about the first axis. You can still have poppers with margin
  11789. * between the popper and its reference element.
  11790. * @memberof modifiers
  11791. * @inner
  11792. */
  11793. keepTogether: {
  11794. /** @prop {number} order=400 - Index used to define the order of execution */
  11795. order: 400,
  11796.  
  11797. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11798. enabled: true,
  11799.  
  11800. /** @prop {ModifierFn} */
  11801. fn: keepTogether
  11802. },
  11803.  
  11804. /**
  11805. * This modifier is used to move the `arrowElement` of the popper to make
  11806. * sure it is positioned between the reference element and its popper element.
  11807. * It will read the outer size of the `arrowElement` node to detect how many
  11808. * pixels of conjunction are needed.
  11809. *
  11810. * It has no effect if no `arrowElement` is provided.
  11811. * @memberof modifiers
  11812. * @inner
  11813. */
  11814. arrow: {
  11815. /** @prop {number} order=500 - Index used to define the order of execution */
  11816. order: 500,
  11817.  
  11818. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11819. enabled: true,
  11820.  
  11821. /** @prop {ModifierFn} */
  11822. fn: arrow,
  11823.  
  11824. /** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
  11825. element: '[x-arrow]'
  11826. },
  11827.  
  11828. /**
  11829. * Modifier used to flip the popper's placement when it starts to overlap its
  11830. * reference element.
  11831. *
  11832. * Requires the `preventOverflow` modifier before it in order to work.
  11833. *
  11834. * **NOTE:** this modifier will interrupt the current update cycle and will
  11835. * restart it if it detects the need to flip the placement.
  11836. * @memberof modifiers
  11837. * @inner
  11838. */
  11839. flip: {
  11840. /** @prop {number} order=600 - Index used to define the order of execution */
  11841. order: 600,
  11842.  
  11843. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11844. enabled: true,
  11845.  
  11846. /** @prop {ModifierFn} */
  11847. fn: flip,
  11848.  
  11849. /**
  11850. * @prop {String|Array} behavior='flip'
  11851. * The behavior used to change the popper's placement. It can be one of
  11852. * `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
  11853. * placements (with optional variations)
  11854. */
  11855. behavior: 'flip',
  11856.  
  11857. /**
  11858. * @prop {number} padding=5
  11859. * The popper will flip if it hits the edges of the `boundariesElement`
  11860. */
  11861. padding: 5,
  11862.  
  11863. /**
  11864. * @prop {String|HTMLElement} boundariesElement='viewport'
  11865. * The element which will define the boundaries of the popper position.
  11866. * The popper will never be placed outside of the defined boundaries
  11867. * (except if `keepTogether` is enabled)
  11868. */
  11869. boundariesElement: 'viewport',
  11870.  
  11871. /**
  11872. * @prop {Boolean} flipVariations=false
  11873. * The popper will switch placement variation between `-start` and `-end` when
  11874. * the reference element overlaps its boundaries.
  11875. *
  11876. * The original placement should have a set variation.
  11877. */
  11878. flipVariations: false,
  11879.  
  11880. /**
  11881. * @prop {Boolean} flipVariationsByContent=false
  11882. * The popper will switch placement variation between `-start` and `-end` when
  11883. * the popper element overlaps its reference boundaries.
  11884. *
  11885. * The original placement should have a set variation.
  11886. */
  11887. flipVariationsByContent: false
  11888. },
  11889.  
  11890. /**
  11891. * Modifier used to make the popper flow toward the inner of the reference element.
  11892. * By default, when this modifier is disabled, the popper will be placed outside
  11893. * the reference element.
  11894. * @memberof modifiers
  11895. * @inner
  11896. */
  11897. inner: {
  11898. /** @prop {number} order=700 - Index used to define the order of execution */
  11899. order: 700,
  11900.  
  11901. /** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
  11902. enabled: false,
  11903.  
  11904. /** @prop {ModifierFn} */
  11905. fn: inner
  11906. },
  11907.  
  11908. /**
  11909. * Modifier used to hide the popper when its reference element is outside of the
  11910. * popper boundaries. It will set a `x-out-of-boundaries` attribute which can
  11911. * be used to hide with a CSS selector the popper when its reference is
  11912. * out of boundaries.
  11913. *
  11914. * Requires the `preventOverflow` modifier before it in order to work.
  11915. * @memberof modifiers
  11916. * @inner
  11917. */
  11918. hide: {
  11919. /** @prop {number} order=800 - Index used to define the order of execution */
  11920. order: 800,
  11921.  
  11922. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11923. enabled: true,
  11924.  
  11925. /** @prop {ModifierFn} */
  11926. fn: hide
  11927. },
  11928.  
  11929. /**
  11930. * Computes the style that will be applied to the popper element to gets
  11931. * properly positioned.
  11932. *
  11933. * Note that this modifier will not touch the DOM, it just prepares the styles
  11934. * so that `applyStyle` modifier can apply it. This separation is useful
  11935. * in case you need to replace `applyStyle` with a custom implementation.
  11936. *
  11937. * This modifier has `850` as `order` value to maintain backward compatibility
  11938. * with previous versions of Popper.js. Expect the modifiers ordering method
  11939. * to change in future major versions of the library.
  11940. *
  11941. * @memberof modifiers
  11942. * @inner
  11943. */
  11944. computeStyle: {
  11945. /** @prop {number} order=850 - Index used to define the order of execution */
  11946. order: 850,
  11947.  
  11948. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11949. enabled: true,
  11950.  
  11951. /** @prop {ModifierFn} */
  11952. fn: computeStyle,
  11953.  
  11954. /**
  11955. * @prop {Boolean} gpuAcceleration=true
  11956. * If true, it uses the CSS 3D transformation to position the popper.
  11957. * Otherwise, it will use the `top` and `left` properties
  11958. */
  11959. gpuAcceleration: true,
  11960.  
  11961. /**
  11962. * @prop {string} [x='bottom']
  11963. * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
  11964. * Change this if your popper should grow in a direction different from `bottom`
  11965. */
  11966. x: 'bottom',
  11967.  
  11968. /**
  11969. * @prop {string} [x='left']
  11970. * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
  11971. * Change this if your popper should grow in a direction different from `right`
  11972. */
  11973. y: 'right'
  11974. },
  11975.  
  11976. /**
  11977. * Applies the computed styles to the popper element.
  11978. *
  11979. * All the DOM manipulations are limited to this modifier. This is useful in case
  11980. * you want to integrate Popper.js inside a framework or view library and you
  11981. * want to delegate all the DOM manipulations to it.
  11982. *
  11983. * Note that if you disable this modifier, you must make sure the popper element
  11984. * has its position set to `absolute` before Popper.js can do its work!
  11985. *
  11986. * Just disable this modifier and define your own to achieve the desired effect.
  11987. *
  11988. * @memberof modifiers
  11989. * @inner
  11990. */
  11991. applyStyle: {
  11992. /** @prop {number} order=900 - Index used to define the order of execution */
  11993. order: 900,
  11994.  
  11995. /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
  11996. enabled: true,
  11997.  
  11998. /** @prop {ModifierFn} */
  11999. fn: applyStyle,
  12000.  
  12001. /** @prop {Function} */
  12002. onLoad: applyStyleOnLoad,
  12003.  
  12004. /**
  12005. * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
  12006. * @prop {Boolean} gpuAcceleration=true
  12007. * If true, it uses the CSS 3D transformation to position the popper.
  12008. * Otherwise, it will use the `top` and `left` properties
  12009. */
  12010. gpuAcceleration: undefined
  12011. }
  12012. };
  12013. /**
  12014. * The `dataObject` is an object containing all the information used by Popper.js.
  12015. * This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
  12016. * @name dataObject
  12017. * @property {Object} data.instance The Popper.js instance
  12018. * @property {String} data.placement Placement applied to popper
  12019. * @property {String} data.originalPlacement Placement originally defined on init
  12020. * @property {Boolean} data.flipped True if popper has been flipped by flip modifier
  12021. * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
  12022. * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
  12023. * @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
  12024. * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
  12025. * @property {Object} data.boundaries Offsets of the popper boundaries
  12026. * @property {Object} data.offsets The measurements of popper, reference and arrow elements
  12027. * @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
  12028. * @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
  12029. * @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
  12030. */
  12031.  
  12032. /**
  12033. * Default options provided to Popper.js constructor.<br />
  12034. * These can be overridden using the `options` argument of Popper.js.<br />
  12035. * To override an option, simply pass an object with the same
  12036. * structure of the `options` object, as the 3rd argument. For example:
  12037. * ```
  12038. * new Popper(ref, pop, {
  12039. * modifiers: {
  12040. * preventOverflow: { enabled: false }
  12041. * }
  12042. * })
  12043. * ```
  12044. * @type {Object}
  12045. * @static
  12046. * @memberof Popper
  12047. */
  12048.  
  12049. var Defaults = {
  12050. /**
  12051. * Popper's placement.
  12052. * @prop {Popper.placements} placement='bottom'
  12053. */
  12054. placement: 'bottom',
  12055.  
  12056. /**
  12057. * Set this to true if you want popper to position it self in 'fixed' mode
  12058. * @prop {Boolean} positionFixed=false
  12059. */
  12060. positionFixed: false,
  12061.  
  12062. /**
  12063. * Whether events (resize, scroll) are initially enabled.
  12064. * @prop {Boolean} eventsEnabled=true
  12065. */
  12066. eventsEnabled: true,
  12067.  
  12068. /**
  12069. * Set to true if you want to automatically remove the popper when
  12070. * you call the `destroy` method.
  12071. * @prop {Boolean} removeOnDestroy=false
  12072. */
  12073. removeOnDestroy: false,
  12074.  
  12075. /**
  12076. * Callback called when the popper is created.<br />
  12077. * By default, it is set to no-op.<br />
  12078. * Access Popper.js instance with `data.instance`.
  12079. * @prop {onCreate}
  12080. */
  12081. onCreate: function onCreate() {},
  12082.  
  12083. /**
  12084. * Callback called when the popper is updated. This callback is not called
  12085. * on the initialization/creation of the popper, but only on subsequent
  12086. * updates.<br />
  12087. * By default, it is set to no-op.<br />
  12088. * Access Popper.js instance with `data.instance`.
  12089. * @prop {onUpdate}
  12090. */
  12091. onUpdate: function onUpdate() {},
  12092.  
  12093. /**
  12094. * List of modifiers used to modify the offsets before they are applied to the popper.
  12095. * They provide most of the functionalities of Popper.js.
  12096. * @prop {modifiers}
  12097. */
  12098. modifiers: modifiers
  12099. };
  12100. /**
  12101. * @callback onCreate
  12102. * @param {dataObject} data
  12103. */
  12104.  
  12105. /**
  12106. * @callback onUpdate
  12107. * @param {dataObject} data
  12108. */
  12109. // Utils
  12110. // Methods
  12111.  
  12112. var Popper$1 = function () {
  12113. /**
  12114. * Creates a new Popper.js instance.
  12115. * @class Popper
  12116. * @param {Element|referenceObject} reference - The reference element used to position the popper
  12117. * @param {Element} popper - The HTML / XML element used as the popper
  12118. * @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
  12119. * @return {Object} instance - The generated Popper.js instance
  12120. */
  12121. function Popper(reference, popper) {
  12122. var _this = this;
  12123.  
  12124. var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  12125. classCallCheck(this, Popper);
  12126.  
  12127. this.scheduleUpdate = function () {
  12128. return requestAnimationFrame(_this.update);
  12129. }; // make update() debounced, so that it only runs at most once-per-tick
  12130.  
  12131.  
  12132. this.update = debounce(this.update.bind(this)); // with {} we create a new object with the options inside it
  12133.  
  12134. this.options = _extends({}, Popper.Defaults, options); // init state
  12135.  
  12136. this.state = {
  12137. isDestroyed: false,
  12138. isCreated: false,
  12139. scrollParents: []
  12140. }; // get reference and popper elements (allow jQuery wrappers)
  12141.  
  12142. this.reference = reference && reference.jquery ? reference[0] : reference;
  12143. this.popper = popper && popper.jquery ? popper[0] : popper; // Deep merge modifiers options
  12144.  
  12145. this.options.modifiers = {};
  12146. Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
  12147. _this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
  12148. }); // Refactoring modifiers' list (Object => Array)
  12149.  
  12150. this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
  12151. return _extends({
  12152. name: name
  12153. }, _this.options.modifiers[name]);
  12154. }) // sort the modifiers by order
  12155. .sort(function (a, b) {
  12156. return a.order - b.order;
  12157. }); // modifiers have the ability to execute arbitrary code when Popper.js get inited
  12158. // such code is executed in the same order of its modifier
  12159. // they could add new properties to their options configuration
  12160. // BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!
  12161.  
  12162. this.modifiers.forEach(function (modifierOptions) {
  12163. if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {
  12164. modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
  12165. }
  12166. }); // fire the first update to position the popper in the right place
  12167.  
  12168. this.update();
  12169. var eventsEnabled = this.options.eventsEnabled;
  12170.  
  12171. if (eventsEnabled) {
  12172. // setup event listeners, they will take care of update the position in specific situations
  12173. this.enableEventListeners();
  12174. }
  12175.  
  12176. this.state.eventsEnabled = eventsEnabled;
  12177. } // We can't use class properties because they don't get listed in the
  12178. // class prototype and break stuff like Sinon stubs
  12179.  
  12180.  
  12181. createClass(Popper, [{
  12182. key: 'update',
  12183. value: function update$$1() {
  12184. return update.call(this);
  12185. }
  12186. }, {
  12187. key: 'destroy',
  12188. value: function destroy$$1() {
  12189. return destroy.call(this);
  12190. }
  12191. }, {
  12192. key: 'enableEventListeners',
  12193. value: function enableEventListeners$$1() {
  12194. return enableEventListeners.call(this);
  12195. }
  12196. }, {
  12197. key: 'disableEventListeners',
  12198. value: function disableEventListeners$$1() {
  12199. return disableEventListeners.call(this);
  12200. }
  12201. /**
  12202. * Schedules an update. It will run on the next UI update available.
  12203. * @method scheduleUpdate
  12204. * @memberof Popper
  12205. */
  12206.  
  12207. /**
  12208. * Collection of utilities useful when writing custom modifiers.
  12209. * Starting from version 1.7, this method is available only if you
  12210. * include `popper-utils.js` before `popper.js`.
  12211. *
  12212. * **DEPRECATION**: This way to access PopperUtils is deprecated
  12213. * and will be removed in v2! Use the PopperUtils module directly instead.
  12214. * Due to the high instability of the methods contained in Utils, we can't
  12215. * guarantee them to follow semver. Use them at your own risk!
  12216. * @static
  12217. * @private
  12218. * @type {Object}
  12219. * @deprecated since version 1.8
  12220. * @member Utils
  12221. * @memberof Popper
  12222. */
  12223.  
  12224. }]);
  12225. return Popper;
  12226. }();
  12227. /**
  12228. * The `referenceObject` is an object that provides an interface compatible with Popper.js
  12229. * and lets you use it as replacement of a real DOM node.<br />
  12230. * You can use this method to position a popper relatively to a set of coordinates
  12231. * in case you don't have a DOM node to use as reference.
  12232. *
  12233. * ```
  12234. * new Popper(referenceObject, popperNode);
  12235. * ```
  12236. *
  12237. * NB: This feature isn't supported in Internet Explorer 10.
  12238. * @name referenceObject
  12239. * @property {Function} data.getBoundingClientRect
  12240. * A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
  12241. * @property {number} data.clientWidth
  12242. * An ES6 getter that will return the width of the virtual reference element.
  12243. * @property {number} data.clientHeight
  12244. * An ES6 getter that will return the height of the virtual reference element.
  12245. */
  12246.  
  12247.  
  12248. Popper$1.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;
  12249. Popper$1.placements = placements;
  12250. Popper$1.Defaults = Defaults;
  12251.  
  12252. function flipPlacement(placement, theme) {
  12253. var direction = theme && theme.direction || 'ltr';
  12254.  
  12255. if (direction === 'ltr') {
  12256. return placement;
  12257. }
  12258.  
  12259. switch (placement) {
  12260. case 'bottom-end':
  12261. return 'bottom-start';
  12262.  
  12263. case 'bottom-start':
  12264. return 'bottom-end';
  12265.  
  12266. case 'top-end':
  12267. return 'top-start';
  12268.  
  12269. case 'top-start':
  12270. return 'top-end';
  12271.  
  12272. default:
  12273. return placement;
  12274. }
  12275. }
  12276.  
  12277. function getAnchorEl(anchorEl) {
  12278. return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
  12279. }
  12280.  
  12281. var useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
  12282. var defaultPopperOptions = {};
  12283. /**
  12284. * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v1/) for positioning.
  12285. */
  12286.  
  12287. var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, ref) {
  12288. var anchorEl = props.anchorEl,
  12289. children = props.children,
  12290. container = props.container,
  12291. _props$disablePortal = props.disablePortal,
  12292. disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
  12293. _props$keepMounted = props.keepMounted,
  12294. keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
  12295. modifiers = props.modifiers,
  12296. open = props.open,
  12297. _props$placement = props.placement,
  12298. initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
  12299. _props$popperOptions = props.popperOptions,
  12300. popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,
  12301. popperRefProp = props.popperRef,
  12302. style = props.style,
  12303. _props$transition = props.transition,
  12304. transition = _props$transition === void 0 ? false : _props$transition,
  12305. other = _objectWithoutProperties(props, ["anchorEl", "children", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"]);
  12306.  
  12307. var tooltipRef = React__namespace.useRef(null);
  12308. var ownRef = useForkRef(tooltipRef, ref);
  12309. var popperRef = React__namespace.useRef(null);
  12310. var handlePopperRef = useForkRef(popperRef, popperRefProp);
  12311. var handlePopperRefRef = React__namespace.useRef(handlePopperRef);
  12312. useEnhancedEffect(function () {
  12313. handlePopperRefRef.current = handlePopperRef;
  12314. }, [handlePopperRef]);
  12315. React__namespace.useImperativeHandle(popperRefProp, function () {
  12316. return popperRef.current;
  12317. }, []);
  12318.  
  12319. var _React$useState = React__namespace.useState(true),
  12320. exited = _React$useState[0],
  12321. setExited = _React$useState[1];
  12322.  
  12323. var theme = useTheme$1();
  12324. var rtlPlacement = flipPlacement(initialPlacement, theme);
  12325. /**
  12326. * placement initialized from prop but can change during lifetime if modifiers.flip.
  12327. * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
  12328. */
  12329.  
  12330. var _React$useState2 = React__namespace.useState(rtlPlacement),
  12331. placement = _React$useState2[0],
  12332. setPlacement = _React$useState2[1];
  12333.  
  12334. React__namespace.useEffect(function () {
  12335. if (popperRef.current) {
  12336. popperRef.current.update();
  12337. }
  12338. });
  12339. var handleOpen = React__namespace.useCallback(function () {
  12340. if (!tooltipRef.current || !anchorEl || !open) {
  12341. return;
  12342. }
  12343.  
  12344. if (popperRef.current) {
  12345. popperRef.current.destroy();
  12346. handlePopperRefRef.current(null);
  12347. }
  12348.  
  12349. var handlePopperUpdate = function handlePopperUpdate(data) {
  12350. setPlacement(data.placement);
  12351. };
  12352.  
  12353. getAnchorEl(anchorEl);
  12354.  
  12355. var popper = new Popper$1(getAnchorEl(anchorEl), tooltipRef.current, _extends$1({
  12356. placement: rtlPlacement
  12357. }, popperOptions, {
  12358. modifiers: _extends$1({}, disablePortal ? {} : {
  12359. // It's using scrollParent by default, we can use the viewport when using a portal.
  12360. preventOverflow: {
  12361. boundariesElement: 'window'
  12362. }
  12363. }, modifiers, popperOptions.modifiers),
  12364. // We could have been using a custom modifier like react-popper is doing.
  12365. // But it seems this is the best public API for this use case.
  12366. onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),
  12367. onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate)
  12368. }));
  12369. handlePopperRefRef.current(popper);
  12370. }, [anchorEl, disablePortal, modifiers, open, rtlPlacement, popperOptions]);
  12371. var handleRef = React__namespace.useCallback(function (node) {
  12372. setRef(ownRef, node);
  12373. handleOpen();
  12374. }, [ownRef, handleOpen]);
  12375.  
  12376. var handleEnter = function handleEnter() {
  12377. setExited(false);
  12378. };
  12379.  
  12380. var handleClose = function handleClose() {
  12381. if (!popperRef.current) {
  12382. return;
  12383. }
  12384.  
  12385. popperRef.current.destroy();
  12386. handlePopperRefRef.current(null);
  12387. };
  12388.  
  12389. var handleExited = function handleExited() {
  12390. setExited(true);
  12391. handleClose();
  12392. };
  12393.  
  12394. React__namespace.useEffect(function () {
  12395. return function () {
  12396. handleClose();
  12397. };
  12398. }, []);
  12399. React__namespace.useEffect(function () {
  12400. if (!open && !transition) {
  12401. // Otherwise handleExited will call this.
  12402. handleClose();
  12403. }
  12404. }, [open, transition]);
  12405.  
  12406. if (!keepMounted && !open && (!transition || exited)) {
  12407. return null;
  12408. }
  12409.  
  12410. var childProps = {
  12411. placement: placement
  12412. };
  12413.  
  12414. if (transition) {
  12415. childProps.TransitionProps = {
  12416. in: open,
  12417. onEnter: handleEnter,
  12418. onExited: handleExited
  12419. };
  12420. }
  12421.  
  12422. return /*#__PURE__*/React__namespace.createElement(Portal, {
  12423. disablePortal: disablePortal,
  12424. container: container
  12425. }, /*#__PURE__*/React__namespace.createElement("div", _extends$1({
  12426. ref: handleRef,
  12427. role: "tooltip"
  12428. }, other, {
  12429. style: _extends$1({
  12430. // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
  12431. position: 'fixed',
  12432. // Fix Popper.js display issue
  12433. top: 0,
  12434. left: 0,
  12435. display: !open && keepMounted && !transition ? 'none' : null
  12436. }, style)
  12437. }), typeof children === 'function' ? children(childProps) : children));
  12438. });
  12439.  
  12440. var styles$3 = function styles(theme) {
  12441. return {
  12442. thumb: {
  12443. '&$open': {
  12444. '& $offset': {
  12445. transform: 'scale(1) translateY(-10px)'
  12446. }
  12447. }
  12448. },
  12449. open: {},
  12450. offset: _extends$1({
  12451. zIndex: 1
  12452. }, theme.typography.body2, {
  12453. fontSize: theme.typography.pxToRem(12),
  12454. lineHeight: 1.2,
  12455. transition: theme.transitions.create(['transform'], {
  12456. duration: theme.transitions.duration.shortest
  12457. }),
  12458. top: -34,
  12459. transformOrigin: 'bottom center',
  12460. transform: 'scale(0)',
  12461. position: 'absolute'
  12462. }),
  12463. circle: {
  12464. display: 'flex',
  12465. alignItems: 'center',
  12466. justifyContent: 'center',
  12467. width: 32,
  12468. height: 32,
  12469. borderRadius: '50% 50% 50% 0',
  12470. backgroundColor: 'currentColor',
  12471. transform: 'rotate(-45deg)'
  12472. },
  12473. label: {
  12474. color: theme.palette.primary.contrastText,
  12475. transform: 'rotate(45deg)'
  12476. }
  12477. };
  12478. };
  12479. /**
  12480. * @ignore - internal component.
  12481. */
  12482.  
  12483.  
  12484. function ValueLabel(props) {
  12485. var children = props.children,
  12486. classes = props.classes,
  12487. className = props.className,
  12488. open = props.open,
  12489. value = props.value,
  12490. valueLabelDisplay = props.valueLabelDisplay;
  12491.  
  12492. if (valueLabelDisplay === 'off') {
  12493. return children;
  12494. }
  12495.  
  12496. return /*#__PURE__*/React__namespace.cloneElement(children, {
  12497. className: clsx(children.props.className, (open || valueLabelDisplay === 'on') && classes.open, classes.thumb)
  12498. }, /*#__PURE__*/React__namespace.createElement("span", {
  12499. className: clsx(classes.offset, className)
  12500. }, /*#__PURE__*/React__namespace.createElement("span", {
  12501. className: classes.circle
  12502. }, /*#__PURE__*/React__namespace.createElement("span", {
  12503. className: classes.label
  12504. }, value))));
  12505. }
  12506.  
  12507. var ValueLabel$1 = withStyles(styles$3, {
  12508. name: 'PrivateValueLabel'
  12509. })(ValueLabel);
  12510.  
  12511. function asc(a, b) {
  12512. return a - b;
  12513. }
  12514.  
  12515. function clamp(value, min, max) {
  12516. return Math.min(Math.max(min, value), max);
  12517. }
  12518.  
  12519. function findClosest(values, currentValue) {
  12520. var _values$reduce = values.reduce(function (acc, value, index) {
  12521. var distance = Math.abs(currentValue - value);
  12522.  
  12523. if (acc === null || distance < acc.distance || distance === acc.distance) {
  12524. return {
  12525. distance: distance,
  12526. index: index
  12527. };
  12528. }
  12529.  
  12530. return acc;
  12531. }, null),
  12532. closestIndex = _values$reduce.index;
  12533.  
  12534. return closestIndex;
  12535. }
  12536.  
  12537. function trackFinger(event, touchId) {
  12538. if (touchId.current !== undefined && event.changedTouches) {
  12539. for (var i = 0; i < event.changedTouches.length; i += 1) {
  12540. var touch = event.changedTouches[i];
  12541.  
  12542. if (touch.identifier === touchId.current) {
  12543. return {
  12544. x: touch.clientX,
  12545. y: touch.clientY
  12546. };
  12547. }
  12548. }
  12549.  
  12550. return false;
  12551. }
  12552.  
  12553. return {
  12554. x: event.clientX,
  12555. y: event.clientY
  12556. };
  12557. }
  12558.  
  12559. function valueToPercent(value, min, max) {
  12560. return (value - min) * 100 / (max - min);
  12561. }
  12562.  
  12563. function percentToValue(percent, min, max) {
  12564. return (max - min) * percent + min;
  12565. }
  12566.  
  12567. function getDecimalPrecision(num) {
  12568. // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
  12569. // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
  12570. if (Math.abs(num) < 1) {
  12571. var parts = num.toExponential().split('e-');
  12572. var matissaDecimalPart = parts[0].split('.')[1];
  12573. return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
  12574. }
  12575.  
  12576. var decimalPart = num.toString().split('.')[1];
  12577. return decimalPart ? decimalPart.length : 0;
  12578. }
  12579.  
  12580. function roundValueToStep(value, step, min) {
  12581. var nearest = Math.round((value - min) / step) * step + min;
  12582. return Number(nearest.toFixed(getDecimalPrecision(step)));
  12583. }
  12584.  
  12585. function setValueIndex(_ref) {
  12586. var values = _ref.values,
  12587. source = _ref.source,
  12588. newValue = _ref.newValue,
  12589. index = _ref.index; // Performance shortcut
  12590.  
  12591. if (values[index] === newValue) {
  12592. return source;
  12593. }
  12594.  
  12595. var output = values.slice();
  12596. output[index] = newValue;
  12597. return output;
  12598. }
  12599.  
  12600. function focusThumb(_ref2) {
  12601. var sliderRef = _ref2.sliderRef,
  12602. activeIndex = _ref2.activeIndex,
  12603. setActive = _ref2.setActive;
  12604.  
  12605. if (!sliderRef.current.contains(document.activeElement) || Number(document.activeElement.getAttribute('data-index')) !== activeIndex) {
  12606. sliderRef.current.querySelector("[role=\"slider\"][data-index=\"".concat(activeIndex, "\"]")).focus();
  12607. }
  12608.  
  12609. if (setActive) {
  12610. setActive(activeIndex);
  12611. }
  12612. }
  12613.  
  12614. var axisProps = {
  12615. horizontal: {
  12616. offset: function offset(percent) {
  12617. return {
  12618. left: "".concat(percent, "%")
  12619. };
  12620. },
  12621. leap: function leap(percent) {
  12622. return {
  12623. width: "".concat(percent, "%")
  12624. };
  12625. }
  12626. },
  12627. 'horizontal-reverse': {
  12628. offset: function offset(percent) {
  12629. return {
  12630. right: "".concat(percent, "%")
  12631. };
  12632. },
  12633. leap: function leap(percent) {
  12634. return {
  12635. width: "".concat(percent, "%")
  12636. };
  12637. }
  12638. },
  12639. vertical: {
  12640. offset: function offset(percent) {
  12641. return {
  12642. bottom: "".concat(percent, "%")
  12643. };
  12644. },
  12645. leap: function leap(percent) {
  12646. return {
  12647. height: "".concat(percent, "%")
  12648. };
  12649. }
  12650. }
  12651. };
  12652.  
  12653. var Identity = function Identity(x) {
  12654. return x;
  12655. };
  12656.  
  12657. var styles$2 = function styles(theme) {
  12658. return {
  12659. /* Styles applied to the root element. */
  12660. root: {
  12661. height: 2,
  12662. width: '100%',
  12663. boxSizing: 'content-box',
  12664. padding: '13px 0',
  12665. display: 'inline-block',
  12666. position: 'relative',
  12667. cursor: 'pointer',
  12668. touchAction: 'none',
  12669. color: theme.palette.primary.main,
  12670. WebkitTapHighlightColor: 'transparent',
  12671. '&$disabled': {
  12672. pointerEvents: 'none',
  12673. cursor: 'default',
  12674. color: theme.palette.grey[400]
  12675. },
  12676. '&$vertical': {
  12677. width: 2,
  12678. height: '100%',
  12679. padding: '0 13px'
  12680. },
  12681. // The primary input mechanism of the device includes a pointing device of limited accuracy.
  12682. '@media (pointer: coarse)': {
  12683. // Reach 42px touch target, about ~8mm on screen.
  12684. padding: '20px 0',
  12685. '&$vertical': {
  12686. padding: '0 20px'
  12687. }
  12688. },
  12689. '@media print': {
  12690. colorAdjust: 'exact'
  12691. }
  12692. },
  12693.  
  12694. /* Styles applied to the root element if `color="primary"`. */
  12695. colorPrimary: {// TODO v5: move the style here
  12696. },
  12697.  
  12698. /* Styles applied to the root element if `color="secondary"`. */
  12699. colorSecondary: {
  12700. color: theme.palette.secondary.main
  12701. },
  12702.  
  12703. /* Styles applied to the root element if `marks` is provided with at least one label. */
  12704. marked: {
  12705. marginBottom: 20,
  12706. '&$vertical': {
  12707. marginBottom: 'auto',
  12708. marginRight: 20
  12709. }
  12710. },
  12711.  
  12712. /* Pseudo-class applied to the root element if `orientation="vertical"`. */
  12713. vertical: {},
  12714.  
  12715. /* Pseudo-class applied to the root and thumb element if `disabled={true}`. */
  12716. disabled: {},
  12717.  
  12718. /* Styles applied to the rail element. */
  12719. rail: {
  12720. display: 'block',
  12721. position: 'absolute',
  12722. width: '100%',
  12723. height: 2,
  12724. borderRadius: 1,
  12725. backgroundColor: 'currentColor',
  12726. opacity: 0.38,
  12727. '$vertical &': {
  12728. height: '100%',
  12729. width: 2
  12730. }
  12731. },
  12732.  
  12733. /* Styles applied to the track element. */
  12734. track: {
  12735. display: 'block',
  12736. position: 'absolute',
  12737. height: 2,
  12738. borderRadius: 1,
  12739. backgroundColor: 'currentColor',
  12740. '$vertical &': {
  12741. width: 2
  12742. }
  12743. },
  12744.  
  12745. /* Styles applied to the track element if `track={false}`. */
  12746. trackFalse: {
  12747. '& $track': {
  12748. display: 'none'
  12749. }
  12750. },
  12751.  
  12752. /* Styles applied to the track element if `track="inverted"`. */
  12753. trackInverted: {
  12754. '& $track': {
  12755. backgroundColor: // Same logic as the LinearProgress track color
  12756. theme.palette.type === 'light' ? lighten(theme.palette.primary.main, 0.62) : darken(theme.palette.primary.main, 0.5)
  12757. },
  12758. '& $rail': {
  12759. opacity: 1
  12760. }
  12761. },
  12762.  
  12763. /* Styles applied to the thumb element. */
  12764. thumb: {
  12765. position: 'absolute',
  12766. width: 12,
  12767. height: 12,
  12768. marginLeft: -6,
  12769. marginTop: -5,
  12770. boxSizing: 'border-box',
  12771. borderRadius: '50%',
  12772. outline: 0,
  12773. backgroundColor: 'currentColor',
  12774. display: 'flex',
  12775. alignItems: 'center',
  12776. justifyContent: 'center',
  12777. transition: theme.transitions.create(['box-shadow'], {
  12778. duration: theme.transitions.duration.shortest
  12779. }),
  12780. '&::after': {
  12781. position: 'absolute',
  12782. content: '""',
  12783. borderRadius: '50%',
  12784. // reach 42px hit target (2 * 15 + thumb diameter)
  12785. left: -15,
  12786. top: -15,
  12787. right: -15,
  12788. bottom: -15
  12789. },
  12790. '&$focusVisible,&:hover': {
  12791. boxShadow: "0px 0px 0px 8px ".concat(fade(theme.palette.primary.main, 0.16)),
  12792. '@media (hover: none)': {
  12793. boxShadow: 'none'
  12794. }
  12795. },
  12796. '&$active': {
  12797. boxShadow: "0px 0px 0px 14px ".concat(fade(theme.palette.primary.main, 0.16))
  12798. },
  12799. '&$disabled': {
  12800. width: 8,
  12801. height: 8,
  12802. marginLeft: -4,
  12803. marginTop: -3,
  12804. '&:hover': {
  12805. boxShadow: 'none'
  12806. }
  12807. },
  12808. '$vertical &': {
  12809. marginLeft: -5,
  12810. marginBottom: -6
  12811. },
  12812. '$vertical &$disabled': {
  12813. marginLeft: -3,
  12814. marginBottom: -4
  12815. }
  12816. },
  12817.  
  12818. /* Styles applied to the thumb element if `color="primary"`. */
  12819. thumbColorPrimary: {// TODO v5: move the style here
  12820. },
  12821.  
  12822. /* Styles applied to the thumb element if `color="secondary"`. */
  12823. thumbColorSecondary: {
  12824. '&$focusVisible,&:hover': {
  12825. boxShadow: "0px 0px 0px 8px ".concat(fade(theme.palette.secondary.main, 0.16))
  12826. },
  12827. '&$active': {
  12828. boxShadow: "0px 0px 0px 14px ".concat(fade(theme.palette.secondary.main, 0.16))
  12829. }
  12830. },
  12831.  
  12832. /* Pseudo-class applied to the thumb element if it's active. */
  12833. active: {},
  12834.  
  12835. /* Pseudo-class applied to the thumb element if keyboard focused. */
  12836. focusVisible: {},
  12837.  
  12838. /* Styles applied to the thumb label element. */
  12839. valueLabel: {
  12840. // IE 11 centering bug, to remove from the customization demos once no longer supported
  12841. left: 'calc(-50% - 4px)'
  12842. },
  12843.  
  12844. /* Styles applied to the mark element. */
  12845. mark: {
  12846. position: 'absolute',
  12847. width: 2,
  12848. height: 2,
  12849. borderRadius: 1,
  12850. backgroundColor: 'currentColor'
  12851. },
  12852.  
  12853. /* Styles applied to the mark element if active (depending on the value). */
  12854. markActive: {
  12855. backgroundColor: theme.palette.background.paper,
  12856. opacity: 0.8
  12857. },
  12858.  
  12859. /* Styles applied to the mark label element. */
  12860. markLabel: _extends$1({}, theme.typography.body2, {
  12861. color: theme.palette.text.secondary,
  12862. position: 'absolute',
  12863. top: 26,
  12864. transform: 'translateX(-50%)',
  12865. whiteSpace: 'nowrap',
  12866. '$vertical &': {
  12867. top: 'auto',
  12868. left: 26,
  12869. transform: 'translateY(50%)'
  12870. },
  12871. '@media (pointer: coarse)': {
  12872. top: 40,
  12873. '$vertical &': {
  12874. left: 31
  12875. }
  12876. }
  12877. }),
  12878.  
  12879. /* Styles applied to the mark label element if active (depending on the value). */
  12880. markLabelActive: {
  12881. color: theme.palette.text.primary
  12882. }
  12883. };
  12884. };
  12885. var Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(props, ref) {
  12886. var ariaLabel = props['aria-label'],
  12887. ariaLabelledby = props['aria-labelledby'],
  12888. ariaValuetext = props['aria-valuetext'],
  12889. classes = props.classes,
  12890. className = props.className,
  12891. _props$color = props.color,
  12892. color = _props$color === void 0 ? 'primary' : _props$color,
  12893. _props$component = props.component,
  12894. Component = _props$component === void 0 ? 'span' : _props$component,
  12895. defaultValue = props.defaultValue,
  12896. _props$disabled = props.disabled,
  12897. disabled = _props$disabled === void 0 ? false : _props$disabled,
  12898. getAriaLabel = props.getAriaLabel,
  12899. getAriaValueText = props.getAriaValueText,
  12900. _props$marks = props.marks,
  12901. marksProp = _props$marks === void 0 ? false : _props$marks,
  12902. _props$max = props.max,
  12903. max = _props$max === void 0 ? 100 : _props$max,
  12904. _props$min = props.min,
  12905. min = _props$min === void 0 ? 0 : _props$min,
  12906. name = props.name,
  12907. onChange = props.onChange,
  12908. onChangeCommitted = props.onChangeCommitted,
  12909. onMouseDown = props.onMouseDown,
  12910. _props$orientation = props.orientation,
  12911. orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
  12912. _props$scale = props.scale,
  12913. scale = _props$scale === void 0 ? Identity : _props$scale,
  12914. _props$step = props.step,
  12915. step = _props$step === void 0 ? 1 : _props$step,
  12916. _props$ThumbComponent = props.ThumbComponent,
  12917. ThumbComponent = _props$ThumbComponent === void 0 ? 'span' : _props$ThumbComponent,
  12918. _props$track = props.track,
  12919. track = _props$track === void 0 ? 'normal' : _props$track,
  12920. valueProp = props.value,
  12921. _props$ValueLabelComp = props.ValueLabelComponent,
  12922. ValueLabelComponent = _props$ValueLabelComp === void 0 ? ValueLabel$1 : _props$ValueLabelComp,
  12923. _props$valueLabelDisp = props.valueLabelDisplay,
  12924. valueLabelDisplay = _props$valueLabelDisp === void 0 ? 'off' : _props$valueLabelDisp,
  12925. _props$valueLabelForm = props.valueLabelFormat,
  12926. valueLabelFormat = _props$valueLabelForm === void 0 ? Identity : _props$valueLabelForm,
  12927. 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"]);
  12928.  
  12929. var theme = useTheme();
  12930. var touchId = React__namespace.useRef(); // We can't use the :active browser pseudo-classes.
  12931. // - The active state isn't triggered when clicking on the rail.
  12932. // - The active state isn't transfered when inversing a range slider.
  12933.  
  12934. var _React$useState = React__namespace.useState(-1),
  12935. active = _React$useState[0],
  12936. setActive = _React$useState[1];
  12937.  
  12938. var _React$useState2 = React__namespace.useState(-1),
  12939. open = _React$useState2[0],
  12940. setOpen = _React$useState2[1];
  12941.  
  12942. var _useControlled = useControlled({
  12943. controlled: valueProp,
  12944. default: defaultValue,
  12945. name: 'Slider'
  12946. }),
  12947. _useControlled2 = _slicedToArray(_useControlled, 2),
  12948. valueDerived = _useControlled2[0],
  12949. setValueState = _useControlled2[1];
  12950.  
  12951. var range = Array.isArray(valueDerived);
  12952. var values = range ? valueDerived.slice().sort(asc) : [valueDerived];
  12953. values = values.map(function (value) {
  12954. return clamp(value, min, max);
  12955. });
  12956. var marks = marksProp === true && step !== null ? _toConsumableArray(Array(Math.floor((max - min) / step) + 1)).map(function (_, index) {
  12957. return {
  12958. value: min + step * index
  12959. };
  12960. }) : marksProp || [];
  12961.  
  12962. var _useIsFocusVisible = useIsFocusVisible(),
  12963. isFocusVisible = _useIsFocusVisible.isFocusVisible,
  12964. onBlurVisible = _useIsFocusVisible.onBlurVisible,
  12965. focusVisibleRef = _useIsFocusVisible.ref;
  12966.  
  12967. var _React$useState3 = React__namespace.useState(-1),
  12968. focusVisible = _React$useState3[0],
  12969. setFocusVisible = _React$useState3[1];
  12970.  
  12971. var sliderRef = React__namespace.useRef();
  12972. var handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
  12973. var handleRef = useForkRef(ref, handleFocusRef);
  12974. var handleFocus = useEventCallback(function (event) {
  12975. var index = Number(event.currentTarget.getAttribute('data-index'));
  12976.  
  12977. if (isFocusVisible(event)) {
  12978. setFocusVisible(index);
  12979. }
  12980.  
  12981. setOpen(index);
  12982. });
  12983. var handleBlur = useEventCallback(function () {
  12984. if (focusVisible !== -1) {
  12985. setFocusVisible(-1);
  12986. onBlurVisible();
  12987. }
  12988.  
  12989. setOpen(-1);
  12990. });
  12991. var handleMouseOver = useEventCallback(function (event) {
  12992. var index = Number(event.currentTarget.getAttribute('data-index'));
  12993. setOpen(index);
  12994. });
  12995. var handleMouseLeave = useEventCallback(function () {
  12996. setOpen(-1);
  12997. });
  12998. var isRtl = theme.direction === 'rtl';
  12999. var handleKeyDown = useEventCallback(function (event) {
  13000. var index = Number(event.currentTarget.getAttribute('data-index'));
  13001. var value = values[index];
  13002. var tenPercents = (max - min) / 10;
  13003. var marksValues = marks.map(function (mark) {
  13004. return mark.value;
  13005. });
  13006. var marksIndex = marksValues.indexOf(value);
  13007. var newValue;
  13008. var increaseKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
  13009. var decreaseKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
  13010.  
  13011. switch (event.key) {
  13012. case 'Home':
  13013. newValue = min;
  13014. break;
  13015.  
  13016. case 'End':
  13017. newValue = max;
  13018. break;
  13019.  
  13020. case 'PageUp':
  13021. if (step) {
  13022. newValue = value + tenPercents;
  13023. }
  13024.  
  13025. break;
  13026.  
  13027. case 'PageDown':
  13028. if (step) {
  13029. newValue = value - tenPercents;
  13030. }
  13031.  
  13032. break;
  13033.  
  13034. case increaseKey:
  13035. case 'ArrowUp':
  13036. if (step) {
  13037. newValue = value + step;
  13038. } else {
  13039. newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1];
  13040. }
  13041.  
  13042. break;
  13043.  
  13044. case decreaseKey:
  13045. case 'ArrowDown':
  13046. if (step) {
  13047. newValue = value - step;
  13048. } else {
  13049. newValue = marksValues[marksIndex - 1] || marksValues[0];
  13050. }
  13051.  
  13052. break;
  13053.  
  13054. default:
  13055. return;
  13056. } // Prevent scroll of the page
  13057.  
  13058.  
  13059. event.preventDefault();
  13060.  
  13061. if (step) {
  13062. newValue = roundValueToStep(newValue, step, min);
  13063. }
  13064.  
  13065. newValue = clamp(newValue, min, max);
  13066.  
  13067. if (range) {
  13068. var previousValue = newValue;
  13069. newValue = setValueIndex({
  13070. values: values,
  13071. source: valueDerived,
  13072. newValue: newValue,
  13073. index: index
  13074. }).sort(asc);
  13075. focusThumb({
  13076. sliderRef: sliderRef,
  13077. activeIndex: newValue.indexOf(previousValue)
  13078. });
  13079. }
  13080.  
  13081. setValueState(newValue);
  13082. setFocusVisible(index);
  13083.  
  13084. if (onChange) {
  13085. onChange(event, newValue);
  13086. }
  13087.  
  13088. if (onChangeCommitted) {
  13089. onChangeCommitted(event, newValue);
  13090. }
  13091. });
  13092. var previousIndex = React__namespace.useRef();
  13093. var axis = orientation;
  13094.  
  13095. if (isRtl && orientation !== "vertical") {
  13096. axis += '-reverse';
  13097. }
  13098.  
  13099. var getFingerNewValue = function getFingerNewValue(_ref3) {
  13100. var finger = _ref3.finger,
  13101. _ref3$move = _ref3.move,
  13102. move = _ref3$move === void 0 ? false : _ref3$move,
  13103. values2 = _ref3.values,
  13104. source = _ref3.source;
  13105. var slider = sliderRef.current;
  13106.  
  13107. var _slider$getBoundingCl = slider.getBoundingClientRect(),
  13108. width = _slider$getBoundingCl.width,
  13109. height = _slider$getBoundingCl.height,
  13110. bottom = _slider$getBoundingCl.bottom,
  13111. left = _slider$getBoundingCl.left;
  13112.  
  13113. var percent;
  13114.  
  13115. if (axis.indexOf('vertical') === 0) {
  13116. percent = (bottom - finger.y) / height;
  13117. } else {
  13118. percent = (finger.x - left) / width;
  13119. }
  13120.  
  13121. if (axis.indexOf('-reverse') !== -1) {
  13122. percent = 1 - percent;
  13123. }
  13124.  
  13125. var newValue;
  13126. newValue = percentToValue(percent, min, max);
  13127.  
  13128. if (step) {
  13129. newValue = roundValueToStep(newValue, step, min);
  13130. } else {
  13131. var marksValues = marks.map(function (mark) {
  13132. return mark.value;
  13133. });
  13134. var closestIndex = findClosest(marksValues, newValue);
  13135. newValue = marksValues[closestIndex];
  13136. }
  13137.  
  13138. newValue = clamp(newValue, min, max);
  13139. var activeIndex = 0;
  13140.  
  13141. if (range) {
  13142. if (!move) {
  13143. activeIndex = findClosest(values2, newValue);
  13144. } else {
  13145. activeIndex = previousIndex.current;
  13146. }
  13147.  
  13148. var previousValue = newValue;
  13149. newValue = setValueIndex({
  13150. values: values2,
  13151. source: source,
  13152. newValue: newValue,
  13153. index: activeIndex
  13154. }).sort(asc);
  13155. activeIndex = newValue.indexOf(previousValue);
  13156. previousIndex.current = activeIndex;
  13157. }
  13158.  
  13159. return {
  13160. newValue: newValue,
  13161. activeIndex: activeIndex
  13162. };
  13163. };
  13164.  
  13165. var handleTouchMove = useEventCallback(function (event) {
  13166. var finger = trackFinger(event, touchId);
  13167.  
  13168. if (!finger) {
  13169. return;
  13170. }
  13171.  
  13172. var _getFingerNewValue = getFingerNewValue({
  13173. finger: finger,
  13174. move: true,
  13175. values: values,
  13176. source: valueDerived
  13177. }),
  13178. newValue = _getFingerNewValue.newValue,
  13179. activeIndex = _getFingerNewValue.activeIndex;
  13180.  
  13181. focusThumb({
  13182. sliderRef: sliderRef,
  13183. activeIndex: activeIndex,
  13184. setActive: setActive
  13185. });
  13186. setValueState(newValue);
  13187.  
  13188. if (onChange) {
  13189. onChange(event, newValue);
  13190. }
  13191. });
  13192. var handleTouchEnd = useEventCallback(function (event) {
  13193. var finger = trackFinger(event, touchId);
  13194.  
  13195. if (!finger) {
  13196. return;
  13197. }
  13198.  
  13199. var _getFingerNewValue2 = getFingerNewValue({
  13200. finger: finger,
  13201. values: values,
  13202. source: valueDerived
  13203. }),
  13204. newValue = _getFingerNewValue2.newValue;
  13205.  
  13206. setActive(-1);
  13207.  
  13208. if (event.type === 'touchend') {
  13209. setOpen(-1);
  13210. }
  13211.  
  13212. if (onChangeCommitted) {
  13213. onChangeCommitted(event, newValue);
  13214. }
  13215.  
  13216. touchId.current = undefined;
  13217. var doc = ownerDocument(sliderRef.current);
  13218. doc.removeEventListener('mousemove', handleTouchMove);
  13219. doc.removeEventListener('mouseup', handleTouchEnd);
  13220. doc.removeEventListener('touchmove', handleTouchMove);
  13221. doc.removeEventListener('touchend', handleTouchEnd);
  13222. });
  13223. var handleTouchStart = useEventCallback(function (event) {
  13224. // Workaround as Safari has partial support for touchAction: 'none'.
  13225. event.preventDefault();
  13226. var touch = event.changedTouches[0];
  13227.  
  13228. if (touch != null) {
  13229. // A number that uniquely identifies the current finger in the touch session.
  13230. touchId.current = touch.identifier;
  13231. }
  13232.  
  13233. var finger = trackFinger(event, touchId);
  13234.  
  13235. var _getFingerNewValue3 = getFingerNewValue({
  13236. finger: finger,
  13237. values: values,
  13238. source: valueDerived
  13239. }),
  13240. newValue = _getFingerNewValue3.newValue,
  13241. activeIndex = _getFingerNewValue3.activeIndex;
  13242.  
  13243. focusThumb({
  13244. sliderRef: sliderRef,
  13245. activeIndex: activeIndex,
  13246. setActive: setActive
  13247. });
  13248. setValueState(newValue);
  13249.  
  13250. if (onChange) {
  13251. onChange(event, newValue);
  13252. }
  13253.  
  13254. var doc = ownerDocument(sliderRef.current);
  13255. doc.addEventListener('touchmove', handleTouchMove);
  13256. doc.addEventListener('touchend', handleTouchEnd);
  13257. });
  13258. React__namespace.useEffect(function () {
  13259. var slider = sliderRef.current;
  13260. slider.addEventListener('touchstart', handleTouchStart);
  13261. var doc = ownerDocument(slider);
  13262. return function () {
  13263. slider.removeEventListener('touchstart', handleTouchStart);
  13264. doc.removeEventListener('mousemove', handleTouchMove);
  13265. doc.removeEventListener('mouseup', handleTouchEnd);
  13266. doc.removeEventListener('touchmove', handleTouchMove);
  13267. doc.removeEventListener('touchend', handleTouchEnd);
  13268. };
  13269. }, [handleTouchEnd, handleTouchMove, handleTouchStart]);
  13270. var handleMouseDown = useEventCallback(function (event) {
  13271. if (onMouseDown) {
  13272. onMouseDown(event);
  13273. }
  13274.  
  13275. event.preventDefault();
  13276. var finger = trackFinger(event, touchId);
  13277.  
  13278. var _getFingerNewValue4 = getFingerNewValue({
  13279. finger: finger,
  13280. values: values,
  13281. source: valueDerived
  13282. }),
  13283. newValue = _getFingerNewValue4.newValue,
  13284. activeIndex = _getFingerNewValue4.activeIndex;
  13285.  
  13286. focusThumb({
  13287. sliderRef: sliderRef,
  13288. activeIndex: activeIndex,
  13289. setActive: setActive
  13290. });
  13291. setValueState(newValue);
  13292.  
  13293. if (onChange) {
  13294. onChange(event, newValue);
  13295. }
  13296.  
  13297. var doc = ownerDocument(sliderRef.current);
  13298. doc.addEventListener('mousemove', handleTouchMove);
  13299. doc.addEventListener('mouseup', handleTouchEnd);
  13300. });
  13301. var trackOffset = valueToPercent(range ? values[0] : min, min, max);
  13302. var trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
  13303.  
  13304. var trackStyle = _extends$1({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
  13305.  
  13306. return /*#__PURE__*/React__namespace.createElement(Component, _extends$1({
  13307. ref: handleRef,
  13308. className: clsx(classes.root, classes["color".concat(capitalize(color))], className, disabled && classes.disabled, marks.length > 0 && marks.some(function (mark) {
  13309. return mark.label;
  13310. }) && classes.marked, track === false && classes.trackFalse, orientation === 'vertical' && classes.vertical, track === 'inverted' && classes.trackInverted),
  13311. onMouseDown: handleMouseDown
  13312. }, other), /*#__PURE__*/React__namespace.createElement("span", {
  13313. className: classes.rail
  13314. }), /*#__PURE__*/React__namespace.createElement("span", {
  13315. className: classes.track,
  13316. style: trackStyle
  13317. }), /*#__PURE__*/React__namespace.createElement("input", {
  13318. value: values.join(','),
  13319. name: name,
  13320. type: "hidden"
  13321. }), marks.map(function (mark, index) {
  13322. var percent = valueToPercent(mark.value, min, max);
  13323. var style = axisProps[axis].offset(percent);
  13324. var markActive;
  13325.  
  13326. if (track === false) {
  13327. markActive = values.indexOf(mark.value) !== -1;
  13328. } else {
  13329. 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]);
  13330. }
  13331.  
  13332. return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
  13333. key: mark.value
  13334. }, /*#__PURE__*/React__namespace.createElement("span", {
  13335. style: style,
  13336. "data-index": index,
  13337. className: clsx(classes.mark, markActive && classes.markActive)
  13338. }), mark.label != null ? /*#__PURE__*/React__namespace.createElement("span", {
  13339. "aria-hidden": true,
  13340. "data-index": index,
  13341. style: style,
  13342. className: clsx(classes.markLabel, markActive && classes.markLabelActive)
  13343. }, mark.label) : null);
  13344. }), values.map(function (value, index) {
  13345. var percent = valueToPercent(value, min, max);
  13346. var style = axisProps[axis].offset(percent);
  13347. return /*#__PURE__*/React__namespace.createElement(ValueLabelComponent, {
  13348. key: index,
  13349. valueLabelFormat: valueLabelFormat,
  13350. valueLabelDisplay: valueLabelDisplay,
  13351. className: classes.valueLabel,
  13352. value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
  13353. index: index,
  13354. open: open === index || active === index || valueLabelDisplay === 'on',
  13355. disabled: disabled
  13356. }, /*#__PURE__*/React__namespace.createElement(ThumbComponent, {
  13357. className: clsx(classes.thumb, classes["thumbColor".concat(capitalize(color))], active === index && classes.active, disabled && classes.disabled, focusVisible === index && classes.focusVisible),
  13358. tabIndex: disabled ? null : 0,
  13359. role: "slider",
  13360. style: style,
  13361. "data-index": index,
  13362. "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
  13363. "aria-labelledby": ariaLabelledby,
  13364. "aria-orientation": orientation,
  13365. "aria-valuemax": scale(max),
  13366. "aria-valuemin": scale(min),
  13367. "aria-valuenow": scale(value),
  13368. "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
  13369. onKeyDown: handleKeyDown,
  13370. onFocus: handleFocus,
  13371. onBlur: handleBlur,
  13372. onMouseOver: handleMouseOver,
  13373. onMouseLeave: handleMouseLeave
  13374. }));
  13375. }));
  13376. });
  13377. var Slider$1 = withStyles(styles$2, {
  13378. name: 'MuiSlider'
  13379. })(Slider);
  13380.  
  13381. var styles$1 = function styles(theme) {
  13382. return {
  13383. /* Styles applied to the root element. */
  13384. root: {
  13385. display: 'inline-flex',
  13386. width: 34 + 12 * 2,
  13387. height: 14 + 12 * 2,
  13388. overflow: 'hidden',
  13389. padding: 12,
  13390. boxSizing: 'border-box',
  13391. position: 'relative',
  13392. flexShrink: 0,
  13393. zIndex: 0,
  13394. // Reset the stacking context.
  13395. verticalAlign: 'middle',
  13396. // For correct alignment with the text.
  13397. '@media print': {
  13398. colorAdjust: 'exact'
  13399. }
  13400. },
  13401.  
  13402. /* Styles applied to the root element if `edge="start"`. */
  13403. edgeStart: {
  13404. marginLeft: -8
  13405. },
  13406.  
  13407. /* Styles applied to the root element if `edge="end"`. */
  13408. edgeEnd: {
  13409. marginRight: -8
  13410. },
  13411.  
  13412. /* Styles applied to the internal `SwitchBase` component's `root` class. */
  13413. switchBase: {
  13414. position: 'absolute',
  13415. top: 0,
  13416. left: 0,
  13417. zIndex: 1,
  13418. // Render above the focus ripple.
  13419. color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
  13420. transition: theme.transitions.create(['left', 'transform'], {
  13421. duration: theme.transitions.duration.shortest
  13422. }),
  13423. '&$checked': {
  13424. transform: 'translateX(20px)'
  13425. },
  13426. '&$disabled': {
  13427. color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
  13428. },
  13429. '&$checked + $track': {
  13430. opacity: 0.5
  13431. },
  13432. '&$disabled + $track': {
  13433. opacity: theme.palette.type === 'light' ? 0.12 : 0.1
  13434. }
  13435. },
  13436.  
  13437. /* Styles applied to the internal SwitchBase component's root element if `color="primary"`. */
  13438. colorPrimary: {
  13439. '&$checked': {
  13440. color: theme.palette.primary.main,
  13441. '&:hover': {
  13442. backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
  13443. '@media (hover: none)': {
  13444. backgroundColor: 'transparent'
  13445. }
  13446. }
  13447. },
  13448. '&$disabled': {
  13449. color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
  13450. },
  13451. '&$checked + $track': {
  13452. backgroundColor: theme.palette.primary.main
  13453. },
  13454. '&$disabled + $track': {
  13455. backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
  13456. }
  13457. },
  13458.  
  13459. /* Styles applied to the internal SwitchBase component's root element if `color="secondary"`. */
  13460. colorSecondary: {
  13461. '&$checked': {
  13462. color: theme.palette.secondary.main,
  13463. '&:hover': {
  13464. backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
  13465. '@media (hover: none)': {
  13466. backgroundColor: 'transparent'
  13467. }
  13468. }
  13469. },
  13470. '&$disabled': {
  13471. color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
  13472. },
  13473. '&$checked + $track': {
  13474. backgroundColor: theme.palette.secondary.main
  13475. },
  13476. '&$disabled + $track': {
  13477. backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
  13478. }
  13479. },
  13480.  
  13481. /* Styles applied to the root element if `size="small"`. */
  13482. sizeSmall: {
  13483. width: 40,
  13484. height: 24,
  13485. padding: 7,
  13486. '& $thumb': {
  13487. width: 16,
  13488. height: 16
  13489. },
  13490. '& $switchBase': {
  13491. padding: 4,
  13492. '&$checked': {
  13493. transform: 'translateX(16px)'
  13494. }
  13495. }
  13496. },
  13497.  
  13498. /* Pseudo-class applied to the internal `SwitchBase` component's `checked` class. */
  13499. checked: {},
  13500.  
  13501. /* Pseudo-class applied to the internal SwitchBase component's disabled class. */
  13502. disabled: {},
  13503.  
  13504. /* Styles applied to the internal SwitchBase component's input element. */
  13505. input: {
  13506. left: '-100%',
  13507. width: '300%'
  13508. },
  13509.  
  13510. /* Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop. */
  13511. thumb: {
  13512. boxShadow: theme.shadows[1],
  13513. backgroundColor: 'currentColor',
  13514. width: 20,
  13515. height: 20,
  13516. borderRadius: '50%'
  13517. },
  13518.  
  13519. /* Styles applied to the track element. */
  13520. track: {
  13521. height: '100%',
  13522. width: '100%',
  13523. borderRadius: 14 / 2,
  13524. zIndex: -1,
  13525. transition: theme.transitions.create(['opacity', 'background-color'], {
  13526. duration: theme.transitions.duration.shortest
  13527. }),
  13528. backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
  13529. opacity: theme.palette.type === 'light' ? 0.38 : 0.3
  13530. }
  13531. };
  13532. };
  13533. var Switch = /*#__PURE__*/React__namespace.forwardRef(function Switch(props, ref) {
  13534. var classes = props.classes,
  13535. className = props.className,
  13536. _props$color = props.color,
  13537. color = _props$color === void 0 ? 'secondary' : _props$color,
  13538. _props$edge = props.edge,
  13539. edge = _props$edge === void 0 ? false : _props$edge,
  13540. _props$size = props.size,
  13541. size = _props$size === void 0 ? 'medium' : _props$size,
  13542. other = _objectWithoutProperties(props, ["classes", "className", "color", "edge", "size"]);
  13543.  
  13544. var icon = /*#__PURE__*/React__namespace.createElement("span", {
  13545. className: classes.thumb
  13546. });
  13547. return /*#__PURE__*/React__namespace.createElement("span", {
  13548. className: clsx(classes.root, className, {
  13549. 'start': classes.edgeStart,
  13550. 'end': classes.edgeEnd
  13551. }[edge], size === "small" && classes["size".concat(capitalize(size))])
  13552. }, /*#__PURE__*/React__namespace.createElement(SwitchBase$1, _extends$1({
  13553. type: "checkbox",
  13554. icon: icon,
  13555. checkedIcon: icon,
  13556. classes: {
  13557. root: clsx(classes.switchBase, classes["color".concat(capitalize(color))]),
  13558. input: classes.input,
  13559. checked: classes.checked,
  13560. disabled: classes.disabled
  13561. },
  13562. ref: ref
  13563. }, other)), /*#__PURE__*/React__namespace.createElement("span", {
  13564. className: classes.track
  13565. }));
  13566. });
  13567. var Switch$1 = withStyles(styles$1, {
  13568. name: 'MuiSwitch'
  13569. })(Switch);
  13570.  
  13571. function round(value) {
  13572. return Math.round(value * 1e5) / 1e5;
  13573. }
  13574.  
  13575. function arrowGenerator() {
  13576. return {
  13577. '&[x-placement*="bottom"] $arrow': {
  13578. top: 0,
  13579. left: 0,
  13580. marginTop: '-0.71em',
  13581. marginLeft: 4,
  13582. marginRight: 4,
  13583. '&::before': {
  13584. transformOrigin: '0 100%'
  13585. }
  13586. },
  13587. '&[x-placement*="top"] $arrow': {
  13588. bottom: 0,
  13589. left: 0,
  13590. marginBottom: '-0.71em',
  13591. marginLeft: 4,
  13592. marginRight: 4,
  13593. '&::before': {
  13594. transformOrigin: '100% 0'
  13595. }
  13596. },
  13597. '&[x-placement*="right"] $arrow': {
  13598. left: 0,
  13599. marginLeft: '-0.71em',
  13600. height: '1em',
  13601. width: '0.71em',
  13602. marginTop: 4,
  13603. marginBottom: 4,
  13604. '&::before': {
  13605. transformOrigin: '100% 100%'
  13606. }
  13607. },
  13608. '&[x-placement*="left"] $arrow': {
  13609. right: 0,
  13610. marginRight: '-0.71em',
  13611. height: '1em',
  13612. width: '0.71em',
  13613. marginTop: 4,
  13614. marginBottom: 4,
  13615. '&::before': {
  13616. transformOrigin: '0 0'
  13617. }
  13618. }
  13619. };
  13620. }
  13621.  
  13622. var styles = function styles(theme) {
  13623. return {
  13624. /* Styles applied to the Popper component. */
  13625. popper: {
  13626. zIndex: theme.zIndex.tooltip,
  13627. pointerEvents: 'none' // disable jss-rtl plugin
  13628.  
  13629. },
  13630.  
  13631. /* Styles applied to the Popper component if `interactive={true}`. */
  13632. popperInteractive: {
  13633. pointerEvents: 'auto'
  13634. },
  13635.  
  13636. /* Styles applied to the Popper component if `arrow={true}`. */
  13637. popperArrow: arrowGenerator(),
  13638.  
  13639. /* Styles applied to the tooltip (label wrapper) element. */
  13640. tooltip: {
  13641. backgroundColor: fade(theme.palette.grey[700], 0.9),
  13642. borderRadius: theme.shape.borderRadius,
  13643. color: theme.palette.common.white,
  13644. fontFamily: theme.typography.fontFamily,
  13645. padding: '4px 8px',
  13646. fontSize: theme.typography.pxToRem(10),
  13647. lineHeight: "".concat(round(14 / 10), "em"),
  13648. maxWidth: 300,
  13649. wordWrap: 'break-word',
  13650. fontWeight: theme.typography.fontWeightMedium
  13651. },
  13652.  
  13653. /* Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
  13654. tooltipArrow: {
  13655. position: 'relative',
  13656. margin: '0'
  13657. },
  13658.  
  13659. /* Styles applied to the arrow element. */
  13660. arrow: {
  13661. overflow: 'hidden',
  13662. position: 'absolute',
  13663. width: '1em',
  13664. height: '0.71em'
  13665. /* = width / sqrt(2) = (length of the hypotenuse) */
  13666. ,
  13667. boxSizing: 'border-box',
  13668. color: fade(theme.palette.grey[700], 0.9),
  13669. '&::before': {
  13670. content: '""',
  13671. margin: 'auto',
  13672. display: 'block',
  13673. width: '100%',
  13674. height: '100%',
  13675. backgroundColor: 'currentColor',
  13676. transform: 'rotate(45deg)'
  13677. }
  13678. },
  13679.  
  13680. /* Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
  13681. touch: {
  13682. padding: '8px 16px',
  13683. fontSize: theme.typography.pxToRem(14),
  13684. lineHeight: "".concat(round(16 / 14), "em"),
  13685. fontWeight: theme.typography.fontWeightRegular
  13686. },
  13687.  
  13688. /* Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
  13689. tooltipPlacementLeft: _defineProperty$1({
  13690. transformOrigin: 'right center',
  13691. margin: '0 24px '
  13692. }, theme.breakpoints.up('sm'), {
  13693. margin: '0 14px'
  13694. }),
  13695.  
  13696. /* Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
  13697. tooltipPlacementRight: _defineProperty$1({
  13698. transformOrigin: 'left center',
  13699. margin: '0 24px'
  13700. }, theme.breakpoints.up('sm'), {
  13701. margin: '0 14px'
  13702. }),
  13703.  
  13704. /* Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
  13705. tooltipPlacementTop: _defineProperty$1({
  13706. transformOrigin: 'center bottom',
  13707. margin: '24px 0'
  13708. }, theme.breakpoints.up('sm'), {
  13709. margin: '14px 0'
  13710. }),
  13711.  
  13712. /* Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
  13713. tooltipPlacementBottom: _defineProperty$1({
  13714. transformOrigin: 'center top',
  13715. margin: '24px 0'
  13716. }, theme.breakpoints.up('sm'), {
  13717. margin: '14px 0'
  13718. })
  13719. };
  13720. };
  13721. var hystersisOpen = false;
  13722. var hystersisTimer = null;
  13723. var Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(props, ref) {
  13724. var _props$arrow = props.arrow,
  13725. arrow = _props$arrow === void 0 ? false : _props$arrow,
  13726. children = props.children,
  13727. classes = props.classes,
  13728. _props$disableFocusLi = props.disableFocusListener,
  13729. disableFocusListener = _props$disableFocusLi === void 0 ? false : _props$disableFocusLi,
  13730. _props$disableHoverLi = props.disableHoverListener,
  13731. disableHoverListener = _props$disableHoverLi === void 0 ? false : _props$disableHoverLi,
  13732. _props$disableTouchLi = props.disableTouchListener,
  13733. disableTouchListener = _props$disableTouchLi === void 0 ? false : _props$disableTouchLi,
  13734. _props$enterDelay = props.enterDelay,
  13735. enterDelay = _props$enterDelay === void 0 ? 100 : _props$enterDelay,
  13736. _props$enterNextDelay = props.enterNextDelay,
  13737. enterNextDelay = _props$enterNextDelay === void 0 ? 0 : _props$enterNextDelay,
  13738. _props$enterTouchDela = props.enterTouchDelay,
  13739. enterTouchDelay = _props$enterTouchDela === void 0 ? 700 : _props$enterTouchDela,
  13740. idProp = props.id,
  13741. _props$interactive = props.interactive,
  13742. interactive = _props$interactive === void 0 ? false : _props$interactive,
  13743. _props$leaveDelay = props.leaveDelay,
  13744. leaveDelay = _props$leaveDelay === void 0 ? 0 : _props$leaveDelay,
  13745. _props$leaveTouchDela = props.leaveTouchDelay,
  13746. leaveTouchDelay = _props$leaveTouchDela === void 0 ? 1500 : _props$leaveTouchDela,
  13747. onClose = props.onClose,
  13748. onOpen = props.onOpen,
  13749. openProp = props.open,
  13750. _props$placement = props.placement,
  13751. placement = _props$placement === void 0 ? 'bottom' : _props$placement,
  13752. _props$PopperComponen = props.PopperComponent,
  13753. PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
  13754. PopperProps = props.PopperProps,
  13755. title = props.title,
  13756. _props$TransitionComp = props.TransitionComponent,
  13757. TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
  13758. TransitionProps = props.TransitionProps,
  13759. 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"]);
  13760.  
  13761. var theme = useTheme();
  13762.  
  13763. var _React$useState = React__namespace.useState(),
  13764. childNode = _React$useState[0],
  13765. setChildNode = _React$useState[1];
  13766.  
  13767. var _React$useState2 = React__namespace.useState(null),
  13768. arrowRef = _React$useState2[0],
  13769. setArrowRef = _React$useState2[1];
  13770.  
  13771. var ignoreNonTouchEvents = React__namespace.useRef(false);
  13772. var closeTimer = React__namespace.useRef();
  13773. var enterTimer = React__namespace.useRef();
  13774. var leaveTimer = React__namespace.useRef();
  13775. var touchTimer = React__namespace.useRef();
  13776.  
  13777. var _useControlled = useControlled({
  13778. controlled: openProp,
  13779. default: false,
  13780. name: 'Tooltip',
  13781. state: 'open'
  13782. }),
  13783. _useControlled2 = _slicedToArray(_useControlled, 2),
  13784. openState = _useControlled2[0],
  13785. setOpenState = _useControlled2[1];
  13786.  
  13787. var open = openState;
  13788.  
  13789. var id = useId(idProp);
  13790. React__namespace.useEffect(function () {
  13791. return function () {
  13792. clearTimeout(closeTimer.current);
  13793. clearTimeout(enterTimer.current);
  13794. clearTimeout(leaveTimer.current);
  13795. clearTimeout(touchTimer.current);
  13796. };
  13797. }, []);
  13798.  
  13799. var handleOpen = function handleOpen(event) {
  13800. clearTimeout(hystersisTimer);
  13801. hystersisOpen = true; // The mouseover event will trigger for every nested element in the tooltip.
  13802. // We can skip rerendering when the tooltip is already open.
  13803. // We are using the mouseover event instead of the mouseenter event to fix a hide/show issue.
  13804.  
  13805. setOpenState(true);
  13806.  
  13807. if (onOpen) {
  13808. onOpen(event);
  13809. }
  13810. };
  13811.  
  13812. var handleEnter = function handleEnter() {
  13813. var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  13814. return function (event) {
  13815. var childrenProps = children.props;
  13816.  
  13817. if (event.type === 'mouseover' && childrenProps.onMouseOver && forward) {
  13818. childrenProps.onMouseOver(event);
  13819. }
  13820.  
  13821. if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
  13822. return;
  13823. } // Remove the title ahead of time.
  13824. // We don't want to wait for the next render commit.
  13825. // We would risk displaying two tooltips at the same time (native + this one).
  13826.  
  13827.  
  13828. if (childNode) {
  13829. childNode.removeAttribute('title');
  13830. }
  13831.  
  13832. clearTimeout(enterTimer.current);
  13833. clearTimeout(leaveTimer.current);
  13834.  
  13835. if (enterDelay || hystersisOpen && enterNextDelay) {
  13836. event.persist();
  13837. enterTimer.current = setTimeout(function () {
  13838. handleOpen(event);
  13839. }, hystersisOpen ? enterNextDelay : enterDelay);
  13840. } else {
  13841. handleOpen(event);
  13842. }
  13843. };
  13844. };
  13845.  
  13846. var _useIsFocusVisible = useIsFocusVisible(),
  13847. isFocusVisible = _useIsFocusVisible.isFocusVisible,
  13848. onBlurVisible = _useIsFocusVisible.onBlurVisible,
  13849. focusVisibleRef = _useIsFocusVisible.ref;
  13850.  
  13851. var _React$useState3 = React__namespace.useState(false),
  13852. childIsFocusVisible = _React$useState3[0],
  13853. setChildIsFocusVisible = _React$useState3[1];
  13854.  
  13855. var handleBlur = function handleBlur() {
  13856. if (childIsFocusVisible) {
  13857. setChildIsFocusVisible(false);
  13858. onBlurVisible();
  13859. }
  13860. };
  13861.  
  13862. var handleFocus = function handleFocus() {
  13863. var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  13864. return function (event) {
  13865. // Workaround for https://github.com/facebook/react/issues/7769
  13866. // The autoFocus of React might trigger the event before the componentDidMount.
  13867. // We need to account for this eventuality.
  13868. if (!childNode) {
  13869. setChildNode(event.currentTarget);
  13870. }
  13871.  
  13872. if (isFocusVisible(event)) {
  13873. setChildIsFocusVisible(true);
  13874. handleEnter()(event);
  13875. }
  13876.  
  13877. var childrenProps = children.props;
  13878.  
  13879. if (childrenProps.onFocus && forward) {
  13880. childrenProps.onFocus(event);
  13881. }
  13882. };
  13883. };
  13884.  
  13885. var handleClose = function handleClose(event) {
  13886. clearTimeout(hystersisTimer);
  13887. hystersisTimer = setTimeout(function () {
  13888. hystersisOpen = false;
  13889. }, 800 + leaveDelay);
  13890. setOpenState(false);
  13891.  
  13892. if (onClose) {
  13893. onClose(event);
  13894. }
  13895.  
  13896. clearTimeout(closeTimer.current);
  13897. closeTimer.current = setTimeout(function () {
  13898. ignoreNonTouchEvents.current = false;
  13899. }, theme.transitions.duration.shortest);
  13900. };
  13901.  
  13902. var handleLeave = function handleLeave() {
  13903. var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  13904. return function (event) {
  13905. var childrenProps = children.props;
  13906.  
  13907. if (event.type === 'blur') {
  13908. if (childrenProps.onBlur && forward) {
  13909. childrenProps.onBlur(event);
  13910. }
  13911.  
  13912. handleBlur();
  13913. }
  13914.  
  13915. if (event.type === 'mouseleave' && childrenProps.onMouseLeave && event.currentTarget === childNode) {
  13916. childrenProps.onMouseLeave(event);
  13917. }
  13918.  
  13919. clearTimeout(enterTimer.current);
  13920. clearTimeout(leaveTimer.current);
  13921. event.persist();
  13922. leaveTimer.current = setTimeout(function () {
  13923. handleClose(event);
  13924. }, leaveDelay);
  13925. };
  13926. };
  13927.  
  13928. var detectTouchStart = function detectTouchStart(event) {
  13929. ignoreNonTouchEvents.current = true;
  13930. var childrenProps = children.props;
  13931.  
  13932. if (childrenProps.onTouchStart) {
  13933. childrenProps.onTouchStart(event);
  13934. }
  13935. };
  13936.  
  13937. var handleTouchStart = function handleTouchStart(event) {
  13938. detectTouchStart(event);
  13939. clearTimeout(leaveTimer.current);
  13940. clearTimeout(closeTimer.current);
  13941. clearTimeout(touchTimer.current);
  13942. event.persist();
  13943. touchTimer.current = setTimeout(function () {
  13944. handleEnter()(event);
  13945. }, enterTouchDelay);
  13946. };
  13947.  
  13948. var handleTouchEnd = function handleTouchEnd(event) {
  13949. if (children.props.onTouchEnd) {
  13950. children.props.onTouchEnd(event);
  13951. }
  13952.  
  13953. clearTimeout(touchTimer.current);
  13954. clearTimeout(leaveTimer.current);
  13955. event.persist();
  13956. leaveTimer.current = setTimeout(function () {
  13957. handleClose(event);
  13958. }, leaveTouchDelay);
  13959. };
  13960.  
  13961. var handleUseRef = useForkRef(setChildNode, ref);
  13962. var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef); // can be removed once we drop support for non ref forwarding class components
  13963.  
  13964. var handleOwnRef = React__namespace.useCallback(function (instance) {
  13965. // #StrictMode ready
  13966. setRef(handleFocusRef, ReactDOM__namespace.findDOMNode(instance));
  13967. }, [handleFocusRef]);
  13968. var handleRef = useForkRef(children.ref, handleOwnRef); // There is no point in displaying an empty tooltip.
  13969.  
  13970. if (title === '') {
  13971. open = false;
  13972. } // For accessibility and SEO concerns, we render the title to the DOM node when
  13973. // the tooltip is hidden. However, we have made a tradeoff when
  13974. // `disableHoverListener` is set. This title logic is disabled.
  13975. // It's allowing us to keep the implementation size minimal.
  13976. // We are open to change the tradeoff.
  13977.  
  13978.  
  13979. var shouldShowNativeTitle = !open && !disableHoverListener;
  13980.  
  13981. var childrenProps = _extends$1({
  13982. 'aria-describedby': open ? id : null,
  13983. title: shouldShowNativeTitle && typeof title === 'string' ? title : null
  13984. }, other, children.props, {
  13985. className: clsx(other.className, children.props.className),
  13986. onTouchStart: detectTouchStart,
  13987. ref: handleRef
  13988. });
  13989.  
  13990. var interactiveWrapperListeners = {};
  13991.  
  13992. if (!disableTouchListener) {
  13993. childrenProps.onTouchStart = handleTouchStart;
  13994. childrenProps.onTouchEnd = handleTouchEnd;
  13995. }
  13996.  
  13997. if (!disableHoverListener) {
  13998. childrenProps.onMouseOver = handleEnter();
  13999. childrenProps.onMouseLeave = handleLeave();
  14000.  
  14001. if (interactive) {
  14002. interactiveWrapperListeners.onMouseOver = handleEnter(false);
  14003. interactiveWrapperListeners.onMouseLeave = handleLeave(false);
  14004. }
  14005. }
  14006.  
  14007. if (!disableFocusListener) {
  14008. childrenProps.onFocus = handleFocus();
  14009. childrenProps.onBlur = handleLeave();
  14010.  
  14011. if (interactive) {
  14012. interactiveWrapperListeners.onFocus = handleFocus(false);
  14013. interactiveWrapperListeners.onBlur = handleLeave(false);
  14014. }
  14015. }
  14016.  
  14017. var mergedPopperProps = React__namespace.useMemo(function () {
  14018. return deepmerge({
  14019. popperOptions: {
  14020. modifiers: {
  14021. arrow: {
  14022. enabled: Boolean(arrowRef),
  14023. element: arrowRef
  14024. }
  14025. }
  14026. }
  14027. }, PopperProps);
  14028. }, [arrowRef, PopperProps]);
  14029. return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.cloneElement(children, childrenProps), /*#__PURE__*/React__namespace.createElement(PopperComponent, _extends$1({
  14030. className: clsx(classes.popper, interactive && classes.popperInteractive, arrow && classes.popperArrow),
  14031. placement: placement,
  14032. anchorEl: childNode,
  14033. open: childNode ? open : false,
  14034. id: childrenProps['aria-describedby'],
  14035. transition: true
  14036. }, interactiveWrapperListeners, mergedPopperProps), function (_ref) {
  14037. var placementInner = _ref.placement,
  14038. TransitionPropsInner = _ref.TransitionProps;
  14039. return /*#__PURE__*/React__namespace.createElement(TransitionComponent, _extends$1({
  14040. timeout: theme.transitions.duration.shorter
  14041. }, TransitionPropsInner, TransitionProps), /*#__PURE__*/React__namespace.createElement("div", {
  14042. className: clsx(classes.tooltip, classes["tooltipPlacement".concat(capitalize(placementInner.split('-')[0]))], ignoreNonTouchEvents.current && classes.touch, arrow && classes.tooltipArrow)
  14043. }, title, arrow ? /*#__PURE__*/React__namespace.createElement("span", {
  14044. className: classes.arrow,
  14045. ref: setArrowRef
  14046. }) : null));
  14047. }));
  14048. });
  14049. var Tooltip$1 = withStyles(styles, {
  14050. name: 'MuiTooltip',
  14051. flip: false
  14052. })(Tooltip);
  14053.  
  14054. /**
  14055. *
  14056. * @export
  14057. * @param {HTMLElement} panel
  14058. */
  14059. function getPanelSize(panel) {
  14060. const clone = panel.cloneNode(true);
  14061. clone.style.opacity = 0;
  14062. clone.style.position = 'absolute';
  14063. clone.removeAttribute('hidden');
  14064. panel.parentNode.appendChild(clone);
  14065. const width = clone.scrollWidth;
  14066. const height = clone.scrollHeight;
  14067. clone.remove();
  14068. return {
  14069. width,
  14070. height
  14071. };
  14072. }
  14073. function getQueryString(name) {
  14074. var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  14075. var r = location.search.substr(1).match(reg);
  14076. if (r != null) return unescape(decodeURI(r[2]));
  14077. return null;
  14078. }
  14079.  
  14080. var ArrowForwardIos = {};
  14081.  
  14082. var interopRequireDefault = {exports: {}};
  14083.  
  14084. (function (module) {
  14085. function _interopRequireDefault(obj) {
  14086. return obj && obj.__esModule ? obj : {
  14087. "default": obj
  14088. };
  14089. }
  14090.  
  14091. module.exports = _interopRequireDefault;
  14092. module.exports["default"] = module.exports, module.exports.__esModule = true;
  14093. }(interopRequireDefault));
  14094.  
  14095. var interopRequireWildcard = {exports: {}};
  14096.  
  14097. var _typeof = {exports: {}};
  14098.  
  14099. (function (module) {
  14100. function _typeof(obj) {
  14101. "@babel/helpers - typeof";
  14102.  
  14103. if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
  14104. module.exports = _typeof = function _typeof(obj) {
  14105. return typeof obj;
  14106. };
  14107.  
  14108. module.exports["default"] = module.exports, module.exports.__esModule = true;
  14109. } else {
  14110. module.exports = _typeof = function _typeof(obj) {
  14111. return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
  14112. };
  14113.  
  14114. module.exports["default"] = module.exports, module.exports.__esModule = true;
  14115. }
  14116.  
  14117. return _typeof(obj);
  14118. }
  14119.  
  14120. module.exports = _typeof;
  14121. module.exports["default"] = module.exports, module.exports.__esModule = true;
  14122. }(_typeof));
  14123.  
  14124. (function (module) {
  14125. var _typeof$1 = _typeof.exports["default"];
  14126.  
  14127. function _getRequireWildcardCache(nodeInterop) {
  14128. if (typeof WeakMap !== "function") return null;
  14129. var cacheBabelInterop = new WeakMap();
  14130. var cacheNodeInterop = new WeakMap();
  14131. return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
  14132. return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
  14133. })(nodeInterop);
  14134. }
  14135.  
  14136. function _interopRequireWildcard(obj, nodeInterop) {
  14137. if (!nodeInterop && obj && obj.__esModule) {
  14138. return obj;
  14139. }
  14140.  
  14141. if (obj === null || _typeof$1(obj) !== "object" && typeof obj !== "function") {
  14142. return {
  14143. "default": obj
  14144. };
  14145. }
  14146.  
  14147. var cache = _getRequireWildcardCache(nodeInterop);
  14148.  
  14149. if (cache && cache.has(obj)) {
  14150. return cache.get(obj);
  14151. }
  14152.  
  14153. var newObj = {};
  14154. var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
  14155.  
  14156. for (var key in obj) {
  14157. if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
  14158. var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
  14159.  
  14160. if (desc && (desc.get || desc.set)) {
  14161. Object.defineProperty(newObj, key, desc);
  14162. } else {
  14163. newObj[key] = obj[key];
  14164. }
  14165. }
  14166. }
  14167.  
  14168. newObj["default"] = obj;
  14169.  
  14170. if (cache) {
  14171. cache.set(obj, newObj);
  14172. }
  14173.  
  14174. return newObj;
  14175. }
  14176.  
  14177. module.exports = _interopRequireWildcard;
  14178. module.exports["default"] = module.exports, module.exports.__esModule = true;
  14179. }(interopRequireWildcard));
  14180.  
  14181. var createSvgIcon = {};
  14182.  
  14183. var require$$0 = /*@__PURE__*/getAugmentedNamespace(utils);
  14184.  
  14185. (function (exports) {
  14186.  
  14187. Object.defineProperty(exports, "__esModule", {
  14188. value: true
  14189. });
  14190. Object.defineProperty(exports, "default", {
  14191. enumerable: true,
  14192. get: function get() {
  14193. return _utils.createSvgIcon;
  14194. }
  14195. });
  14196.  
  14197. var _utils = require$$0;
  14198. }(createSvgIcon));
  14199.  
  14200. var _interopRequireDefault$2 = interopRequireDefault.exports;
  14201.  
  14202. var _interopRequireWildcard$2 = interopRequireWildcard.exports;
  14203.  
  14204. Object.defineProperty(ArrowForwardIos, "__esModule", {
  14205. value: true
  14206. });
  14207. var default_1$2 = ArrowForwardIos.default = void 0;
  14208.  
  14209. var React$2 = _interopRequireWildcard$2(React__default['default']);
  14210.  
  14211. var _createSvgIcon$2 = _interopRequireDefault$2(createSvgIcon);
  14212.  
  14213. var _default$2 = (0, _createSvgIcon$2.default)( /*#__PURE__*/React$2.createElement("path", {
  14214. d: "M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"
  14215. }), 'ArrowForwardIos');
  14216.  
  14217. default_1$2 = ArrowForwardIos.default = _default$2;
  14218.  
  14219. function _defineProperty(obj, key, value) {
  14220. if (key in obj) {
  14221. Object.defineProperty(obj, key, {
  14222. value: value,
  14223. enumerable: true,
  14224. configurable: true,
  14225. writable: true
  14226. });
  14227. } else {
  14228. obj[key] = value;
  14229. }
  14230.  
  14231. return obj;
  14232. }
  14233.  
  14234. let sendDanmakuLock = false;
  14235. let playing = false;
  14236. let prevID = [];
  14237. /** @type {Danmaku} */
  14238.  
  14239. let core;
  14240. /**
  14241. * @type {MutationObserver}
  14242. */
  14243.  
  14244. let videoObserver;
  14245. /**
  14246. * @type {MutationObserver}
  14247. */
  14248.  
  14249. let bodyObserver;
  14250.  
  14251. class DanmakuOptions {
  14252. constructor() {
  14253. _defineProperty(this, "use", true);
  14254.  
  14255. _defineProperty(this, "opacity", 0.7);
  14256.  
  14257. _defineProperty(this, "showSuperChat", false);
  14258.  
  14259. _defineProperty(this, "showStickers", true);
  14260.  
  14261. _defineProperty(this, "scale", 0.5);
  14262.  
  14263. _defineProperty(this, "fontSize", 24);
  14264.  
  14265. _defineProperty(this, "filterList", []);
  14266.  
  14267. _defineProperty(this, "filterUse", false);
  14268.  
  14269. mobx.makeAutoObservable(this);
  14270. Object.assign(this, {
  14271. use: true,
  14272. showStickers: true,
  14273. showSuperChat: false,
  14274. scale: 1,
  14275. opacity: 0.7,
  14276. filterList: [],
  14277. filterUse: false,
  14278. fontSize: 24
  14279. }, JSON.parse(localStorage.getItem('ytb-danmaku-config')));
  14280. }
  14281. /**
  14282. * @param {boolean} use
  14283. */
  14284.  
  14285.  
  14286. toggleDanmaku(use) {
  14287. config.use = use;
  14288.  
  14289. if (use) {
  14290. playing = true;
  14291. core.show();
  14292. rAFDanmaku();
  14293. } else {
  14294. playing = false;
  14295. core.hide();
  14296. }
  14297. }
  14298. /**
  14299. * @param {number} scale
  14300. */
  14301.  
  14302.  
  14303. changeDanmakuSpeed(scale) {
  14304. this.scale = scale;
  14305. core.speed = 144 * scale;
  14306. }
  14307. /**
  14308. * @param {number} opacity
  14309. */
  14310.  
  14311.  
  14312. changeDanmakuOpacity(opacity) {
  14313. this.opacity = opacity;
  14314. core.opacity = opacity;
  14315. }
  14316. /**
  14317. * @param {number} fontSize
  14318. */
  14319.  
  14320.  
  14321. changeDanmakuFontSize(fontSize) {
  14322. var _document$querySelect;
  14323.  
  14324. this.fontSize = fontSize;
  14325. (_document$querySelect = document.querySelector('.danmaku-stage')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.style.setProperty('--danmaku-font-size', `${fontSize}px`);
  14326. }
  14327. /**
  14328. * @param {boolean} showStickers
  14329. */
  14330.  
  14331.  
  14332. toggleShowSticker(showStickers) {
  14333. this.showStickers = showStickers;
  14334. }
  14335. /**
  14336. * @param {boolean} showSuperChat
  14337. */
  14338.  
  14339.  
  14340. toggleShowSuperChat(showSuperChat) {
  14341. this.showSuperChat = showSuperChat;
  14342. }
  14343. /**
  14344. * @param {string} content
  14345. */
  14346.  
  14347.  
  14348. addFilter(content) {
  14349. if (content.trim().length === 0) return;
  14350. config.filterList.push({
  14351. content,
  14352. isuse: true,
  14353. id: Math.random().toString(16).slice(2)
  14354. });
  14355. }
  14356.  
  14357. changeFilterUse(id) {
  14358. const target = config.filterList.find(o => o.id === id);
  14359. target.isuse = !target.isuse;
  14360. }
  14361.  
  14362. deleteFilter(id) {
  14363. config.filterList = config.filterList.filter(o => o.id !== id);
  14364. }
  14365.  
  14366. toggleFilterUse(bool) {
  14367. config.filterUse = bool;
  14368. }
  14369.  
  14370. }
  14371.  
  14372. const config = new DanmakuOptions();
  14373. mobx.autorun(() => {
  14374. localStorage.setItem('ytb-danmaku-config', JSON.stringify(config));
  14375. });
  14376.  
  14377. function init(cb) {
  14378.  
  14379. let prevVID;
  14380. let inited = false;
  14381. if (bodyObserver) bodyObserver.disconnect();
  14382. bodyObserver = new MutationObserver(() => {
  14383. if (location.pathname === '/watch') {
  14384. const VID = getQueryString('v');
  14385.  
  14386. if (prevVID !== VID) {
  14387. prevVID = VID;
  14388. inited = true;
  14389. inject(cb);
  14390. } else {
  14391. if (!inited) {
  14392. inited = true;
  14393. inject(cb);
  14394. }
  14395. }
  14396. } else {
  14397. inited = false;
  14398. prevVID = null;
  14399. playing = false;
  14400. }
  14401. });
  14402. bodyObserver.observe(document.body, {
  14403. childList: true,
  14404. subtree: true
  14405. });
  14406. }
  14407.  
  14408. function inject(cb) {
  14409. try {
  14410. var _core;
  14411.  
  14412. console.trace('ytb-danmaku-inited');
  14413. const player = document.getElementById('movie_player');
  14414. if (!player) throw new Error('not find player');
  14415. document.querySelector('div.ytp-left-controls').setAttribute('style', 'overflow: unset;');
  14416. (_core = core) === null || _core === void 0 ? void 0 : _core.destroy();
  14417. core = new Danmaku__default['default']({
  14418. container: player
  14419. });
  14420. document.querySelector('#movie_player').prepend(core._.stage);
  14421. config.changeDanmakuSpeed(config.scale);
  14422. config.changeDanmakuOpacity(config.opacity);
  14423. config.changeDanmakuFontSize(config.fontSize);
  14424. buildControls();
  14425. subEvent();
  14426. config.toggleDanmaku(config.use);
  14427. cb && cb();
  14428. } catch (e) {
  14429. console.error(e);
  14430. setTimeout(() => {
  14431. inject(cb);
  14432. }, 3000);
  14433. }
  14434. }
  14435.  
  14436. function getDanmaku() {
  14437. const iframe = document.querySelector('iframe#chatframe');
  14438.  
  14439. if (iframe) {
  14440. /**
  14441. * @type {Document}
  14442. */
  14443. const idoc = iframe.contentDocument;
  14444. 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'));
  14445. const lastMessageNodes = messagesNode.slice(-10);
  14446. lastMessageNodes.forEach(lastMessageNode => {
  14447. const nextID = lastMessageNode.id;
  14448. if (!playing || prevID.includes(nextID)) return;
  14449. prevID = [...prevID, nextID].slice(-20);
  14450.  
  14451. if (config.filterUse) {
  14452. const filterList = config.filterList.filter(o => o.isuse);
  14453. const messageText = lastMessageNode.querySelector('#message').innerText || '';
  14454. if (filterList.some(o => messageText.includes(o.content))) return;
  14455. }
  14456.  
  14457. const message = config.showStickers ? lastMessageNode.querySelector('#message').innerHTML : lastMessageNode.querySelector('#message').innerText;
  14458. const isPaidMessage = lastMessageNode.tagName.toLowerCase() === 'yt-live-chat-paid-message-renderer';
  14459. const color = isPaidMessage ? getComputedStyle(lastMessageNode).getPropertyValue('--yt-live-chat-paid-message-primary-color') : 'white';
  14460. core.emit({
  14461. mode: 'rtl',
  14462. style: {
  14463. color
  14464. },
  14465. ...(config.showStickers ? {
  14466. render: () => {
  14467. const div = document.createElement('div');
  14468. div.innerHTML = message;
  14469. div.style.color = color;
  14470. return div;
  14471. }
  14472. } : {
  14473. text: message
  14474. })
  14475. });
  14476. });
  14477. }
  14478. }
  14479.  
  14480. function rAFDanmaku() {
  14481. if (playing) requestAnimationFrame(rAFDanmaku);
  14482. if (sendDanmakuLock) return;
  14483. sendDanmakuLock = true;
  14484. getDanmaku();
  14485. sendDanmakuLock = false;
  14486. }
  14487.  
  14488. function buildControls() {
  14489. if (document.getElementById('ytb-danmaku-config')) return;
  14490. const div = document.createElement('div');
  14491. div.style.width = 'auto';
  14492. div.id = 'ytb-danmaku-config';
  14493. document.querySelector('.ytp-left-controls').append(div);
  14494. }
  14495.  
  14496. function subEvent() {
  14497. const video = document.querySelector('video');
  14498. video.addEventListener('pause', () => {
  14499. if (!config.use) return;
  14500. playing = false;
  14501. core.hide();
  14502. });
  14503. video.addEventListener('play', () => {
  14504. if (!config.use) return;
  14505. playing = true;
  14506. core.show();
  14507. rAFDanmaku();
  14508. });
  14509. window.addEventListener('resize', () => {
  14510. core.resize();
  14511. });
  14512. if (videoObserver) videoObserver.disconnect();
  14513. videoObserver = new MutationObserver(() => {
  14514. setTimeout(() => {
  14515. core.resize();
  14516. }, 500);
  14517. });
  14518. videoObserver.observe(video, {
  14519. attributes: true
  14520. });
  14521. }
  14522.  
  14523. const useStyles$1 = makeStyles(theme => createStyles({
  14524. sliderRoot: {
  14525. display: 'flex',
  14526. alignItems: 'center'
  14527. },
  14528. slider: {
  14529. margin: theme.spacing(0, 1, 0, 2),
  14530. flex: 1
  14531. },
  14532. listButton: {
  14533. '&:hover': {
  14534. backgroundColor: 'rgba(255,255,255,.1)'
  14535. }
  14536. }
  14537. }));
  14538.  
  14539. const BaseConfig = ({
  14540. switchPanel
  14541. }) => {
  14542. const classes = useStyles$1();
  14543.  
  14544. const handleUse = () => {
  14545. config.toggleDanmaku(!config.use);
  14546. };
  14547.  
  14548. const handleShowSticker = () => {
  14549. config.toggleShowSticker(!config.showStickers);
  14550. };
  14551.  
  14552. const handleShowSuperChat = () => {
  14553. config.toggleShowSuperChat(!config.showSuperChat);
  14554. };
  14555.  
  14556. return /*#__PURE__*/React__default['default'].createElement(List$1, {
  14557. id: "k-base"
  14558. }, /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
  14559. button: true,
  14560. className: classes.listButton,
  14561. onClick: handleUse
  14562. }, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
  14563. primary: "\u5F39\u5E55\u5F00\u5173",
  14564. primaryTypographyProps: {
  14565. className: 'ytp-menuitem-label',
  14566. style: {
  14567. fontWeight: 500
  14568. }
  14569. }
  14570. }), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(Switch$1, {
  14571. checked: config.use,
  14572. onClick: handleUse
  14573. }))), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
  14574. button: true,
  14575. className: classes.listButton,
  14576. onClick: handleShowSticker
  14577. }, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
  14578. primary: "\u663E\u793A\u8D34\u7EB8",
  14579. primaryTypographyProps: {
  14580. className: 'ytp-menuitem-label',
  14581. style: {
  14582. fontWeight: 500
  14583. }
  14584. }
  14585. }), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(Switch$1, {
  14586. checked: config.showStickers,
  14587. onClick: handleShowSticker
  14588. }))), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
  14589. button: true,
  14590. className: classes.listButton,
  14591. onClick: handleShowSuperChat
  14592. }, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
  14593. primary: "\u663E\u793ASuper Chat",
  14594. primaryTypographyProps: {
  14595. className: 'ytp-menuitem-label',
  14596. style: {
  14597. fontWeight: 500
  14598. }
  14599. }
  14600. }), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(Switch$1, {
  14601. checked: config.showSuperChat,
  14602. onClick: handleShowSuperChat
  14603. }))), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
  14604. className: classes.listButton
  14605. }, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
  14606. primary: /*#__PURE__*/React__default['default'].createElement("div", {
  14607. className: classes.sliderRoot
  14608. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14609. className: "ytp-menuitem-label"
  14610. }, "\u5B57\u4F53\u5927\u5C0F"), /*#__PURE__*/React__default['default'].createElement(Slider$1, {
  14611. color: "secondary",
  14612. max: 40,
  14613. step: 1,
  14614. min: 12,
  14615. value: config.fontSize,
  14616. valueLabelDisplay: "auto",
  14617. className: classes.slider,
  14618. onChange: (e, v) => {
  14619. config.changeDanmakuFontSize(v);
  14620. }
  14621. }))
  14622. })), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
  14623. className: classes.listButton
  14624. }, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
  14625. primary: /*#__PURE__*/React__default['default'].createElement("div", {
  14626. className: classes.sliderRoot
  14627. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14628. className: "ytp-menuitem-label"
  14629. }, "\u5F39\u5E55\u901F\u5EA6"), /*#__PURE__*/React__default['default'].createElement(Slider$1, {
  14630. color: "secondary",
  14631. max: 2,
  14632. step: 0.1,
  14633. min: 0.1,
  14634. value: config.scale,
  14635. valueLabelDisplay: "auto",
  14636. className: classes.slider,
  14637. onChange: (e, v) => {
  14638. config.changeDanmakuSpeed(v);
  14639. }
  14640. }))
  14641. })), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
  14642. className: classes.listButton
  14643. }, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
  14644. primary: /*#__PURE__*/React__default['default'].createElement("div", {
  14645. className: classes.sliderRoot
  14646. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14647. className: "ytp-menuitem-label"
  14648. }, "\u4E0D\u900F\u660E\u5EA6"), /*#__PURE__*/React__default['default'].createElement(Slider$1, {
  14649. color: "secondary",
  14650. max: 1,
  14651. step: 0.1,
  14652. min: 0,
  14653. value: config.opacity,
  14654. valueLabelDisplay: "auto",
  14655. className: classes.slider,
  14656. onChange: (e, v) => {
  14657. config.changeDanmakuOpacity(v);
  14658. }
  14659. }))
  14660. })), /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
  14661. className: classes.listButton,
  14662. button: true,
  14663. onClick: () => switchPanel('filter')
  14664. }, /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
  14665. primary: "\u5F39\u5E55\u5C4F\u853D"
  14666. }), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(default_1$2, null))));
  14667. };
  14668.  
  14669. var BaseConfig$1 = mobxReact.observer(BaseConfig);
  14670.  
  14671. var ArrowBackIos = {};
  14672.  
  14673. var _interopRequireDefault$1 = interopRequireDefault.exports;
  14674.  
  14675. var _interopRequireWildcard$1 = interopRequireWildcard.exports;
  14676.  
  14677. Object.defineProperty(ArrowBackIos, "__esModule", {
  14678. value: true
  14679. });
  14680. var default_1$1 = ArrowBackIos.default = void 0;
  14681.  
  14682. var React$1 = _interopRequireWildcard$1(React__default['default']);
  14683.  
  14684. var _createSvgIcon$1 = _interopRequireDefault$1(createSvgIcon);
  14685.  
  14686. var _default$1 = (0, _createSvgIcon$1.default)( /*#__PURE__*/React$1.createElement("path", {
  14687. d: "M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"
  14688. }), 'ArrowBackIos');
  14689.  
  14690. default_1$1 = ArrowBackIos.default = _default$1;
  14691.  
  14692. var Delete = {};
  14693.  
  14694. var _interopRequireDefault = interopRequireDefault.exports;
  14695.  
  14696. var _interopRequireWildcard = interopRequireWildcard.exports;
  14697.  
  14698. Object.defineProperty(Delete, "__esModule", {
  14699. value: true
  14700. });
  14701. var default_1 = Delete.default = void 0;
  14702.  
  14703. var React = _interopRequireWildcard(React__default['default']);
  14704.  
  14705. var _createSvgIcon = _interopRequireDefault(createSvgIcon);
  14706.  
  14707. var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
  14708. d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
  14709. }), 'Delete');
  14710.  
  14711. default_1 = Delete.default = _default;
  14712.  
  14713. const useFilterStyles = makeStyles(theme => createStyles({
  14714. root: {
  14715. width: '100%',
  14716. display: 'flex',
  14717. flexDirection: 'column',
  14718. height: 350
  14719. },
  14720. filterRoot: {
  14721. flex: 1,
  14722. overflow: 'hidden',
  14723. textAlign: 'left',
  14724. padding: theme.spacing(1, 2),
  14725. boxSizing: 'border-box',
  14726. display: 'flex',
  14727. flexDirection: 'column'
  14728. },
  14729. inputContainer: {
  14730. display: 'flex'
  14731. },
  14732. input: {
  14733. padding: theme.spacing(0.25, 1),
  14734. border: '1px solid rgba(255,255,255,.4)',
  14735. borderRadius: 2,
  14736. flex: 1,
  14737. '&:focus': {
  14738. outline: 0
  14739. }
  14740. },
  14741. addbtn: {
  14742. border: '1px solid rgba(255,255,255,.4)',
  14743. borderRadius: 2,
  14744. marginLeft: 8,
  14745. backgroundColor: 'transparent',
  14746. padding: theme.spacing(0.25, 1),
  14747. color: 'white'
  14748. },
  14749. table: {
  14750. fontSize: 12,
  14751. marginTop: theme.spacing(1),
  14752. flex: 1,
  14753. display: 'flex',
  14754. flexDirection: 'column',
  14755. overflow: 'hidden'
  14756. },
  14757. thead: {
  14758. marginBottom: theme.spacing(0.5)
  14759. },
  14760. row: {
  14761. display: 'flex',
  14762. padding: theme.spacing(0.25, 0)
  14763. },
  14764. op: {
  14765. flex: 1,
  14766. display: 'flex',
  14767. justifyContent: 'space-between',
  14768. '& > :last-child': {
  14769. marginLeft: theme.spacing(1)
  14770. },
  14771. '& > div': {
  14772. cursor: 'pointer'
  14773. }
  14774. },
  14775. delete: {
  14776. marginRight: 4
  14777. },
  14778. content: {
  14779. width: '100%',
  14780. maxWidth: 200,
  14781. paddingRight: theme.spacing(1),
  14782. overflow: 'hidden',
  14783. textOverflow: 'ellipsis',
  14784. whiteSpace: 'nowrap'
  14785. },
  14786. listContainer: {
  14787. flex: 1,
  14788. overflow: 'hidden'
  14789. },
  14790. list: {
  14791. height: '100%',
  14792. overflow: 'auto',
  14793. '&::-webkit-scrollbar': {
  14794. width: 0
  14795. }
  14796. },
  14797. sliderRoot: {
  14798. display: 'flex',
  14799. alignItems: 'center'
  14800. },
  14801. slider: {
  14802. margin: theme.spacing(0, 1, 0, 2),
  14803. flex: 1
  14804. },
  14805. listButton: {
  14806. '&:hover': {
  14807. backgroundColor: 'rgba(255,255,255,.1)'
  14808. }
  14809. }
  14810. }));
  14811.  
  14812. const FilterDanmaku = ({
  14813. switchPanel
  14814. }) => {
  14815. const classes = useFilterStyles();
  14816. const [state, setState] = React$3.useState('');
  14817.  
  14818. const handleAdd = () => {
  14819. config.addFilter(state);
  14820. setState('');
  14821. };
  14822.  
  14823. const handleFilterUse = () => {
  14824. config.toggleFilterUse(!config.filterUse);
  14825. };
  14826.  
  14827. return /*#__PURE__*/React__default['default'].createElement("div", {
  14828. id: "k-filter",
  14829. className: classes.root
  14830. }, /*#__PURE__*/React__default['default'].createElement(List$1, null, /*#__PURE__*/React__default['default'].createElement(ListItem$1, {
  14831. className: classes.listButton,
  14832. button: true,
  14833. onClick: () => switchPanel('base', true)
  14834. }, /*#__PURE__*/React__default['default'].createElement(default_1$1, {
  14835. color: "inherit"
  14836. }), /*#__PURE__*/React__default['default'].createElement(ListItemText$1, {
  14837. primary: "\u5F39\u5E55\u5C4F\u853D"
  14838. }), /*#__PURE__*/React__default['default'].createElement(ListItemSecondaryAction$1, null, /*#__PURE__*/React__default['default'].createElement(Switch$1, {
  14839. checked: config.filterUse,
  14840. onClick: handleFilterUse
  14841. }))), /*#__PURE__*/React__default['default'].createElement(Divider$1, {
  14842. style: {
  14843. backgroundColor: '#444'
  14844. }
  14845. })), /*#__PURE__*/React__default['default'].createElement(Fade, {
  14846. in: config.filterUse,
  14847. unmountOnExit: true
  14848. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14849. className: classes.filterRoot
  14850. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14851. className: classes.inputContainer
  14852. }, /*#__PURE__*/React__default['default'].createElement("input", {
  14853. placeholder: "\u5C4F\u853D\u5185\u5BB9...",
  14854. className: classes.input,
  14855. value: state,
  14856. onChange: e => setState(e.target.value),
  14857. onKeyPress: e => {
  14858. if (e.key === 'Enter') {
  14859. handleAdd();
  14860. }
  14861. }
  14862. }), /*#__PURE__*/React__default['default'].createElement("button", {
  14863. className: classes.addbtn,
  14864. onClick: handleAdd
  14865. }, "\u6DFB\u52A0")), /*#__PURE__*/React__default['default'].createElement("div", {
  14866. className: classes.table
  14867. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14868. className: `${classes.row} ${classes.thead}`
  14869. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14870. className: classes.content
  14871. }, "\u5185\u5BB9( ", config.filterList.length, " )"), /*#__PURE__*/React__default['default'].createElement("div", {
  14872. className: classes.op
  14873. }, /*#__PURE__*/React__default['default'].createElement("div", null, "\u72B6\u6001"), /*#__PURE__*/React__default['default'].createElement("div", null, "\u64CD\u4F5C"))), /*#__PURE__*/React__default['default'].createElement("div", {
  14874. className: classes.listContainer
  14875. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14876. className: classes.list
  14877. }, config.filterList.map(o => /*#__PURE__*/React__default['default'].createElement("div", {
  14878. className: classes.row,
  14879. key: o.id
  14880. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14881. className: classes.content
  14882. }, o.content), /*#__PURE__*/React__default['default'].createElement("div", {
  14883. className: classes.op
  14884. }, /*#__PURE__*/React__default['default'].createElement("div", {
  14885. onClick: () => config.changeFilterUse(o.id)
  14886. }, o.isuse ? '启用' : '禁用'), /*#__PURE__*/React__default['default'].createElement("div", {
  14887. className: classes.delete,
  14888. onClick: () => {
  14889. config.deleteFilter(o.id);
  14890. }
  14891. }, /*#__PURE__*/React__default['default'].createElement(default_1, {
  14892. style: {
  14893. fontSize: 16
  14894. }
  14895. })))))))))));
  14896. };
  14897.  
  14898. var FilterDanmaku$1 = mobxReact.observer(FilterDanmaku);
  14899.  
  14900. const muiTheme = createMuiTheme({
  14901. palette: {
  14902. secondary: {
  14903. main: '#f00'
  14904. }
  14905. },
  14906. overrides: {
  14907. MuiSwitch: {
  14908. thumb: {
  14909. backgroundColor: 'white'
  14910. },
  14911. track: {
  14912. opacity: '1 !important'
  14913. }
  14914. }
  14915. }
  14916. });
  14917. const useStyles = makeStyles(theme => createStyles({
  14918. root: {
  14919. position: 'relative'
  14920. },
  14921. controls: {
  14922. backgroundColor: 'rgba(28,28,28,0.9)',
  14923. position: 'absolute',
  14924. bottom: 40,
  14925. color: 'white',
  14926. left: '50%',
  14927. transform: 'translateX(-50%)',
  14928. zIndex: theme.zIndex.tooltip,
  14929. width: 300
  14930. },
  14931. tooltip: {
  14932. padding: theme.spacing(0.5, 1),
  14933. backgroundColor: 'rgba(28,28,28,0.9)',
  14934. fontSize: 13,
  14935. borderRadius: 2,
  14936. fontWeight: 400
  14937. },
  14938. container: {
  14939. width: 300,
  14940. '&>div': {
  14941. width: 300,
  14942. display: 'flex',
  14943. overflow: 'hidden',
  14944. transition: theme.transitions.create(['height']),
  14945. '&>*': {
  14946. flexShrink: 0,
  14947. width: 300
  14948. }
  14949. }
  14950. }
  14951. }));
  14952.  
  14953. const Danmaku = () => {
  14954. const [open, setOpen] = React$3.useState(false);
  14955. const classes = useStyles();
  14956. const containerRef = React$3.useRef();
  14957. const theme = useTheme();
  14958. React$3.useEffect(() => {
  14959. if (open) {
  14960. Array.from(containerRef.current.children).forEach((o, i) => o.hidden = i !== 0);
  14961. }
  14962. }, [open]);
  14963. const switchPanel = React$3.useCallback((key, isBack) => {
  14964. const target = document.getElementById(`k-${key}`);
  14965. const current = Array.from(containerRef.current.children).find(o => !o.hidden);
  14966. const currentSize = current.getBoundingClientRect();
  14967. containerRef.current.style.height = `${currentSize.height}px`;
  14968.  
  14969. const restore = e => {
  14970. if (e.target !== containerRef.current && !['height'].includes(e.propertyName)) return;
  14971. containerRef.current.style.height = '';
  14972. [current, target].forEach(o => {
  14973. o.style.transform = '';
  14974. o.style.transition = '';
  14975. });
  14976. current.hidden = true;
  14977. containerRef.current.removeEventListener('transitionend', restore);
  14978. };
  14979.  
  14980. containerRef.current.addEventListener('transitionend', restore);
  14981. const size = getPanelSize(target);
  14982. containerRef.current.style.height = `${size.height}px`;
  14983. target.hidden = false;
  14984. Array.from(containerRef.current.children).forEach(o => {
  14985. o.style.transform = `translateX(${isBack ? '-300' : '0'}px)`;
  14986. requestAnimationFrame(() => {
  14987. o.style.transform = `translateX(${isBack ? '0' : '-300'}px)`;
  14988. o.style.transition = theme.transitions.create(['transform']);
  14989. });
  14990. });
  14991. }, []);
  14992. return /*#__PURE__*/React__default['default'].createElement(ThemeProvider, {
  14993. theme: muiTheme
  14994. }, /*#__PURE__*/React__default['default'].createElement("style", {
  14995. jsx: true
  14996. }, `
  14997. [hidden] {
  14998. display: none !important;
  14999. }
  15000. `), /*#__PURE__*/React__default['default'].createElement("span", {
  15001. className: classes.root
  15002. }, /*#__PURE__*/React__default['default'].createElement(Tooltip$1, {
  15003. title: "\u5F39\u5E55",
  15004. placement: "top",
  15005. classes: {
  15006. tooltip: classes.tooltip
  15007. }
  15008. }, /*#__PURE__*/React__default['default'].createElement("button", {
  15009. style: {
  15010. textAlign: 'center'
  15011. },
  15012. onClick: () => setOpen(true),
  15013. className: "ytp-button"
  15014. }, "\u5F39\u5E55")), /*#__PURE__*/React__default['default'].createElement(Fade, {
  15015. in: open,
  15016. unmountOnExit: true
  15017. }, /*#__PURE__*/React__default['default'].createElement(Box, {
  15018. className: classes.controls
  15019. }, /*#__PURE__*/React__default['default'].createElement(ClickAwayListener, {
  15020. onClickAway: () => setOpen(false)
  15021. }, /*#__PURE__*/React__default['default'].createElement("div", {
  15022. className: classes.container
  15023. }, /*#__PURE__*/React__default['default'].createElement("div", {
  15024. ref: containerRef
  15025. }, /*#__PURE__*/React__default['default'].createElement(BaseConfig$1, {
  15026. switchPanel: switchPanel
  15027. }), /*#__PURE__*/React__default['default'].createElement(FilterDanmaku$1, {
  15028. switchPanel: switchPanel
  15029. }))))))));
  15030. };
  15031.  
  15032. var Danmaku$1 = mobxReact.observer(Danmaku);
  15033.  
  15034. window.addEventListener('load', () => {
  15035. console.log('[ytb-danmaku] init');
  15036. init(() => {
  15037. ReactDOM__default['default'].render( /*#__PURE__*/React__default['default'].createElement(Danmaku$1, null), document.getElementById('ytb-danmaku-config'));
  15038. });
  15039. });
  15040.  
  15041. }(React, ReactDOM, mobxReact, mobx, Danmaku));